@addev-be/ui 0.16.10 → 0.17.1

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

@@ -26,23 +26,13 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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)) {
@@ -55,11 +45,12 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilterValuesScroller = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable @typescript-eslint/no-explicit-any */
 var styles = __importStar(require("./styles"));
 var helpers_1 = require("../helpers");
 var react_1 = require("react");
 var lodash_1 = require("lodash");
-var useElementSize_1 = require("../../../../hooks/useElementSize");
+var hooks_1 = require("../../../../hooks");
 var CheckboxTemplate = function (_a) {
     var selectedValues = _a.selectedValues, value = _a.value, index = _a.index, style = _a.style, onToggle = _a.onToggle;
     var checked = (0, react_1.useMemo)(function () { return value.values.every(function (v) { return selectedValues.includes(v); }); }, [selectedValues, value.values]);
@@ -68,7 +59,7 @@ var CheckboxTemplate = function (_a) {
 var FilterValuesScroller = function (_a) {
     var values = _a.values, _b = _a.rowHeight, rowHeight = _b === void 0 ? styles.DEFAULT_FILTER_ROW_HEIGHT : _b, onRangeChange = _a.onRangeChange, onToggle = _a.onToggle, _c = _a.formatter, formatter = _c === void 0 ? helpers_1.defaultRendererAndFormatter : _c, _d = _a.renderer, renderer = _d === void 0 ? helpers_1.defaultRendererAndFormatter : _d, _e = _a.selectedValues, selectedValues = _e === void 0 ? [] : _e, groups = _a.groups;
     var scrollableRef = (0, react_1.useRef)(null);
-    var height = (0, useElementSize_1.useElementSize)(scrollableRef.current).height;
+    var height = (0, hooks_1.useElementSize)(scrollableRef.current).height;
     var tolerance = 20;
     var _f = (0, react_1.useState)(0), scrollTop = _f[0], setScrollTop = _f[1];
     var index = Math.floor(scrollTop / rowHeight);

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

@@ -15,7 +15,7 @@ exports.useFilterModal = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var Icons_1 = require("../../../../Icons");
 var react_1 = require("react");
-var Button_1 = require("../../../forms/Button");
+var forms_1 = require("../../../forms");
 var FilterModalContent_1 = require("../FilterModalContent");
 var Modal_1 = require("../../../layout/Modal");
 var hooks_1 = require("../hooks");
@@ -45,7 +45,7 @@ var useFilterModal = function (_a) {
     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)(Button_1.Button, { "$color": "danger", icon: Icons_1.FilterSlashIcon, onClick: onClearClicked, children: "Supprimer" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { style: { marginLeft: 'auto' }, "$color": "primary", icon: Icons_1.FilterIcon, onClick: onApplyClicked, children: "Filtrer" }), (0, jsx_runtime_1.jsx)(Button_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.js

@@ -26,23 +26,13 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -67,6 +57,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGridFilterMenu = void 0;
 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 Icons_1 = require("../../../../Icons");
 var helpers_1 = require("../helpers");
@@ -74,9 +65,8 @@ var lodash_1 = require("lodash");
 var react_1 = require("react");
 var ContextMenu_1 = require("../../../ui/ContextMenu");
 var FilterValuesScroller_1 = require("./FilterValuesScroller");
-var styles_1 = require("../../../forms/styles");
-var styles_2 = require("../../../ui/ContextMenu/styles");
-var helpers_2 = require("./helpers");
+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],
@@ -130,9 +120,14 @@ var DataGridFilterMenu = function (_a) {
             });
             var availableRows = (0, helpers_1.applyFilters)(rows, otherFilters);
             var values_1 = availableRows.map(function (row) { return column.filter.getter(row); });
-            setAvailableValues(function () { return (0, helpers_2.sortAvailableValues)(values_1, column); });
+            setAvailableValues(function () {
+                var _a;
+                return (0, lodash_1.uniq)(values_1).sort(((_a = column.filter) === null || _a === void 0 ? void 0 : _a.type) === 'number'
+                    ? function (a, b) { return a - b; }
+                    : function (a, b) { return a.localeCompare(b); });
+            });
         }
-    }, [column, filterValuesLoader, filters, rows]);
+    }, [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]);
     var clearFilter = (0, react_1.useCallback)(function () {
         var newFilters = __assign({}, filters);
@@ -221,9 +216,9 @@ var DataGridFilterMenu = function (_a) {
                                                 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)(styles_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 })] }));
+                                            }), (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_2.MenuContainer, { children: content });
+        return (0, jsx_runtime_1.jsx)(styles_1.MenuContainer, { children: content });
     }
     return (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: content });
 };

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

