kelt-ui-kit-react 2.0.9 → 2.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kelt-ui-kit-react",
   "type": "module",
-  "version": "2.0.9",
+  "version": "2.1.0",
   "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,8 @@ export type {
   DataTableDateRangeFilterValue, DataTableFilterState, DataTableSortDirection,
   DataTableSortState, FilterValue,
 } from "./dataTable.utils";
+const DEFAULT_FILTER_COLUMN_WIDTH = 100;
+
 export type DataTableProps<T> = {
   id: string;
   name?: string;
@@ -641,10 +643,13 @@ export function DataTable<T>(props: DataTableProps<T>) {
           {actions.length > 0 && <col style={{ width: actionsColumnWidth }} />}
         </colgroup>
         <thead>
-          {tableState.visibleFilters.size > 0 && <tr ref={filterRowRef}>
+          {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", minWidth: column.minWidth,
+              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>)}

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,11 @@
 .data-table-column-heading {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 4px;
+
+  > .flex-1 {
+    flex: 1;
+  }
 }
 .data-table-group-row th {
   height: 40px;

package/src/dataTable/dataTableColumn/DataTableColumn.tsx

@@ -39,9 +39,9 @@ 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>
     </th>
   );

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);
@@ -175,7 +177,7 @@ export const Select = ({
       {showOverlay && overlayRef && (
         <OverlayPanel
           show={showOverlay}
-          position="bottomLeft"
+          position={positionOverlay}
           className={classNameOverlay ?? ""}
           closeOverlay={() => setShowOverlay(false)}
           referenceElement={overlayRef}