@addev-be/ui 0.7.0 → 0.7.1

package/dist/Icons.d.ts

@@ -9,6 +9,9 @@ import ArrowsRotateIcon from '../assets/icons/arrows-rotate.svg?react';
 import ArrowsUpDownIcon from '../assets/icons/arrows-up-down.svg?react';
 import CheckIcon from '../assets/icons/check.svg?react';
 import ChevronDownIcon from '../assets/icons/chevron-down.svg?react';
+import 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';
 import CopyIcon from '../assets/icons/copy.svg?react';
 import DownIcon from '../assets/icons/down.svg?react';
 import EllipsisIcon from '../assets/icons/ellipsis.svg?react';
@@ -23,12 +26,15 @@ import PhoneIcon from '../assets/icons/phone.svg?react';
 import PlusIcon from '../assets/icons/plus.svg?react';
 import RightIcon from '../assets/icons/right.svg?react';
 import SigmaIcon from '../assets/icons/sigma.svg?react';
+import SortCalendarAscendingIcon from '../assets/icons/sort-calendar-ascending.svg?react';
+import SortCalendarDescendingIcon from '../assets/icons/sort-calendar-descending.svg?react';
 import SpinnerIcon from '../assets/icons/spinner-third.svg?react';
 import TableColumnsIcon from '../assets/icons/table-columns.svg?react';
 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 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';
@@ -40,4 +46,4 @@ type AnimatedIconProps = {
 };
 export declare const AnimatedIcon: FC<AnimatedIconProps & IconFCProps>;
 export declare const LoadingIcon: FC<IconFCProps>;
-export { ArrowDownAZIcon, ArrowDown19Icon, ArrowDownBigSmallIcon, ArrowUpZAIcon, ArrowUpBigSmallIcon, ArrowUp91Icon, ArrowsRotateIcon, ArrowsUpDownIcon, CheckIcon, ChevronDownIcon, CopyIcon, DownIcon, EllipsisIcon, FilterFullIcon, FilterIcon, FilterSlashIcon, HashtagIcon, ImageSlashIcon, LeftIcon, MagnifierIcon, PhoneIcon, PlusIcon, RightIcon, SigmaIcon, SpinnerIcon, TableColumnsIcon, TableFooterIcon, TableFooterSlashIcon, TableIcon, TallyIcon, UpIcon, UserTieIcon, XBarIcon, };
+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, };

package/dist/Icons.js

@@ -25,7 +25,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.XBarIcon = exports.UserTieIcon = exports.UpIcon = exports.TallyIcon = exports.TableIcon = exports.TableFooterSlashIcon = exports.TableFooterIcon = exports.TableColumnsIcon = exports.SpinnerIcon = 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.ChevronDownIcon = exports.CheckIcon = exports.ArrowsUpDownIcon = exports.ArrowsRotateIcon = exports.ArrowUp91Icon = exports.ArrowUpBigSmallIcon = exports.ArrowUpZAIcon = exports.ArrowDownBigSmallIcon = exports.ArrowDown19Icon = exports.ArrowDownAZIcon = exports.LoadingIcon = exports.AnimatedIcon = void 0;
+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;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var arrow_down_1_9_svg_react_1 = __importDefault(require("../assets/icons/arrow-down-1-9.svg?react"));
@@ -48,6 +48,12 @@ 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 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"));
+exports.CircleInfoIcon = circle_info_svg_react_1.default;
+var circle_xmark_svg_react_1 = __importDefault(require("../assets/icons/circle-xmark.svg?react"));
+exports.CircleXMarkIcon = circle_xmark_svg_react_1.default;
 var copy_svg_react_1 = __importDefault(require("../assets/icons/copy.svg?react"));
 exports.CopyIcon = copy_svg_react_1.default;
 var down_svg_react_1 = __importDefault(require("../assets/icons/down.svg?react"));