@@ -1,8 +1,18 @@
 export declare const DEFAULT_FILTER_ROW_HEIGHT = 24;
-export declare const InputContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
-export declare const CheckboxesContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
-export declare const Separator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
-export declare const FilterValueContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
-export declare const FilterValuesScrollerContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, {
+export declare const InputContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, never>, never>> & string;
+export declare const CheckboxesContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, never>, never>> & string;
+export declare const Separator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, never>, never>> & string;
+export declare const FilterValueContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, never>, never>> & string;
+export declare const FilterValuesScrollerContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, never>, {
     $rowHeight?: number;
 }>> & string;

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

@@ -12,19 +12,19 @@ var styled_components_1 = __importDefault(require("styled-components"));
 exports.DEFAULT_FILTER_ROW_HEIGHT = 24;
 exports.InputContainer = styled_components_1.default.div.attrs({
     className: 'InputContainer',
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  border-radius: var(--rounded-md);\n  padding: 0 var(--space-1);\n\n  svg {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: var(--space-4);\n    display: flex;\n    align-items: center;\n    fill: var(--color-base-400);\n    width: var(--space-4);\n    height: var(--space-4);\n  }\n\n  input {\n    padding-left: var(--space-8);\n  }\n"], ["\n  position: relative;\n  border-radius: var(--rounded-md);\n  padding: 0 var(--space-1);\n\n  svg {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: var(--space-4);\n    display: flex;\n    align-items: center;\n    fill: var(--color-base-400);\n    width: var(--space-4);\n    height: var(--space-4);\n  }\n\n  input {\n    padding-left: var(--space-8);\n  }\n"])));
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  border-radius: var(--rounded-md);\n  padding: 0 var(--space-1);\n\n  svg {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: var(--space-4);\n    display: flex;\n    align-items: center;\n    fill: var(--color-neutral-400);\n    width: var(--space-4);\n    height: var(--space-4);\n  }\n\n  input {\n    padding-left: var(--space-8);\n  }\n"], ["\n  position: relative;\n  border-radius: var(--rounded-md);\n  padding: 0 var(--space-1);\n\n  svg {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: var(--space-4);\n    display: flex;\n    align-items: center;\n    fill: var(--color-neutral-400);\n    width: var(--space-4);\n    height: var(--space-4);\n  }\n\n  input {\n    padding-left: var(--space-8);\n  }\n"])));
 exports.CheckboxesContainer = styled_components_1.default.div.attrs({
     className: 'CheckboxesContainer',
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-weight: normal;\n  user-select: none;\n  padding: var(--space-2);\n  margin: var(--space-1);\n  margin-bottom: 0;\n  border: 1px solid var(--color-base-300);\n  border-radius: var(--rounded-md);\n  box-shadow: var(--shadow-inner);\n  background-color: var(--color-base-0);\n  height: 20em;\n  overflow-y: hidden;\n  white-space: nowrap;\n"], ["\n  font-weight: normal;\n  user-select: none;\n  padding: var(--space-2);\n  margin: var(--space-1);\n  margin-bottom: 0;\n  border: 1px solid var(--color-base-300);\n  border-radius: var(--rounded-md);\n  box-shadow: var(--shadow-inner);\n  background-color: var(--color-base-0);\n  height: 20em;\n  overflow-y: hidden;\n  white-space: nowrap;\n"])));
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-weight: normal;\n  user-select: none;\n  padding: var(--space-2);\n  margin: var(--space-1);\n  margin-bottom: 0;\n  border: 1px solid var(--color-neutral-300);\n  border-radius: var(--rounded-md);\n  box-shadow: var(--shadow-inner);\n  background-color: var(--color-neutral-0);\n  height: 20em;\n  overflow-y: hidden;\n  white-space: nowrap;\n"], ["\n  font-weight: normal;\n  user-select: none;\n  padding: var(--space-2);\n  margin: var(--space-1);\n  margin-bottom: 0;\n  border: 1px solid var(--color-neutral-300);\n  border-radius: var(--rounded-md);\n  box-shadow: var(--shadow-inner);\n  background-color: var(--color-neutral-0);\n  height: 20em;\n  overflow-y: hidden;\n  white-space: nowrap;\n"])));
 exports.Separator = styled_components_1.default.div.attrs({
     className: 'Separator',
-})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-top: 1px solid var(--color-base-200);\n  margin: var(--space-1) 0;\n"], ["\n  border-top: 1px solid var(--color-base-200);\n  margin: var(--space-1) 0;\n"])));
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-top: 1px solid var(--color-neutral-200);\n  margin: var(--space-1) 0;\n"], ["\n  border-top: 1px solid var(--color-neutral-200);\n  margin: var(--space-1) 0;\n"])));
 exports.FilterValueContainer = styled_components_1.default.div.attrs({
     className: 'FilterValueContainer',
-})(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-base-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-base-50);\n  }\n"])));
+})(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-base-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-base-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      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) {
     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

@@ -15,26 +15,18 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGridFooter = void 0;
 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");
@@ -44,7 +36,7 @@ var DataGridFooter = function (_a) {
     if (!Object.keys(footers).length) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(styles.DataGridFooterRow, { "$gridTemplateColumns": gridTemplateColumns, "$headerColor": headerColor, children: [!!selectable && (0, jsx_runtime_1.jsx)(styles.HeaderSelectionCell, {}), visibleColumns.map(function (col) {
+    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));
             })] }));

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

@@ -15,23 +15,13 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -71,15 +61,22 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGridHeader = void 0;
 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 Icons_1 = require("../../../Icons");
 var react_1 = require("react");
+var forms_1 = require("../../forms");
 var DataGridHeaderCell_1 = require("./DataGridHeaderCell");
 var IndeterminateCheckbox_1 = require("../../forms/IndeterminateCheckbox");
-var hooks_1 = require("./hooks");
+var layout_1 = require("../../layout");
+var hooks_1 = require("./DataGridColumnsModal/hooks");
+var hooks_2 = require("./hooks");
 var DataGridHeader = function (_a) {
     var context = _a.context;
-    var _b = (0, hooks_1.useDataGridContext)(context), visibleColumns = _b.visibleColumns, selectable = _b.selectable, rows = _b.rows, selectedKeys = _b.selectedKeys, setSelectedKeys = _b.setSelectedKeys, headerColor = _b.headerColor, rowKeyGetter = _b.rowKeyGetter, gridTemplateColumns = _b.gridTemplateColumns, getAllIds = _b.getAllIds;
+    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 _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
         ? false
         : selectedKeys.length === rows.length
@@ -108,6 +105,49 @@ var DataGridHeader = function (_a) {
     var onFilterButtonClicked = (0, react_1.useCallback)(function (columnKey) {
         setVisibleFilter(function (prev) { return (prev === columnKey ? undefined : columnKey); });
     }, []);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (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 _e = (0, react_1.useState)(false), isLoadingVisible = _e[0], setIsLoadingVisible = _e[1];
+    var runCopyTable = (0, react_1.useCallback)(function () {
+        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)); })] })] }));
 };
 exports.DataGridHeader = DataGridHeader;

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

