kelt-ui-kit-react 1.7.4 → 1.7.6

package/package.json

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

package/src/dataTable/DataTable.tsx

@@ -55,7 +55,7 @@ export function DataTable<T>(props: DataTableProps<T>) {
 
   const loaderRef = useRef<HTMLDivElement | null>(null);
   const [selectedRowIds, setSelectedRowIds] = useState<Set<string | number>>(
-    new Set(),
+    new Set()
   );
   const toggleSelectAll = useCallback(() => {
     if (selectedRowIds.size === data.length) {
@@ -63,7 +63,7 @@ export function DataTable<T>(props: DataTableProps<T>) {
       onSelectionChange?.([]);
     } else {
       let allIds = data.map((d) =>
-        getRowId ? getRowId(d) : ((d as any).id ?? d),
+        getRowId ? getRowId(d) : (d as any).id ?? d
       );
 
       if (limitSelect && allIds.length > limitSelect) {
@@ -74,8 +74,8 @@ export function DataTable<T>(props: DataTableProps<T>) {
       setSelectedRowIds(newSelection);
       onSelectionChange?.(
         data.filter((d) =>
-          newSelection.has(getRowId ? getRowId(d) : ((d as any).id ?? d)),
-        ),
+          newSelection.has(getRowId ? getRowId(d) : (d as any).id ?? d)
+        )
       );
     }
   }, [data, onSelectionChange, limitSelect, getRowId, selectedRowIds.size]);
@@ -87,12 +87,12 @@ export function DataTable<T>(props: DataTableProps<T>) {
         onRowClick?.(row);
       }
     },
-    [onRowClick],
+    [onRowClick]
   );
   const toggleRow = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>, row: T) => {
       e.stopPropagation();
-      const rowId = getRowId ? getRowId(row) : ((row as any).id ?? row);
+      const rowId = getRowId ? getRowId(row) : (row as any).id ?? row;
       const newSelection = new Set(selectedRowIds);
 
       if (newSelection.has(rowId)) {
@@ -107,11 +107,11 @@ export function DataTable<T>(props: DataTableProps<T>) {
 
       setSelectedRowIds(newSelection);
       const selectedItems = data.filter((d) =>
-        newSelection.has(getRowId ? getRowId(d) : ((d as any).id ?? d)),
+        newSelection.has(getRowId ? getRowId(d) : (d as any).id ?? d)
       );
       onSelectionChange?.(selectedItems);
     },
-    [data, getRowId, limitSelect, onSelectionChange, selectedRowIds],
+    [data, getRowId, limitSelect, onSelectionChange, selectedRowIds]
   );
   useEffect(() => {
     if (!onLoadMore || !hasMore) return;
@@ -126,7 +126,7 @@ export function DataTable<T>(props: DataTableProps<T>) {
         root: null,
         rootMargin: "0px",
         threshold: 1.0,
-      },
+      }
     );
 
     if (loaderRef.current) {
@@ -139,11 +139,6 @@ export function DataTable<T>(props: DataTableProps<T>) {
       }
     };
   }, [onLoadMore, hasMore]);
-  const hasNestedColumns = columns.some((col) => col.children?.length);
-
-  const flatColumns = columns.flatMap((col) =>
-    col.children?.length ? col.children : [col],
-  );
   return (
     <div className="data-table-container">
       {name && <h2 className="mb-2">{name}</h2>}
@@ -167,11 +162,9 @@ export function DataTable<T>(props: DataTableProps<T>) {
                 />
               </th>
             )}
-
             {columns.map((column, idx) => (
-              <DataTableColumn<T>
+              <DataTableColumn
                 key={idx}
-                hasNestedColumns={hasNestedColumns}
                 column={column}
                 idx={idx}
                 onColumnClick={onColumnClick}
@@ -184,26 +177,9 @@ export function DataTable<T>(props: DataTableProps<T>) {
                 }}
                 align="right"
                 key={"actions"}
-                rowSpan={hasNestedColumns ? 2 : 1}
               ></th>
             )}
           </tr>
-          {hasNestedColumns && (
-            <tr>
-              {columns.flatMap(
-                (col, idx) =>
-                  col.children?.map((child, childIdx) => (
-                    <th
-                      key={`${idx}-${childIdx}`}
-                      style={{ textAlign: child.align ?? "left" }}
-                      onClick={() => onColumnClick?.(child)}
-                    >
-                      {child.label}
-                    </th>
-                  )) ?? [],
-              )}
-            </tr>
-          )}
         </thead>
         <tbody>
           {loading ? (
@@ -233,17 +209,17 @@ export function DataTable<T>(props: DataTableProps<T>) {
                         limitSelect !== undefined &&
                         selectedRowIds.size >= limitSelect &&
                         !selectedRowIds.has(
-                          getRowId ? getRowId(row) : ((row as any).id ?? row),
+                          getRowId ? getRowId(row) : (row as any).id ?? row
                         )
                       }
                       checked={selectedRowIds.has(
-                        getRowId ? getRowId(row) : ((row as any).id ?? row),
+                        getRowId ? getRowId(row) : (row as any).id ?? row
                       )}
                       onChange={(e) => toggleRow(e, row)} // empêche le clic de déclencher onRowClick
                     />
                   </td>
                 )}