@@ -76,6 +82,10 @@ var right_svg_react_1 = __importDefault(require("../assets/icons/right.svg?react
 exports.RightIcon = right_svg_react_1.default;
 var sigma_svg_react_1 = __importDefault(require("../assets/icons/sigma.svg?react"));
 exports.SigmaIcon = sigma_svg_react_1.default;
+var sort_calendar_ascending_svg_react_1 = __importDefault(require("../assets/icons/sort-calendar-ascending.svg?react"));
+exports.SortCalendarAscendingIcon = sort_calendar_ascending_svg_react_1.default;
+var sort_calendar_descending_svg_react_1 = __importDefault(require("../assets/icons/sort-calendar-descending.svg?react"));
+exports.SortCalendarDescendingIcon = sort_calendar_descending_svg_react_1.default;
 var spinner_third_svg_react_1 = __importDefault(require("../assets/icons/spinner-third.svg?react"));
 exports.SpinnerIcon = spinner_third_svg_react_1.default;
 var table_columns_svg_react_1 = __importDefault(require("../assets/icons/table-columns.svg?react"));
@@ -88,6 +98,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 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"));
 exports.UpIcon = up_svg_react_1.default;
 var user_tie_svg_react_1 = __importDefault(require("../assets/icons/user-tie.svg?react"));

package/dist/components/auth/LoginForm.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const LoginForm: FC;

package/dist/components/auth/LoginForm.js

@@ -0,0 +1,47 @@
+"use strict";
+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 styles_1 = require("./styles");
+var VerticalLabel_1 = require("../forms/VerticalLabel");
+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];
+    var _c = (0, react_1.useState)(false), isLoading = _c[0], setIsLoading = _c[1];
+    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, providers_1.useAuthentication)().login;
+    var onLoginClicked = (0, react_1.useCallback)(function () {
+        setError('');
+        setIsLoading(true);
+        login(username, password).then(function (success) {
+            setIsLoading(false);
+            if (success) {
+                (0, react_router_dom_1.redirect)('/');
+            }
+            else {
+                setError('Identifiants invalides');
+            }
+        });
+    }, [login, password, username]);
+    (0, react_1.useEffect)(function () {
+        if (usernameInputRef.current && passwordInputRef.current) {
+            var input = !username
+                ? usernameInputRef.current
+                : passwordInputRef.current;
+            input.select();
+            input.focus();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    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 ?" })] }) }));
+};
+exports.LoginForm = LoginForm;

package/dist/components/auth/LoginPage.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const LoginPage: FC;

package/dist/components/auth/LoginPage.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoginPage = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_router_dom_1 = require("react-router-dom");
+var LoginPage = function () {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-row h-full w-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "relative hidden w-0 flex-1 lg:block", children: (0, jsx_runtime_1.jsx)("img", { className: "absolute inset-0 h-full w-full object-cover", alt: "" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-1 flex-col justify-space-evenly overflow-y-auto px-4 py-12 sm:px-6 lg:flex-none lg:px-24 xl:px-36", children: (0, jsx_runtime_1.jsxs)("div", { className: "mx-auto w-full max-w-sm lg:max-w-96 lg:w-96 xl:max-w-[32rem] xl:w-[32rem]", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("img", { className: "h-20 w-auto inline-block", src: "/logo192.png", alt: "Burotel" }), (0, jsx_runtime_1.jsx)("h2", { className: "mt-8 text-2xl font-bold leading-9 tracking-tight text-gray-900", children: "Connectez-vous" })] }), (0, jsx_runtime_1.jsx)("div", { className: "mt-10 sm:mx-auto sm:w-full sm:max-w-[640px]", children: (0, jsx_runtime_1.jsx)("div", { className: "bg-white px-6 py-12 shadow sm:rounded-lg sm:px-12", children: (0, jsx_runtime_1.jsx)(react_router_dom_1.Outlet, {}) }) })] }) })] }));
+};
+exports.LoginPage = LoginPage;

package/dist/components/auth/PasswordRecoveryForm.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const PasswordRecoveryForm: FC;

package/dist/components/auth/PasswordRecoveryForm.js

@@ -0,0 +1,24 @@
+"use strict";
+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 ui_1 = require("../ui");
+var styles_1 = require("./styles");
+var react_router_dom_1 = require("react-router-dom");
+var Message_1 = require("../ui/Message");
+var VerticalLabel_1 = require("../forms/VerticalLabel");
+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, 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)(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.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const PasswordResetForm: FC;

package/dist/components/auth/PasswordResetForm.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PasswordResetForm = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var ui_1 = require("@addev-be/ui");
+var react_1 = require("react");
+var react_router_dom_1 = require("react-router-dom");
+var styles_1 = require("./styles");
+var Message_1 = require("../ui/Message");
+var VerticalLabel_1 = require("../forms/VerticalLabel");
+var PasswordResetForm = function () {
+    var key = (0, react_router_dom_1.useParams)().key;
+    var _a = (0, react_1.useState)(''), password1 = _a[0], setPassword1 = _a[1];
+    var _b = (0, react_1.useState)(''), password2 = _b[0], setPassword2 = _b[1];
+    var _c = (0, react_1.useState)(-1), keyStatus = _c[0], setKeyStatus = _c[1];
+    var _d = (0, react_1.useState)(-1), status = _d[0], setStatus = _d[1];
+    var _e = (0, react_1.useState)(''), error = _e[0], setError = _e[1];
+    var _f = (0, ui_1.useAuthentication)(), resetPassword = _f.resetPassword, checkRecoveryKey = _f.checkRecoveryKey;
+    (0, react_1.useEffect)(function () {
+        if (key) {
+            checkRecoveryKey(key).then(function (status) {
+                setKeyStatus(status);
+            });
+        }
+    }, [checkRecoveryKey, key]);
+    var onSubmitClicked = (0, react_1.useCallback)(function () {
+        if (key) {
+            if (password1 !== password2) {
+                setError('Les mots de passe ne sont pas identiques');
+                return;
+            }
+            resetPassword(key, password1).then(function (status) {
+                setStatus(status);
+                setError(status === 4
+                    ? 'Le mot de passe est trop faible (min. 8 caractères requis)'
+                    : '');
+            });
+        }
+    }, [key, password1, password2, resetPassword]);
+    var content = (0, react_1.useMemo)(function () {
+        if (keyStatus < 0) {
+            return (0, jsx_runtime_1.jsx)("p", { children: "Chargement..." });
+        }
+        if (keyStatus > 0) {
+            return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Message_1.Message, { type: "error", children: "La cl\u00E9 de r\u00E9cup\u00E9ration fournie est invalide ou expir\u00E9e" }) }));
+        }
+        switch (status) {
+            case 0:
+                return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Message_1.Message, { type: "success", children: "Votre mot de passe a \u00E9t\u00E9 r\u00E9initialis\u00E9 avec succ\u00E8s. Vous pouvez maintenant vous connecter." }) }));
+            default:
+                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" })] }) }));
+};
+exports.PasswordResetForm = PasswordResetForm;