@@ -15,39 +15,30 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGridHeaderCell = void 0;
 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 react_1 = require("react");
 var Icons_1 = require("../../../Icons");
 var DataGridFilterMenu_1 = require("./DataGridFilterMenu");
-var Dropdown_1 = require("../../layout/Dropdown");
+var layout_1 = require("../../layout");
 var IconButton_1 = require("../../forms/IconButton");
 var hooks_1 = require("./hooks");
-var hooks_2 = require("../../../providers/hooks");
+var providers_1 = require("../../../providers");
 var DataGridHeaderCell = function (_a) {
     var _b, _c;
     var columnKey = _a.columnKey, column = _a.column, context = _a.context;
-    var getElementScreenRect = (0, hooks_2.useUi)().getElementScreenRect;
+    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 filterButtonRef = (0, react_1.useRef)(null);
@@ -63,7 +54,7 @@ var DataGridHeaderCell = function (_a) {
         var filterButtonRect = getElementScreenRect(filterButtonRef.current);
         filterButtonRect.x += window.scrollX;
         filterButtonRect.y += window.scrollY;
-        return ((0, jsx_runtime_1.jsx)(Dropdown_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": [350, 500], "$autoPositionX": true, children: (0, jsx_runtime_1.jsx)(DataGridFilterMenu_1.DataGridFilterMenu, { column: column, context: context, onClose: function () { return setIsFilterDropdownVisible(false); } }) }));
     }, [
         column,
         columnKey,
@@ -76,6 +67,6 @@ var DataGridHeaderCell = function (_a) {
     }, []);
     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, "$hasFilterOpened": isFilterDropdownVisible || hasFilters, 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, bordered: true })), 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": (_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); } }) }))] }));
 };
 exports.DataGridHeaderCell = DataGridHeaderCell;

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

@@ -26,23 +26,13 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -73,10 +63,8 @@ var DataGridRowTemplate = function (_a) {
         className: '',
         style: undefined,
     }, className = _e.className, style = _e.style;
