@alveole/components 1.10.0 → 2.0.0-alpha.1

package/dist/ui/DataTable/DataTable.demo.deployments.js

@@ -0,0 +1,159 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from '@alveole/theme';
+import { format } from 'date-fns/format';
+import { formatDistanceToNowStrict } from 'date-fns/formatDistanceToNowStrict';
+import { fr } from 'date-fns/locale/fr';
+import React from 'react';
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
+import { ActionMenu } from '../ActionMenu';
+import { Avatar } from '../Avatar';
+import { Badge } from '../Badge';
+import { ButtonIcon } from '../Button';
+import { LucideIcon } from '../LucideIcon';
+import { Popover } from '../Popover';
+import { Tag } from '../Tag';
+export const deployments = [
+    {
+        id: 'd1',
+        message: 'Bump follow-redirects from 1.15.9 to 1.16.0',
+        status: 'error',
+        duration: '1m 51s',
+        environment: 'preview',
+        commit: 'f3c020f',
+        source: 'dependabot/npm_and_yarn/follow-redirects…',
+        date: new Date('2026-07-15T14:32:00Z'),
+        author: 'dependabot',
+    },
+    {
+        id: 'd2',
+        message: 'Bump axios from 1.8.4 to 1.15.0',
+        status: 'error',
+        duration: '1m 51s',
+        environment: 'preview',
+        commit: 'f0e960b',
+        source: 'dependabot/npm_and_yarn/axios-1.15.0',
+        date: new Date('2026-07-11T09:12:00Z'),
+        author: 'dependabot',
+    },
+    {
+        id: 'd3',
+        message: 'Bump serialize-javascript et terser-webpack-plugin',
+        status: 'error',
+        duration: '1m 43s',
+        environment: 'preview',
+        commit: '638473a',
+        source: 'dependabot/npm_and_yarn/multi-0d13b2d87f',
+        date: new Date('2026-06-29T18:47:00Z'),
+        author: 'dependabot',
+    },
+    {
+        id: 'd4',
+        message: 'Bump yaml',
+        status: 'error',
+        duration: '1m 55s',
+        environment: 'preview',
+        commit: 'd59cb81',
+        source: 'dependabot/npm_and_yarn/multi-c136cad177',
+        date: new Date('2026-06-26T07:58:00Z'),
+        author: 'dependabot',
+    },
+    {
+        id: 'd5',
+        message: '✨ Merge pull request #9 — mdast-util-to-hast 13.2.1',
+        status: 'ready',
+        duration: '2m 1s',
+        environment: 'production',
+        commit: '9d71b6c',
+        source: 'main',
+        date: new Date('2025-12-02T14:04:32Z'),
+        author: 'cprodhomme',
+    },
+    {
+        id: 'd6',
+        message: 'Bump mdast-util-to-hast from 13.2.0 à 13.2.1',
+        status: 'ready',
+        duration: '1m 58s',
+        environment: 'preview',
+        commit: '9bdc055',
+        source: 'dependabot/npm_and_yarn/mdast-util-to-ha…',
+        date: new Date('2025-12-02T13:58:00Z'),
+        author: 'dependabot',
+    },
+    {
+        id: 'd7',
+        message: '🎨 Ajoute un style sur le blog',
+        status: 'ready',
+        duration: '51s',
+        environment: 'production',
+        commit: '7c70351',
+        source: 'main',
+        date: new Date('2026-04-18T10:21:00Z'),
+        author: 'cprodhomme',
+    },
+    {
+        id: 'd8',
+        message: '✨ feat(posts): add metaDescription field',
+        status: 'ready',
+        duration: '49s',
+        environment: 'production',
+        commit: 'ff3f424',
+        source: 'main',
+        date: new Date('2026-04-18T09:47:00Z'),
+        author: 'cprodhomme',
+    },
+];
+const localTimeZoneLabel = (() => {
+    const offsetMinutes = -new Date().getTimezoneOffset();
+    const sign = offsetMinutes >= 0 ? '+' : '-';
+    return `GMT${sign}${Math.abs(offsetMinutes) / 60}`;
+})();
+const formatTimestamp = (date, timeZone) => new Intl.DateTimeFormat('fr-FR', { dateStyle: 'long', timeStyle: 'medium', timeZone }).format(date);
+const DeploymentDateCell = ({ deployment }) => {
+    const [open, setOpen] = React.useState(false);
+    const { text, color } = useTheme();
+    return (_jsx(Popover, { placement: "left", open: open, setOpen: setOpen, renderTrigger: () => (_jsx(Box, { onHoverIn: () => setOpen(true), onHoverOut: () => setOpen(false), children: _jsx(Typography, { style: { ...text['Corps de texte'].XS.Regular, color: color.light.text['mention-grey'] }, children: format(deployment.date, 'd MMM', { locale: fr }) }) })), children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: '1W', style: { minWidth: 260 }, onHoverIn: () => setOpen(true), onHoverOut: () => setOpen(false), children: [_jsx(Typography, { style: text['Corps de texte'].SM.Regular, children: formatDistanceToNowStrict(deployment.date, { locale: fr, addSuffix: true }) }), _jsxs(Box, { display: "flex", flexDirection: "row", gap: '1W', justify: "space-between", style: { alignItems: 'center' }, children: [_jsx(Tag, { size: "sm", children: "UTC" }), _jsx(Typography, { style: text['Corps de texte'].SM.Regular, children: formatTimestamp(deployment.date, 'UTC') })] }), _jsxs(Box, { display: "flex", flexDirection: "row", gap: '1W', justify: "space-between", style: { alignItems: 'center' }, children: [_jsx(Tag, { size: "sm", children: localTimeZoneLabel }), _jsx(Typography, { style: text['Corps de texte'].SM.Regular, children: formatTimestamp(deployment.date) })] })] }) }));
+};
+const DeploymentActionsCell = () => {
+    const [open, setOpen] = React.useState(false);
+    return (_jsx(Box, { p: '1V', children: _jsxs(ActionMenu, { placement: "bottom-end", open: open, setOpen: setOpen, renderTrigger: () => (_jsx(ButtonIcon, { variant: "tertiary", size: "sm", icon: "MoreHorizontal", accessibilityLabel: "Actions du d\u00E9ploiement" })), children: [_jsx(ActionMenu.Item, { title: "Voir les d\u00E9tails", leading: "Eye" }), _jsx(ActionMenu.Item, { title: "Red\u00E9ployer", leading: "RefreshCw" }), _jsx(ActionMenu.Item, { title: "Copier l'URL", leading: "Link" }), _jsx(ActionMenu.Item, { title: "Supprimer", leading: "Trash" })] }) }));
+};
+const DeploymentMessageCell = ({ deployment }) => {
+    const { text } = useTheme();
+    return _jsx(Typography, { style: text['Corps de texte'].SM.Regular, children: deployment.message });
+};
+const DeploymentStatusCell = ({ deployment }) => {
+    const { text, color } = useTheme();
+    return (_jsxs(Box, { display: "flex", flexDirection: "row", gap: '1W', style: { alignItems: 'center' }, children: [_jsx(Badge, { variant: deployment.status === 'error' ? 'error' : 'success', size: "sm", children: deployment.status === 'error' ? 'Error' : 'Ready' }), _jsx(Typography, { style: { ...text['Corps de texte'].SM.Regular, color: color.light.text['mention-grey'] }, children: deployment.duration })] }));
+};
+const DeploymentEnvironmentCell = ({ deployment }) => (_jsx(Tag, { size: "sm", children: deployment.environment === 'production' ? 'Production' : 'Preview' }));
+const DeploymentCommitCell = ({ deployment }) => {
+    const { text } = useTheme();
+    return (_jsxs(Box, { display: "flex", flexDirection: "row", gap: '1V', style: { alignItems: 'center' }, children: [_jsx(LucideIcon, { name: "GitCommitHorizontal", size: "sm" }), _jsx(Typography, { style: { ...text['Corps de texte'].SM.Regular, fontFamily: 'monospace' }, children: deployment.commit })] }));
+};
+const DeploymentSourceCell = ({ deployment }) => {
+    const { text } = useTheme();
+    return (_jsxs(Box, { display: "flex", flexDirection: "row", gap: '1V', style: { alignItems: 'center', minWidth: 0 }, children: [_jsx(LucideIcon, { name: "GitBranch", size: "sm" }), _jsx(Typography, { style: {
+                    ...text['Corps de texte'].SM.Regular,
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                }, children: deployment.source })] }));
+};
+// Chaque cellule composee lit le theme pour son compte : la table de colonnes redevient de la
+// donnee, qui dit la largeur et l'entete de chaque colonne et rien de plus.
+export const deploymentColumns = [
+    { id: 'message', header: 'Déploiement', width: 400, renderCell: d => _jsx(DeploymentMessageCell, { deployment: d }) },
+    { id: 'status', header: 'Statut', width: 140, renderCell: d => _jsx(DeploymentStatusCell, { deployment: d }) },
+    {
+        id: 'environment',
+        header: 'Environnement',
+        width: 100,
+        renderCell: d => _jsx(DeploymentEnvironmentCell, { deployment: d }),
+    },
+    { id: 'commit', header: 'Commit', width: 110, renderCell: d => _jsx(DeploymentCommitCell, { deployment: d }) },
+    { id: 'source', header: 'Source', width: 353, renderCell: d => _jsx(DeploymentSourceCell, { deployment: d }) },
+    { id: 'date', header: 'Date', width: 70, renderCell: d => _jsx(DeploymentDateCell, { deployment: d }) },
+    { id: 'author', header: '', width: 56, renderCell: d => _jsx(Avatar, { size: "sm", fallbackText: d.author }) },
+    { id: 'actions', header: '', width: 40, align: 'end', renderCell: () => _jsx(DeploymentActionsCell, {}) },
+];

