kelt-ui-kit-react 2.0.0 → 2.0.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kelt-ui-kit-react",
   "type": "module",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/dataTable/DataTable.tsx

@@ -1,5 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
+import { useIsMobile } from "../_core/hooks/useIsMobile";
+import { Card } from "../card/Card";
 import { TypeInputEnum } from "../form/form.enum";
 import { Input } from "../form/input/Input";
 import { Icon } from "../icon/Icon";
@@ -42,6 +44,7 @@ export type DataTableProps<T> = {
   onRowClassName?: (row: T) => string | undefined;
   rowStyle?: (row: T) => React.CSSProperties | undefined;
   rowClassName?: (row: T) => string | undefined;
+  mobileCardView?: boolean;
 };
 export function DataTable<T>(props: DataTableProps<T>) {
   const {
@@ -70,8 +73,11 @@ export function DataTable<T>(props: DataTableProps<T>) {
     onRowClassName,
     rowStyle,
     rowClassName,
+    mobileCardView = false,
   } = props;
 
+  const isMobile = useIsMobile();
+  const showMobileCardView = mobileCardView && isMobile;
   const loaderRef = useRef<HTMLDivElement | null>(null);
   const footerActionRef = useRef<HTMLDivElement | null>(null);
   const hasAutoFocusedRef = useRef(false);
@@ -150,7 +156,9 @@ export function DataTable<T>(props: DataTableProps<T>) {
         return;
       }
 
-      const table = document.getElementById(id);
+      const table =
+        document.getElementById(`${id}-mobile`) ??
+        document.getElementById(id);
       const eligibleColumnIndexes = columns.reduce<number[]>(
         (indexes, column, idx) => {
           if (
@@ -232,7 +240,8 @@ export function DataTable<T>(props: DataTableProps<T>) {
         return;
       }
 
-      const table = document.getElementById(id);
+      const table =
+        document.getElementById(`${id}-mobile`) ?? document.getElementById(id);
       if (!table) {
         return;
       }
@@ -264,7 +273,7 @@ export function DataTable<T>(props: DataTableProps<T>) {
       for (let offset = 1; offset <= data.length; offset += 1) {
         const nextRowIndex = (rowIndex + offset) % data.length;
         const cell = table.querySelector(
-          `tbody td[data-row-index="${nextRowIndex}"][data-column-index="${firstEligibleColumnIndex}"]`,
+          `[data-row-index="${nextRowIndex}"][data-column-index="${firstEligibleColumnIndex}"]`,
         );
 
         if (!(cell instanceof HTMLElement)) {
@@ -365,9 +374,10 @@ export function DataTable<T>(props: DataTableProps<T>) {
       return;
     }
 
-    const table = document.getElementById(id);
+    const table =
+      document.getElementById(`${id}-mobile`) ?? document.getElementById(id);
     const firstCell = table?.querySelector(
-      `tbody td[data-row-index="0"][data-column-index="${firstEditableColumnIndex}"]`,
+      `[data-row-index="0"][data-column-index="${firstEditableColumnIndex}"]`,
     );
 
     if (!(firstCell instanceof HTMLElement)) {
@@ -462,7 +472,105 @@ export function DataTable<T>(props: DataTableProps<T>) {
     >
       {name && <h2 className="mb-2">{name}</h2>}
       {element}
-      <table className={`data-table ${className ? className : ""}`} id={id}>
+      {showMobileCardView && (
+        <div
+          id={`${id}-mobile`}
+          className={`data-table-mobile-cards ${className ? className : ""}`}
+        >
+          {loading && <Loader display={loading} />}
+          {!loading &&
+            data.map((row, rowIndex) => {
+              const customStyle = (onRowStyle ?? rowStyle)?.(row);
+              const customClass =
+                (onRowClassName ?? rowClassName)?.(row) ?? "";
+              const rowId = getRowId
+                ? getRowId(row)
+                : ((row as any).id ?? row);
+
+              return (
+                <Card
+                  key={rowId as React.Key}
+                  item={{ title: "" }}
+                  className={`data-table-mobile-card ${customClass}`.trim()}
+                  handleClick={onRowClick ? () => onRowClick(row) : undefined}
+                >
+                  <div
+                    className="data-table-mobile-card__content"
+                    style={customStyle}
+                    data-row-index={rowIndex}
+                    onMouseDown={(event) => {
+                      if (isInteractiveClick(event.target)) {
+                        event.stopPropagation();
+                      }
+                    }}
+                  >
+                    {onSelectionChange && (
+                      <div className="data-table-mobile-card__field data-table-mobile-card__selection">
+                        <span className="data-table-mobile-card__label">
+                          Sélection
+                        </span>
+                        <Input
+                          id={`select-card-${rowIndex}`}
+                          name={`select-card-${rowIndex}`}
+                          type={TypeInputEnum.CHECKBOX}
+                          disabled={
+                            limitSelect !== undefined &&
+                            selectedRowIds.size >= limitSelect &&
+                            !selectedRowIds.has(rowId)
+                          }
+                          checked={selectedRowIds.has(rowId)}
+                          onChange={(event) => toggleRow(event, row)}
+                        />
+                      </div>
+                    )}
+                    {columns.map((column, columnIndex) => (
+                      <div
+                        className="data-table-mobile-card__field"
+                        key={column.id}
+                      >
+                        <span className="data-table-mobile-card__label">
+                          {column.label}
+                        </span>
+                        <DataTableRow
+                          container="card"
+                          column={column}
+                          idx={columnIndex}
+                          row={row}
+                          rowIndex={rowIndex}
+                          onEnterNextColumn={focusNextColumn}
+                        />
+                      </div>
+                    ))}
+                    {actions.length > 0 && (
+                      <div className="data-table-mobile-card__actions card-actions">
+                        {actions.map((action, actionIndex) => (
+                          <DataTableAction
+                            key={action.id}
+                            action={action}
+                            row={row}
+                            rowIndex={rowIndex}
+                            index={actionIndex}
+                            onFocusNextRow={focusNextRow}
+                          />
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                </Card>
+              );
+            })}
+          {!loading && data.length === 0 && (
+            <div className="data-table-mobile-cards__empty">
+              {emptyMessage ?? "Aucune donnée"}
+            </div>
+          )}
+        </div>
+      )}
+      <table
+        className={`data-table ${className ? className : ""}`}
+        id={id}
+        style={showMobileCardView ? { display: "none" } : undefined}
+      >
         <thead>
           <tr>
             {onSelectionChange && (

package/src/dataTable/DataTable.view.tsx

@@ -62,6 +62,7 @@ export const DataTableView = () => {
       columns={dataTableColumns}
       id="datatable-example"
       name={"DataTable"}
+      mobileCardView
       onSelectionChange={(selectedRows) => {
         console.log("Selected Rows: ", selectedRows);
       }}

package/src/dataTable/dataTable.css

@@ -47,6 +47,54 @@
   overflow: auto;
   position: relative;
 
+  .data-table-mobile-cards {
+    display: grid;
+    gap: 0.75rem;
+
+    .data-table-mobile-card {
+      width: 100%;
+      max-width: none;
+      height: auto;
+      padding: 0;
+      border-radius: 8px;
+    }
+
+    .data-table-mobile-card__content {
+      width: 100%;
+      min-width: 0;
+    }
+
+    .data-table-mobile-card__field {
+      display: grid;
+      grid-template-columns: minmax(90px, 35%) minmax(0, 1fr);
+      gap: 0.75rem;
+      align-items: center;
+      padding: 0.625rem 0.75rem;
+      border-bottom: 1px solid #e5e5e5;
+    }
+
+    .data-table-mobile-card__label {
+      color: var(--tertiary-color);
+      font-size: 0.875rem;
+      font-weight: 600;
+      overflow-wrap: anywhere;
+    }
+
+    .data-table-mobile-card__actions {
+      display: flex;
+      gap: 0.5rem;
+      align-items: center;
+      justify-content: flex-end;
+      padding: 0.75rem;
+    }
+
+    .data-table-mobile-cards__empty {
+      padding: 1rem;
+      text-align: center;
+      color: #666;
+    }
+  }
+
   &.data-table-container--with-footer-action {
     scroll-padding-bottom: 80px;
   }

package/src/dataTable/dataTableRow/DataTableRow.tsx

@@ -7,6 +7,7 @@ type DataTableRowProps = {
   idx: number;
   rowIndex: number;
   row: any;
+  container?: "cell" | "card";
   onEnterNextColumn?: (columnIndex: number, rowIndex: number) => void;
 };
 export const DataTableRow = ({
@@ -14,6 +15,7 @@ export const DataTableRow = ({
   idx,
   rowIndex,
   row,
+  container = "cell",
   onEnterNextColumn,
 }: DataTableRowProps) => {
   const value = (row as any)[column.id]; // On utilise [column.id] pour accéder aux bonnes propriétés
@@ -24,12 +26,12 @@ export const DataTableRow = ({
     typeof column.showStepButtons === "function"
       ? column.showStepButtons(row)
       : (column.showStepButtons ??
-          (typeof column.stepControls === "function"
-            ? column.stepControls(row)
-            : (column.stepControls ??
-                (typeof column.withStepControls === "function"
-                  ? column.withStepControls(row)
-                  : column.withStepControls)))),
+        (typeof column.stepControls === "function"
+          ? column.stepControls(row)
+          : (column.stepControls ??
+            (typeof column.withStepControls === "function"
+              ? column.withStepControls(row)
+              : column.withStepControls)))),
   );
 
   const handleStep = (direction: "plus" | "minus", e: React.MouseEvent) => {
@@ -50,8 +52,10 @@ export const DataTableRow = ({
     }
   };
 
+  const Container = container === "card" ? "div" : "td";
+
   return (
-    <td
+    <Container
       className={`${isDisabled ? "disabled" : ""}`}
       data-column-index={idx}
       data-row-index={rowIndex}
@@ -93,42 +97,83 @@ export const DataTableRow = ({
             />
           </div>
         ) : (
-        hasStepButtons ? (
-          <div
-            className="data-table-input-number-wrapper"
-            style={{
-              display: "inline-flex",
-              alignItems: "center",
-              gap: "4px",
-              justifyContent:
-                column.align === "right"
-                  ? "flex-end"
-                  : column.align === "center"
-                    ? "center"
-                    : "flex-start",
-            }}
-            onClick={(e) => e.stopPropagation()}
-          >
-            <button
-              type="button"
-              className="data-table-step-btn data-table-step-btn--minus"
-              disabled={
-                isDisabled ||
-                (column.min !== undefined && Number(value) <= column.min)
-              }
-              onClick={(e) => handleStep("minus", e)}
+          hasStepButtons ? (
+            <div
+              className="data-table-input-number-wrapper"
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: "4px",
+                justifyContent:
+                  column.align === "right"
+                    ? "flex-end"
+                    : column.align === "center"
+                      ? "center"
+                      : "flex-start",
+              }}
+              onClick={(e) => e.stopPropagation()}
             >
-              <Icon classIcon="bi-dash-lg" />
-            </button>
+              <button
+                type="button"
+                className="data-table-step-btn data-table-step-btn--minus"
+                disabled={
+                  isDisabled ||
+                  (column.min !== undefined && Number(value) <= column.min)
+                }
+                onClick={(e) => handleStep("minus", e)}
+              >
+                <Icon classIcon="bi-dash-lg" />
+              </button>
+              <input
+                type={column.type}
+                value={value}
+                step={column.step ?? "0.01"}
+                min={column.min}
+                max={column.max}
+                disabled={isDisabled}
+                style={{
+                  textAlign: column.align || "center",
+                  minWidth: column.minWidth,
+                  maxWidth: column.maxWidth,
+                  width: column.width,
+                }}
+                onClick={(e) => e.stopPropagation()}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    if (column.onEnter) {
+                      column.onEnter(e.currentTarget.value, row);
+                    }
+                    if (column.enterToNextColumn) {
+                      e.preventDefault();
+                      onEnterNextColumn?.(idx, rowIndex);
+                    }
+                  }
+                }}
+                onChange={(e) => {
+                  if (column.onEdit) {
+                    column.onEdit(e.target.value, row);
+                  }
+                }}
+              />
+              <button
+                type="button"
+                className="data-table-step-btn data-table-step-btn--plus"
+                disabled={
+                  isDisabled ||
+                  (column.max !== undefined && Number(value) >= column.max)
+                }
+                onClick={(e) => handleStep("plus", e)}
+              >
+                <Icon classIcon="bi-plus-lg" />
+              </button>
+            </div>
+          ) : (
             <input
               type={column.type}
               value={value}
-              step={column.step ?? "0.01"}
-              min={column.min}
-              max={column.max}
-              disabled={isDisabled}
+              step="0.01"
               style={{
-                textAlign: column.align || "center",
+                textAlign: column.align || "left",
                 minWidth: column.minWidth,
                 maxWidth: column.maxWidth,
                 width: column.width,
@@ -151,54 +196,13 @@ export const DataTableRow = ({
                 }
               }}
             />
-            <button
-              type="button"
-              className="data-table-step-btn data-table-step-btn--plus"
-              disabled={
-                isDisabled ||
-                (column.max !== undefined && Number(value) >= column.max)
-              }
-              onClick={(e) => handleStep("plus", e)}
-            >
-              <Icon classIcon="bi-plus-lg" />
-            </button>
-          </div>
-        ) : (
-          <input
-            type={column.type}
-            value={value}
-            step="0.01"
-            style={{
-              textAlign: column.align || "left",
-              minWidth: column.minWidth,
-              maxWidth: column.maxWidth,
-              width: column.width,
-            }}
-            onClick={(e) => e.stopPropagation()}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") {
-                if (column.onEnter) {
-                  column.onEnter(e.currentTarget.value, row);
-                }
-                if (column.enterToNextColumn) {
-                  e.preventDefault();
-                  onEnterNextColumn?.(idx, rowIndex);
-                }
-              }
-            }}
-            onChange={(e) => {
-              if (column.onEdit) {
-                column.onEdit(e.target.value, row);
-              }
-            }}
-          />
-        )
+          )
         )
       ) : column.format ? (
         column.format(value)
       ) : (
         value
       )}
-    </td>
+    </Container>
   );
 };

package/src/expands/expands.css

@@ -39,10 +39,12 @@
       height: 300px;
       flex: 1;
       min-height: 200px;
+
       .expand-header {
-        background-color: #1d3758;
+        background-color: color-mix(in srgb, var(--primary-color), white 5%);
         color: #fff;
       }
+
       .expand-header-custom {
         .expand-header--children {
           display: flex;
@@ -65,6 +67,7 @@
       padding: 15px;
       color: #333;
       background-color: #fff;
+
       &.expand-header-custom {
         margin-bottom: 1rem;
       }
@@ -81,9 +84,11 @@
         font-weight: 500;
       }
     }
+
     & .expand-footer {
       padding: 15px;
     }
+
     & .expand-body {
       display: none;
       flex: 1;
@@ -94,4 +99,4 @@
       flex-direction: column;
     }
   }
-}
+}

package/src/form/form.css

@@ -4,10 +4,12 @@ input {
   border-radius: 4px;
   margin: 0.25rem 0 0.25rem 0;
   min-width: 250px;
+
   &:focus-visible {
     outline: 1px solid #9696a7;
   }
 }
+
 input[type="checkbox"],
 input[type="radio"] {
   min-width: auto;
@@ -16,38 +18,46 @@ input[type="radio"] {
   height: 18px;
   width: 18px;
 }
+
 form {
   &.form-row {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     align-items: center;
+
     .form-group {
       margin-right: 1rem;
       flex: 1;
       padding: 0;
+
       .input-container {
         min-width: auto;
+
         input {
           min-width: auto;
         }
       }
     }
   }
+
   label {
     font-weight: 600;
     font-size: 0.85rem;
     padding-bottom: 0.15rem;
   }
+
   .form-group-checkbox {
     display: flex;
     flex-direction: row;
     align-items: center;
     margin-top: 0.5rem;
+
     label {
       margin-right: 1rem;
       padding: 0;
     }
+
     input {
       min-width: auto;
       padding: 0;
@@ -56,9 +66,11 @@ form {
       width: 18px;
     }
   }
+
   button {
     margin-top: 1rem;
   }
+
   .form-read-value {
     width: 100%;
     min-width: 250px;
@@ -72,8 +84,27 @@ form {
     line-height: normal;
     overflow-wrap: anywhere;
   }
+
   .form-read-value--textarea {
     min-height: 3.25rem;
     white-space: pre-wrap;
   }
-}
+
+  .grid-row {
+
+    .form-group,
+    .input-container,
+    .select-container,
+    .form-read-value {
+      min-width: 0;
+    }
+
+    input:not([type="checkbox"]):not([type="radio"]),
+    .form-control-textarea,
+    .form-read-value {
+      box-sizing: border-box;
+      min-width: 0;
+      width: 100%;
+    }
+  }
+}

package/src/grid/col/colStyled/ColStyled.tsx

@@ -10,6 +10,8 @@ type ColStyledProps = {
   $xl?: GridColumnSpan;
 };
 export const ColStyled = styled.div<ColStyledProps>`
+  box-sizing: border-box;
+  min-width: 0;
   padding: 0 15px;
   flex: 0 0 ${({ $xs }) => getColWidth($xs)};
   max-width: ${({ $xs }) => getColWidth($xs)};
@@ -18,7 +20,7 @@ export const ColStyled = styled.div<ColStyledProps>`
   ${({ $sm }) =>
     $sm &&
     css`
-      @container (min-width: 576px) {
+      @media (min-width: 576px) {
         flex: 0 0 ${getColWidth($sm)};
         max-width: ${getColWidth($sm)};
       }
@@ -27,7 +29,7 @@ export const ColStyled = styled.div<ColStyledProps>`
   ${({ $md }) =>
     $md &&
     css`
-      @container (min-width: 768px) {
+      @media (min-width: 768px) {
         flex: 0 0 ${getColWidth($md)};
         max-width: ${getColWidth($md)};
       }
@@ -36,7 +38,7 @@ export const ColStyled = styled.div<ColStyledProps>`
   ${({ $lg }) =>
     $lg &&
     css`
-      @container (min-width: 992px) {
+      @media (min-width: 992px) {
         flex: 0 0 ${getColWidth($lg)};
         max-width: ${getColWidth($lg)};
       }
@@ -45,7 +47,7 @@ export const ColStyled = styled.div<ColStyledProps>`
   ${({ $xl }) =>
     $xl &&
     css`
-      @container (min-width: 1200px) {
+      @media (min-width: 1200px) {
         flex: 0 0 ${getColWidth($xl)};
         max-width: ${getColWidth($xl)};
       }