-    var isAdded = addedRows.some(function (row) { return rowKeyGetter(row) === rowKey; });
-    var isUpdated = updatedRows.some(function (row) { return rowKeyGetter(row) === rowKey; });
-    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 (
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            (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));
+    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));
 };
 exports.DataGridRowTemplate = DataGridRowTemplate;

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

@@ -26,23 +26,13 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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)) {
@@ -56,10 +46,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilterModalContent = void 0;
 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 forms_1 = require("../../../forms");
 var react_1 = require("react");
-var styles_1 = require("../../../forms/styles");
-var Select_1 = require("../../../forms/Select");
 // import { Select } from '../../Select';
 // import clx from 'classnames';
 var filterOperators = {
@@ -98,9 +88,9 @@ var FilterModalContent = function (_a) {
     if (!filter)
         return null;
     var operator = filter.operator, type = filter.type, values = filter.values;
-    return ((0, jsx_runtime_1.jsxs)(styles.FilterModalContentContainer, { children: [(0, jsx_runtime_1.jsxs)("label", { htmlFor: "filterOperator", children: [(0, jsx_runtime_1.jsx)("span", { children: "Op\u00E9rateur :" }), (0, jsx_runtime_1.jsx)(Select_1.Select, { name: "filterOperator", items: Object.entries(filterOperators[filter.type]), itemKey: function (item) { return item[0]; }, itemLabel: function (item) { return item[1]; }, value: String(operator), className: "text-sm", onChange: function (e) {
+    return ((0, jsx_runtime_1.jsxs)(styles.FilterModalContentContainer, { children: [(0, jsx_runtime_1.jsxs)("label", { htmlFor: "filterOperator", children: [(0, jsx_runtime_1.jsx)("span", { children: "Op\u00E9rateur :" }), (0, jsx_runtime_1.jsx)(forms_1.Select, { name: "filterOperator", items: Object.entries(filterOperators[filter.type]), itemKey: function (item) { return item[0]; }, itemLabel: function (item) { return item[1]; }, value: String(operator), className: "text-sm", onChange: function (e) {
                             return onFilterChanged(__assign(__assign({}, filter), { operator: e.target.value }));
-                        } })] }), (0, jsx_runtime_1.jsxs)("label", { htmlFor: "filterValue1", children: [(0, jsx_runtime_1.jsxs)("span", { children: [operator === 'inRange' ? 'Entre' : 'Valeur', " :"] }), (0, jsx_runtime_1.jsx)(styles_1.Input, { ref: value1Ref, name: "filterValue1", type: filter.type, value: (_b = values[0]) !== null && _b !== void 0 ? _b : '', onChange: function (e) {
+                        } })] }), (0, jsx_runtime_1.jsxs)("label", { htmlFor: "filterValue1", children: [(0, jsx_runtime_1.jsxs)("span", { children: [operator === 'inRange' ? 'Entre' : 'Valeur', " :"] }), (0, jsx_runtime_1.jsx)(forms_1.Input, { ref: value1Ref, name: "filterValue1", type: filter.type, value: (_b = values[0]) !== null && _b !== void 0 ? _b : '', onChange: function (e) {
                             if (type === 'number') {
                                 var newValues = __spreadArray([], values, true);
                                 newValues[0] = Number(e.target.value);
@@ -111,7 +101,7 @@ var FilterModalContent = function (_a) {
                                 newValues[0] = String(e.target.value);
                                 onFilterChanged(__assign(__assign({}, filter), { values: newValues }));
                             }
-                        } })] }), operator === 'inRange' && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: "filterValue2", children: [(0, jsx_runtime_1.jsx)("span", { children: "et" }), (0, jsx_runtime_1.jsx)(styles_1.Input, { name: "filterValue2", type: filter.type, value: (_c = values[1]) !== null && _c !== void 0 ? _c : '', onChange: function (e) {
+                        } })] }), operator === 'inRange' && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: "filterValue2", children: [(0, jsx_runtime_1.jsx)("span", { children: "et" }), (0, jsx_runtime_1.jsx)(forms_1.Input, { name: "filterValue2", type: filter.type, value: (_c = values[1]) !== null && _c !== void 0 ? _c : '', onChange: function (e) {
                             if (type === 'number') {
                                 var newValues = __spreadArray([], values, true);
                                 newValues[1] = Number(e.target.value);

package/dist/components/data/DataGrid/FilterModalContent/styles.d.ts

@@ -1 +1,3 @@
-export declare const FilterModalContentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+export declare const FilterModalContentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, never>, never>> & string;