@addev-be/ui 0.15.1 → 0.16.0

package/dist/Icons.d.ts

@@ -1,4 +1,6 @@
 import { FC, SVGProps } from 'react';
+import AngleLeftIcon from '../assets/icons/angle-left.svg?react';
+import AngleRightIcon from '../assets/icons/angle-right.svg?react';
 import ArrowDown19Icon from '../assets/icons/arrow-down-1-9.svg?react';
 import ArrowDownAZIcon from '../assets/icons/arrow-down-a-z.svg?react';
 import ArrowDownBigSmallIcon from '../assets/icons/arrow-down-big-small.svg?react';
@@ -9,6 +11,8 @@ import ArrowsRotateIcon from '../assets/icons/arrows-rotate.svg?react';
 import ArrowsUpDownIcon from '../assets/icons/arrows-up-down.svg?react';
 import CheckIcon from '../assets/icons/check.svg?react';
 import ChevronDownIcon from '../assets/icons/chevron-down.svg?react';
+import ChevronLeftIcon from '../assets/icons/chevron-left.svg?react';
+import ChevronRightIcon from '../assets/icons/chevron-right.svg?react';
 import CircleCheckIcon from '../assets/icons/circle-check.svg?react';
 import CircleInfoIcon from '../assets/icons/circle-info.svg?react';
 import CircleXMarkIcon from '../assets/icons/circle-xmark.svg?react';
@@ -18,6 +22,7 @@ import EllipsisIcon from '../assets/icons/ellipsis.svg?react';
 import FilterFullIcon from '../assets/icons/filter-full.svg?react';
 import FilterIcon from '../assets/icons/filter.svg?react';
 import FilterSlashIcon from '../assets/icons/filter-slash.svg?react';
+import FloppyDiskIcon from '../assets/icons/floppy-disk.svg?react';
 import HashtagIcon from '../assets/icons/hashtag.svg?react';
 import ImageSlashIcon from '../assets/icons/image-slash.svg?react';
 import LeftIcon from '../assets/icons/left.svg?react';
@@ -38,6 +43,8 @@ import TriangleExclamationIcon from '../assets/icons/triangle-exclamation.svg?re
 import UpIcon from '../assets/icons/up.svg?react';
 import UserTieIcon from '../assets/icons/user-tie.svg?react';
 import XBarIcon from '../assets/icons/x-bar.svg?react';
