@addev-be/ui 0.21.3 → 0.21.4

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';
@@ -7,8 +9,11 @@ import ArrowUpBigSmallIcon from '../assets/icons/arrow-up-big-small.svg?react';
 import ArrowUpZAIcon from '../assets/icons/arrow-up-z-a.svg?react';
 import ArrowsRotateIcon from '../assets/icons/arrows-rotate.svg?react';
 import ArrowsUpDownIcon from '../assets/icons/arrows-up-down.svg?react';
+import BarsIcon from '../assets/icons/bars.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 +23,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';
@@ -34,10 +40,13 @@ import TableFooterIcon from '../assets/icons/table-footer.svg?react';
 import TableFooterSlashIcon from '../assets/icons/table-footer-slash.svg?react';
 import TableIcon from '../assets/icons/table.svg?react';
 import TallyIcon from '../assets/icons/tally.svg?react';
+import TrashCanIcon from '../assets/icons/trash-can.svg?react';
 import TriangleExclamationIcon from '../assets/icons/triangle-exclamation.svg?react';
 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 +55,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, BarsIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CircleCheckIcon, CircleInfoIcon, CircleXMarkIcon, CopyIcon, DownIcon, EllipsisIcon, FilterFullIcon, FilterIcon, FilterSlashIcon, FloppyDiskIcon, HashtagIcon, ImageSlashIcon, LeftIcon, MagnifierIcon, PhoneIcon, PlusIcon, RightIcon, SigmaIcon, SortCalendarAscendingIcon, SortCalendarDescendingIcon, SpinnerIcon, TableColumnsIcon, TableFooterIcon, TableFooterSlashIcon, TableIcon, TallyIcon, TrashCanIcon, TriangleExclamationIcon, UpIcon, UserTieIcon, XBarIcon, XMarkIcon, XMarkLargeIcon, };

package/dist/Icons.js

