kelt-ui-kit-react 2.1.0 → 2.1.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kelt-ui-kit-react",
   "type": "module",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "private": false,
   "repository": {
     "type": "git",

package/src/dataTable/DataTable.tsx

@@ -22,7 +22,6 @@ export type {
   DataTableDateRangeFilterValue, DataTableFilterState, DataTableSortDirection,
   DataTableSortState, FilterValue,
 } from "./dataTable.utils";
-const DEFAULT_FILTER_COLUMN_WIDTH = 100;
 
 export type DataTableProps<T> = {
   id: string;
@@ -93,9 +92,7 @@ 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 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 +109,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 +117,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 +526,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>
@@ -643,29 +638,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 +669,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 && (

package/src/dataTable/dataTable.css

@@ -316,6 +316,15 @@
     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;

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