+import XMarkIcon from '../assets/icons/xmark.svg?react';
+import XMarkLargeIcon from '../assets/icons/xmark-large.svg?react';
 type IconFCProps = SVGProps<SVGSVGElement>;
 export type IconFC = FC<IconFCProps>;
 type AnimatedIconProps = {
@@ -46,4 +53,5 @@ type AnimatedIconProps = {
 };
 export declare const AnimatedIcon: FC<AnimatedIconProps & IconFCProps>;
 export declare const LoadingIcon: FC<IconFCProps>;
-export { ArrowDown19Icon, ArrowDownAZIcon, ArrowDownBigSmallIcon, ArrowsRotateIcon, ArrowsUpDownIcon, ArrowUp91Icon, ArrowUpBigSmallIcon, ArrowUpZAIcon, CheckIcon, ChevronDownIcon, CircleXMarkIcon, CopyIcon, DownIcon, EllipsisIcon, FilterFullIcon, FilterIcon, FilterSlashIcon, HashtagIcon, ImageSlashIcon, LeftIcon, MagnifierIcon, PhoneIcon, PlusIcon, RightIcon, SigmaIcon, SortCalendarAscendingIcon, SortCalendarDescendingIcon, SpinnerIcon, TableColumnsIcon, TableFooterIcon, TableFooterSlashIcon, TableIcon, TallyIcon, UpIcon, UserTieIcon, XBarIcon, CircleCheckIcon, CircleInfoIcon, TriangleExclamationIcon, };
+export declare const BlankIcon: FC<IconFCProps>;
+export { AngleLeftIcon, AngleRightIcon, ArrowDown19Icon, ArrowDownAZIcon, ArrowDownBigSmallIcon, ArrowsRotateIcon, ArrowsUpDownIcon, ArrowUp91Icon, ArrowUpBigSmallIcon, ArrowUpZAIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CircleCheckIcon, CircleInfoIcon, CircleXMarkIcon, CopyIcon, DownIcon, EllipsisIcon, FilterFullIcon, FilterIcon, FilterSlashIcon, HashtagIcon, ImageSlashIcon, LeftIcon, MagnifierIcon, PhoneIcon, PlusIcon, RightIcon, SigmaIcon, SortCalendarAscendingIcon, SortCalendarDescendingIcon, SpinnerIcon, TableColumnsIcon, TableFooterIcon, TableFooterSlashIcon, TableIcon, TallyIcon, TriangleExclamationIcon, UpIcon, UserTieIcon, XBarIcon, XMarkIcon, XMarkLargeIcon, FloppyDiskIcon, };

package/dist/Icons.js

@@ -25,9 +25,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TriangleExclamationIcon = exports.CircleInfoIcon = exports.CircleCheckIcon = exports.XBarIcon = exports.UserTieIcon = exports.UpIcon = exports.TallyIcon = exports.TableIcon = exports.TableFooterSlashIcon = exports.TableFooterIcon = exports.TableColumnsIcon = exports.SpinnerIcon = exports.SortCalendarDescendingIcon = exports.SortCalendarAscendingIcon = exports.SigmaIcon = exports.RightIcon = exports.PlusIcon = exports.PhoneIcon = exports.MagnifierIcon = exports.LeftIcon = exports.ImageSlashIcon = exports.HashtagIcon = exports.FilterSlashIcon = exports.FilterIcon = exports.FilterFullIcon = exports.EllipsisIcon = exports.DownIcon = exports.CopyIcon = exports.CircleXMarkIcon = exports.ChevronDownIcon = exports.CheckIcon = exports.ArrowUpZAIcon = exports.ArrowUpBigSmallIcon = exports.ArrowUp91Icon = exports.ArrowsUpDownIcon = exports.ArrowsRotateIcon = exports.ArrowDownBigSmallIcon = exports.ArrowDownAZIcon = exports.ArrowDown19Icon = exports.LoadingIcon = exports.AnimatedIcon = void 0;
+exports.FloppyDiskIcon = exports.XMarkLargeIcon = exports.XMarkIcon = exports.XBarIcon = exports.UserTieIcon = exports.UpIcon = exports.TriangleExclamationIcon = exports.TallyIcon = exports.TableIcon = exports.TableFooterSlashIcon = exports.TableFooterIcon = exports.TableColumnsIcon = exports.SpinnerIcon = exports.SortCalendarDescendingIcon = exports.SortCalendarAscendingIcon = exports.SigmaIcon = exports.RightIcon = exports.PlusIcon = exports.PhoneIcon = exports.MagnifierIcon = exports.LeftIcon = exports.ImageSlashIcon = exports.HashtagIcon = exports.FilterSlashIcon = exports.FilterIcon = exports.FilterFullIcon = exports.EllipsisIcon = exports.DownIcon = exports.CopyIcon = exports.CircleXMarkIcon = exports.CircleInfoIcon = exports.CircleCheckIcon = exports.ChevronRightIcon = exports.ChevronLeftIcon = exports.ChevronDownIcon = exports.CheckIcon = exports.ArrowUpZAIcon = exports.ArrowUpBigSmallIcon = exports.ArrowUp91Icon = exports.ArrowsUpDownIcon = exports.ArrowsRotateIcon = exports.ArrowDownBigSmallIcon = exports.ArrowDownAZIcon = exports.ArrowDown19Icon = exports.AngleRightIcon = exports.AngleLeftIcon = exports.BlankIcon = exports.LoadingIcon = exports.AnimatedIcon = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
+var angle_left_svg_react_1 = __importDefault(require("../assets/icons/angle-left.svg?react"));
+exports.AngleLeftIcon = angle_left_svg_react_1.default;
+var angle_right_svg_react_1 = __importDefault(require("../assets/icons/angle-right.svg?react"));
+exports.AngleRightIcon = angle_right_svg_react_1.default;
 var arrow_down_1_9_svg_react_1 = __importDefault(require("../assets/icons/arrow-down-1-9.svg?react"));
 exports.ArrowDown19Icon = arrow_down_1_9_svg_react_1.default;
 var arrow_down_a_z_svg_react_1 = __importDefault(require("../assets/icons/arrow-down-a-z.svg?react"));
@@ -48,6 +52,10 @@ var check_svg_react_1 = __importDefault(require("../assets/icons/check.svg?react
 exports.CheckIcon = check_svg_react_1.default;
 var chevron_down_svg_react_1 = __importDefault(require("../assets/icons/chevron-down.svg?react"));
 exports.ChevronDownIcon = chevron_down_svg_react_1.default;
+var chevron_left_svg_react_1 = __importDefault(require("../assets/icons/chevron-left.svg?react"));
+exports.ChevronLeftIcon = chevron_left_svg_react_1.default;
+var chevron_right_svg_react_1 = __importDefault(require("../assets/icons/chevron-right.svg?react"));
+exports.ChevronRightIcon = chevron_right_svg_react_1.default;
 var circle_check_svg_react_1 = __importDefault(require("../assets/icons/circle-check.svg?react"));
 exports.CircleCheckIcon = circle_check_svg_react_1.default;
 var circle_info_svg_react_1 = __importDefault(require("../assets/icons/circle-info.svg?react"));
@@ -66,6 +74,8 @@ var filter_svg_react_1 = __importDefault(require("../assets/icons/filter.svg?rea
 exports.FilterIcon = filter_svg_react_1.default;
 var filter_slash_svg_react_1 = __importDefault(require("../assets/icons/filter-slash.svg?react"));
 exports.FilterSlashIcon = filter_slash_svg_react_1.default;
+var floppy_disk_svg_react_1 = __importDefault(require("../assets/icons/floppy-disk.svg?react"));
+exports.FloppyDiskIcon = floppy_disk_svg_react_1.default;
 var hashtag_svg_react_1 = __importDefault(require("../assets/icons/hashtag.svg?react"));
 exports.HashtagIcon = hashtag_svg_react_1.default;
 var image_slash_svg_react_1 = __importDefault(require("../assets/icons/image-slash.svg?react"));
@@ -106,6 +116,10 @@ var user_tie_svg_react_1 = __importDefault(require("../assets/icons/user-tie.svg
 exports.UserTieIcon = user_tie_svg_react_1.default;
 var x_bar_svg_react_1 = __importDefault(require("../assets/icons/x-bar.svg?react"));
 exports.XBarIcon = x_bar_svg_react_1.default;
+var xmark_svg_react_1 = __importDefault(require("../assets/icons/xmark.svg?react"));
+exports.XMarkIcon = xmark_svg_react_1.default;
+var xmark_large_svg_react_1 = __importDefault(require("../assets/icons/xmark-large.svg?react"));
+exports.XMarkLargeIcon = xmark_large_svg_react_1.default;
 var AnimatedIcon = function (_a) {
     var icons = _a.icons, _b = _a.speed, speed = _b === void 0 ? 150 : _b, props = __rest(_a, ["icons", "speed"]);
     var _c = (0, react_1.useState)(0), currentIcon = _c[0], setCurrentIcon = _c[1];
@@ -126,3 +140,5 @@ var LoadingIcon = function (_a) {
     return ((0, jsx_runtime_1.jsx)(spinner_third_svg_react_1.default, __assign({ className: "animate-spin ".concat(className) }, props)));
 };
 exports.LoadingIcon = LoadingIcon;
+var BlankIcon = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" }, props))); };
+exports.BlankIcon = BlankIcon;

package/dist/components/auth/LoginForm.js

@@ -23,6 +23,7 @@ var LoginForm = function () {
         login(username, password).then(function (success) {
             setIsLoading(false);
             if (success) {
+                localStorage.setItem('username', username);
                 (0, react_router_dom_1.redirect)('/');
             }
             else {
@@ -42,6 +43,6 @@ var LoginForm = function () {
     }, []);
     if (isLoading)
         return (0, jsx_runtime_1.jsx)("div", { children: "Chargement..." });
-    return ((0, jsx_runtime_1.jsx)(ui_1.Card, { children: (0, jsx_runtime_1.jsxs)(styles_1.FormContainer, { children: [(0, jsx_runtime_1.jsx)(VerticalLabel_1.StackedLabel, { label: "Adresse e-mail / Nom d'utilisateur", children: (0, jsx_runtime_1.jsx)(forms_1.Input, { ref: usernameInputRef, type: "email", autoComplete: "email", required: true, value: username, onChange: function (e) { return setUsername(e.target.value); } }) }), (0, jsx_runtime_1.jsx)(VerticalLabel_1.StackedLabel, { label: "Mot de passe", children: (0, jsx_runtime_1.jsx)(forms_1.Input, { ref: passwordInputRef, type: "password", autoComplete: "current-password", required: true, value: password, onChange: function (e) { return setPassword(e.target.value); } }) }), error && (0, jsx_runtime_1.jsx)(ui_1.Message, { type: "error", children: error }), (0, jsx_runtime_1.jsx)(forms_1.Button, { color: "primary", onClick: onLoginClicked, children: "Se connecter" }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Link, { to: "/recover", children: "Mot de passe oubli\u00E9 ?" })] }) }));
+    return ((0, jsx_runtime_1.jsx)(ui_1.Card, { children: (0, jsx_runtime_1.jsxs)(styles_1.FormContainer, { children: [(0, jsx_runtime_1.jsx)(VerticalLabel_1.StackedLabel, { label: "Adresse e-mail / Nom d'utilisateur", children: (0, jsx_runtime_1.jsx)(forms_1.Input, { ref: usernameInputRef, type: "email", autoComplete: "email", required: true, value: username, onChange: function (e) { return setUsername(e.target.value); } }) }), (0, jsx_runtime_1.jsx)(VerticalLabel_1.StackedLabel, { label: "Mot de passe", children: (0, jsx_runtime_1.jsx)(forms_1.Input, { ref: passwordInputRef, type: "password", autoComplete: "current-password", required: true, value: password, onChange: function (e) { return setPassword(e.target.value); } }) }), error && (0, jsx_runtime_1.jsx)(ui_1.Message, { type: "error", children: error }), (0, jsx_runtime_1.jsx)(forms_1.Button, { "$color": "primary", onClick: onLoginClicked, children: "Se connecter" }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Link, { to: "/recover", children: "Mot de passe oubli\u00E9 ?" })] }) }));
 };
 exports.LoginForm = LoginForm;

package/dist/components/auth/PasswordRecoveryForm.js

@@ -19,6 +19,6 @@ var PasswordRecoveryForm = function () {
             setIsSubmitted(true);
         });
     }, [email, sendRecoveryKey]);
-    return ((0, jsx_runtime_1.jsx)(ui_1.Card, { children: (0, jsx_runtime_1.jsx)(styles_1.FormContainer, { children: isSubmitted ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Message_1.Message, { type: "success", children: "Un e-mail de r\u00E9initialisation de mot de passe vous a \u00E9t\u00E9 envoy\u00E9." }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Link, { to: "/", children: "Retour" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(VerticalLabel_1.StackedLabel, { label: "Adresse e-mail", children: (0, jsx_runtime_1.jsx)(forms_1.Input, { type: "email", autoComplete: "email", required: true, value: email, onChange: function (e) { return setEmail(e.target.value); } }) }), (0, jsx_runtime_1.jsx)(forms_1.Button, { color: "primary", onClick: onSubmitClicked, children: "Envoyer un lien de r\u00E9cup\u00E9ration" })] })) }) }));
+    return ((0, jsx_runtime_1.jsx)(ui_1.Card, { children: (0, jsx_runtime_1.jsx)(styles_1.FormContainer, { children: isSubmitted ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Message_1.Message, { type: "success", children: "Un e-mail de r\u00E9initialisation de mot de passe vous a \u00E9t\u00E9 envoy\u00E9." }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Link, { to: "/", children: "Retour" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(VerticalLabel_1.StackedLabel, { label: "Adresse e-mail", children: (0, jsx_runtime_1.jsx)(forms_1.Input, { type: "email", autoComplete: "email", required: true, value: email, onChange: function (e) { return setEmail(e.target.value); } }) }), (0, jsx_runtime_1.jsx)(forms_1.Button, { "$color": "primary", onClick: onSubmitClicked, children: "Envoyer un lien de r\u00E9cup\u00E9ration" })] })) }) }));
 };
 exports.PasswordRecoveryForm = PasswordRecoveryForm;