package/dist/components/auth/index.d.ts

@@ -0,0 +1,4 @@
+export * from './LoginForm';
+export * from './LoginPage';
+export * from './PasswordRecoveryForm';
+export * from './PasswordResetForm';

package/dist/components/auth/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./LoginForm"), exports);
+__exportStar(require("./LoginPage"), exports);
+__exportStar(require("./PasswordRecoveryForm"), exports);
+__exportStar(require("./PasswordResetForm"), exports);

package/dist/components/auth/styles.d.ts

@@ -0,0 +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>, 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/auth/styles.js

@@ -0,0 +1,16 @@
+"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.FormContainer = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.FormContainer = styled_components_1.default.form.attrs({
+    className: 'FormContainer',
+    onSubmit: function (e) { return e.preventDefault(); },
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n\n  & > a {\n    text-align: center;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n\n  & > a {\n    text-align: center;\n  }\n"])));
+var templateObject_1;

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

@@ -106,7 +106,7 @@ exports.advancedPercentageColumn = advancedPercentageColumn;
 var advancedCheckboxColumn = function (key, title, options) {
     var _a;
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: row[key] }), (0, jsx_runtime_1.jsx)("span", { children: row[key] ? ' Oui' : ' Non' })] })); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, helpers_1.numberFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : 0; } }) }, options),
+        _a[key] = __assign({ name: title, render: function (row) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: row[key], readOnly: true }), (0, jsx_runtime_1.jsx)("span", { children: row[key] ? ' Oui' : ' Non' })] })); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, helpers_1.numberFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : 0; } }) }, options),
         _a);
 };
 exports.advancedCheckboxColumn = advancedCheckboxColumn;

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