@@ -25,9 +25,14 @@ 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.XMarkIcon = exports.XBarIcon = exports.UserTieIcon = exports.UpIcon = exports.TriangleExclamationIcon = exports.TrashCanIcon = 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.FloppyDiskIcon = 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.BarsIcon = 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;
+exports.XMarkLargeIcon = 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"));
@@ -44,10 +49,16 @@ var arrows_rotate_svg_react_1 = __importDefault(require("../assets/icons/arrows-
 exports.ArrowsRotateIcon = arrows_rotate_svg_react_1.default;
 var arrows_up_down_svg_react_1 = __importDefault(require("../assets/icons/arrows-up-down.svg?react"));
 exports.ArrowsUpDownIcon = arrows_up_down_svg_react_1.default;
+var bars_svg_react_1 = __importDefault(require("../assets/icons/bars.svg?react"));
+exports.BarsIcon = bars_svg_react_1.default;
 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 +77,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"));
@@ -98,6 +111,8 @@ var table_svg_react_1 = __importDefault(require("../assets/icons/table.svg?react
 exports.TableIcon = table_svg_react_1.default;
 var tally_svg_react_1 = __importDefault(require("../assets/icons/tally.svg?react"));
 exports.TallyIcon = tally_svg_react_1.default;
+var trash_can_svg_react_1 = __importDefault(require("../assets/icons/trash-can.svg?react"));
+exports.TrashCanIcon = trash_can_svg_react_1.default;
 var triangle_exclamation_svg_react_1 = __importDefault(require("../assets/icons/triangle-exclamation.svg?react"));
 exports.TriangleExclamationIcon = triangle_exclamation_svg_react_1.default;
 var up_svg_react_1 = __importDefault(require("../assets/icons/up.svg?react"));
@@ -106,6 +121,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 +145,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

@@ -43,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/DataGrid/DataGridCell.d.ts

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

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

@@ -26,22 +26,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGridCell = 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 DataGridEditableCell_1 = require("./DataGridEditableCell");
 var hooks_1 = require("./hooks");
-var defaultRender = function (row, col) {
-    var value = col.propertyName ? row[col.propertyName] : '';
-    return !value ? '' : String(value);
-};
+var defaultRender = function (value) { 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 &&
+        'editable' in column &&
+        !!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 value = (0, react_1.useMemo)(function () { return column.getter(row); }, [column, row]);
     var onDoubleClick = (0, react_1.useCallback)(function (e) {
         e.stopPropagation();
         e.preventDefault();
@@ -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)(value, 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/DataGridColumnsModal/styles.js

@@ -40,10 +40,10 @@ exports.Title = styled_components_1.default.div.attrs({
 })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0;\n  margin-bottom: var(--space-2);\n  font-weight: bold;\n"], ["\n  margin: 0;\n  margin-bottom: var(--space-2);\n  font-weight: bold;\n"])));
 exports.ColumnsList = styled_components_1.default.ul.attrs({
     className: 'DataGridColumnsModal-ColumnsList',
-})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow: auto;\n  border: 1px solid var(--color-neutral-200);\n  margin: 0;\n  background-color: var(--color-neutral-50);\n\n  & > li:not(:last-child) {\n    border-bottom: 1px solid var(--color-neutral-100);\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow: auto;\n  border: 1px solid var(--color-neutral-200);\n  margin: 0;\n  background-color: var(--color-neutral-50);\n\n  & > li:not(:last-child) {\n    border-bottom: 1px solid var(--color-neutral-100);\n  }\n"])));
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow: auto;\n  border: 1px solid var(--color-base-200);\n  margin: 0;\n  background-color: var(--color-base-50);\n\n  & > li:not(:last-child) {\n    border-bottom: 1px solid var(--color-base-100);\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow: auto;\n  border: 1px solid var(--color-base-200);\n  margin: 0;\n  background-color: var(--color-base-50);\n\n  & > li:not(:last-child) {\n    border-bottom: 1px solid var(--color-base-100);\n  }\n"])));
 exports.ColumnItem = styled_components_1.default.li.attrs({
     className: 'DataGridColumnsModal-ColumnItem',
-})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding: var(--space-1);\n  transition: background-color 0.2s;\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--space-2);\n\n  span {\n    flex: 1;\n  }\n\n  button {\n    display: none;\n    padding: var(--space-1);\n    width: var(--space-6);\n    height: var(--space-6);\n    border-radius: var(--rounded-full);\n    background-color: var(--color-neutral-200);\n    border: none;\n    align-items: center;\n    justify-content: center;\n  }\n\n  &:hover {\n    background-color: var(--color-neutral-100);\n    button {\n      display: flex;\n      background-color: var(--color-neutral-300);\n    }\n  }\n"], ["\n  padding: var(--space-1);\n  transition: background-color 0.2s;\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--space-2);\n\n  span {\n    flex: 1;\n  }\n\n  button {\n    display: none;\n    padding: var(--space-1);\n    width: var(--space-6);\n    height: var(--space-6);\n    border-radius: var(--rounded-full);\n    background-color: var(--color-neutral-200);\n    border: none;\n    align-items: center;\n    justify-content: center;\n  }\n\n  &:hover {\n    background-color: var(--color-neutral-100);\n    button {\n      display: flex;\n      background-color: var(--color-neutral-300);\n    }\n  }\n"])));
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding: var(--space-1);\n  transition: background-color 0.2s;\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--space-2);\n\n  span {\n    flex: 1;\n  }\n\n  button {\n    display: none;\n    padding: var(--space-1);\n    width: var(--space-6);\n    height: var(--space-6);\n    border-radius: var(--rounded-full);\n    background-color: var(--color-base-200);\n    border: none;\n    align-items: center;\n    justify-content: center;\n  }\n\n  &:hover {\n    background-color: var(--color-base-100);\n    button {\n      display: flex;\n      background-color: var(--color-base-300);\n    }\n  }\n"], ["\n  padding: var(--space-1);\n  transition: background-color 0.2s;\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--space-2);\n\n  span {\n    flex: 1;\n  }\n\n  button {\n    display: none;\n    padding: var(--space-1);\n    width: var(--space-6);\n    height: var(--space-6);\n    border-radius: var(--rounded-full);\n    background-color: var(--color-base-200);\n    border: none;\n    align-items: center;\n    justify-content: center;\n  }\n\n  &:hover {\n    background-color: var(--color-base-100);\n    button {\n      display: flex;\n      background-color: var(--color-base-300);\n    }\n  }\n"])));
 exports.Buttons = styled_components_1.default.div.attrs({
     className: 'DataGridColumnsModal-Buttons',
 })(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  gap: var(--space-1);\n  height: var(--space-6);\n  ", "\n\n  svg {\n    width: var(--space-4);\n    height: var(--space-4);\n  }\n"], ["\n  display: flex;\n  gap: var(--space-1);\n  height: var(--space-6);\n  ", "\n\n  svg {\n    width: var(--space-4);\n    height: var(--space-4);\n  }\n"])), function (_a) {

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

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

@@ -0,0 +1,34 @@
+"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, prefixFromProps = _a.prefix, suffixFromProps = _a.suffix, 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], prefixFromCurrency = _c[0], suffixFromCurrency = _c[1];
+    var prefix = prefixFromProps || prefixFromCurrency;
+    var suffix = suffixFromProps || suffixFromCurrency;
+    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);

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

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

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextEditableCell = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var TextEditableCellInner = 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: "text", value: String(value), onChange: function (e) { return onChange(e.target.value); }, onBlur: onBlur, onKeyDown: onKeyDown }));
+};
+exports.TextEditableCell = (0, react_1.forwardRef)(TextEditableCellInner);

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

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

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

@@ -0,0 +1,91 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridEditableCell = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styles_1 = require("./styles");
+var hooks_1 = require("../hooks");
+var DataGridEditableCell = function (_a) {
+    var row = _a.row, columnKey = _a.columnKey, column = _a.column, context = _a.context;
+    var _b = (0, hooks_1.useDataGridContext)(context), setEditingCell = _b.setEditingCell, setRows = _b.setRows, editRow = _b.editRow, rows = _b.rows, rowKeyGetter = _b.rowKeyGetter;
+    var initialValue = (0, react_1.useMemo)(function () { return column.getter(row); }, [column, row]);
+    var _c = (0, react_1.useState)(initialValue), value = _c[0], setValue = _c[1];
+    var inputRef = (0, react_1.useRef)(null);
+    var rowKey = rowKeyGetter(row);
+    var defaultItemToPartialRow = (0, react_1.useCallback)(function (key, row, newValue) {
+        var _a;
+        return (_a = { Id: key }, _a[columnKey] = newValue, _a);
+    }, [columnKey]);
+    var partialRowGetter = ('itemToPartialRow' in column && column.itemToPartialRow) ||
+        defaultItemToPartialRow;
+    var save = (0, react_1.useCallback)(function () {
+        var rowIndex = rows.findIndex(function (r) { return rowKeyGetter(r) === rowKey; });
+        // If row is found
+        if (rowIndex >= 0) {
+            // Update the row with the new value
+            var partialRow = partialRowGetter(rowKey, row, value);
+            var newRow_1 = __assign(__assign({}, row), partialRow);
+            // Update the edited rows state
+            editRow(partialRow);
+            // Update the rows
+            setRows === null || setRows === void 0 ? void 0 : setRows(function (oldRows) {
+                var newRows = __spreadArray([], oldRows, true);
+                newRows[rowIndex] = newRow_1;
+                return newRows;
+            });
+        }
+    }, [
+        editRow,
+        partialRowGetter,
+        row,
+        rowKey,
+        rowKeyGetter,
+        rows,
+        setRows,
+        value,
+    ]);
+    var onClose = (0, react_1.useCallback)(function (shouldSave, nextEditingCell) {
+        if (nextEditingCell === void 0) { nextEditingCell = [-1, -1]; }
+        if (shouldSave && value !== initialValue) {
+            save();
+        }
+        setEditingCell(nextEditingCell);
+    }, [initialValue, save, setEditingCell, value]);
+    (0, react_1.useEffect)(function () {
+        if (inputRef.current) {
+            inputRef.current.focus();
+            if (inputRef.current instanceof HTMLInputElement) {
+                inputRef.current.select();
+            }
+        }
+    }, [inputRef]);
+    var input = (0, react_1.useMemo)(function () {
+        if (!('editable' in column) || !column.editable || !column.editComponent) {
+            return null;
+        }
+        var EditComponent = column.editComponent;
+        return ((0, jsx_runtime_1.jsx)(EditComponent, { row: row, ref: inputRef, value: value, onChange: setValue, onClose: onClose, context: context }));
+    }, [column, context, onClose, row, value]);
+    return ((0, jsx_runtime_1.jsx)(styles_1.EditableCellContainer, { "$textAlign": column.textAlign, children: input }, columnKey));
+};
+exports.DataGridEditableCell = DataGridEditableCell;

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

@@ -0,0 +1,3 @@
+export declare const EditableCellContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $textAlign?: "left" | "right" | "center";
+}>> & string;

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