package/dist/components/auth/PasswordResetForm.js

@@ -51,6 +51,6 @@ var PasswordResetForm = function () {
                 return null;
         }
     }, [keyStatus, status]);
-    return ((0, jsx_runtime_1.jsx)(ui_1.Card, { children: (0, jsx_runtime_1.jsxs)(styles_1.FormContainer, { children: [content !== null && content !== void 0 ? content : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(VerticalLabel_1.StackedLabel, { label: "Nouveau mot de passe", children: (0, jsx_runtime_1.jsx)(ui_1.Input, { type: "password", autoComplete: "current-password", required: true, value: password1, onChange: function (e) { return setPassword1(e.target.value); } }) }), (0, jsx_runtime_1.jsx)(VerticalLabel_1.StackedLabel, { label: "Confirmation du mot de passe", children: (0, jsx_runtime_1.jsx)(ui_1.Input, { type: "password", autoComplete: "current-password", required: true, value: password2, onChange: function (e) { return setPassword2(e.target.value); } }) }), error && ((0, jsx_runtime_1.jsx)(Message_1.Message, { className: "mt-4", type: "error", children: error })), (0, jsx_runtime_1.jsx)(ui_1.Button, { color: "primary", onClick: onSubmitClicked, children: "R\u00E9initialiser le mot de passe" })] })), (0, jsx_runtime_1.jsx)(react_router_dom_1.Link, { to: "/", children: "Retour" })] }) }));
+    return ((0, jsx_runtime_1.jsx)(ui_1.Card, { children: (0, jsx_runtime_1.jsxs)(styles_1.FormContainer, { children: [content !== null && content !== void 0 ? content : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(VerticalLabel_1.StackedLabel, { label: "Nouveau mot de passe", children: (0, jsx_runtime_1.jsx)(ui_1.Input, { type: "password", autoComplete: "current-password", required: true, value: password1, onChange: function (e) { return setPassword1(e.target.value); } }) }), (0, jsx_runtime_1.jsx)(VerticalLabel_1.StackedLabel, { label: "Confirmation du mot de passe", children: (0, jsx_runtime_1.jsx)(ui_1.Input, { type: "password", autoComplete: "current-password", required: true, value: password2, onChange: function (e) { return setPassword2(e.target.value); } }) }), error && ((0, jsx_runtime_1.jsx)(Message_1.Message, { className: "mt-4", type: "error", children: error })), (0, jsx_runtime_1.jsx)(ui_1.Button, { "$color": "primary", onClick: onSubmitClicked, children: "R\u00E9initialiser le mot de passe" })] })), (0, jsx_runtime_1.jsx)(react_router_dom_1.Link, { to: "/", children: "Retour" })] }) }));
 };
 exports.PasswordResetForm = PasswordResetForm;