package/dist/ui/DataTable/DataTable.demo.repositories.d.ts

@@ -0,0 +1,27 @@
+import { DataTableColumn } from './DataTable.types';
+export type Repository = {
+    id: string;
+    name: string;
+    description: string;
+    visibility: 'Public' | 'Internal';
+    updatedAt: string;
+    owner: string;
+};
+export declare const repositories: Repository[];
+export declare const manyRepositories: Repository[];
+export declare const baseColumns: DataTableColumn<Repository>[];
+export type RepositoryDetailed = Repository & {
+    language: string;
+    stars: number;
+    forks: number;
+    openIssues: number;
+    pullRequests: number;
+    lastCommit: string;
+    ciStatus: 'success' | 'failure' | 'pending';
+    coverage: string;
+    license: string;
+    size: string;
+};
+export declare const repositoriesDetailed: RepositoryDetailed[];
+export declare const manyColumns: DataTableColumn<RepositoryDetailed>[];
+//# sourceMappingURL=DataTable.demo.repositories.d.ts.map

package/dist/ui/DataTable/DataTable.demo.repositories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.demo.repositories.d.ts","sourceRoot":"","sources":["../../../src/ui/DataTable/DataTable.demo.repositories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAMpD,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,QAAQ,GAAG,UAAU,CAAC;IAClC,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,UAAU,EAyCpC,CAAC;AAIF,eAAO,MAAM,gBAAgB,EAAE,UAAU,EAEjC,CAAC;AAET,eAAO,MAAM,WAAW,EAAE,eAAe,CAAC,UAAU,CAAC,EAuBpD,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG;IAC5C,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;IAC5C,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,kBAAkB,EA2FpD,CAAC;AAcF,eAAO,MAAM,WAAW,EAAE,eAAe,CAAC,kBAAkB,CAAC,EAsF5D,CAAC"}

