kelt-ui-kit-react 2.1.0 → 2.1.2

package/src/App.menu.tsx

@@ -6,6 +6,7 @@ import { AddressSearchView } from "./addressSearch/AddressSearch.view";
 import { BadgeView } from "./badge/Badge.view";
 import { ButtonView } from "./button/Button.view";
 import { ButtonFileView } from "./button/buttonFile/ButtonFile.view";
+import { ButtonImportView } from "./button/buttonImport/ButtonImport.view";
 import { CardView } from "./card/Card.view";
 import { CarouselView } from "./carousel/Carousel.view";
 import { DamierView } from "./damier/Damier.view";
@@ -251,6 +252,13 @@ export const MenuList: MenuProps[] = [
     children: <NavLink to="/address-search">Address search</NavLink>,
     element: <AddressSearchView />,
   },
+  {
+    id: 31,
+    name: "Button Import",
+    link: "/button-import",
+    children: <NavLink to="/button-import">Button Import</NavLink>,
+    element: <ButtonImportView />,
+  },
 ];
 
 export const AppMenu = (): JSX.Element => {

package/src/button/buttonFile/ButtonFile.tsx

@@ -31,6 +31,9 @@ export const ButtonFile = ({
 
       reader.readAsArrayBuffer(file);
     }
+
+    // Permet de resélectionner le même fichier (sinon onChange ne se déclenche pas)
+    e.target.value = "";
   };
 
   const handleButtonClick = () => {
@@ -43,7 +46,7 @@ export const ButtonFile = ({
         type="file"
         ref={fileInputRef}
         onChange={handleFileChange}
-        className="hidden"
+        style={{ display: "none" }}
         accept={accept}
       />
       <Button

package/src/button/buttonImport/ButtonImport.tsx

@@ -0,0 +1,99 @@
+import { ChangeEvent, useRef, useState } from "react";
+import { Icon } from "../../icon/Icon";
+import { IconSizeEnum } from "../../icon/iconSize.enum";
+import { Modal } from "../../modal/Modal";
+import { Button } from "../Button";
+import "./buttonImport.css";
+
+interface ButtonImportProps {
+  onValidate: (file: File) => void | Promise<void>;
+  accept?: string;
+  buttonText?: string;
+  buttonClassName?: string;
+  buttonClassIcon?: string;
+  title?: string;
+  description?: string;
+  classIcon?: string;
+  validateText?: string;
+}
+
+export const ButtonImport = ({
+  onValidate,
+  accept = "*",
+  buttonText = "Importer",
+  buttonClassName,
+  buttonClassIcon = "",
+  title = "Importer un fichier",
+  description = "Sélectionner un fichier à importer.",
+  classIcon = "bi-file-earmark-arrow-up",
+  validateText = "Valider",
+}: ButtonImportProps) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [file, setFile] = useState<File | null>(null);
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const handleClose = () => {
+    if (loading) return;
+    setIsOpen(false);
+    setFile(null);
+  };
+
+  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setFile(e.target.files?.[0] ?? null);
+    // Permet de resélectionner le même fichier
+    e.target.value = "";
+  };
+
+  const handleValidate = async () => {
+    if (!file) return;
+    setLoading(true);
+    try {
+      await onValidate(file);
+      setIsOpen(false);
+      setFile(null);
+    } catch {
+      // L'appelant gère l'erreur, la modal reste ouverte pour réessayer
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <Button
+        className={buttonClassName}
+        classIcon={buttonClassIcon}
+        title={buttonText}
+        onClick={() => setIsOpen(true)}
+      />
+      <Modal isOpen={isOpen} onClose={handleClose} title={title}>
+        <input
+          type="file"
+          ref={fileInputRef}
+          onChange={handleFileChange}
+          style={{ display: "none" }}
+          accept={accept}
+        />
+        <div
+          className="button-import-zone"
+          onClick={() => fileInputRef.current?.click()}
+        >
+          <div>{description}</div>
+          <Icon classIcon={classIcon} size={IconSizeEnum.LARGE} />
+          <div className="button-import-file mt-2">
+            {file ? file.name : "Aucun fichier sélectionné"}
+          </div>
+        </div>
+        <div className="d-flex justify-content-end mt-2">
+
+          <Button
+            title={validateText}
+            disabled={!file || loading}
+            onClick={handleValidate}
+          />
+        </div>
+      </Modal>
+    </>
+  );
+};

package/src/button/buttonImport/ButtonImport.view.tsx

@@ -0,0 +1,17 @@
+import { ButtonImport } from "./ButtonImport";
+
+export const ButtonImportView = () => {
+  return (
+    <div className="d-flex">
+      <ButtonImport
+        accept=".csv,text/csv"
+        buttonText="Importer CSV"
+        title="Import des stocks"
+        description="Sélectionner un fichier CSV afin de mettre à jour les stocks."
+        onValidate={(file: File) => {
+          console.log("Fichier validé:", file.name, file.size);
+        }}
+      />
+    </div>
+  );
+};

package/src/button/buttonImport/buttonImport.css

@@ -0,0 +1,38 @@
+.button-import-zone {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  flex-direction: column;
+  text-align: center;
+  padding: 1rem 0;
+  cursor: pointer;
+
+  > div {
+    margin-bottom: 1rem;
+    color: #8f8888;
+  }
+
+  .bi {
+    border-radius: 50%;
+    border: 1px solid #d5d5d5;
+    padding: 2rem;
+    color: #d5d5d5;
+    width: 5rem;
+    height: 5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  &:hover .bi {
+    border-color: #8f8888;
+    color: #8f8888;
+  }
+
+  .button-import-file {
+    font-weight: 600;
+    word-break: break-all;
+  }
+}

package/src/dataTable/DataTable.tsx

@@ -12,17 +12,17 @@ import {
   dataTableColumnsInterface,
 } from "./dataTable.interface";
 import { DataTableAction } from "./dataTableActions/DataTableAction";
+import { DataTableActionMenu } from "./dataTableActions/DataTableActionMenu";
 import { DataTableColumn } from "./dataTableColumn/DataTableColumn";
 import { DataTableLoading } from "./dataTableLoading/DataTableLoading";
 import { DataTableRow } from "./dataTableRow/DataTableRow";
 import { DataTableFilters } from "./dataTableFilters/DataTableFilters";
 import { useDataTableState } from "./useDataTableState";
-import { DataTableFilterState, DataTableSortState, flattenColumns, getActionsWidth } from "./dataTable.utils";
+import { DataTableFilterState, DataTableSortState, flattenColumns, getActionsWidth, isMenuAction } from "./dataTable.utils";
 export type {
   DataTableDateRangeFilterValue, DataTableFilterState, DataTableSortDirection,
   DataTableSortState, FilterValue,
 } from "./dataTable.utils";
-const DEFAULT_FILTER_COLUMN_WIDTH = 100;
 
 export type DataTableProps<T> = {
   id: string;
@@ -93,9 +93,9 @@ export function DataTable<T>(props: DataTableProps<T>) {
   const tableState = useDataTableState(id, groupedColumns, sourceData, onFiltersChange, onSortChange);
   const { flatColumns: columns, sortedData: data } = tableState;
   const actionsColumnWidth = getActionsWidth(actions, explicitActionsWidth);
-  const filterRowRef = useRef<HTMLTableRowElement>(null);
+  const inlineActions = useMemo(() => actions.filter((action) => !isMenuAction(action)), [actions]);
+  const menuActions = useMemo(() => actions.filter(isMenuAction), [actions]);
   const groupRowRef = useRef<HTMLTableRowElement>(null);
-  const [filterHeight, setFilterHeight] = useState(0);
   const [groupHeight, setGroupHeight] = useState(0);
   const hasGroups = groupedColumns.some((column) => column.children?.length);
   const stickyOffsets = useMemo(() => {
@@ -112,7 +112,6 @@ export function DataTable<T>(props: DataTableProps<T>) {
 
   useLayoutEffect(() => {
     const measure = () => {
-      setFilterHeight(filterRowRef.current?.getBoundingClientRect().height ?? 0);
       setGroupHeight(groupRowRef.current?.getBoundingClientRect().height ?? 0);
     };
     measure();
@@ -121,10 +120,9 @@ export function DataTable<T>(props: DataTableProps<T>) {
       return () => window.removeEventListener("resize", measure);
     }
     const observer = new ResizeObserver(measure);
-    if (filterRowRef.current) observer.observe(filterRowRef.current);
     if (groupRowRef.current) observer.observe(groupRowRef.current);
     return () => observer.disconnect();
-  }, [tableState.visibleFilters.size, hasGroups, groupedColumns]);
+  }, [hasGroups, groupedColumns]);
 
   const isMobile = useIsMobile();
   const showMobileCardView = mobileCardView && isMobile;
@@ -531,8 +529,8 @@ export function DataTable<T>(props: DataTableProps<T>) {
                 isFilterVisible={tableState.visibleFilters.has(column.name ?? column.id)}
                 onToggleFilter={tableState.toggleFilter} onToggleSort={tableState.toggleSort}
                 sortDirection={tableState.sort?.key === (column.name ?? column.id) ? tableState.sort.direction : null}
+                filterControl={tableState.renderFilter(column)}
               /></tr></thead></table>
-              {tableState.renderFilter(column)}
             </div>
           ))}
         </div>
@@ -609,7 +607,7 @@ export function DataTable<T>(props: DataTableProps<T>) {
                     ))}
                     {actions.length > 0 && (
                       <div className="data-table-mobile-card__actions card-actions">
-                        {actions.map((action, actionIndex) => (
+                        {inlineActions.map((action, actionIndex) => (
                           <DataTableAction
                             key={action.id}
                             action={action}
@@ -619,6 +617,12 @@ export function DataTable<T>(props: DataTableProps<T>) {
                             onFocusNextRow={focusNextRow}
                           />
                         ))}
+                        <DataTableActionMenu
+                          actions={menuActions}
+                          row={row}
+                          rowIndex={rowIndex}
+                          onFocusNextRow={focusNextRow}
+                        />
                       </div>
                     )}
                   </div>
@@ -643,29 +647,17 @@ export function DataTable<T>(props: DataTableProps<T>) {
           {actions.length > 0 && <col style={{ width: actionsColumnWidth }} />}
         </colgroup>
         <thead>
-          {tableState.visibleFilters.size > 0 && <tr className="data-table-filter-row" ref={filterRowRef}>
-            {onSelectionChange && <th />}
-            {columns.map((column) => <th className="filter-row-cell" key={column.id}
-              style={{ position: "sticky", top: 0, zIndex: 14, background: "#f9fbfc",
-                width: column.width ?? DEFAULT_FILTER_COLUMN_WIDTH,
-                minWidth: column.width ?? DEFAULT_FILTER_COLUMN_WIDTH,
-                maxWidth: column.width ?? DEFAULT_FILTER_COLUMN_WIDTH,
-                ...(column.sticky ? { left: stickyOffsets.get(column.id) } : {}) }}>
-              {tableState.renderFilter(column)}
-            </th>)}
-            {actions.length > 0 && <th />}
-          </tr>}
           {hasGroups && <tr ref={groupRowRef} className="data-table-group-row">
             {onSelectionChange && <th />}
             {groupedColumns.map((column) => <th key={column.id} colSpan={flattenColumns([column]).length}
-              style={{ top: filterHeight }}>{column.children?.length ? column.label : ""}</th>)}
+              style={{ top: 0 }}>{column.children?.length ? column.label : ""}</th>)}
             {actions.length > 0 && <th />}
           </tr>}
           <tr>
             {onSelectionChange && (
               <th
                 className={`select-cell ${hideToggleAll ? "hidden" : ""}`}
-                style={{ width: "40px", textAlign: "center", top: filterHeight + groupHeight,
+                style={{ width: "40px", textAlign: "center", top: groupHeight,
                   ...(stickyOffsets.size > 0 ? { left: 0, zIndex: 12 } : {}) }}
               >
                 <Input
@@ -686,11 +678,12 @@ export function DataTable<T>(props: DataTableProps<T>) {
                 idx={idx}
                 onColumnClick={onColumnClick}
                 stickyLeft={stickyOffsets.get(column.id)}
-                stickyTop={filterHeight + groupHeight}
+                stickyTop={groupHeight}
                 isFilterVisible={tableState.visibleFilters.has(column.name ?? column.id)}
                 onToggleFilter={tableState.toggleFilter}
                 onToggleSort={tableState.toggleSort}
                 sortDirection={tableState.sort?.key === (column.name ?? column.id) ? tableState.sort.direction : null}
+                filterControl={tableState.renderFilter(column)}
               />
             ))}
             {actions.length > 0 && (
@@ -782,7 +775,7 @@ export function DataTable<T>(props: DataTableProps<T>) {
                       onClick={(e) => e.stopPropagation()}
                     >
                       <div className="d-flex align-items-center justify-content-end">
-                        {actions.map((action, index) => (
+                        {inlineActions.map((action, index) => (
                           <DataTableAction
                             key={index}
                             action={action}
@@ -792,6 +785,12 @@ export function DataTable<T>(props: DataTableProps<T>) {
                             onFocusNextRow={focusNextRow}
                           />
                         ))}
+                        <DataTableActionMenu
+                          actions={menuActions}
+                          row={row}
+                          rowIndex={rowIndex}
+                          onFocusNextRow={focusNextRow}
+                        />
                       </div>
                     </td>
                   )}

package/src/dataTable/DataTable.view.tsx

@@ -64,10 +64,23 @@ export const DataTableView = () => {
           console.log("Edit action clicked for row:", row);
         },
       },
+      {
+        id: "duplicate",
+        label: "Dupliquer",
+        type: "button",
+        classIcon: "bi-copy",
+        display: "menu",
+        onClick: (row: any) => {
+          console.log("Duplicate action clicked for row:", row);
+        },
+      },
       {
         id: "delete",
         label: "Delete",
         type: "button",
+        classIcon: "bi-trash",
+        display: "menu",
+        shouldDisplay: (row) => row.id !== 1,
         onClick: (row: any) => {
           console.log("Delete action clicked for row:", row);
         },

package/src/dataTable/dataTable.css

@@ -134,7 +134,12 @@
         background-color: #fff;
         color: var(--tertiary-color);
         min-width: 100px;
-        padding: .5rem;
+        padding: .5rem 0;
+
+        &:first-child,
+        &:last-child {
+          padding: .5rem;
+        }
 
         .data-table-column-filter,
         .data-table-column-sort {
@@ -152,6 +157,7 @@
 
         &:hover,
         &:focus-within {
+
           .data-table-column-filter,
           .data-table-column-sort {
             visibility: visible;
@@ -302,32 +308,74 @@
     }
   }
 }
+
 .data-table-action-icon {
   cursor: pointer;
   display: flex;
   align-items: center;
 }
+
+.data-table-action-menu-toggle {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 4px;
+
+  &:hover,
+  &[aria-expanded="true"] {
+    background: rgba(0, 0, 0, 0.06);
+  }
+}
+
+.data-table-action-menu {
+  min-width: 150px;
+  max-width: 300px;
+  padding: 0.25rem;
+
+  button {
+    font-size: 0.85rem;
+    width: 100%;
+    padding: 1rem 0rem !important;
+  }
+}
+
 .data-table-column-heading {
   display: flex;
   align-items: center;
   gap: 4px;
 
-  > .flex-1 {
+  >.flex-1 {
     flex: 1;
   }
 }
+
+.data-table-filter-popover {
+  z-index: 1200;
+  padding: 8px;
+  box-sizing: border-box;
+  border: 1px solid #dce3e7;
+  border-radius: 7px;
+  background: #fff;
+  box-shadow: 0 6px 18px rgba(20, 40, 50, 0.16);
+}
+
 .data-table-group-row th {
   height: 40px;
   box-sizing: border-box;
 }
+
 .data-table-action-link {
   min-width: 0;
   background: transparent;
   color: var(--primary-color);
   text-decoration: underline;
 }
+
 .data-table-mobile-controls {
   display: grid;
   gap: 12px;
   margin-bottom: 16px;
-}
+}

package/src/dataTable/dataTable.interface.ts

@@ -63,4 +63,6 @@ export interface dataTableActionsInterface<T> {
   width?: string | number;
   minWidth?: string | number;
   focusNextRow?: boolean;
+  /** "inline" (défaut) : affichée dans la ligne ; "menu" : regroupée dans le menu « ⋮ » en fin de ligne */
+  display?: "inline" | "menu";
 }

package/src/dataTable/dataTable.utils.ts

@@ -19,10 +19,23 @@ export function getFilterKey<T>(column: dataTableColumnsInterface<T>) {
   return column.name ?? column.id;
 }
 
+export const ACTION_MENU_WIDTH = 40;
+
+export function isMenuAction<T>(action: dataTableActionsInterface<T>) {
+  return action.display === "menu";
+}
+
+export function isActionDisplayed<T>(action: dataTableActionsInterface<T>, row: T) {
+  return action.visible !== false && (action.shouldDisplay ? action.shouldDisplay(row) : true);
+}
+
 export function getActionsWidth<T>(actions: dataTableActionsInterface<T>[], explicitWidth?: number) {
   if (explicitWidth !== undefined) return explicitWidth;
-  if (!actions.some((action) => typeof action.width === "number")) return 200;
-  return actions.reduce((total, action) => total + (typeof action.width === "number" ? action.width : 0), 0);
+  const inlineActions = actions.filter((action) => !isMenuAction(action));
+  const menuWidth = inlineActions.length < actions.length ? ACTION_MENU_WIDTH : 0;
+  if (inlineActions.length === 0 && menuWidth > 0) return menuWidth;
+  if (!inlineActions.some((action) => typeof action.width === "number")) return 200;
+  return inlineActions.reduce((total, action) => total + (typeof action.width === "number" ? action.width : 0), menuWidth);
 }
 
 export function sortRows<T>(data: T[], columns: dataTableColumnsInterface<T>[], sort: DataTableSortState | null): T[] {

package/src/dataTable/dataTableActions/DataTableAction.tsx

@@ -1,6 +1,7 @@
 import { Button } from "../../button/Button";
 import { Icon } from "../../icon/Icon";
 import { dataTableActionsInterface } from "../dataTable.interface";
+import { isActionDisplayed } from "../dataTable.utils";
 type DataTableActionProps = {
   action: dataTableActionsInterface<any>;
   row: any;
@@ -16,7 +17,7 @@ export const DataTableAction = ({
   onFocusNextRow,
 }: DataTableActionProps) => {
   let title = action.label;
-  const display = action.visible !== false && (action.shouldDisplay ? action.shouldDisplay(row) : true);
+  const display = isActionDisplayed(action, row);
   if (!display) return null;
   if (action.labelButton) {
     title = action.labelButton ? action.labelButton(row) : action.label;

package/src/dataTable/dataTableActions/DataTableActionMenu.tsx

@@ -0,0 +1,95 @@
+import { useMemo, useRef, useState } from "react";
+import { Button } from "../../button/Button";
+import { Icon } from "../../icon/Icon";
+import { IconSizeEnum } from "../../icon/iconSize.enum";
+import { MenuInterface } from "../../menus/menu/menu.interface";
+import { Menus } from "../../menus/Menus";
+import { OverlayPanel } from "../../overlayPanel/OverlayPanel";
+import { dataTableActionsInterface } from "../dataTable.interface";
+import { isActionDisplayed } from "../dataTable.utils";
+
+type DataTableActionMenuProps = {
+  actions: dataTableActionsInterface<any>[];
+  row: any;
+  rowIndex?: number;
+  onFocusNextRow?: (rowIndex: number) => void;
+};
+
+export const DataTableActionMenu = ({
+  actions,
+  row,
+  rowIndex,
+  onFocusNextRow,
+}: DataTableActionMenuProps) => {
+  const refButton = useRef<HTMLDivElement>(null);
+  const [open, setOpen] = useState(false);
+  const visibleActions = actions.filter((action) => isActionDisplayed(action, row));
+
+  const items: MenuInterface[] = useMemo(
+    () =>
+      visibleActions.map((action, index) => ({
+        id: index,
+        icon: action.classIcon,
+        name: action.label,
+        disabled: action.disabled,
+        children: (
+          <Button
+            key={action.id}
+            classIcon={action.classIcon}
+            sizeIcon={IconSizeEnum.LARGE}
+            disabled={action.disabled}
+            title={action.labelButton ? action.labelButton(row) : action.label}
+            onClick={(e) => {
+              e.stopPropagation();
+              if (action.disabled) return;
+              setOpen(false);
+              action.onClick(row, rowIndex);
+              if (action.focusNextRow && rowIndex !== undefined) {
+                onFocusNextRow?.(rowIndex);
+              }
+            }}
+          />
+        ),
+      })),
+    [visibleActions, row, rowIndex, onFocusNextRow],
+  );
+
+  if (visibleActions.length === 0) return null;
+
+  return (
+    <>
+      <div
+        ref={refButton}
+        className="data-table-action-menu-toggle"
+        title="Actions"
+        role="button"
+        tabIndex={0}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        onClick={(e) => {
+          e.stopPropagation();
+          setOpen(!open);
+        }}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            e.stopPropagation();
+            setOpen(!open);
+          }
+        }}
+      >
+        <Icon size={IconSizeEnum.MEDIUM} classIcon="bi-three-dots-vertical" />
+      </div>
+      {open && refButton.current && (
+        <OverlayPanel
+          show={open}
+          position="bottomRight"
+          referenceElement={refButton.current}
+          closeOverlay={() => setOpen(false)}
+        >
+          <Menus className="data-table-action-menu" items={items} />
+        </OverlayPanel>
+      )}
+    </>
+  );
+};