kelt-ui-kit-react 1.9.0 → 1.9.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kelt-ui-kit-react",
   "type": "module",
-  "version": "1.9.0",
+  "version": "1.9.2",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/dataTable/DataTable.tsx

@@ -1,6 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { TypeInputEnum } from "../form/form.enum";
 import { Input } from "../form/input/Input";
+import { Icon } from "../icon/Icon";
 import { Loader } from "../loader/Loader";
 import "./dataTable.css";
 import {
@@ -20,6 +22,10 @@ export type DataTableProps<T> = {
   data: T[];
   emptyMessage?: string;
   actions?: dataTableActionsInterface<T>[];
+  footerAction?: (props: {
+    close: () => void;
+    selectedRows: T[];
+  }) => JSX.Element;
   columns: dataTableColumnsInterface<T>[];
   loading?: boolean;
   onRowClick?: (row: any) => void;
@@ -27,6 +33,7 @@ export type DataTableProps<T> = {
   onLoadMore?: () => void;
   hasMore?: boolean; // pour savoir s'il reste des données à charger
   onSelectionChange?: (selectedRows: T[]) => void;
+  autoFocusFirstEditable?: boolean;
   hideToggleAll?: boolean;
   limitSelect?: number;
   getRowId?: (row: T) => string | number;
@@ -40,6 +47,7 @@ export function DataTable<T>(props: DataTableProps<T>) {
     element,
     data = [],
     actions = [],
+    footerAction,
     columns = [],
     loading,
     onRowClick,
@@ -48,16 +56,40 @@ export function DataTable<T>(props: DataTableProps<T>) {
     emptyMessage,
     hasMore,
     onSelectionChange,
+    autoFocusFirstEditable = false,
     hideToggleAll = false,
     limitSelect = undefined,
     getRowId,
   } = props;
 
   const loaderRef = useRef<HTMLDivElement | null>(null);
+  const footerActionRef = useRef<HTMLDivElement | null>(null);
+  const hasAutoFocusedRef = useRef(false);
+  const [isFooterActionVisible, setIsFooterActionVisible] = useState(false);
+  const [footerActionOffset, setFooterActionOffset] = useState(0);
   const [selectedRowIds, setSelectedRowIds] = useState<Set<string | number>>(
     new Set(),
   );
 
+  const focusEditableElement = useCallback((element: HTMLElement | null) => {
+    if (!element) {
+      return;
+    }
+
+    element.scrollIntoView({ block: "nearest", inline: "nearest" });
+
+    requestAnimationFrame(() => {
+      element.focus();
+
+      if (
+        element instanceof HTMLInputElement ||
+        element instanceof HTMLTextAreaElement
+      ) {
+        element.select();
+      }
+    });
+  }, []);
+
   const isInteractiveClick = useCallback((target: EventTarget | null) => {
     const element =
       target instanceof Element
@@ -81,6 +113,7 @@ export function DataTable<T>(props: DataTableProps<T>) {
     if (selectedRowIds.size === data.length) {
       setSelectedRowIds(new Set());
       onSelectionChange?.([]);
+      setIsFooterActionVisible(false);
     } else {
       let allIds = data.map((d) =>
         getRowId ? getRowId(d) : ((d as any).id ?? d),
@@ -92,6 +125,7 @@ export function DataTable<T>(props: DataTableProps<T>) {
 
       const newSelection = new Set(allIds);
       setSelectedRowIds(newSelection);
+      setIsFooterActionVisible(true);
       onSelectionChange?.(
         data.filter((d) =>
           newSelection.has(getRowId ? getRowId(d) : ((d as any).id ?? d)),
@@ -100,6 +134,86 @@ export function DataTable<T>(props: DataTableProps<T>) {
     }
   }, [data, onSelectionChange, limitSelect, getRowId, selectedRowIds.size]);
 
+  const focusNextColumn = useCallback(
+    (columnIndex: number, rowIndex: number) => {
+      if (typeof document === "undefined") {
+        return;
+      }
+
+      const table = document.getElementById(id);
+      const eligibleColumnIndexes = columns.reduce<number[]>(
+        (indexes, column, idx) => {
+          if (
+            column.editable &&
+            column.enterToNextColumn &&
+            column.type !== "select" &&
+            column.type !== "image"
+          ) {
+            indexes.push(idx);
+          }
+
+          return indexes;
+        },
+        [],
+      );
+
+      if (!table || eligibleColumnIndexes.length === 0) {
+        return;
+      }
+
+      const currentEligibleIndex = eligibleColumnIndexes.indexOf(columnIndex);
+
+      if (currentEligibleIndex === -1) {
+        return;
+      }
+
+      const editableCells = data.flatMap((_, currentRowIndex) =>
+        eligibleColumnIndexes.map((currentColumnIndex) => ({
+          rowIndex: currentRowIndex,
+          columnIndex: currentColumnIndex,
+        })),
+      );
+
+      const currentCellIndex = editableCells.findIndex(
+        (cell) => cell.rowIndex === rowIndex && cell.columnIndex === columnIndex,
+      );
+
+      if (currentCellIndex === -1) {
+        return;
+      }
+
+      const focusableSelector =
+        'input:not([disabled]), textarea:not([disabled]), [contenteditable="true"]';
+      let nextInput: HTMLElement | null = null;
+
+      for (let offset = 1; offset <= editableCells.length; offset += 1) {
+        const nextCell =
+          editableCells[(currentCellIndex + offset) % editableCells.length];
+        const cell = table.querySelector(
+          `tbody td[data-row-index="${nextCell.rowIndex}"][data-column-index="${nextCell.columnIndex}"]`,
+        );
+
+        if (!(cell instanceof HTMLElement)) {
+          continue;
+        }
+
+        const focusableElement = cell.querySelector<HTMLElement>(focusableSelector);
+
+        if (focusableElement) {
+          nextInput = focusableElement;
+          break;
+        }
+      }
+
+      if (!nextInput) {
+        return;
+      }
+
+      focusEditableElement(nextInput);
+    },
+    [columns, data, focusEditableElement, id],
+  );
+
   const handleClickRow = useCallback(
     (e: React.MouseEvent, row: T) => {
       e.stopPropagation();
@@ -139,6 +253,7 @@ export function DataTable<T>(props: DataTableProps<T>) {
       }
 
       setSelectedRowIds(newSelection);
+      setIsFooterActionVisible(newSelection.size > 0);
       const selectedItems = data.filter((d) =>
         newSelection.has(getRowId ? getRowId(d) : ((d as any).id ?? d)),
       );
@@ -146,6 +261,88 @@ export function DataTable<T>(props: DataTableProps<T>) {
     },
     [data, getRowId, limitSelect, onSelectionChange, selectedRowIds],
   );
+  const showFooterAction = Boolean(footerAction && isFooterActionVisible);
+  const closeFooterAction = useCallback(() => {
+    setIsFooterActionVisible(false);
+  }, []);
+  const selectedRows = data.filter((d) =>
+    selectedRowIds.has(getRowId ? getRowId(d) : ((d as any).id ?? d)),
+  );
+  useEffect(() => {
+    if (loading || !autoFocusFirstEditable || data.length === 0) {
+      hasAutoFocusedRef.current = false;
+      return;
+    }
+
+    if (hasAutoFocusedRef.current) {
+      return;
+    }
+
+    const firstEditableColumnIndex = columns.findIndex(
+      (column) =>
+        column.editable &&
+        column.enterToNextColumn &&
+        column.type !== "select" &&
+        column.type !== "image",
+    );
+
+    if (firstEditableColumnIndex === -1) {
+      return;
+    }
+
+    const table = document.getElementById(id);
+    const firstCell = table?.querySelector(
+      `tbody td[data-row-index="0"][data-column-index="${firstEditableColumnIndex}"]`,
+    );
+
+    if (!(firstCell instanceof HTMLElement)) {
+      return;
+    }
+
+    const firstInput = firstCell.querySelector<HTMLElement>(
+      'input:not([disabled]), textarea:not([disabled]), [contenteditable="true"]',
+    );
+
+    if (!firstInput) {
+      return;
+    }
+
+    hasAutoFocusedRef.current = true;
+    focusEditableElement(firstInput);
+  }, [autoFocusFirstEditable, columns, data.length, focusEditableElement, id, loading]);
+  useEffect(() => {
+    if (!showFooterAction) {
+      setFooterActionOffset(0);
+      return;
+    }
+
+    const footerActionElement = footerActionRef.current;
+
+    if (!footerActionElement) {
+      return;
+    }
+
+    const updateFooterActionOffset = () => {
+      const { height } = footerActionElement.getBoundingClientRect();
+      setFooterActionOffset(Math.ceil(height) + 16);
+    };
+
+    updateFooterActionOffset();
+
+    if (typeof ResizeObserver === "undefined") {
+      return;
+    }
+
+    const resizeObserver = new ResizeObserver(() => {
+      updateFooterActionOffset();
+    });
+
+    resizeObserver.observe(footerActionElement);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [showFooterAction]);
   useEffect(() => {
     if (!onLoadMore || !hasMore) return;
 
@@ -173,7 +370,12 @@ export function DataTable<T>(props: DataTableProps<T>) {
     };
   }, [onLoadMore, hasMore]);
   return (
-    <div className="data-table-container">
+    <div
+      className={`data-table-container ${showFooterAction ? "data-table-container--with-footer-action" : ""}`}
+      style={
+        showFooterAction ? { paddingBottom: `${footerActionOffset}px` } : undefined
+      }
+    >
       {name && <h2 className="mb-2">{name}</h2>}
       {element}
       <table className={`data-table ${className ? className : ""}`} id={id}>
@@ -234,13 +436,17 @@ export function DataTable<T>(props: DataTableProps<T>) {
               <tr
                 key={rowIndex}
                 className={rowIndex % 2 === 0 ? "even" : "odd"}
+                data-row-index={rowIndex}
                 onClick={(e) => handleClickRow?.(e, row)}
               >
                 {onSelectionChange && (
                   <td
                     className="select-cell"
                     style={{ textAlign: "center" }}
-                    onClick={(e) => e.stopPropagation()}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setIsFooterActionVisible(true);
+                    }}
                   >
                     <Input
                       id={`select-row-${rowIndex}`}
@@ -256,12 +462,19 @@ export function DataTable<T>(props: DataTableProps<T>) {
                       checked={selectedRowIds.has(
                         getRowId ? getRowId(row) : ((row as any).id ?? row),
                       )}
-                      onChange={(e) => toggleRow(e, row)} // empêche le clic de déclencher onRowClick
+                      onChange={(e) => toggleRow(e, row)}
                     />
                   </td>
                 )}
                 {columns.map((column, idx) => (
-                  <DataTableRow column={column} idx={idx} row={row} key={idx} />
+                  <DataTableRow
+                    column={column}
+                    idx={idx}
+                    row={row}
+                    rowIndex={rowIndex}
+                    key={idx}
+                    onEnterNextColumn={focusNextColumn}
+                  />
                 ))}
                 {actions.length > 0 && (
                   <td align="right" onClick={(e) => e.stopPropagation()}>
@@ -289,6 +502,31 @@ export function DataTable<T>(props: DataTableProps<T>) {
         </tbody>
       </table>
 
+      {showFooterAction &&
+        typeof document !== "undefined" &&
+        createPortal(
+          <div
+            ref={footerActionRef}
+            className="data-table-footer-action"
+            data-footer-action="true"
+          >
+            <div className="data-table-footer-action__content">
+              <div
+                className="data-table-footer-action__close"
+                aria-label="Fermer les actions"
+                onClick={closeFooterAction}
+              >
+                <Icon classIcon={"bi-x"} />
+              </div>
+              {footerAction?.({
+                close: closeFooterAction,
+                selectedRows,
+              })}
+            </div>
+          </div>,
+          document.body,
+        )}
+
       {children}
       {hasMore && (
         <div ref={loaderRef} className="infinite-scroll-loader">

package/src/dataTable/DataTable.view.tsx

@@ -11,9 +11,17 @@ export const DataTableView = () => {
         label: "Name",
         minWidth: 100,
         editable: true,
+        enterToNextColumn: true,
         type: "text",
       },
-      { id: "age", label: "Age", minWidth: 50, type: "number" },
+      {
+        id: "age",
+        label: "Age",
+        minWidth: 50,
+        editable: true,
+        enterToNextColumn: true,
+        type: "number",
+      },
     ];
   }, []);
   const data = useMemo(() => {

package/src/dataTable/dataTable.css

@@ -1,5 +1,55 @@
+.data-table-footer-action {
+  position: fixed;
+  left: 5px;
+  right: 5px;
+  bottom: 5px;
+  border-radius: 4px;
+  z-index: 1000;
+  overflow: hidden;
+  background: #fff;
+  border-top: 1px solid #e5e5e5;
+  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.18);
+  animation: data-table-footer-action-enter 180ms ease-out;
+
+  & .data-table-footer-action__content {
+    position: relative;
+    padding: 0.75rem 1rem;
+  }
+
+  & .data-table-footer-action__close {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    cursor: pointer;
+
+    .bi {
+      color: #333;
+    }
+  }
+}
+
+
+
+
+@keyframes data-table-footer-action-enter {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .data-table-container {
   overflow: auto;
+  position: relative;
+
+  &.data-table-container--with-footer-action {
+    scroll-padding-bottom: 80px;
+  }
 
   .data-table {
     width: 100%;
@@ -21,15 +71,22 @@
       }
     }
 
+
     thead {
       margin-bottom: 1rem;
       position: sticky;
       top: 0;
+      z-index: 1;
       background-color: #fff;
 
       th {
+        position: sticky;
+        top: 0;
+        z-index: 2;
+        background-color: #fff;
         color: #bdbaba;
         min-width: 100px;
+        padding: .5rem;
       }
     }
 

package/src/dataTable/dataTable.interface.ts

@@ -12,6 +12,7 @@ export interface dataTableColumnsInterface<T> {
   filterable?: boolean;
   filterValue?: string;
   editable?: boolean;
+  enterToNextColumn?: boolean;
   options?: { label: string; value: string }[];
   onEdit?: (value: any, row: T) => void;
   onDisable?: (row: T) => boolean;

package/src/dataTable/dataTableRow/DataTableRow.tsx

@@ -5,9 +5,17 @@ import { dataTableColumnsInterface } from "../dataTable.interface";
 type DataTableRowProps = {
   column: dataTableColumnsInterface<any>;
   idx: number;
+  rowIndex: number;
   row: any;
+  onEnterNextColumn?: (columnIndex: number, rowIndex: number) => void;
 };
-export const DataTableRow = ({ column, idx, row }: DataTableRowProps) => {
+export const DataTableRow = ({
+  column,
+  idx,
+  rowIndex,
+  row,
+  onEnterNextColumn,
+}: DataTableRowProps) => {
   const value = (row as any)[column.id]; // On utilise [column.id] pour accéder aux bonnes propriétés
   const style = column.onRowStyle ? column.onRowStyle(row) : {};
   const isDisabled = column.onDisable?.(row) ?? false;
@@ -15,6 +23,8 @@ export const DataTableRow = ({ column, idx, row }: DataTableRowProps) => {
   return (
     <td
       className={`${isDisabled ? "disabled" : ""}`}
+      data-column-index={idx}
+      data-row-index={rowIndex}
       style={{
         minWidth: column.minWidth,
         textAlign: column.align || "left",
@@ -64,6 +74,12 @@ export const DataTableRow = ({ column, idx, row }: DataTableRowProps) => {
               width: column.width,
             }}
             onClick={(e) => e.stopPropagation()}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && column.enterToNextColumn) {
+                e.preventDefault();
+                onEnterNextColumn?.(idx, rowIndex);
+              }
+            }}
             onChange={(e) => {
               if (column.onEdit) {
                 column.onEdit(e.target.value, row);

package/dist/App.js

@@ -1,22 +0,0 @@
-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);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { StrictMode } from "react";
-import { BrowserRouter as Router } from "react-router-dom";
-import "./App.css";
-import { AppMenu } from "./App.menu";
-import { AppRoutes } from "./App.routes";
-import { Header } from "./header/Header";
-import { OverlayProvider } from "./overlayPanel/overlay.context";
-import { Toaster } from "./toaster/Toaster";
-var App = function () { return (_jsx(StrictMode, { children: _jsx(OverlayProvider, { children: _jsx(Router, { children: _jsxs("div", __assign({ className: "main-layout" }, { children: [_jsx(Toaster, {}), _jsx(Header, { showBackNavigation: true }), _jsxs("div", __assign({ className: "d-flex h-100" }, { children: [_jsx(AppMenu, {}), _jsx("div", __assign({ className: "main-layout-content" }, { children: _jsx(AppRoutes, {}) }))] }))] })) }) }) })); };
-export default App;