package/dist/ui/DataTable/DataTable.demo.repositories.js

@@ -0,0 +1,246 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
+import { Badge } from '../Badge';
+import { LucideIcon } from '../LucideIcon';
+export const repositories = [
+    {
+        id: 'repo_1',
+        name: 'codeql-dca-worker',
+        description: 'Internal',
+        visibility: 'Internal',
+        updatedAt: '2 heures',
+        owner: 'Ana Martins',
+    },
+    {
+        id: 'repo_2',
+        name: 'aegir',
+        description: 'Outils de build',
+        visibility: 'Public',
+        updatedAt: '3 heures',
+        owner: 'Joe Dalton',
+    },
+    {
+        id: 'repo_3',
+        name: 'strapi',
+        description: 'CMS headless',
+        visibility: 'Public',
+        updatedAt: '8 heures',
+        owner: 'Peter Parker',
+    },
+    {
+        id: 'repo_4',
+        name: 'codeql-ci-nightlies',
+        description: 'Analyse de sécurité',
+        visibility: 'Public',
+        updatedAt: 'hier',
+        owner: 'John Snow',
+    },
+    {
+        id: 'repo_5',
+        name: 'dependabot-updates',
+        description: 'Mises à jour auto',
+        visibility: 'Public',
+        updatedAt: 'la semaine dernière',
+        owner: 'Ana Martins',
+    },
+];
+// Les 5 repositories ci-dessus ne remplissent jamais une zone de scroll : la story
+// `StickyHeader` a besoin d'assez de lignes pour que l'en-tête ait quelque chose à survoler.
+export const manyRepositories = Array.from({ length: 6 }, (_, i) => repositories.map(repo => ({ ...repo, id: `${repo.id}_${i}` }))).flat();
+export const baseColumns = [
+    {
+        id: 'name',
+        header: 'Repository',
+        sortable: true,
+        renderCell: repo => _jsx(Typography, { children: repo.name }),
+    },
+    {
+        id: 'visibility',
+        header: 'Visibilité',
+        sortable: true,
+        renderCell: repo => (_jsx(Badge, { variant: repo.visibility === 'Public' ? 'info' : 'default', size: "sm", children: repo.visibility })),
+    },
+    {
+        id: 'updatedAt',
+        header: 'Mis à jour',
+        sortable: true,
+        renderCell: repo => _jsx(Typography, { children: repo.updatedAt }),
+    },
+];
+export const repositoriesDetailed = [
+    {
+        id: 'repo_1',
+        name: 'codeql-dca-worker',
+        description: 'Internal',
+        visibility: 'Internal',
+        updatedAt: '2 heures',
+        owner: 'Ana Martins',
+        language: 'TypeScript',
+        stars: 128,
+        forks: 12,
+        openIssues: 4,
+        pullRequests: 2,
+        lastCommit: 'a1b2c3d',
+        ciStatus: 'success',
+        coverage: '92%',
+        license: 'MIT',
+        size: '4.2 Mo',
+    },
+    {
+        id: 'repo_2',
+        name: 'aegir',
+        description: 'Outils de build',
+        visibility: 'Public',
+        updatedAt: '3 heures',
+        owner: 'Joe Dalton',
+        language: 'JavaScript',
+        stars: 1042,
+        forks: 87,
+        openIssues: 21,
+        pullRequests: 6,
+        lastCommit: 'e4f5g6h',
+        ciStatus: 'success',
+        coverage: '78%',
+        license: 'Apache-2.0',
+        size: '12.8 Mo',
+    },
+    {
+        id: 'repo_3',
+        name: 'strapi',
+        description: 'CMS headless',
+        visibility: 'Public',
+        updatedAt: '8 heures',
+        owner: 'Peter Parker',
+        language: 'JavaScript',
+        stars: 58210,
+        forks: 7420,
+        openIssues: 312,
+        pullRequests: 48,
+        lastCommit: 'i7j8k9l',
+        ciStatus: 'failure',
+        coverage: '64%',
+        license: 'MIT',
+        size: '86.4 Mo',
+    },
+    {
+        id: 'repo_4',
+        name: 'codeql-ci-nightlies',
+        description: 'Analyse de sécurité',
+        visibility: 'Public',
+        updatedAt: 'hier',
+        owner: 'John Snow',
+        language: 'YAML',
+        stars: 34,
+        forks: 3,
+        openIssues: 1,
+        pullRequests: 0,
+        lastCommit: 'm1n2o3p',
+        ciStatus: 'pending',
+        coverage: '—',
+        license: 'MIT',
+        size: '0.8 Mo',
+    },
+    {
+        id: 'repo_5',
+        name: 'dependabot-updates',
+        description: 'Mises à jour auto',
+        visibility: 'Public',
+        updatedAt: 'la semaine dernière',
+        owner: 'Ana Martins',
+        language: 'Ruby',
+        stars: 210,
+        forks: 18,
+        openIssues: 9,
+        pullRequests: 3,
+        lastCommit: 'q4r5s6t',
+        ciStatus: 'success',
+        coverage: '85%',
+        license: 'BSD-3-Clause',
+        size: '2.1 Mo',
+    },
+];
+const ciStatusLabel = {
+    success: 'Succès',
+    failure: 'Échec',
+    pending: 'En cours',
+};
+const ciStatusVariant = {
+    success: 'success',
+    failure: 'error',
+    pending: 'warning',
+};
+export const manyColumns = [
+    {
+        id: 'name',
+        header: 'Repository',
+        width: 200,
+        renderCell: repo => _jsx(Typography, { children: repo.name }),
+    },
+    { id: 'owner', header: 'Propriétaire', width: 140, renderCell: repo => _jsx(Typography, { children: repo.owner }) },
+    {
+        id: 'visibility',
+        header: 'Visibilité',
+        width: 110,
+        renderCell: repo => (_jsx(Badge, { variant: repo.visibility === 'Public' ? 'info' : 'default', size: "sm", children: repo.visibility })),
+    },
+    { id: 'language', header: 'Langage', width: 110, renderCell: repo => _jsx(Typography, { children: repo.language }) },
+    {
+        id: 'stars',
+        header: 'Étoiles',
+        width: 100,
+        align: 'end',
+        sortable: true,
+        renderCell: repo => _jsx(Typography, { children: repo.stars.toLocaleString('fr-FR') }),
+    },
+    {
+        id: 'forks',
+        header: 'Forks',
+        width: 90,
+        align: 'end',
+        sortable: true,
+        renderCell: repo => _jsx(Typography, { children: repo.forks.toLocaleString('fr-FR') }),
+    },
+    {
+        id: 'openIssues',
+        header: 'Issues ouvertes',
+        width: 130,
+        align: 'end',
+        renderCell: repo => _jsx(Typography, { children: repo.openIssues }),
+    },
+    {
+        id: 'pullRequests',
+        header: 'Pull requests',
+        width: 130,
+        align: 'end',
+        renderCell: repo => _jsx(Typography, { children: repo.pullRequests }),
+    },
+    {
+        id: 'ciStatus',
+        header: 'CI',
+        width: 110,
+        renderCell: repo => (_jsx(Badge, { variant: ciStatusVariant[repo.ciStatus], size: "sm", children: ciStatusLabel[repo.ciStatus] })),
+    },
+    {
+        id: 'coverage',
+        header: 'Couverture',
+        width: 110,
+        align: 'end',
+        renderCell: repo => _jsx(Typography, { children: repo.coverage }),
+    },
+    {
+        id: 'lastCommit',
+        header: 'Dernier commit',
+        width: 130,
+        renderCell: repo => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: '1V', style: { alignItems: 'center' }, children: [_jsx(LucideIcon, { name: "GitCommitHorizontal", size: "xs" }), _jsx(Typography, { style: { fontFamily: 'monospace' }, children: repo.lastCommit })] })),
+    },
+    {
+        id: 'updatedAt',
+        header: 'Mis à jour',
+        width: 150,
+        sortable: true,
+        renderCell: repo => _jsx(Typography, { children: repo.updatedAt }),
+    },
+    { id: 'license', header: 'Licence', width: 130, renderCell: repo => _jsx(Typography, { children: repo.license }) },
+    { id: 'size', header: 'Taille', width: 100, align: 'end', renderCell: repo => _jsx(Typography, { children: repo.size }) },
+];