@@ -125,7 +125,7 @@ var AdvancedRequestDataGrid = function (_a) {
                     fieldName: columnKey,
                 },
             ],
-            conditions: __spreadArray(__spreadArray([], ((_b = props.conditions) !== null && _b !== void 0 ? _b : []), true), Object.values(lodash_1.default.pickBy(conditions, function (condition, key) { return key !== columnKey; })), true).filter(function (condition) { return condition.field !== columnKey; }),
+            conditions: __spreadArray(__spreadArray([], ((_b = props.conditions) !== null && _b !== void 0 ? _b : []), true), Object.values(lodash_1.default.pickBy(conditions, function (_, key) { return key !== columnKey; })), true).filter(function (condition) { return condition.field !== columnKey; }),
             orderBy: [
                 {
                     field: (_g = (_e = (_c = props.columns[columnKey].filterField) !== null && _c !== void 0 ? _c : (_d = props.columns[columnKey].field) === null || _d === void 0 ? void 0 : _d.fieldAlias) !== null && _e !== void 0 ? _e : (_f = props.columns[columnKey].field) === null || _f === void 0 ? void 0 : _f.fieldName) !== null && _g !== void 0 ? _g : columnKey,

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

@@ -0,0 +1,13 @@
+import { DataGridFilterFormatter, DataGridFilterGroup, DataGridFilterRenderer, DataGridFilterValue } from '../types';
+type FilterValuesScrollerProps = {
+    values: DataGridFilterValue[];
+    rowHeight?: number;
+    formatter: DataGridFilterFormatter;
+    renderer: DataGridFilterRenderer;
+    onRangeChange?: (startIndex: number, length: number) => void;
+    onToggle?: (values: DataGridFilterValue[]) => void;
+    selectedValues?: DataGridFilterValue[];
+    groups?: DataGridFilterGroup[];
+};
+export declare const FilterValuesScroller: ({ values, rowHeight, onRangeChange, onToggle, formatter, renderer, selectedValues, groups, }: FilterValuesScrollerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,71 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+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.FilterValuesScroller = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable @typescript-eslint/no-explicit-any */
+var styles = __importStar(require("./styles"));
+var helpers_1 = require("../helpers");
+var react_1 = require("react");
+var lodash_1 = require("lodash");
+var hooks_1 = require("../../../../hooks");
+var CheckboxTemplate = function (_a) {
+    var selectedValues = _a.selectedValues, value = _a.value, index = _a.index, style = _a.style, onToggle = _a.onToggle;
+    var checked = (0, react_1.useMemo)(function () { return value.values.every(function (v) { return selectedValues.includes(v); }); }, [selectedValues, value.values]);
+    return ((0, jsx_runtime_1.jsxs)(styles.FilterValueContainer, { style: __assign(__assign({}, style), { paddingLeft: "".concat(value.level, "rem") }), title: value.title, onClick: function () { return onToggle === null || onToggle === void 0 ? void 0 : onToggle(value.values); }, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: checked, readOnly: true }), (0, jsx_runtime_1.jsx)("span", { children: value.displayValue || '(Vides)' })] }, index));
+};
+var FilterValuesScroller = function (_a) {
+    var values = _a.values, _b = _a.rowHeight, rowHeight = _b === void 0 ? styles.DEFAULT_FILTER_ROW_HEIGHT : _b, onRangeChange = _a.onRangeChange, onToggle = _a.onToggle, _c = _a.formatter, formatter = _c === void 0 ? helpers_1.defaultRendererAndFormatter : _c, _d = _a.renderer, renderer = _d === void 0 ? helpers_1.defaultRendererAndFormatter : _d, _e = _a.selectedValues, selectedValues = _e === void 0 ? [] : _e, groups = _a.groups;
+    var scrollableRef = (0, react_1.useRef)(null);
+    var height = (0, hooks_1.useElementSize)(scrollableRef.current).height;
+    var tolerance = 20;
+    var _f = (0, react_1.useState)(0), scrollTop = _f[0], setScrollTop = _f[1];
+    var index = Math.floor(scrollTop / rowHeight);
+    var length = Math.ceil(height / rowHeight);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    var onScroll = (0, react_1.useCallback)((0, lodash_1.debounce)(function (e) {
+        var target = e.target;
+        setScrollTop(function () { return target.scrollTop; });
+    }, 50), []);
+    var checkboxes = (0, react_1.useMemo)(function () { return (0, helpers_1.getCheckboxes)(values, '', renderer, formatter, groups); }, [values, groups, renderer, formatter]);
+    var visibleCheckboxes = checkboxes.slice(Math.max(0, index - tolerance), index + length + 1 + tolerance);
+    var firstCheckboxTop = Math.max(0, index - tolerance) * rowHeight;
+    (0, react_1.useEffect)(function () {
+        onRangeChange === null || onRangeChange === void 0 ? void 0 : onRangeChange(index, length);
+    }, [index, length, onRangeChange]);
+    return ((0, jsx_runtime_1.jsx)(styles.FilterValuesScrollerContainer, { ref: scrollableRef, onScroll: onScroll, "$rowHeight": rowHeight, children: (0, jsx_runtime_1.jsx)("div", { style: { height: "".concat(checkboxes.length * rowHeight, "px") }, children: visibleCheckboxes.map(function (value, index) { return ((0, jsx_runtime_1.jsx)(CheckboxTemplate, { style: { top: firstCheckboxTop + index * rowHeight + 'px' }, selectedValues: selectedValues, value: value, index: index, onToggle: onToggle }, index)); }) }) }));
+};
+exports.FilterValuesScroller = FilterValuesScroller;

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

