@addev-be/ui 0.16.10 → 0.17.1

package/dist/Icons.d.ts

@@ -9,7 +9,6 @@ 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';
@@ -40,7 +39,6 @@ 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';
@@ -56,4 +54,4 @@ type AnimatedIconProps = {
 export declare const AnimatedIcon: FC<AnimatedIconProps & IconFCProps>;
 export declare const LoadingIcon: FC<IconFCProps>;
 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, };
+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,8 +25,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-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;
+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"));
@@ -49,8 +48,6 @@ 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"));
@@ -111,8 +108,6 @@ 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"));

package/dist/components/auth/LoginForm.js

@@ -2,15 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LoginForm = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var forms_1 = require("../forms");
+var ui_1 = require("../ui");
 var react_1 = require("react");
 var react_router_dom_1 = require("react-router-dom");
-var Button_1 = require("../forms/Button");
-var Card_1 = require("../ui/Card");
 var styles_1 = require("./styles");
-var styles_2 = require("../forms/styles");
-var Message_1 = require("../ui/Message");
 var VerticalLabel_1 = require("../forms/VerticalLabel");
-var hooks_1 = require("../../providers/hooks");
+var providers_1 = require("../../providers");
 var LoginForm = function () {
     var _a = (0, react_1.useState)(localStorage.getItem('username') || ''), username = _a[0], setUsername = _a[1];
     var _b = (0, react_1.useState)(''), password = _b[0], setPassword = _b[1];
@@ -18,7 +16,7 @@ var LoginForm = function () {
     var _d = (0, react_1.useState)(''), error = _d[0], setError = _d[1];
     var usernameInputRef = (0, react_1.useRef)(null);
     var passwordInputRef = (0, react_1.useRef)(null);
-    var login = (0, hooks_1.useAuthentication)().login;
+    var login = (0, providers_1.useAuthentication)().login;
     var onLoginClicked = (0, react_1.useCallback)(function () {
         setError('');
         setIsLoading(true);
@@ -45,6 +43,6 @@ var LoginForm = function () {
     }, []);
     if (isLoading)
         return (0, jsx_runtime_1.jsx)("div", { children: "Chargement..." });
-    return ((0, jsx_runtime_1.jsx)(Card_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)(styles_2.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)(styles_2.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)(Message_1.Message, { type: "error", children: error }), (0, jsx_runtime_1.jsx)(Button_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

@@ -2,24 +2,23 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PasswordRecoveryForm = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var forms_1 = require("../forms");
 var react_1 = require("react");
-var Button_1 = require("../forms/Button");
-var Card_1 = require("../ui/Card");
+var ui_1 = require("../ui");
 var styles_1 = require("./styles");
-var styles_2 = require("../forms/styles");
 var react_router_dom_1 = require("react-router-dom");
 var Message_1 = require("../ui/Message");
 var VerticalLabel_1 = require("../forms/VerticalLabel");
-var hooks_1 = require("../../providers/hooks");
+var providers_1 = require("../../providers");
 var PasswordRecoveryForm = function () {
     var _a = (0, react_1.useState)(''), email = _a[0], setEmail = _a[1];
     var _b = (0, react_1.useState)(false), isSubmitted = _b[0], setIsSubmitted = _b[1];
-    var sendRecoveryKey = (0, hooks_1.useAuthentication)().sendRecoveryKey;
+    var sendRecoveryKey = (0, providers_1.useAuthentication)().sendRecoveryKey;
     var onSubmitClicked = (0, react_1.useCallback)(function () {
         sendRecoveryKey(email).then(function () {
             setIsSubmitted(true);
         });
     }, [email, sendRecoveryKey]);
-    return ((0, jsx_runtime_1.jsx)(Card_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)(styles_2.Input, { type: "email", autoComplete: "email", required: true, value: email, onChange: function (e) { return setEmail(e.target.value); } }) }), (0, jsx_runtime_1.jsx)(Button_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/styles.d.ts

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

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

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

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

@@ -15,43 +15,33 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.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 (value) { return (!value ? '' : String(value)); };
+var defaultRender = function (row, col) {
+    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, userSelect = _d.userSelect, headerColor = _d.headerColor;
-    var isEditable = !!editable &&
-        'editable' in column &&
-        !!column.editable &&
-        !!column.editComponent;
+    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 value = (0, react_1.useMemo)(function () { return column.getter(row); }, [column, row]);
     var onDoubleClick = (0, react_1.useCallback)(function (e) {
         e.stopPropagation();
         e.preventDefault();
@@ -64,6 +54,6 @@ var DataGridCell = function (_a) {
     if (isEditing) {
         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, "$userSelect": userSelect, "$color": column.color, "$textAlign": column.textAlign, "$headerColor": headerColor, children: ((_c = column.render) !== null && _c !== void 0 ? _c : defaultRender)(value, 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/hooks.js

@@ -4,7 +4,7 @@ exports.useDataGridColumnsModal = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var lodash_1 = require("lodash");
 var react_1 = require("react");
-var Button_1 = require("../../../forms/Button");
+var forms_1 = require("../../../forms");
 var _1 = require(".");
 var Modal_1 = require("../../../layout/Modal");
 var useDataGridColumnsModal = function (context) {
@@ -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)(Button_1.Button, { onClick: closeModal, children: "Annuler" }), (0, jsx_runtime_1.jsx)(Button_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

@@ -26,23 +26,13 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {

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

@@ -1,10 +1,22 @@
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
-export declare const Panel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
-export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
-export declare const ColumnsList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>>, never>, never>> & string;
-export declare const ColumnItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>>, never>, {
+export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, never>, never>> & string;
+export declare const Panel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, never>, never>> & string;
+export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, never>, never>> & string;
+export declare const ColumnsList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
+    ref?: ((instance: HTMLUListElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLUListElement> | null | undefined;
+}>, never>, never>> & string;
+export declare const ColumnItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
+    ref?: ((instance: HTMLLIElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLLIElement> | null | undefined;
+}>, never>, {
     $visible?: boolean;
 }>> & string;
-export declare const Buttons: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, {
+export declare const Buttons: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, never>, {
     $visible?: boolean;
 }>> & string;

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

@@ -19,23 +19,13 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Buttons = exports.ColumnItem = exports.ColumnsList = exports.Title = exports.Panel = exports.Container = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
@@ -50,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-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"])));
+})(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"])));
 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-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"])));
+})(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"])));
 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

@@ -1,2 +1,2 @@
 import { DataGridEditableCellProps } from './types';
-export declare const CheckboxEditableCell: <R>({ value, onChange, onClose, ref, }: DataGridEditableCellProps<R, boolean>) => import("react/jsx-runtime").JSX.Element;
+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

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckboxEditableCell = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var CheckboxEditableCell = function (_a) {
-    var value = _a.value, onChange = _a.onChange, onClose = _a.onClose, ref = _a.ref;
+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]);
@@ -20,4 +20,4 @@ var CheckboxEditableCell = function (_a) {
     }, [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 = CheckboxEditableCell;
+exports.CheckboxEditableCell = (0, react_1.forwardRef)(CheckboxEditableCellInner);

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

@@ -1,2 +1,2 @@
 import { DataGridEditableCellProps } from './types';
-export declare const DateEditableCell: <R>({ value, onChange, onClose, ref, }: DataGridEditableCellProps<R, string>) => import("react/jsx-runtime").JSX.Element;
+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

@@ -5,10 +5,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DateEditableCell = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var moment_1 = __importDefault(require("moment"));
 var react_1 = require("react");
-var DateEditableCell = function (_a) {
-    var value = _a.value, onChange = _a.onChange, onClose = _a.onClose, ref = _a.ref;
+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]);
@@ -24,4 +24,4 @@ var DateEditableCell = function (_a) {
     }, [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 = DateEditableCell;
+exports.DateEditableCell = (0, react_1.forwardRef)(DateEditableCellInner);

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

@@ -1,7 +1,5 @@
 import { DataGridEditableCellProps } from './types';
-export declare const NumberEditableCell: <R>({ decimals, currency, prefix: prefixFromProps, suffix: suffixFromProps, row, value, onChange, onClose, ref, }: DataGridEditableCellProps<R, number> & {
+export declare const NumberEditableCell: <R>(props: DataGridEditableCellProps<R, number> & {
     decimals?: number;
     currency?: string | ((row: R) => string);
-    prefix?: string;
-    suffix?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+} & import("react").RefAttributes<HTMLElement>) => import("react").JSX.Element | null;

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

@@ -2,17 +2,15 @@
 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 react_1 = require("react");
-var NumberEditableCell = function (_a) {
-    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, ref = _a.ref;
+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], prefixFromCurrency = _c[0], suffixFromCurrency = _c[1];
-    var prefix = prefixFromProps || prefixFromCurrency;
-    var suffix = suffixFromProps || suffixFromCurrency;
+        : [undefined, undefined], prefix = _c[0], suffix = _c[1];
     var onBlur = (0, react_1.useCallback)(function () {
         onClose(true);
     }, [onClose]);
@@ -31,4 +29,4 @@ var NumberEditableCell = function (_a) {
             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 = NumberEditableCell;
+exports.NumberEditableCell = (0, react_1.forwardRef)(NumberEditableCellInner);

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

@@ -1,2 +1,2 @@
 import { DataGridEditableCellProps } from './types';
-export declare const TextEditableCell: <R>({ value, onChange, onClose, ref, }: DataGridEditableCellProps<R, string>) => import("react/jsx-runtime").JSX.Element;
+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

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextEditableCell = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var TextEditableCell = function (_a) {
-    var value = _a.value, onChange = _a.onChange, onClose = _a.onClose, ref = _a.ref;
+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]);
@@ -20,4 +20,4 @@ var TextEditableCell = function (_a) {
     }, [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 = TextEditableCell;
+exports.TextEditableCell = (0, react_1.forwardRef)(TextEditableCellInner);

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

@@ -26,27 +26,27 @@ var react_1 = require("react");
 var styles_1 = require("./styles");
 var hooks_1 = require("../hooks");
 var DataGridEditableCell = function (_a) {
+    var _b;
     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 _c = (0, hooks_1.useDataGridContext)(context), setEditingCell = _c.setEditingCell, setRows = _c.setRows, editRow = _c.editRow, rows = _c.rows, rowKeyGetter = _c.rowKeyGetter;
+    var initialValue = (0, react_1.useMemo)(function () { var _a; return (_a = column.getter(row)) !== null && _a !== void 0 ? _a : ''; }, [column, row]);
+    var _d = (0, react_1.useState)(initialValue), value = _d[0], setValue = _d[1];
     var inputRef = (0, react_1.useRef)(null);
     var rowKey = rowKeyGetter(row);
-    var defaultItemToPartialRow = (0, react_1.useCallback)(function (key, row, newValue) {
+    var defaultItemToPartialRow = (0, react_1.useCallback)(function (row, newValue) {
         var _a;
-        return (_a = { Id: key }, _a[columnKey] = newValue, _a);
+        return (_a = {}, _a[columnKey] = newValue, _a);
     }, [columnKey]);
-    var partialRowGetter = ('itemToPartialRow' in column && column.itemToPartialRow) ||
-        defaultItemToPartialRow;
+    var partialRowGetter = (_b = column.itemToPartialRow) !== null && _b !== void 0 ? _b : defaultItemToPartialRow;
     var save = (0, react_1.useCallback)(function () {
-        var rowIndex = rows.findIndex(function (r) { return rowKeyGetter(r) === rowKey; });
+        var rowIndex = rows.findIndex(function (r) { return rowKeyGetter(r) === rowKeyGetter(row); });
         // If row is found
         if (rowIndex >= 0) {
             // Update the row with the new value
-            var partialRow = partialRowGetter(rowKey, row, value);
+            var partialRow = partialRowGetter(row, value);
             var newRow_1 = __assign(__assign({}, row), partialRow);
             // Update the edited rows state
-            editRow(partialRow);
+            editRow(rowKey, partialRow);
             // Update the rows
             setRows === null || setRows === void 0 ? void 0 : setRows(function (oldRows) {
                 var newRows = __spreadArray([], oldRows, true);
@@ -80,12 +80,12 @@ var DataGridEditableCell = function (_a) {
         }
     }, [inputRef]);
     var input = (0, react_1.useMemo)(function () {
-        if (!('editable' in column) || !column.editable || !column.editComponent) {
+        if (!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]);
+    }, [column.editComponent, column.editable, 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.js

@@ -10,7 +10,7 @@ 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) {
+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-neutral-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-neutral-300);\n    padding: var(--space-1) var(--space-2);\n\n    color: var(--color-neutral-900);\n    &::placeholder {\n      color: var(--color-neutral-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-neutral-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-neutral-300);\n    padding: var(--space-1) var(--space-2);\n\n    color: var(--color-neutral-900);\n    &::placeholder {\n      color: var(--color-neutral-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;
 });

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

@@ -1,11 +1,11 @@
-import { FC, Ref } from 'react';
 import { DataGridContext } from '../types';
+import { Ref } from 'react';
 export type DataGridEditableCellProps<R, T> = {
     ref?: Ref<any>;
     row: R;
     value: T;
-    onChange: (value: T | null) => void;
+    onChange: (value: T) => void;
     onClose: (save: boolean) => void;
     context: DataGridContext<R>;
 };
-export type DataGridEditableCellFC<R, T = any> = FC<DataGridEditableCellProps<R, T>>;
+export type DataGridEditableCellFC<R, T = any> = (props: DataGridEditableCellProps<R, T>, ref: Ref<any>) => JSX.Element | null;