package/dist/ui/DataTable/DataTable.js

@@ -1,58 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
 import { ScrollView } from 'react-native';
-import { Box, Typography } from '../../core';
-import { CheckboxContainer, CheckboxIndicator } from '../Checkbox';
+import { Box } from '../../core/Box';
+import { versStyleNatif } from '../../core/styleNatif/versStyleNatif';
+import { Typography } from '../../core/Typography';
 import { useStyles } from './DataTable.styles';
-import { DataTableHeaderCell } from './DataTableHeaderCell';
-import { DataTableRow } from './DataTableRow';
-const headerSelectionCellStyleBySize = {
-    sm: 'headerSelectionCellSm',
-    md: 'headerSelectionCellMd',
-    lg: 'headerSelectionCellLg',
-};
-const headerRowStyleBySize = {
-    sm: 'headerRowSm',
-    md: 'headerRowMd',
-    lg: 'headerRowLg',
-};
+import { DataTableHeaderRow } from './DataTableHeaderRow';
+import { DataTableRows } from './DataTableRows';
+import { useDataTableState } from './useDataTableState';
 export const DataTable = (props) => {
-    const { columns, data, keyExtractor, size = 'md', selectable = false, selectedKeys: controlledSelectedKeys, onSelectionChange, sort: controlledSort, onSortChange, onRowPress, hideHeader = false, renderNoContent, footer, } = props;
+    const { columns, data, size = 'md', selectable = false, onRowPress, hideHeader = false, stickyHeader = false, renderNoContent, footer, } = props;
     const styles = useStyles();
-    const [internalSelectedKeys, setInternalSelectedKeys] = React.useState([]);
-    const selectedKeys = controlledSelectedKeys ?? internalSelectedKeys;
-    const setSelectedKeys = (keys) => {
-        onSelectionChange?.(keys);
-        if (controlledSelectedKeys === undefined)
-            setInternalSelectedKeys(keys);
-    };
-    const [internalSort, setInternalSort] = React.useState(null);
-    const sort = controlledSort !== undefined ? controlledSort : internalSort;
-    const setSort = (next) => {
-        onSortChange?.(next);
-        if (controlledSort === undefined)
-            setInternalSort(next);
-    };
-    const rowKeys = React.useMemo(() => data.map((row, index) => keyExtractor(row, index)), [data, keyExtractor]);
-    const allSelected = selectable && rowKeys.length > 0 && rowKeys.every(key => selectedKeys.includes(key));
-    const someSelected = selectable && !allSelected && rowKeys.some(key => selectedKeys.includes(key));
-    const toggleAll = () => setSelectedKeys(allSelected ? [] : rowKeys);
-    const toggleRow = (rowKey, checked) => {
-        setSelectedKeys(checked ? [...selectedKeys, rowKey] : selectedKeys.filter(key => key !== rowKey));
-    };
-    const handleHeaderPress = (column) => {
-        if (sort?.columnId !== column.id) {
-            setSort({ columnId: column.id, direction: 'asc' });
-        }
-        else if (sort.direction === 'asc') {
-            setSort({ columnId: column.id, direction: 'desc' });
-        }
-        else {
-            setSort(null);
-        }
-    };
-    return (_jsxs(Box, { tag: "data-table", style: styles.table, children: [_jsxs(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: true, contentContainerStyle: styles.scrollContent, children: [!hideHeader && (_jsxs(Box, { tag: "data-table-header-row", style: [styles.headerRow, styles[headerRowStyleBySize[size]]], children: [selectable && (_jsx(Box, { tag: "data-table-header-selection-cell", style: [styles.headerSelectionCell, styles[headerSelectionCellStyleBySize[size]]], children: _jsx(CheckboxContainer, { id: "data-table--select-all", variant: "small", checked: someSelected ? 'indeterminate' : allSelected, onCheckedChange: toggleAll, children: _jsx(CheckboxIndicator, { variant: "small", indeterminate: someSelected }) }) })), columns.map(column => (_jsx(DataTableHeaderCell, { column: column, sortDirection: sort?.columnId === column.id ? sort.direction : undefined, size: size, onPress: () => handleHeaderPress(column) }, column.id)))] })), data.map((row, index) => {
-                        const rowKey = rowKeys[index];
-                        return (_jsx(DataTableRow, { row: row, rowIndex: index, rowKey: rowKey, columns: columns, selectable: selectable, selected: selectedKeys.includes(rowKey), size: size, noBorderBottom: !footer && index === data.length - 1, onSelectedChange: checked => toggleRow(rowKey, checked), onPress: onRowPress ? () => onRowPress(row, index) : undefined }, rowKey));
-                    })] }), data.length === 0 && (_jsx(Box, { tag: "data-table-empty", style: styles.emptyState, children: renderNoContent ? renderNoContent() : _jsx(Typography, { style: styles.emptyStateLabel, children: "Aucune donn\u00E9e" }) })), footer] }));
+    const { rowKeys, selectedKeys, sort, allSelected, someSelected, toggleAll, toggleRow, handleHeaderPress } = useDataTableState({ ...props, selectable });
+    return (_jsxs(Box, { tag: "data-table", style: styles.table, children: [_jsxs(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: true, contentContainerStyle: versStyleNatif(styles.scrollContent), children: [!hideHeader && (_jsx(DataTableHeaderRow, { columns: columns, sort: sort, size: size, selectable: selectable, allSelected: allSelected, someSelected: someSelected, sticky: stickyHeader, onToggleAll: toggleAll, onHeaderPress: handleHeaderPress })), _jsx(DataTableRows, { data: data, rowKeys: rowKeys, columns: columns, selectable: selectable, selectedKeys: selectedKeys, size: size, hasFooter: Boolean(footer), onRowSelectedChange: toggleRow, onRowPress: onRowPress })] }), data.length === 0 && (_jsx(Box, { tag: "data-table-empty", style: styles.emptyState, children: renderNoContent ? renderNoContent() : _jsx(Typography, { style: styles.emptyStateLabel, children: "Aucune donn\u00E9e" }) })), footer] }));
 };