@@ -64,21 +64,22 @@ var helpers_1 = require("../helpers");
 var lodash_1 = require("lodash");
 var react_1 = require("react");
 var ContextMenu_1 = require("../../../ui/ContextMenu");
-var FilterValuesScroller_1 = require("../FilterValuesScroller");
+var FilterValuesScroller_1 = require("./FilterValuesScroller");
 var forms_1 = require("../../../forms");
 var hooks_1 = require("./hooks");
 var sortAsc = {
     number: ['Trier du plus petit au plus grand', Icons_1.ArrowDown19Icon],
     text: ['Trier de A à Z', Icons_1.ArrowDownAZIcon],
-    // date: 'Trier du plus ancien au plus récent',
+    date: ['Trier du plus ancien au plus récent', Icons_1.SortCalendarAscendingIcon],
 };
 var sortDesc = {
     number: ['Trier du plus grand au plus petit', Icons_1.ArrowUp91Icon],
     text: ['Trier de Z à A', Icons_1.ArrowUpZAIcon],
-    // date: 'Trier du plus récent au plus ancien',
+    date: ['Trier du plus récent au plus ancien', Icons_1.SortCalendarDescendingIcon],
 };
 var footerFunctionsTexts = {
     average: 'Moyenne',
+    avg: 'Moyenne',
     count: 'Nombre',
     max: 'Maximum',
     min: 'Minimum',
@@ -86,6 +87,7 @@ var footerFunctionsTexts = {
 };
 var footerFunctionsIcons = {
     average: Icons_1.XBarIcon,
+    avg: Icons_1.XBarIcon,
     count: Icons_1.TallyIcon,
     max: Icons_1.ArrowUpBigSmallIcon,
     min: Icons_1.ArrowDownBigSmallIcon,
@@ -165,11 +167,10 @@ var DataGridFilterMenu = function (_a) {
         }
     }, []);
     var checkboxesComponent = (0, react_1.useMemo)(function () {
-        if (column.type === 'date') {
-            var groups = (0, helpers_1.getDateGroups)(filteredAvailableValues);
-            return ((0, jsx_runtime_1.jsx)(FilterValuesScroller_1.FilterValuesScroller, { values: filteredAvailableValues, selectedValues: selectedValues, onToggle: toggleValues, formatter: formatter, renderer: renderer, groups: groups }));
-        }
-        return ((0, jsx_runtime_1.jsx)(FilterValuesScroller_1.FilterValuesScroller, { values: filteredAvailableValues, selectedValues: selectedValues, onToggle: toggleValues, formatter: formatter, renderer: renderer }));
+        var groups = column.type === 'date'
+            ? (0, helpers_1.getDateGroups)(filteredAvailableValues)
+            : undefined;
+        return ((0, jsx_runtime_1.jsx)(FilterValuesScroller_1.FilterValuesScroller, { values: filteredAvailableValues, selectedValues: selectedValues, onToggle: toggleValues, formatter: formatter, renderer: renderer, groups: groups }));
     }, [
         column.type,
         filteredAvailableValues,

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

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

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

@@ -7,8 +7,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Separator = exports.CheckboxesContainer = exports.InputContainer = void 0;
+exports.FilterValuesScrollerContainer = exports.FilterValueContainer = exports.Separator = exports.CheckboxesContainer = exports.InputContainer = exports.DEFAULT_FILTER_ROW_HEIGHT = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
+exports.DEFAULT_FILTER_ROW_HEIGHT = 24;
 exports.InputContainer = styled_components_1.default.div.attrs({
     className: 'InputContainer',
 })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  border-radius: var(--rounded-md);\n  padding: 0 var(--space-1);\n\n  svg {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: var(--space-4);\n    display: flex;\n    align-items: center;\n    fill: var(--color-neutral-400);\n    width: var(--space-4);\n    height: var(--space-4);\n  }\n\n  input {\n    padding-left: var(--space-8);\n  }\n"], ["\n  position: relative;\n  border-radius: var(--rounded-md);\n  padding: 0 var(--space-1);\n\n  svg {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: var(--space-4);\n    display: flex;\n    align-items: center;\n    fill: var(--color-neutral-400);\n    width: var(--space-4);\n    height: var(--space-4);\n  }\n\n  input {\n    padding-left: var(--space-8);\n  }\n"])));
@@ -18,4 +19,13 @@ exports.CheckboxesContainer = styled_components_1.default.div.attrs({
 exports.Separator = styled_components_1.default.div.attrs({
     className: 'Separator',
 })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-top: 1px solid var(--color-neutral-200);\n  margin: var(--space-1) 0;\n"], ["\n  border-top: 1px solid var(--color-neutral-200);\n  margin: var(--space-1) 0;\n"])));
-var templateObject_1, templateObject_2, templateObject_3;
+exports.FilterValueContainer = styled_components_1.default.div.attrs({
+    className: 'FilterValueContainer',
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  cursor: pointer;\n  &:hover {\n    background-color: var(--color-neutral-50);\n  }\n"], ["\n  position: absolute;\n  left: 0;\n  right: 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  cursor: pointer;\n  &:hover {\n    background-color: var(--color-neutral-50);\n  }\n"])));
+exports.FilterValuesScrollerContainer = styled_components_1.default.div.attrs({
+    className: 'FilterValuesScrollerContainer',
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: block;\n  font-size: var(--text-base);\n  background-color: var(--color-neutral-0);\n  overflow-y: scroll;\n  overflow-x: hidden;\n  height: 100%;\n\n  & > div {\n    position: relative;\n  }\n\n  & ", " {\n    position: absolute;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    height: ", ";\n\n    input[type='checkbox'] {\n      margin-right: var(--space-1);\n    }\n  }\n"], ["\n  display: block;\n  font-size: var(--text-base);\n  background-color: var(--color-neutral-0);\n  overflow-y: scroll;\n  overflow-x: hidden;\n  height: 100%;\n\n  & > div {\n    position: relative;\n  }\n\n  & ", " {\n    position: absolute;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    height: ", ";\n\n    input[type='checkbox'] {\n      margin-right: var(--space-1);\n    }\n  }\n"])), exports.FilterValueContainer, function (_a) {
+    var _b = _a.$rowHeight, $rowHeight = _b === void 0 ? exports.DEFAULT_FILTER_ROW_HEIGHT : _b;
+    return "".concat($rowHeight, "px");
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

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

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

@@ -0,0 +1,71 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridRowTemplate = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styles = __importStar(require("./styles"));
+var DataGridCell_1 = require("./DataGridCell");
+var react_1 = require("react");
+var DataGridRowTemplate = function (_a) {
+    var _b, _c;
+    var item = _a.item, index = _a.index, context = _a.context;
+    var _d = (0, react_1.useContext)(context), visibleColumns = _d.visibleColumns, rowKeyGetter = _d.rowKeyGetter, toggleSelection = _d.toggleSelection, props = __rest(_d, ["visibleColumns", "rowKeyGetter", "toggleSelection"]);
+    if (!item) {
+        return ((0, jsx_runtime_1.jsxs)(styles.DataGridRow, { children: [!!props.selectable && ((0, jsx_runtime_1.jsx)(styles.LoadingCell, { className: "animate-pulse", children: (0, jsx_runtime_1.jsx)("div", {}) })), visibleColumns.map(function (_, colIndex) { return ((0, jsx_runtime_1.jsx)(styles.LoadingCell, { className: "animate-pulse", children: (0, jsx_runtime_1.jsx)("div", {}) }, "loading-".concat(index, "-").concat(colIndex))); })] }, "loading-row-".concat(index)));
+    }
+    var key = rowKeyGetter(item);
+    var selected = props.selectedKeys.includes(key);
+    var _e = (_c = (_b = props.rowClassNameGetter) === null || _b === void 0 ? void 0 : _b.call(props, item)) !== null && _c !== void 0 ? _c : {
+        className: '',
+        style: undefined,
+    }, className = _e.className, style = _e.style;
+    return ((0, jsx_runtime_1.jsxs)(styles.DataGridRow, { children: [!!props.selectable && ((0, jsx_runtime_1.jsx)(styles.SelectionCell, { onClick: function () { return toggleSelection(key); }, children: (0, jsx_runtime_1.jsx)("input", { type: "checkbox", value: key, checked: selected, readOnly: true }) }, "__select_checkbox__")), visibleColumns.map(function (_a, index) {
+                var key = _a[0], col = _a[1];
+                return ((0, jsx_runtime_1.jsx)(DataGridCell_1.DataGridCell, __assign({}, (index === 0 ? { className: className, style: style } : {}), { row: item, rowIndex: index, column: col, columnIndex: index, context: context, columnKey: key }), "loading-".concat(index, "-").concat(index)));
+            })] }, key));
+};
+exports.DataGridRowTemplate = DataGridRowTemplate;