-                {flatColumns.map((column, idx) => (
+                {columns.map((column, idx) => (
                   <DataTableRow column={column} idx={idx} row={row} key={idx} />
                 ))}
                 {actions.length > 0 && (

package/src/dataTable/dataTable.interface.ts

@@ -7,7 +7,6 @@ export interface dataTableColumnsInterface<T> {
   maxWidth?: number;
   width?: number;
   align?: "right" | "left" | "center";
-  alignText?: "right" | "left" | "center";
   format?: (value: any) => string;
   sortable?: boolean;
   filterable?: boolean;
@@ -16,9 +15,7 @@ export interface dataTableColumnsInterface<T> {
   options?: { label: string; value: string }[];
   onEdit?: (value: any, row: T) => void;
   onRowStyle?: (row: T) => React.CSSProperties;
-  renderComponent?: (value: any, row: T) => JSX.Element;
   type: HTMLInputTypeAttribute | "select";
-  children?: dataTableColumnsInterface<T>[];
 }
 export interface dataTableActionsInterface<T> {
   id: string;

package/src/dataTable/dataTableColumn/DataTableColumn.tsx

@@ -1,16 +1,15 @@
 import { dataTableColumnsInterface } from "../dataTable.interface";
 
-export function DataTableColumn<T>({
+type DataTableColumnProps = {
+  column: dataTableColumnsInterface<any>;
+  idx: number;
+  onColumnClick?: (column: dataTableColumnsInterface<any>) => void;
+};
+export const DataTableColumn = ({
   column,
   idx,
   onColumnClick,
-  hasNestedColumns,
-}: {
-  hasNestedColumns: boolean;
-  column: dataTableColumnsInterface<T>;
-  idx: number;
-  onColumnClick?: (column: dataTableColumnsInterface<T>) => void;
-}) {
+}: DataTableColumnProps) => {
   return (
     <th
       key={`colonne-${column.id}-${idx}`}
@@ -18,14 +17,11 @@ export function DataTableColumn<T>({
         minWidth: column.minWidth,
         maxWidth: column.maxWidth,
         width: column.width,
-        textAlign: column.align ?? "left",
-        alignContent: column.children ? "center" : "flex-end",
+        textAlign: column.align || "left",
       }}
-      colSpan={column.children?.length ?? 1}
-      rowSpan={!column.children?.length && hasNestedColumns ? 2 : 1}
       onClick={() => onColumnClick?.(column)}
     >
       {column.label}
     </th>
   );
-}
+};

package/src/dataTable/dataTableRow/DataTableRow.tsx

@@ -1,5 +1,5 @@
+import { Select } from "../../select/Select";
 import { dataTableColumnsInterface } from "../dataTable.interface";
-import { DataTableRowValue } from "./dataTableRowValue/DataTableRowValue";
 
 type DataTableRowProps = {
   column: dataTableColumnsInterface<any>;
@@ -13,16 +13,41 @@ export const DataTableRow = ({ column, idx, row }: DataTableRowProps) => {
     <td
       style={{
         minWidth: column.minWidth,
-        textAlign: column.alignText ? column.alignText : column.align || "left",
+        textAlign: column.align || "left",
         maxWidth: column.maxWidth,
         width: column.width,
         ...style,
       }}
       key={`row-${column.id}-${idx}`}
     >
-      {column.renderComponent ? column.renderComponent(value, row) : null}
-      {!column.renderComponent && (
-        <DataTableRowValue column={column} value={value} row={row} idx={idx} />
+      {column.editable ? (
+        column.type === "select" ? (
+          <Select
+            options={column.options ?? []}
+            value={value}
+            onChange={(e) => {
+              if (column.onEdit) {
+                column.onEdit(e, row);
+              }
+            }}
+          />
+        ) : (
+          <input
+            type={column.type}
+            value={value}
+            step="0.01"
+            style={{ textAlign: column.align || "left" }}
+            onChange={(e) => {
+              if (column.onEdit) {
+                column.onEdit(e.target.value, row);
+              }
+            }}
+          />
+        )
+      ) : column.format ? (
+        column.format(value)
+      ) : (
+        value
       )}
     </td>
   );

package/src/form/inputNumber/InputNumber.tsx

@@ -8,8 +8,10 @@ export type InputNumberProps = {
   value?: string; // ⚠️ string pour gérer la saisie manuelle
   placeholder?: string;
   className?: string;
+  pattern?: string; // regex pour validation (ex: "^-?\\d*[.,]?\\d*$" pour nombre décimal)
   disabled?: boolean;
   required?: boolean;
+  inputMode?: "numeric" | "decimal";
   autoFocus?: boolean;
   maxLength?: number;
   autoComplete?: string;
@@ -17,7 +19,7 @@ export type InputNumberProps = {
   onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
   onChange?: (
     e: React.ChangeEvent<HTMLInputElement>,
-    valueFormat?: string
+    valueFormat?: string,
   ) => void;
   onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
   onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
@@ -38,13 +40,15 @@ export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
       maxLength = 10,
       autoComplete = "off",
       tabIndex = 0,
+      inputMode = "numeric",
+      pattern,
       onChange,
       onBlur,
       onClick,
       onKeyDown,
       onFocus,
     },
-    ref
+    ref,
   ) => {
     const handleChange = useCallback(
       (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -62,7 +66,7 @@ export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
 
         onChange?.(e, newValue);
       },
-      [onChange, maxLength]
+      [onChange, maxLength],
     );
 
     const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -72,7 +76,7 @@ export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
       // ✅ Autoriser chiffres, contrôle, ., , et -
       const allowed =
         /[0-9]|Backspace|Delete|ArrowLeft|ArrowRight|Tab|Enter|Home|End/.test(
-          e.key
+          e.key,
         ) ||
         e.key === "." ||
         e.key === "," ||
@@ -105,8 +109,9 @@ export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
           required={required}
           autoFocus={autoFocus}
           autoComplete={autoComplete}
+          pattern={pattern}
           tabIndex={tabIndex}
-          inputMode="numeric" // mobile keyboard adaptatif
+          inputMode={inputMode} // mobile keyboard adaptatif
           spellCheck="false"
           className={`input-field ${className ?? ""}`}
           onChange={handleChange}
@@ -121,7 +126,7 @@ export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
         />
       </div>
     );
-  }
+  },
 );
 
 InputNumber.displayName = "InputNumber";

package/src/form/inputPrice/InputPrice.tsx

@@ -18,7 +18,7 @@ export const InputPrice = forwardRef<HTMLInputElement, InputPriceProps>(
       onChange,
       ...props
     },
-    ref
+    ref,
   ) => {
     const handleBlur = useCallback(() => {
       if (onChange) {
@@ -31,10 +31,12 @@ export const InputPrice = forwardRef<HTMLInputElement, InputPriceProps>(
       <InputNumber
         {...props}
         ref={ref}
+        pattern="[0-9]*[.,]?[0-9]*"
+        inputMode="decimal" // mobile keyboard adaptatif
         value={value ?? ""}
         onChange={(e) => onChange?.(e.target.value)}
         onBlur={handleBlur} // Force le formatage à 2 décimales en sortie
       />
     );
-  }
+  },
 );

package/src/index.ts

@@ -24,7 +24,6 @@ export { Badge } from "./badge/Badge";
 export { Button } from "./button/Button";
 export { ButtonActions } from "./button/buttonActions/ButtonActions";
 export { ButtonFile } from "./button/buttonFile/ButtonFile";
-export { ButtonFilters } from "./button/buttonFilters/ButtonFilters";
 export { Card } from "./card/Card";
 export { Carousel } from "./carousel/Carousel";
 export { Damier } from "./damier/Damier";

package/.github/workflows/publish.yml

@@ -1,31 +0,0 @@
-name: Build & Publish npm Package
-
-on:
-  push:
-    branches:
-      - develop
-
-jobs:
-  publish:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: "20"
-          registry-url: "https://registry.npmjs.org"
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Build package
-        run: npm run build
-
-      - name: Publish to npm
-        run: npm publish --access public
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/dist/dataTable/dataTableRow/dataTableRowValue/DataTableRowValue.d.ts

@@ -1,10 +0,0 @@
-import { dataTableColumnsInterface } from '../../dataTable.interface';
-
-type DataTableRowValueProps = {
-    column: dataTableColumnsInterface<any>;
-    idx: number;
-    value: any;
-    row: any;
-};
-export declare const DataTableRowValue: ({ column, row, value, }: DataTableRowValueProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/src/dataTable/dataTableRow/dataTableRowValue/DataTableRowValue.tsx

@@ -1,52 +0,0 @@
-import { Select } from "../../../select/Select";
-import { dataTableColumnsInterface } from "../../dataTable.interface";
-
-type DataTableRowValueProps = {
-  column: dataTableColumnsInterface<any>;
-  idx: number;
-  value: any;
-  row: any;
-};
-export const DataTableRowValue = ({
-  column,
-  row,
-  value,
-}: DataTableRowValueProps) => {
-  return (
-    <>
-      {column.editable ? (
-        column.type === "select" ? (
-          <Select
-            options={column.options ?? []}
-            value={value}
-            onChange={(e) => {
-              if (column.onEdit) {
-                column.onEdit(e, row);
-              }
-            }}
-          />
-        ) : (
-          <input
-            type={column.type}
-            value={value}
-            step="0.01"
-            style={{
-              textAlign: column.alignText
-                ? column.alignText
-                : column.align || "left",
-            }}
-            onChange={(e) => {
-              if (column.onEdit) {
-                column.onEdit(e.target.value, row);
-              }
-            }}
-          />
-        )
-      ) : column.format ? (
-        column.format(value)
-      ) : (
-        value
-      )}
-    </>
-  );
-};