@tsiky/components-r19 1.0.0 → 1.1.0

package/src/components/DynamicTable/ColumnSorter.tsx

@@ -1,185 +1,185 @@
-'use client';
-
-import React, { useEffect, useRef, useState } from 'react';
-import { ChevronsUpDown, ChevronUp, ChevronDown, X } from 'lucide-react';
-import type { SortConfig, TableColumn } from './tools/tableTypes';
-import styles from './TableauDynamique.module.css';
-
-interface ColumnSorterProps<T = unknown> {
-  columns: TableColumn<T>[];
-  sortConfig: SortConfig;
-  onSort: (sortConfig: SortConfig) => void;
-  onToggleFilters?: () => void;
-  filtersActive?: boolean;
-  showFilters?: boolean;
-}
-
-const isAlphaUpperCase = (s: string) => {
-  const letters = s.replace(/[^A-Za-zÀ-ÖØ-öø-ÿ]/g, '');
-  return letters.length > 0 && letters === letters.toUpperCase();
-};
-
-const ColumnSorter = <T,>({ columns, sortConfig, onSort }: ColumnSorterProps<T>) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const sortableColumns = columns.filter((col) => col.sortable);
-  const wrapperRef = useRef<HTMLDivElement | null>(null);
-
-  const handleSort = (key: string | null, direction: 'asc' | 'desc') => {
-    onSort({ key, direction });
-    setIsOpen(false);
-  };
-
-  const toggleOpen = () => setIsOpen((v) => !v);
-
-  const handleCancel = () => {
-    setIsOpen(false);
-  };
-
-  // fermer au clic extérieur + Échap (déjà en place)
-  useEffect(() => {
-    if (!isOpen) return;
-
-    const onPointerDown = (e: PointerEvent) => {
-      if (!wrapperRef.current) return;
-      const target = e.target as Node | null;
-      if (target && !wrapperRef.current.contains(target)) {
-        setIsOpen(false);
-      }
-    };
-
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        setIsOpen(false);
-      }
-    };
-
-    document.addEventListener('pointerdown', onPointerDown);
-    document.addEventListener('keydown', onKeyDown);
-
-    return () => {
-      document.removeEventListener('pointerdown', onPointerDown);
-      document.removeEventListener('keydown', onKeyDown);
-    };
-  }, [isOpen]);
-
-  // --> NO SCROLL on the table container while dropdown is open
-  useEffect(() => {
-    const tableWrapper = document.querySelector('[data-table-wrapper]') as HTMLElement | null;
-    if (!tableWrapper) return;
-
-    // sauvegarde la valeur inline actuelle pour restaurer plus tard
-    const previousInline = tableWrapper.style.overflow ?? '';
-
-    if (isOpen) {
-      // masquer scrollbars (on cache à la fois X et Y)
-      tableWrapper.style.overflow = 'hidden';
-    } else {
-      // restaurer à la fermeture
-      tableWrapper.style.overflow = previousInline;
-    }
-
-    // cleanup si le composant se démonte pendant que c'est ouvert
-    return () => {
-      tableWrapper.style.overflow = previousInline;
-    };
-  }, [isOpen]);
-
-  return (
-    <div className={styles.columnSorterContainer}>
-      <div className={styles.sorterControls}>
-        {sortableColumns.length > 0 && (
-          <div className={styles.sortDropdownWrapper} ref={wrapperRef}>
-            <button
-              className={styles.toggleSortButton}
-              onClick={toggleOpen}
-              aria-expanded={isOpen}
-              aria-haspopup='true'
-              type='button'
-            >
-              <ChevronsUpDown size={14} />
-              <span
-                className={`${styles.buttonTextCompact} ${
-                  isAlphaUpperCase('Sort') ? styles.uppercaseSmall : ''
-                }`}
-              >
-                Sort
-              </span>
-              {sortConfig.key &&
-                (sortConfig.direction === 'asc' ? (
-                  <ChevronUp size={14} />
-                ) : (
-                  <ChevronDown size={14} />
-                ))}
-            </button>
-
-            {isOpen && (
-              <div className={`${styles.sortDropdown} ${styles.sortDropdownInline}`} role='menu'>
-                <div className={styles.sortDropdownHeader}>
-                  <span>Trier par:</span>
-                  <button className={styles.closeButton} onClick={handleCancel} aria-label='Fermer'>
-                    <X size={16} />
-                  </button>
-                </div>
-
-                <div className={styles.sortDropdownContent}>
-                  {sortableColumns.map((column) => {
-                    const label = String(column.label ?? column.id);
-                    const smallUpper = isAlphaUpperCase(label);
-                    return (
-                      <div
-                        key={column.id}
-                        className={styles.sortDropdownItem}
-                        role='menuitem'
-                        tabIndex={0}
-                        onKeyDown={(e) => {
-                          if (e.key === 'Enter') handleSort(column.id, 'asc');
-                        }}
-                      >
-                        <span
-                          className={`${styles.columnSorterLabel} ${smallUpper ? styles.uppercaseSmall : ''}`}
-                          title={label}
-                          aria-label={label}
-                        >
-                          {label}
-                        </span>
-
-                        <div className={styles.sortDirectionButtons}>
-                          <button
-                            className={`${styles.sortDirectionButton} ${
-                              sortConfig.key === column.id && sortConfig.direction === 'asc'
-                                ? styles.activeSort
-                                : ''
-                            }`}
-                            onClick={() => handleSort(column.id, 'asc')}
-                            title='Trier par ordre croissant'
-                            type='button'
-                          >
-                            <ChevronUp size={12} />
-                          </button>
-                          <button
-                            className={`${styles.sortDirectionButton} ${
-                              sortConfig.key === column.id && sortConfig.direction === 'desc'
-                                ? styles.activeSort
-                                : ''
-                            }`}
-                            onClick={() => handleSort(column.id, 'desc')}
-                            title='Trier par ordre décroissant'
-                            type='button'
-                          >
-                            <ChevronDown size={12} />
-                          </button>
-                        </div>
-                      </div>
-                    );
-                  })}
-                </div>
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default ColumnSorter;
+'use client';
+
+import React, { useEffect, useRef, useState } from 'react';
+import { ChevronsUpDown, ChevronUp, ChevronDown, X } from 'lucide-react';
+import type { SortConfig, TableColumn } from './tools/tableTypes';
+import styles from './TableauDynamique.module.css';
+
+interface ColumnSorterProps<T = unknown> {
+  columns: TableColumn<T>[];
+  sortConfig: SortConfig;
+  onSort: (sortConfig: SortConfig) => void;
+  onToggleFilters?: () => void;
+  filtersActive?: boolean;
+  showFilters?: boolean;
+}
+
+const isAlphaUpperCase = (s: string) => {
+  const letters = s.replace(/[^A-Za-zÀ-ÖØ-öø-ÿ]/g, '');
+  return letters.length > 0 && letters === letters.toUpperCase();
+};
+
+const ColumnSorter = <T,>({ columns, sortConfig, onSort }: ColumnSorterProps<T>) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const sortableColumns = columns.filter((col) => col.sortable);
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+
+  const handleSort = (key: string | null, direction: 'asc' | 'desc') => {
+    onSort({ key, direction });
+    setIsOpen(false);
+  };
+
+  const toggleOpen = () => setIsOpen((v) => !v);
+
+  const handleCancel = () => {
+    setIsOpen(false);
+  };
+
+  // fermer au clic extérieur + Échap (déjà en place)
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const onPointerDown = (e: PointerEvent) => {
+      if (!wrapperRef.current) return;
+      const target = e.target as Node | null;
+      if (target && !wrapperRef.current.contains(target)) {
+        setIsOpen(false);
+      }
+    };
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('pointerdown', onPointerDown);
+    document.addEventListener('keydown', onKeyDown);
+
+    return () => {
+      document.removeEventListener('pointerdown', onPointerDown);
+      document.removeEventListener('keydown', onKeyDown);
+    };
+  }, [isOpen]);
+
+  // --> NO SCROLL on the table container while dropdown is open
+  useEffect(() => {
+    const tableWrapper = document.querySelector('[data-table-wrapper]') as HTMLElement | null;
+    if (!tableWrapper) return;
+
+    // sauvegarde la valeur inline actuelle pour restaurer plus tard
+    const previousInline = tableWrapper.style.overflow ?? '';
+
+    if (isOpen) {
+      // masquer scrollbars (on cache à la fois X et Y)
+      tableWrapper.style.overflow = 'hidden';
+    } else {
+      // restaurer à la fermeture
+      tableWrapper.style.overflow = previousInline;
+    }
+
+    // cleanup si le composant se démonte pendant que c'est ouvert
+    return () => {
+      tableWrapper.style.overflow = previousInline;
+    };
+  }, [isOpen]);
+
+  return (
+    <div className={styles.columnSorterContainer}>
+      <div className={styles.sorterControls}>
+        {sortableColumns.length > 0 && (
+          <div className={styles.sortDropdownWrapper} ref={wrapperRef}>
+            <button
+              className={styles.toggleSortButton}
+              onClick={toggleOpen}
+              aria-expanded={isOpen}
+              aria-haspopup='true'
+              type='button'
+            >
+              <ChevronsUpDown size={14} />
+              <span
+                className={`${styles.buttonTextCompact} ${
+                  isAlphaUpperCase('Sort') ? styles.uppercaseSmall : ''
+                }`}
+              >
+                Sort
+              </span>
+              {sortConfig.key &&
+                (sortConfig.direction === 'asc' ? (
+                  <ChevronUp size={14} />
+                ) : (
+                  <ChevronDown size={14} />
+                ))}
+            </button>
+
+            {isOpen && (
+              <div className={`${styles.sortDropdown} ${styles.sortDropdownInline}`} role='menu'>
+                <div className={styles.sortDropdownHeader}>
+                  <span>Trier par:</span>
+                  <button className={styles.closeButton} onClick={handleCancel} aria-label='Fermer'>
+                    <X size={16} />
+                  </button>
+                </div>
+
+                <div className={styles.sortDropdownContent}>
+                  {sortableColumns.map((column) => {
+                    const label = String(column.label ?? column.id);
+                    const smallUpper = isAlphaUpperCase(label);
+                    return (
+                      <div
+                        key={column.id}
+                        className={styles.sortDropdownItem}
+                        role='menuitem'
+                        tabIndex={0}
+                        onKeyDown={(e) => {
+                          if (e.key === 'Enter') handleSort(column.id, 'asc');
+                        }}
+                      >
+                        <span
+                          className={`${styles.columnSorterLabel} ${smallUpper ? styles.uppercaseSmall : ''}`}
+                          title={label}
+                          aria-label={label}
+                        >
+                          {label}
+                        </span>
+
+                        <div className={styles.sortDirectionButtons}>
+                          <button
+                            className={`${styles.sortDirectionButton} ${
+                              sortConfig.key === column.id && sortConfig.direction === 'asc'
+                                ? styles.activeSort
+                                : ''
+                            }`}
+                            onClick={() => handleSort(column.id, 'asc')}
+                            title='Trier par ordre croissant'
+                            type='button'
+                          >
+                            <ChevronUp size={12} />
+                          </button>
+                          <button
+                            className={`${styles.sortDirectionButton} ${
+                              sortConfig.key === column.id && sortConfig.direction === 'desc'
+                                ? styles.activeSort
+                                : ''
+                            }`}
+                            onClick={() => handleSort(column.id, 'desc')}
+                            title='Trier par ordre décroissant'
+                            type='button'
+                          >
+                            <ChevronDown size={12} />
+                          </button>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ColumnSorter;

package/src/components/DynamicTable/Pagination.tsx

@@ -1,115 +1,115 @@
-'use client';
-
-import React from 'react';
-import styles from './TableauDynamique.module.css';
-
-interface PaginationProps {
-  currentPage: number;
-  totalPages: number;
-  pageSize: number;
-  totalItems: number;
-  onPageChange: (page: number) => void;
-  onPageSizeChange?: (size: number) => void;
-  onNewPage?: (page: number) => void;
-}
-
-const Pagination: React.FC<PaginationProps> = ({
-  currentPage,
-  totalPages,
-  pageSize,
-  totalItems,
-  onPageChange,
-  onPageSizeChange,
-  onNewPage,
-}) => {
-  const safeTotalPages = Math.max(1, Math.floor(totalPages));
-  const safeCurrentPage = Math.min(Math.max(1, Math.floor(currentPage)), safeTotalPages);
-
-  const handlePrev = () => safeCurrentPage > 1 && onPageChange(safeCurrentPage - 1);
-  const handleNext = () => {
-    if (onNewPage && safeCurrentPage === safeTotalPages) {
-      onNewPage(safeTotalPages + 1);
-      return;
-    }
-    safeCurrentPage < safeTotalPages && onPageChange(safeCurrentPage + 1);
-  };
-
-  const startIndex = totalItems > 0 ? (safeCurrentPage - 1) * pageSize + 1 : 0;
-  const endIndex = totalItems > 0 ? Math.min(safeCurrentPage * pageSize, totalItems) : 0;
-
-  const getPageNumbers = () => {
-    const pages: number[] = [];
-    const maxVisible = 5;
-    let start = Math.max(1, safeCurrentPage - Math.floor(maxVisible / 2));
-    let end = start + maxVisible - 1;
-
-    if (end > safeTotalPages) {
-      end = safeTotalPages;
-      start = Math.max(1, end - maxVisible + 1);
-    }
-
-    for (let i = start; i <= end; i++) pages.push(i);
-    return pages;
-  };
-
-  return (
-    <div className={styles.paginationContainer} role='navigation' aria-label='Pagination'>
-      <div className={styles.leftGroup}>
-        {onPageSizeChange && (
-          <div className={styles.pageSizeControls}>
-            <label className={styles.pageSizeLabel}>Show</label>
-            <select
-              value={pageSize}
-              onChange={(e) => onPageSizeChange(Number(e.target.value))}
-              className={styles.pageSizeSelect}
-              aria-label='Taille de page'
-            >
-              {[5, 10, 20, 50].map((size) => (
-                <option key={size} value={size}>
-                  {size}
-                </option>
-              ))}
-            </select>
-            <span className={styles.pageSizeSuffix}>entries</span>
-          </div>
-        )}
-      </div>
-
-      <div className={styles.paginationInfo} aria-live='polite'>
-        {startIndex}-{endIndex} out of {totalItems}
-      </div>
-
-      <div className={styles.paginationControls}>
-        <button
-          onClick={handlePrev}
-          disabled={safeCurrentPage === 1}
-          className={`${styles.paginationButton} ${styles.navigationButton} ${safeCurrentPage === 1 ? styles.disabledButton : ''}`}
-          aria-label='Page précédente'
-        >
-          «
-        </button>
-
-        {getPageNumbers().map((page) => (
-          <button
-            key={page}
-            onClick={() => onPageChange(page)}
-            aria-current={safeCurrentPage === page ? 'page' : undefined}
-            className={`${styles.paginationButton} ${safeCurrentPage === page ? styles.activeButton : ''}`}
-          >
-            {page}
-          </button>
-        ))}
-
-        <button
-          onClick={handleNext}
-          className={`${styles.paginationButton} ${styles.navigationButton}`}
-          aria-label='Page suivante'
-        >
-          »
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default Pagination;
+'use client';
+
+import React from 'react';
+import styles from './TableauDynamique.module.css';
+
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  pageSize: number;
+  totalItems: number;
+  onPageChange: (page: number) => void;
+  onPageSizeChange?: (size: number) => void;
+  onNewPage?: (page: number) => void;
+}
+
+const Pagination: React.FC<PaginationProps> = ({
+  currentPage,
+  totalPages,
+  pageSize,
+  totalItems,
+  onPageChange,
+  onPageSizeChange,
+  onNewPage,
+}) => {
+  const safeTotalPages = Math.max(1, Math.floor(totalPages));
+  const safeCurrentPage = Math.min(Math.max(1, Math.floor(currentPage)), safeTotalPages);
+
+  const handlePrev = () => safeCurrentPage > 1 && onPageChange(safeCurrentPage - 1);
+  const handleNext = () => {
+    if (onNewPage && safeCurrentPage === safeTotalPages) {
+      onNewPage(safeTotalPages + 1);
+      return;
+    }
+    safeCurrentPage < safeTotalPages && onPageChange(safeCurrentPage + 1);
+  };
+
+  const startIndex = totalItems > 0 ? (safeCurrentPage - 1) * pageSize + 1 : 0;
+  const endIndex = totalItems > 0 ? Math.min(safeCurrentPage * pageSize, totalItems) : 0;
+
+  const getPageNumbers = () => {
+    const pages: number[] = [];
+    const maxVisible = 5;
+    let start = Math.max(1, safeCurrentPage - Math.floor(maxVisible / 2));
+    let end = start + maxVisible - 1;
+
+    if (end > safeTotalPages) {
+      end = safeTotalPages;
+      start = Math.max(1, end - maxVisible + 1);
+    }
+
+    for (let i = start; i <= end; i++) pages.push(i);
+    return pages;
+  };
+
+  return (
+    <div className={styles.paginationContainer} role='navigation' aria-label='Pagination'>
+      <div className={styles.leftGroup}>
+        {onPageSizeChange && (
+          <div className={styles.pageSizeControls}>
+            <label className={styles.pageSizeLabel}>Show</label>
+            <select
+              value={pageSize}
+              onChange={(e) => onPageSizeChange(Number(e.target.value))}
+              className={styles.pageSizeSelect}
+              aria-label='Taille de page'
+            >
+              {[5, 10, 20, 50].map((size) => (
+                <option key={size} value={size}>
+                  {size}
+                </option>
+              ))}
+            </select>
+            <span className={styles.pageSizeSuffix}>entries</span>
+          </div>
+        )}
+      </div>
+
+      <div className={styles.paginationInfo} aria-live='polite'>
+        {startIndex}-{endIndex} out of {totalItems}
+      </div>
+
+      <div className={styles.paginationControls}>
+        <button
+          onClick={handlePrev}
+          disabled={safeCurrentPage === 1}
+          className={`${styles.paginationButton} ${styles.navigationButton} ${safeCurrentPage === 1 ? styles.disabledButton : ''}`}
+          aria-label='Page précédente'
+        >
+          «
+        </button>
+
+        {getPageNumbers().map((page) => (
+          <button
+            key={page}
+            onClick={() => onPageChange(page)}
+            aria-current={safeCurrentPage === page ? 'page' : undefined}
+            className={`${styles.paginationButton} ${safeCurrentPage === page ? styles.activeButton : ''}`}
+          >
+            {page}
+          </button>
+        ))}
+
+        <button
+          onClick={handleNext}
+          className={`${styles.paginationButton} ${styles.navigationButton}`}
+          aria-label='Page suivante'
+        >
+          »
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Pagination;