package/dist/components/data/AdvancedRequestDataGrid/helpers/advancedRequests.js

@@ -29,12 +29,12 @@ var lodash_1 = __importDefault(require("lodash"));
 var getAdvancedRequestDto = function (_a) {
     var type = _a.type, columns = _a.columns, _b = _a.conditions, conditions = _b === void 0 ? [] : _b, _c = _a.orderBy, orderBy = _c === void 0 ? [] : _c, _d = _a.start, start = _d === void 0 ? 0 : _d, _e = _a.length, length = _e === void 0 ? 100 : _e, _f = _a.getTotal, getTotal = _f === void 0 ? false : _f, _g = _a.idField, idField = _g === void 0 ? { fieldName: 'Id' } : _g;
     return ({
-        fields: __spreadArray(__spreadArray([], (idField === null ? [] : [idField]), true), Object.keys(columns).map(function (key) {
+        fields: __spreadArray(__spreadArray([], (idField === null ? [] : [idField]), true), columns.map(function (column) {
             var _a, _b;
-            return columns[key].field
-                ? __assign(__assign({}, columns[key].field), { fieldName: (_b = (_a = columns[key].field) === null || _a === void 0 ? void 0 : _a.fieldName) !== null && _b !== void 0 ? _b : key, fieldAlias: key }) : {
-                fieldName: key,
-                fieldAlias: key,
+            return column.field
+                ? __assign(__assign({}, column.field), { fieldName: (_b = (_a = column.field) === null || _a === void 0 ? void 0 : _a.fieldName) !== null && _b !== void 0 ? _b : column.key, fieldAlias: column.key }) : {
+                fieldName: column.key,
+                fieldAlias: column.key,
             };
         }), true),
         conditions: conditions,
@@ -49,13 +49,14 @@ exports.getAdvancedRequestDto = getAdvancedRequestDto;
 var convertFiltersToConditions = function (filters, columns) {
     return lodash_1.default.mapValues(filters, function (filter, columnKey) {
         var _a, _b, _c, _d, _e;
-        return ({
-            field: (_e = (_c = (_a = columns[columnKey].filterField) !== null && _a !== void 0 ? _a : (_b = columns[columnKey].field) === null || _b === void 0 ? void 0 : _b.fieldAlias) !== null && _c !== void 0 ? _c : (_d = columns[columnKey].field) === null || _d === void 0 ? void 0 : _d.fieldName) !== null && _e !== void 0 ? _e : columnKey,
+        var column = columns.find(function (col) { return col.key === columnKey; });
+        return {
+            field: (_e = (_c = (_a = column.filterField) !== null && _a !== void 0 ? _a : (_b = column.field) === null || _b === void 0 ? void 0 : _b.fieldAlias) !== null && _c !== void 0 ? _c : (_d = column.field) === null || _d === void 0 ? void 0 : _d.fieldName) !== null && _e !== void 0 ? _e : columnKey,
             operator: filter.operator,
             value: ['inArray', 'inRange'].includes(filter.operator)
                 ? filter.values
                 : lodash_1.default.castArray(filter.values)[0],
-        });
+        };
     });
 };
 exports.convertFiltersToConditions = convertFiltersToConditions;

package/dist/components/data/AdvancedRequestDataGrid/helpers/columns.js

@@ -27,98 +27,47 @@ var withGroupBy = function (columns) {
     });
 };
 exports.withGroupBy = withGroupBy;
-var advancedTextColumn = function (key, title, options) {
-    var _a;
-    return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; } }) }, options),
-        _a);
-};
+var advancedTextColumn = function (key, title, options) { return (__assign({ key: key, name: title, render: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; } }) }, options)); };
 exports.advancedTextColumn = advancedTextColumn;
 /**
  * Creates a column with a composed value from multiple fields,
  * and filtered by a text filter on the first field
  */
