kelt-ui-kit-react 2.1.0 → 2.1.2

package/src/dataTable/dataTableColumn/DataTableColumn.tsx

@@ -1,3 +1,5 @@
+import { ReactNode, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { dataTableColumnsInterface } from "../dataTable.interface";
 import { DataTableColumnFilter } from "./dataTableColumnFilter/DataTableColumnFilter";
 import { DataTableColumnSort } from "./dataTableColumnSort/DataTableColumnSort";
@@ -13,7 +15,62 @@ type DataTableColumnProps = {
   sortDirection?: DataTableSortDirection | null;
   stickyLeft?: number;
   stickyTop?: number;
+  filterControl?: ReactNode;
 };
+
+function FilterPopover({
+  anchor,
+  label,
+  children,
+}: {
+  anchor: HTMLElement;
+  label: string;
+  children: ReactNode;
+}) {
+  const [style, setStyle] = useState<React.CSSProperties>();
+
+  useLayoutEffect(() => {
+    const updatePosition = () => {
+      const rect = anchor.getBoundingClientRect();
+      if (!rect.width || !rect.height) {
+        setStyle(undefined);
+        return;
+      }
+      const width = Math.min(Math.max(rect.width, 220), window.innerWidth - 24);
+      setStyle({
+        position: "fixed",
+        top: Math.min(rect.bottom + 4, window.innerHeight - 80),
+        left: Math.max(12, Math.min(rect.left, window.innerWidth - width - 12)),
+        width,
+      });
+    };
+
+    updatePosition();
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [anchor]);
+
+  return style && typeof document !== "undefined"
+    ? createPortal(
+        <div
+          className="data-table-filter-popover"
+          style={style}
+          role="group"
+          aria-label={`Filtrer ${label}`}
+          onMouseDown={(event) => event.stopPropagation()}
+          onClick={(event) => event.stopPropagation()}
+        >
+          {children}
+        </div>,
+        document.body,
+      )
+    : null;
+}
+
 export const DataTableColumn = ({
   column,
   idx,
@@ -24,9 +81,12 @@ export const DataTableColumn = ({
   sortDirection,
   stickyLeft,
   stickyTop = 0,
+  filterControl,
 }: DataTableColumnProps) => {
+  const headerRef = useRef<HTMLTableCellElement>(null);
   return (
     <th
+      ref={headerRef}
       key={`colonne-${column.id}-${idx}`}
       style={{
         minWidth: column.minWidth,
@@ -43,6 +103,14 @@ export const DataTableColumn = ({
         {column.filterable && <DataTableColumnFilter column={column} isFilterVisible={isFilterVisible} onToggleVisibility={onToggleFilter} />}
         {column.sortable && <DataTableColumnSort column={column} sortDirection={sortDirection} onToggleSort={onToggleSort} />}
       </div>
+      {isFilterVisible && filterControl && headerRef.current && (
+        <FilterPopover
+          anchor={headerRef.current}
+          label={column.label}
+        >
+          {filterControl}
+        </FilterPopover>
+      )}
     </th>
   );
 };

package/src/dataTable/dataTableRow/DataTableRow.tsx

@@ -67,7 +67,9 @@ export const DataTableRow = <T,>({
         column.onChange?.(next, row);
         commit(next);
       }}
-      style={{ minWidth: column.minWidth, maxWidth: column.maxWidth, width: column.width }} />
+      style={{ minWidth: column.minWidth, maxWidth: column.maxWidth, width: column.width,
+        // le bouton du Select est un bloc : textAlign ne l'aligne pas
+        ...(align === "right" ? { marginLeft: "auto" } : align === "center" ? { marginInline: "auto" } : {}) }} />
   ) : (
     <input ref={inputRef} type={column.type === "image" ? "text" : column.type}
       value={enterCommit ? draft : stringValue}

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/select/Select.tsx

@@ -145,7 +145,7 @@ export const Select = ({
   }, [showOptions, disabled]);
 
   return (
-    <div id={id} className={`select-container ${className ? className : ""}`}>
+    <div id={id} className={`select-container ${hasSelection && placeholder ? "has-selection" : ""} ${className ? className : ""}`}>
       {label && (
         <label htmlFor={`select-${id}`} className="select-container-label">
           {label}

package/src/select/select.css

@@ -1,15 +1,6 @@
 .select-container {
   position: relative;
 
-  &::after,
-  &::before {
-    --size: 0.3rem;
-    content: "";
-    position: absolute;
-    right: 1rem;
-    pointer-events: none;
-  }
-
   .clear-btn {
     position: absolute;
     top: 50%;
@@ -18,22 +9,13 @@
     align-items: center;
     z-index: 2;
     justify-content: center;
-    right: 10px;
+    /* à gauche de la flèche (dessinée à right: 1rem, largeur 0.6rem) */
+    right: 2rem;
     cursor: pointer;
   }
 
-  &::before {
-    border-left: var(--size) solid transparent;
-    border-right: var(--size) solid transparent;
-    border-bottom: var(--size) solid black;
-    top: 40%;
-  }
-
-  &::after {
-    border-left: var(--size) solid transparent;
-    border-right: var(--size) solid transparent;
-    border-top: var(--size) solid black;
-    top: 55%;
+  &.has-selection .select-container-button {
+    padding-right: 3.5rem;
   }
 
   .select-container-label {
@@ -45,6 +27,7 @@
 
   .select-container-button {
     appearance: none;
+    position: relative;
     width: 100%;
     font-size: 0.8rem;
     padding: 0.5rem 1rem;
@@ -60,6 +43,29 @@
     justify-content: space-between;
     padding-right: 2rem;
 
+    &::before,
+    &::after {
+      --size: 0.3rem;
+      content: "";
+      position: absolute;
+      right: 1rem;
+      pointer-events: none;
+    }
+
+    &::before {
+      border-left: var(--size) solid transparent;
+      border-right: var(--size) solid transparent;
+      border-bottom: var(--size) solid black;
+      top: calc(50% - var(--size));
+    }
+
+    &::after {
+      border-left: var(--size) solid transparent;
+      border-right: var(--size) solid transparent;
+      border-top: var(--size) solid black;
+      top: calc(50% + 1px);
+    }
+
     .select-container-value {
       flex: 1;
       min-width: 0;

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);