@@ -0,0 +1,17 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditableCellContainer = void 0;
+var styles_1 = require("../styles");
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.EditableCellContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  ", "\n  padding: 1px 4px 0px 4px;\n  overflow: visible;\n  background-color: var(--color-base-0);\n\n  & input,\n  & select {\n    position: absolute;\n    inset: 0;\n    z-index: 10;\n\n    font-size: inherit;\n    font-family: inherit;\n    font-weight: inherit;\n    text-align: ", ";\n\n    border: 1px solid var(--color-base-300);\n    padding: var(--space-1) var(--space-2);\n\n    color: var(--color-text-800);\n    &::placeholder {\n      color: var(--color-text-400);\n    }\n\n    border: none;\n    outline: none;\n  }\n"], ["\n  position: relative;\n  ", "\n  padding: 1px 4px 0px 4px;\n  overflow: visible;\n  background-color: var(--color-base-0);\n\n  & input,\n  & select {\n    position: absolute;\n    inset: 0;\n    z-index: 10;\n\n    font-size: inherit;\n    font-family: inherit;\n    font-weight: inherit;\n    text-align: ", ";\n\n    border: 1px solid var(--color-base-300);\n    padding: var(--space-1) var(--space-2);\n\n    color: var(--color-text-800);\n    &::placeholder {\n      color: var(--color-text-400);\n    }\n\n    border: none;\n    outline: none;\n  }\n"])), styles_1.dataGridCellCss, function (_a) {
+    var _b = _a.$textAlign, $textAlign = _b === void 0 ? 'left' : _b;
+    return $textAlign;
+});
+var templateObject_1;