-var advancedComposedColumn = function (key, title, fields, options) {
-    var _a;
-    return (_a = {},
-        _a[key] = __assign({ field: {
-                fieldAlias: key,
-                operator: 'jsonObject',
-                operands: fields.flatMap(function (field) { return [
-                    { constantValue: field },
-                    { fieldName: field },
-                ]; }),
-            }, name: title, render: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, helpers_1.textFilter)(fields[0])), { getter: function (value) { var _a; return (_a = value[fields[0]]) !== null && _a !== void 0 ? _a : 0; } }), filterField: fields[0], sortField: fields[0] }, options),
-        _a);
-};
+var advancedComposedColumn = function (key, title, fields, options) { return (__assign({ key: key, field: {
+        fieldAlias: key,
+        operator: 'jsonObject',
+        operands: fields.flatMap(function (field) { return [
+            { constantValue: field },
+            { fieldName: field },
+        ]; }),
+    }, name: title, render: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, helpers_1.textFilter)(fields[0])), { getter: function (value) { var _a; return (_a = value[fields[0]]) !== null && _a !== void 0 ? _a : 0; } }), filterField: fields[0], sortField: fields[0] }, options)); };
 exports.advancedComposedColumn = advancedComposedColumn;
-var advancedMailColumn = function (key, title, options) {
-    var _a;
-    return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { var _a; return (0, jsx_runtime_1.jsx)("a", { href: "mailto:".concat(row[key]), children: (_a = row[key]) !== null && _a !== void 0 ? _a : '' }); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; } }) }, options),
-        _a);
-};
+var advancedMailColumn = function (key, title, options) { return (__assign({ key: key, name: title, render: function (row) { var _a; return (0, jsx_runtime_1.jsx)("a", { href: "mailto:".concat(row[key]), children: (_a = row[key]) !== null && _a !== void 0 ? _a : '' }); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; } }) }, options)); };
 exports.advancedMailColumn = advancedMailColumn;
-var advancedPhoneColumn = function (key, title, options) {
-    var _a;
-    return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { var _a; return (0, jsx_runtime_1.jsx)("a", { href: "tel:".concat(row[key]), children: (_a = row[key]) !== null && _a !== void 0 ? _a : '' }); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; } }) }, options),
-        _a);
-};
+var advancedPhoneColumn = function (key, title, options) { return (__assign({ key: key, name: title, render: function (row) { var _a; return (0, jsx_runtime_1.jsx)("a", { href: "tel:".concat(row[key]), children: (_a = row[key]) !== null && _a !== void 0 ? _a : '' }); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; } }) }, options)); };
 exports.advancedPhoneColumn = advancedPhoneColumn;
-var advancedDateColumn = function (key, title, options) {
-    var _a;
-    return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = (0, moment_1.default)(row[key]).format('DD/MM/YYYY')) !== null && _a !== void 0 ? _a : ''; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; } }) }, options),
-        _a);
-};
+var advancedDateColumn = function (key, title, options) { return (__assign({ key: key, name: title, render: function (row) { var _a; return (_a = (0, moment_1.default)(row[key]).format('DD/MM/YYYY')) !== null && _a !== void 0 ? _a : ''; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; } }) }, options)); };
 exports.advancedDateColumn = advancedDateColumn;
-var advancedMonthColumn = function (key, title, options) {
-    var _a;
-    return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { return (row[key] ? "".concat(row[key], " mois ") : ''); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; } }) }, options),
-        _a);
-};
+var advancedMonthColumn = function (key, title, options) { return (__assign({ key: key, name: title, render: function (row) { return (row[key] ? "".concat(row[key], " mois ") : ''); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; } }) }, options)); };
 exports.advancedMonthColumn = advancedMonthColumn;
 var advancedNumberColumn = function (key, title, decimals, options) {
-    var _a;
     if (decimals === void 0) { decimals = 2; }
-    return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = (0, numbers_1.formatNumber)(row[key], decimals)) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return '#'; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, helpers_1.numberFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : 0; } }) }, options),
-        _a);
+    return (__assign({ key: key, name: title, render: function (row) { var _a; return (_a = (0, numbers_1.formatNumber)(row[key], decimals)) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return '#'; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, helpers_1.numberFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : 0; } }) }, options));
 };
 exports.advancedNumberColumn = advancedNumberColumn;
 var advancedMoneyColumn = function (key, title, decimals, options) {
-    var _a;
     if (decimals === void 0) { decimals = 2; }
-    return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = (0, numbers_1.formatMoney)(row[key], decimals)) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return '#0.00'; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, helpers_1.numberFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : 0; } }) }, options),
-        _a);
+    return (__assign({ key: key, name: title, render: function (row) { var _a; return (_a = (0, numbers_1.formatMoney)(row[key], decimals)) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return '#0.00'; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, helpers_1.numberFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : 0; } }) }, options));
 };
 exports.advancedMoneyColumn = advancedMoneyColumn;
