kelt-ui-kit-react 2.0.9 → 2.1.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kelt-ui-kit-react",
   "type": "module",
-  "version": "2.0.9",
+  "version": "2.1.1",
   "private": false,
   "repository": {
     "type": "git",
@@ -61,4 +61,4 @@
     "typescript": "^4.9.5",
     "vite-plugin-checker": "^0.8.0"
   }
-}
+}

package/src/card/cardAction/CardAction.tsx

@@ -4,17 +4,11 @@ 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 { OverlayPanel, PositionOverlay } from "../../overlayPanel/OverlayPanel";
 import { CardInterface } from "../card.interface";
 import { CardActionInterface } from "../cardAction.interface";
 import "./cardAction.css";
-export type PositionOverlay =
-  | "left"
-  | "right"
-  | "topLeft"
-  | "topRight"
-  | "bottomLeft"
-  | "bottomRight";
+export type { PositionOverlay };
 export type CardActionProps = {
   actions: CardActionInterface[];
   item?: CardInterface;

package/src/dataTable/DataTable.tsx

@@ -22,6 +22,7 @@ export type {
   DataTableDateRangeFilterValue, DataTableFilterState, DataTableSortDirection,
   DataTableSortState, FilterValue,
 } from "./dataTable.utils";
+
 export type DataTableProps<T> = {
   id: string;
   name?: string;
@@ -91,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(() => {
@@ -110,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();
@@ -119,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;
@@ -529,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>
@@ -641,26 +638,17 @@ export function DataTable<T>(props: DataTableProps<T>) {
           {actions.length > 0 && <col style={{ width: actionsColumnWidth }} />}
         </colgroup>
         <thead>
-          {tableState.visibleFilters.size > 0 && <tr ref={filterRowRef}>
-            {onSelectionChange && <th />}
-            {columns.map((column) => <th className="filter-row-cell" key={column.id}
-              style={{ position: "sticky", top: 0, zIndex: 14, background: "#f9fbfc", minWidth: column.minWidth,
-                ...(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
@@ -681,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

@@ -135,6 +135,102 @@
         color: var(--tertiary-color);
         min-width: 100px;
         padding: .5rem;
+
+        .data-table-column-filter,
+        .data-table-column-sort {
+          visibility: hidden;
+
+          &.active {
+            visibility: visible;
+          }
+        }
+
+        .data-table-column-filter-active,
+        .data-table-column-sort-active {
+          color: var(--tertiary-color);
+        }
+
+        &:hover,
+        &:focus-within {
+          .data-table-column-filter,
+          .data-table-column-sort {
+            visibility: visible;
+          }
+        }
+      }
+
+      .data-table-filter-row {
+        th {
+          padding-top: 6px;
+          padding-bottom: 6px;
+          overflow: visible;
+        }
+
+        .data-table-filter-select {
+          width: 100%;
+          max-width: 100%;
+
+          button {
+            width: 100%;
+            max-width: 100%;
+            overflow: hidden;
+            padding: 4px 6px;
+            border: 1px solid #dedede;
+          }
+
+          .select-container-value {
+            display: block;
+            min-width: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            font-size: 0.7rem;
+          }
+        }
+
+        .data-table-filter-input-wrapper {
+          width: 100%;
+          max-width: 100%;
+          overflow: visible;
+          box-sizing: border-box;
+
+          .input-clear-icon,
+          .input-clear-btn,
+          .clear-btn {
+            right: 5px;
+
+            .bi {
+              font-size: 0.8rem;
+            }
+          }
+
+          .input-container {
+            min-width: 0;
+            width: 100%;
+          }
+
+          .select-container,
+          .select-container-button {
+            max-width: 100%;
+            min-width: 0;
+          }
+        }
+
+        .data-table-filter-input {
+          width: 100%;
+          max-width: 100%;
+          min-width: 0;
+          box-sizing: border-box;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          border: 1px solid #c9cfdb;
+          border-radius: 6px;
+          padding: 4px 6px;
+          font-size: 12px;
+          background-color: #fff;
+          color: #333;
+        }
       }
     }
 
@@ -214,7 +310,20 @@
 .data-table-column-heading {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 4px;
+
+  > .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;

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,
@@ -39,10 +99,18 @@ export const DataTableColumn = ({
       onClick={() => onColumnClick?.(column)}
     >
       <div className="data-table-column-heading">
-        <span>{column.label}</span>
-        {column.sortable && <DataTableColumnSort column={column} sortDirection={sortDirection} onToggleSort={onToggleSort} />}
+        <span className="flex-1">{column.label}</span>
         {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/dataTable/useDataTableState.tsx

@@ -60,6 +60,11 @@ export function useDataTableState<T>(
   }
 
   function renderFilter(column: dataTableColumnsInterface<T>) {
+    const control = renderFilterControl(column);
+    return control && <div className="data-table-filter-input-wrapper">{control}</div>;
+  }
+
+  function renderFilterControl(column: dataTableColumnsInterface<T>) {
     const key = getFilterKey(column);
     if (!column.filterable || !visibleFilters.has(key)) return null;
     const value = filters[key];
@@ -72,7 +77,7 @@ export function useDataTableState<T>(
     }
     if (column.filterType === TypeInputEnum.CHECKBOX || column.filterType === TypeInputEnum.RADIO) {
       return <Select id={inputId} options={column.filterDataEnum ?? []} multiple
-        usePortal showOptions={focusKey === key}
+        className="data-table-filter-select" classNameOverlay="data-table-filter-select-overlay" usePortal showOptions={focusKey === key}
         value={String(value ?? "").split(",").filter(Boolean)}
         onChangeMultiple={(values) => updateFilter(key, values.join(","))}
         placeholder={`Filtrer ${column.label}`} />;
@@ -81,6 +86,7 @@ export function useDataTableState<T>(
       type={column.filterType === TypeInputEnum.DATE ? TypeInputEnum.DATE : TypeInputEnum.TEXT}
       value={String(value ?? "")} autoFocus={focusKey === key}
       disabledDebounce showClearButton placeholder={`Filtrer ${column.label}`}
+      className="data-table-filter-input"
       onClick={(event) => event.stopPropagation()}
       onChange={(event) => updateFilter(key, event.target.value)} />;
   }

package/src/overlayPanel/OverlayPanel.tsx

@@ -20,6 +20,7 @@ export type PositionOverlay =
   | "right"
   | "topLeft"
   | "topRight"
+  | "bottom"
   | "bottomLeft"
   | "bottomRight";
 
@@ -107,6 +108,10 @@ export const OverlayPanel = forwardRef(
                 top: rect.bottom,
                 left: rect.left,
               }),
+              bottom: () => ({
+                top: rect.bottom,
+                left: rect.left + rect.width / 2 - boxRect.width / 2,
+              }),
               left: () => ({
                 top: rect.top + rect.height / 2 - boxRect.height / 2,
                 left: rect.left - boxRect.width,
@@ -122,7 +127,7 @@ export const OverlayPanel = forwardRef(
               ({ top, left } = positions[position]());
               // Manque d'espace en bas → afficher au-dessus de l'élément
               if (
-                (position === "bottomLeft" || position === "bottomRight") &&
+                (position === "bottom" || position === "bottomLeft" || position === "bottomRight") &&
                 top + boxRect.height > innerHeight &&
                 rect.top - boxRect.height >= 0
               ) {

package/src/select/Select.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Icon } from "../icon/Icon";
 
-import { OverlayPanel } from "../overlayPanel/OverlayPanel";
+import { OverlayPanel, PositionOverlay } from "../overlayPanel/OverlayPanel";
 import "./select.css";
 import { SelectOptionInterface } from "./selectOption.interface";
 
@@ -26,6 +26,7 @@ export interface SelectProps {
   onChange?: (value: string) => void;
   placeholder?: string;
   classNameOverlay?: string;
+  positionOverlay?: PositionOverlay;
 }
 
 export const Select = ({
@@ -46,6 +47,7 @@ export const Select = ({
   value,
   placeholder,
   classNameOverlay,
+  positionOverlay = "bottomLeft",
 }: SelectProps): JSX.Element => {
   const [showOverlay, setShowOverlay] = useState(false);
   const [overlayRef, setOverlayRef] = useState<HTMLElement | null>(null);
@@ -143,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}
@@ -175,7 +177,7 @@ export const Select = ({
       {showOverlay && overlayRef && (
         <OverlayPanel
           show={showOverlay}
-          position="bottomLeft"
+          position={positionOverlay}
           className={classNameOverlay ?? ""}
           closeOverlay={() => setShowOverlay(false)}
           referenceElement={overlayRef}

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;