kelt-ui-kit-react 2.1.1 → 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,12 +12,13 @@ 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,
@@ -92,6 +93,8 @@ 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 inlineActions = useMemo(() => actions.filter((action) => !isMenuAction(action)), [actions]);
+  const menuActions = useMemo(() => actions.filter(isMenuAction), [actions]);
   const groupRowRef = useRef<HTMLTableRowElement>(null);
   const [groupHeight, setGroupHeight] = useState(0);
   const hasGroups = groupedColumns.some((column) => column.children?.length);
@@ -604,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}
@@ -614,6 +617,12 @@ export function DataTable<T>(props: DataTableProps<T>) {
                             onFocusNextRow={focusNextRow}
                           />
                         ))}
+                        <DataTableActionMenu
+                          actions={menuActions}
+                          row={row}
+                          rowIndex={rowIndex}
+                          onFocusNextRow={focusNextRow}
+                        />
                       </div>
                     )}
                   </div>
@@ -766,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}
@@ -776,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,20 +308,50 @@
     }
   }
 }
+
 .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;
@@ -325,18 +361,21 @@
   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>
+      )}
+    </>
+  );
+};

package/src/docs/catalog.ts

@@ -5,6 +5,7 @@ export const catalog: Record<string, { category: Category; description: string;
   "/buttons": { category: "Actions", icon: "cursor", description: "Des actions claires, avec icones, badges et menus contextuels." },
   "/action": { category: "Actions", icon: "lightning", description: "Une action compacte et ses interactions." },
   "/button-file": { category: "Actions", icon: "upload", description: "Selectionner un fichier depuis un bouton dedie." },
+  "/button-import": { category: "Actions", icon: "file-earmark-arrow-up", description: "Ouvrir une modal pour choisir un fichier puis valider l'import." },
   "/form": { category: "Formulaires", icon: "ui-checks", description: "Composer des formulaires dynamiques, sections et champs responsives." },
   "/address-search": { category: "Formulaires", icon: "geo-alt", description: "Rechercher une adresse et exploiter ses donnees geographiques." },
   "/select": { category: "Formulaires", icon: "chevron-expand", description: "Choisir une valeur parmi des options." },

package/src/index.ts

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

package/src/tabs/tabs.css

@@ -27,4 +27,10 @@
       }
     }
   }
-}
+}
+
+/* Un panel inactif (attribut hidden) ne doit jamais occuper de place,
+   même si un panelClassName lui donne un display (flex, grid...) */
+.tabs-root [role="tabpanel"][hidden] {
+  display: none !important;
+}

package/tests/dataTable.test.mjs

@@ -50,6 +50,15 @@ test("action widths preserve Hub sums and Kelt explicit column widths", () => {
   assert.equal(utils.getActionsWidth([]), 200);
 });
 
+test("menu actions are grouped behind a single three-dots toggle", () => {
+  assert.equal(utils.getActionsWidth([{ width: 48 }, { width: 100, display: "menu" }]), 48 + utils.ACTION_MENU_WIDTH);
+  assert.equal(utils.getActionsWidth([{ display: "menu" }, { display: "menu" }]), utils.ACTION_MENU_WIDTH);
+  assert.equal(utils.getActionsWidth([{ type: "button" }, { display: "menu" }]), 200);
+  assert.equal(utils.isActionDisplayed({ visible: false }, {}), false);
+  assert.equal(utils.isActionDisplayed({ shouldDisplay: (row) => row.id === 2 }, { id: 1 }), false);
+  assert.equal(utils.isActionDisplayed({}, { id: 1 }), true);
+});
+
 test("sorting is stable, immutable, and supports Hub names and dates", () => {
   const rows = [{ name: "Dossier 10", date: "2026-10-12" }, { name: "Dossier 2", date: "2026-01-02" }];
   const columns = [{ id: "name", name: "dossier", type: "text" }, { id: "date", type: "date" }];

package/tests/documentation.test.mjs

@@ -27,7 +27,7 @@ test("every registered demo has generated API documentation and its exact source
     ts.forEachChild(node, visit);
   }
   visit(source);
-  assert.equal(routes.length, 30);
+  assert.equal(routes.length, 31);
   assert.deepEqual(Object.keys(docs).sort(), routes.sort());
   for (const route of routes) {
     assert.ok(docs[route].components.length > 0, route);