-var advancedPercentageColumn = function (key, title, options) {
-    var _a;
-    return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = (0, numbers_1.formatPercentage)(row[key])) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return '#0.00'; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, helpers_1.numberFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : 0; } }) }, options),
-        _a);
-};
+var advancedPercentageColumn = function (key, title, options) { return (__assign({ key: key, name: title, render: function (row) { var _a; return (_a = (0, numbers_1.formatPercentage)(row[key])) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return '#0.00'; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, helpers_1.numberFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : 0; } }) }, options)); };
 exports.advancedPercentageColumn = advancedPercentageColumn;
-var advancedCheckboxColumn = function (key, title, options) {
-    var _a;
-    return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: row[key], readOnly: true }), (0, jsx_runtime_1.jsx)("span", { children: row[key] ? ' Oui' : ' Non' })] })); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, helpers_1.numberFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : 0; } }) }, options),
-        _a);
-};
+var advancedCheckboxColumn = function (key, title, options) { return (__assign({ key: key, name: title, render: function (row) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: row[key], readOnly: true }), (0, jsx_runtime_1.jsx)("span", { children: row[key] ? ' Oui' : ' Non' })] })); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, helpers_1.numberFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : 0; } }) }, options)); };
 exports.advancedCheckboxColumn = advancedCheckboxColumn;
-var advancedColorColumn = function (key, title, options) {
-    var _a;
-    return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) {
-                var _a;
-                return ((0, jsx_runtime_1.jsx)("div", { style: { backgroundColor: row[key] }, children: (_a = row[key]) !== null && _a !== void 0 ? _a : '' }));
-            }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; } }) }, options),
-        _a);
-};
+var advancedColorColumn = function (key, title, options) { return (__assign({ key: key, name: title, render: function (row) {
+        var _a;
+        return ((0, jsx_runtime_1.jsx)("div", { style: { backgroundColor: row[key] }, children: (_a = row[key]) !== null && _a !== void 0 ? _a : '' }));
+    }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; } }) }, options)); };
 exports.advancedColorColumn = advancedColorColumn;
 var getColumnField = function (columns, columnKey) {
     var _a, _b;

package/dist/components/data/AdvancedRequestDataGrid/index.js

@@ -66,7 +66,7 @@ var AdvancedRequestDataGrid = function (_a) {
     var currentRows = (0, react_1.useRef)([]);
     var _b = (0, react_1.useState)([]), rows = _b[0], setRows = _b[1];
     var _c = (0, react_1.useState)(0), start = _c[0], setStart = _c[1];
-    var _d = (0, react_1.useState)(50), length = _d[0], setLength = _d[1];
+    var _d = (0, react_1.useState)(-1), length = _d[0], setLength = _d[1];
     var _e = (0, react_1.useState)(-1), total = _e[0], setTotal = _e[1];
     var advancedRequest = (0, advancedRequests_1.useAdvancedRequestHandler)();
     var idAdvancedRequest = (0, advancedRequests_1.useAdvancedRequestHandler)();
@@ -75,7 +75,7 @@ var AdvancedRequestDataGrid = function (_a) {
     var refresh = (0, react_1.useCallback)(function () {
         setRows([]);
         setStart(0);
-        setLength(50);
+        setLength(-1);
         setTotal(-1);
     }, []);
     var onFiltersChanged = (0, react_1.useCallback)(function (filters) {

package/dist/components/data/AdvancedRequestDataGrid/types.d.ts

@@ -10,7 +10,7 @@ export type AdvancedRequestDataGridColumn<R> = DataGridColumn<R> & {
     filterField?: string;
     sortField?: string;
 };
-export type AdvancedRequestDataGridColumns<R> = Record<string, AdvancedRequestDataGridColumn<R>>;
+export type AdvancedRequestDataGridColumns<R> = AdvancedRequestDataGridColumn<R>[];
 export type AdvancedRequestDataGridProps<R> = Omit<DataGridProps<R>, 'rows' | 'columns'> & {
     columns: AdvancedRequestDataGridColumns<R>;
     type: string;

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

@@ -32,14 +32,14 @@ var react_1 = require("react");
 var DataGridEditableCell_1 = require("./DataGridEditableCell");
 var hooks_1 = require("./hooks");
 var defaultRender = function (row, col) {
-    var value = col.propertyName ? row[col.propertyName] : '';
+    var value = col.getter(row);
     return !value ? '' : String(value);
 };
 var DataGridCell = function (_a) {
     var _b, _c;
     var row = _a.row, rowIndex = _a.rowIndex, columnKey = _a.columnKey, columnIndex = _a.columnIndex, column = _a.column, context = _a.context, style = _a.style;
-    var _d = (0, hooks_1.useDataGridContext)(context), name = _d.name, editable = _d.editable, _e = _d.editingCell, editingCell = _e === void 0 ? [-1, -1] : _e, setEditingCell = _d.setEditingCell, onRowDoubleClick = _d.onRowDoubleClick;
-    var isEditable = !!editable && !!column.editable && column.type && column.getter;
+    var _d = (0, hooks_1.useDataGridContext)(context), name = _d.name, editable = _d.editable, _e = _d.editingCell, editingCell = _e === void 0 ? [-1, -1] : _e, setEditingCell = _d.setEditingCell, onRowDoubleClick = _d.onRowDoubleClick, userSelect = _d.userSelect;
+    var isEditable = !!editable && !!column.editable && !!column.editComponent;
     var isEditing = isEditable && editingCell[0] === rowIndex && editingCell[1] === columnIndex;
     var DataGridCellComponent = (_b = column.component) !== null && _b !== void 0 ? _b : styles.DataGridCell;
     var onDoubleClick = (0, react_1.useCallback)(function (e) {
@@ -52,8 +52,8 @@ var DataGridCell = function (_a) {
             onRowDoubleClick === null || onRowDoubleClick === void 0 ? void 0 : onRowDoubleClick(row, e);
     }, [columnIndex, isEditable, onRowDoubleClick, row, rowIndex, setEditingCell]);
     if (isEditing) {
-        return ((0, jsx_runtime_1.jsx)(DataGridEditableCell_1.DataGridEditableCell, { row: row, rowIndex: rowIndex, columnKey: columnKey, columnIndex: columnIndex, column: column, context: context }, "".concat(name, "-").concat(rowIndex, "-").concat(columnIndex)));
+        return ((0, jsx_runtime_1.jsx)(DataGridEditableCell_1.DataGridEditableCell, { row: row, rowIndex: rowIndex, columnKey: columnKey, columnIndex: columnIndex, column: column, context: context, userSelect: userSelect }, "".concat(name, "-").concat(rowIndex, "-").concat(columnIndex)));
     }
-    return ((0, jsx_runtime_1.jsx)(DataGridCellComponent, { onDoubleClick: onDoubleClick, style: style, children: ((_c = column.render) !== null && _c !== void 0 ? _c : defaultRender)(row, column) }, "".concat(name, "-").concat(rowIndex, "-").concat(columnIndex)));
+    return ((0, jsx_runtime_1.jsx)(DataGridCellComponent, { onDoubleClick: onDoubleClick, style: style, "$userSelect": userSelect, "$color": column.color, "$textAlign": column.textAlign, children: ((_c = column.render) !== null && _c !== void 0 ? _c : defaultRender)(row, column) }, "".concat(name, "-").concat(rowIndex, "-").concat(columnIndex)));
 };
 exports.DataGridCell = DataGridCell;

package/dist/components/data/DataGrid/DataGridColumnsModal/helpers.d.ts

@@ -1,2 +1,2 @@
-import { DataGridColumnKeyValuePair, DataGridColumns } from '../types';
-export declare const normalizeColumnsOrders: <R>(columns: DataGridColumns<R> | DataGridColumnKeyValuePair<R>[]) => DataGridColumnKeyValuePair<R>[];
+import { DataGridColumns } from '../types';
+export declare const normalizeColumnsOrders: <R>(columns: DataGridColumns<R>) => DataGridColumns<R>;

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

@@ -13,12 +13,6 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.normalizeColumnsOrders = void 0;
 var normalizeColumnsOrders = function (columns) {
-    return (Array.isArray(columns) ? columns : Object.entries(columns)).map(function (_a, index) {
-        var key = _a[0], column = _a[1];
-        return [
-            key,
-            __assign(__assign({}, column), { order: index }),
-        ];
-    });
+    return columns.map(function (column, index) { return (__assign(__assign({}, column), { order: index })); });
 };
 exports.normalizeColumnsOrders = normalizeColumnsOrders;

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)(currentColumns, function (col) {
+        var newSettings = (0, lodash_1.mapValues)((0, lodash_1.keyBy)(currentColumns, 'key'), 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,19 +62,16 @@ 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(Object.entries(visibleColumns), function (_a) {
-        var _b;
-        var col = _a[1];
-        return (_b = col.order) !== null && _b !== void 0 ? _b : 0;
-    }));
+    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 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 (__assign(__assign({}, Object.fromEntries(newArray_1)), hiddenColumns)); });
+            onColumnsChanged(function () { return __spreadArray(__spreadArray([], newArray_1, true), hiddenColumns, true); });
         }
     }, [hiddenColumns, onColumnsChanged, sortedVisibleColumnsEntries]);
     var onDownButtonClicked = (0, react_1.useCallback)(function (index) {
@@ -83,29 +80,27 @@ var DataGridColumnsEditor = function (_a) {
                 sortedVisibleColumnsEntries[index + 1],
                 sortedVisibleColumnsEntries[index]
             ], false), sortedVisibleColumnsEntries.slice(index + 2), true));
-            onColumnsChanged(function () { return (__assign(__assign({}, Object.fromEntries(newArray_2)), hiddenColumns)); });
+            onColumnsChanged(function () { return __spreadArray(__spreadArray([], newArray_2, true), hiddenColumns, true); });
         }
     }, [hiddenColumns, onColumnsChanged, sortedVisibleColumnsEntries]);
     var onHideButtonClicked = (0, react_1.useCallback)(function (columnKey) {
         onColumnsChanged(function (prev) {
-            var _a;
-            return (__assign(__assign({}, prev), (_a = {}, _a[columnKey] = __assign(__assign({}, prev[columnKey]), { order: -1 }), _a)));
+            return prev.map(function (column) {
+                return column.key === columnKey
+                    ? __assign(__assign({}, column), { order: -1 }) : column;
+            });
         });
     }, [onColumnsChanged]);
     var onShowButtonClicked = (0, react_1.useCallback)(function (columnKey) {
         onColumnsChanged(function (prev) {
-            var _a;
-            return (__assign(__assign({}, prev), (_a = {}, _a[columnKey] = __assign(__assign({}, hiddenColumns[columnKey]), { order: Object.keys(prev).length }), _a)));
+            return prev.map(function (column) {
+                return column.key === columnKey
+                    ? __assign(__assign({}, column), { order: Object.keys(prev).length }) : column;
+            });
         });
-    }, [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));
-                        }) })] })] }));
+    }, [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)); }) })] })] }));
 };
 exports.DataGridColumnsEditor = DataGridColumnsEditor;

package/dist/components/data/DataGrid/DataGridEditableCell/CheckboxEditableCell.d.ts

@@ -0,0 +1,2 @@
+import { DataGridEditableCellProps } from './types';
+export declare const CheckboxEditableCell: <R>(props: DataGridEditableCellProps<R, boolean> & import("react").RefAttributes<HTMLInputElement>) => import("react").JSX.Element | null;

package/dist/components/data/DataGrid/DataGridEditableCell/CheckboxEditableCell.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxEditableCell = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var CheckboxEditableCellInner = function (_a, ref) {
+    var value = _a.value, onChange = _a.onChange, onClose = _a.onClose;
+    var onBlur = (0, react_1.useCallback)(function () {
+        onClose(true);
+    }, [onClose]);
+    var onKeyDown = (0, react_1.useCallback)(function (e) {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            onClose(true);
+        }
+        else if (e.key === 'Escape') {
+            e.preventDefault();
+            onClose(false);
+        }
+    }, [onClose]);
+    return ((0, jsx_runtime_1.jsx)("input", { ref: ref, type: "checkbox", checked: value, onChange: function (e) { return onChange(e.target.checked); }, onBlur: onBlur, onKeyDown: onKeyDown }));
+};
+exports.CheckboxEditableCell = (0, react_1.forwardRef)(CheckboxEditableCellInner);

package/dist/components/data/DataGrid/DataGridEditableCell/DateEditableCell.d.ts

@@ -0,0 +1,2 @@
+import { DataGridEditableCellProps } from './types';
+export declare const DateEditableCell: <R>(props: DataGridEditableCellProps<R, string> & import("react").RefAttributes<HTMLInputElement>) => import("react").JSX.Element | null;

package/dist/components/data/DataGrid/DataGridEditableCell/DateEditableCell.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateEditableCell = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var moment_1 = __importDefault(require("moment"));
+var DateEditableCellInner = function (_a, ref) {
+    var value = _a.value, onChange = _a.onChange, onClose = _a.onClose;
+    var onBlur = (0, react_1.useCallback)(function () {
+        onClose(true);
+    }, [onClose]);
+    var onKeyDown = (0, react_1.useCallback)(function (e) {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            onClose(true);
+        }
+        else if (e.key === 'Escape') {
+            e.preventDefault();
+            onClose(false);
+        }
+    }, [onClose]);
+    return ((0, jsx_runtime_1.jsx)("input", { ref: ref, type: "date", value: (0, moment_1.default)(value).format('YYYY-MM-DD'), onChange: function (e) { return onChange(e.target.value); }, onBlur: onBlur, onKeyDown: onKeyDown }));
+};
+exports.DateEditableCell = (0, react_1.forwardRef)(DateEditableCellInner);

package/dist/components/data/DataGrid/DataGridEditableCell/NumberEditableCell.d.ts

@@ -0,0 +1,5 @@
+import { DataGridEditableCellProps } from './types';
+export declare const NumberEditableCell: <R>(props: DataGridEditableCellProps<R, number> & {
+    decimals?: number;
+    currency?: string | ((row: R) => string);
+} & import("react").RefAttributes<HTMLElement>) => import("react").JSX.Element | null;

package/dist/components/data/DataGrid/DataGridEditableCell/NumberEditableCell.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberEditableCell = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var numbers_1 = require("../../../../helpers/numbers");
+var react_number_format_1 = require("react-number-format");
+var NumberEditableCellInner = function (_a, ref) {
+    var _b = _a.decimals, decimals = _b === void 0 ? 0 : _b, currency = _a.currency, row = _a.row, value = _a.value, onChange = _a.onChange, onClose = _a.onClose;
+    var currencyName = typeof currency === 'function' ? currency(row) : currency;
+    var _c = currencyName
+        ? (0, numbers_1.getCurrencySymbol)(currencyName)
+        : [undefined, undefined], prefix = _c[0], suffix = _c[1];
+    var onBlur = (0, react_1.useCallback)(function () {
+        onClose(true);
+    }, [onClose]);
+    var onKeyDown = (0, react_1.useCallback)(function (e) {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            onClose(true);
+        }
+        else if (e.key === 'Escape') {
+            e.preventDefault();
+            onClose(false);
+        }
+    }, [onClose]);
+    return ((0, jsx_runtime_1.jsx)(react_number_format_1.NumericFormat, { getInputRef: ref, value: Number(value), onChange: function (e) {
+            console.log('e:', e);
+            onChange((0, numbers_1.parseNumber)(e.target.value));
+        }, onBlur: onBlur, onKeyDown: onKeyDown, decimalSeparator: numbers_1.decimalSeparator, decimalScale: decimals, fixedDecimalScale: !!decimals, prefix: prefix ? prefix + ' ' : undefined, suffix: suffix ? ' ' + suffix : undefined }));
+};
+exports.NumberEditableCell = (0, react_1.forwardRef)(NumberEditableCellInner);