kelt-ui-kit-react 1.9.7 → 1.9.8

package/package.json

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

package/src/button/Button.tsx

@@ -13,6 +13,7 @@ export const Button = ({
   classIcon,
   positionicon = 1,
   disabled = false,
+  style,
 }: ButtonInterface) => {
   const handleClick = (e: React.MouseEvent) => {
     e.stopPropagation();
@@ -28,6 +29,7 @@ export const Button = ({
       type="submit"
       onClick={(e) => handleClick(e)}
       className={className}
+      style={style}
     >
       {badge && <Badge {...badge} />}
       {classIcon && positionicon == 1 && (

package/src/button/button.interface.tsx

@@ -11,6 +11,7 @@ export interface ButtonInterface {
   positionicon?: number;
   disabled?: boolean;
   sizeIcon?: IconSizeEnum;
+  style?: React.CSSProperties;
 }
 export interface buttonActionInterface {
   icon?: string;

package/src/dataTable/DataTable.tsx

@@ -21,6 +21,7 @@ export type DataTableProps<T> = {
   element?: JSX.Element;
   data: T[];
   emptyMessage?: string;
+  actionsColumnWidth?: number;
   actions?: dataTableActionsInterface<T>[];
   footerAction?: (props: {
     close: () => void;
@@ -37,6 +38,10 @@ export type DataTableProps<T> = {
   hideToggleAll?: boolean;
   limitSelect?: number;
   getRowId?: (row: T) => string | number;
+  onRowStyle?: (row: T) => React.CSSProperties | undefined;
+  onRowClassName?: (row: T) => string | undefined;
+  rowStyle?: (row: T) => React.CSSProperties | undefined;
+  rowClassName?: (row: T) => string | undefined;
 };
 export function DataTable<T>(props: DataTableProps<T>) {
   const {
@@ -46,6 +51,7 @@ export function DataTable<T>(props: DataTableProps<T>) {
     children,
     element,
     data = [],
+    actionsColumnWidth = 200,
     actions = [],
     footerAction,
     columns = [],
@@ -60,6 +66,10 @@ export function DataTable<T>(props: DataTableProps<T>) {
     hideToggleAll = false,
     limitSelect = undefined,
     getRowId,
+    onRowStyle,
+    onRowClassName,
+    rowStyle,
+    rowClassName,
   } = props;
 
   const loaderRef = useRef<HTMLDivElement | null>(null);
@@ -175,7 +185,8 @@ export function DataTable<T>(props: DataTableProps<T>) {
       );
 
       const currentCellIndex = editableCells.findIndex(
-        (cell) => cell.rowIndex === rowIndex && cell.columnIndex === columnIndex,
+        (cell) =>
+          cell.rowIndex === rowIndex && cell.columnIndex === columnIndex,
       );
 
       if (currentCellIndex === -1) {
@@ -197,7 +208,8 @@ export function DataTable<T>(props: DataTableProps<T>) {
           continue;
         }
 
-        const focusableElement = cell.querySelector<HTMLElement>(focusableSelector);
+        const focusableElement =
+          cell.querySelector<HTMLElement>(focusableSelector);
 
         if (focusableElement) {
           nextInput = focusableElement;
@@ -214,6 +226,69 @@ export function DataTable<T>(props: DataTableProps<T>) {
     [columns, data, focusEditableElement, id],
   );
 
+  const focusNextRow = useCallback(
+    (rowIndex: number) => {
+      if (typeof document === "undefined") {
+        return;
+      }
+
+      const table = document.getElementById(id);
+      if (!table) {
+        return;
+      }
+
+      const eligibleColumnIndexes = columns.reduce<number[]>(
+        (indexes, column, idx) => {
+          if (
+            column.editable &&
+            column.type !== "select" &&
+            column.type !== "image"
+          ) {
+            indexes.push(idx);
+          }
+
+          return indexes;
+        },
+        [],
+      );
+
+      if (eligibleColumnIndexes.length === 0) {
+        return;
+      }
+
+      const firstEligibleColumnIndex = eligibleColumnIndexes[0];
+      const focusableSelector =
+        'input:not([disabled]), textarea:not([disabled]), [contenteditable="true"]';
+      let nextInput: HTMLElement | null = null;
+
+      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}"]`,
+        );
+
+        if (!(cell instanceof HTMLElement)) {
+          continue;
+        }
+
+        const focusableElement =
+          cell.querySelector<HTMLElement>(focusableSelector);
+
+        if (focusableElement) {
+          nextInput = focusableElement;
+          break;
+        }
+      }
+
+      if (!nextInput) {
+        return;
+      }
+
+      focusEditableElement(nextInput);
+    },
+    [columns, data.length, focusEditableElement, id],
+  );
+
   const handleClickRow = useCallback(
     (e: React.MouseEvent, row: T) => {
       e.stopPropagation();
@@ -309,7 +384,14 @@ export function DataTable<T>(props: DataTableProps<T>) {
 
     hasAutoFocusedRef.current = true;
     focusEditableElement(firstInput);
-  }, [autoFocusFirstEditable, columns, data.length, focusEditableElement, id, loading]);
+  }, [
+    autoFocusFirstEditable,
+    columns,
+    data.length,
+    focusEditableElement,
+    id,
+    loading,
+  ]);
   useEffect(() => {
     if (!showFooterAction) {
       setFooterActionOffset(0);
@@ -373,7 +455,9 @@ export function DataTable<T>(props: DataTableProps<T>) {
     <div
       className={`data-table-container ${showFooterAction ? "data-table-container--with-footer-action" : ""}`}
       style={
-        showFooterAction ? { paddingBottom: `${footerActionOffset}px` } : undefined
+        showFooterAction
+          ? { paddingBottom: `${footerActionOffset}px` }
+          : undefined
       }
     >
       {name && <h2 className="mb-2">{name}</h2>}
@@ -408,7 +492,8 @@ export function DataTable<T>(props: DataTableProps<T>) {
             {actions.length > 0 && (
               <th
                 style={{
-                  width: "200px",
+                  width: `${actionsColumnWidth}px`,
+                  minWidth: `${actionsColumnWidth}px`,
                 }}
                 align="right"
                 key={"actions"}
@@ -432,66 +517,81 @@ export function DataTable<T>(props: DataTableProps<T>) {
             <></>
           )}
           {!loading &&
-            data.map((row, rowIndex) => (
-              <tr
-                key={rowIndex}
-                className={rowIndex % 2 === 0 ? "even" : "odd"}
-                data-row-index={rowIndex}
-                onClick={(e) => handleClickRow?.(e, row)}
-              >
-                {onSelectionChange && (
-                  <td
-                    className="select-cell"
-                    style={{ textAlign: "center" }}
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setIsFooterActionVisible(true);
-                    }}
-                  >
-                    <Input
-                      id={`select-row-${rowIndex}`}
-                      name={`select-row-${rowIndex}`}
-                      type={TypeInputEnum.CHECKBOX}
-                      disabled={
-                        limitSelect !== undefined &&
-                        selectedRowIds.size >= limitSelect &&
-                        !selectedRowIds.has(
+            data.map((row, rowIndex) => {
+              const customStyle = (onRowStyle ?? rowStyle)?.(row);
+              const customClass = (onRowClassName ?? rowClassName)?.(row) ?? "";
+
+              return (
+                <tr
+                  key={rowIndex}
+                  className={`${rowIndex % 2 === 0 ? "even" : "odd"} ${customClass}`.trim()}
+                  style={customStyle}
+                  data-row-index={rowIndex}
+                  onClick={(e) => handleClickRow?.(e, row)}
+                >
+                  {onSelectionChange && (
+                    <td
+                      className="select-cell"
+                      style={{ textAlign: "center" }}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setIsFooterActionVisible(true);
+                      }}
+                    >
+                      <Input
+                        id={`select-row-${rowIndex}`}
+                        name={`select-row-${rowIndex}`}
+                        type={TypeInputEnum.CHECKBOX}
+                        disabled={
+                          limitSelect !== undefined &&
+                          selectedRowIds.size >= limitSelect &&
+                          !selectedRowIds.has(
+                            getRowId ? getRowId(row) : ((row as any).id ?? row),
+                          )
+                        }
+                        checked={selectedRowIds.has(
                           getRowId ? getRowId(row) : ((row as any).id ?? row),
-                        )
-                      }
-                      checked={selectedRowIds.has(
-                        getRowId ? getRowId(row) : ((row as any).id ?? row),
-                      )}
-                      onChange={(e) => toggleRow(e, row)}
+                        )}
+                        onChange={(e) => toggleRow(e, row)}
+                      />
+                    </td>
+                  )}
+                  {columns.map((column, idx) => (
+                    <DataTableRow
+                      column={column}
+                      idx={idx}
+                      row={row}
+                      rowIndex={rowIndex}
+                      key={idx}
+                      onEnterNextColumn={focusNextColumn}
                     />
-                  </td>
-                )}
-                {columns.map((column, idx) => (
-                  <DataTableRow
-                    column={column}
-                    idx={idx}
-                    row={row}
-                    rowIndex={rowIndex}
-                    key={idx}
-                    onEnterNextColumn={focusNextColumn}
-                  />
-                ))}
-                {actions.length > 0 && (
-                  <td align="right" onClick={(e) => e.stopPropagation()}>
-                    <div className="d-flex align-items-center justify-content-end">
-                      {actions.map((action, index) => (
-                        <DataTableAction
-                          key={index}
-                          action={action}
-                          row={row}
-                          index={index}
-                        />
-                      ))}
-                    </div>
-                  </td>
-                )}
-              </tr>
-            ))}
+                  ))}
+                  {actions.length > 0 && (
+                    <td
+                      style={{
+                        width: `${actionsColumnWidth}px`,
+                        minWidth: `${actionsColumnWidth}px`,
+                      }}
+                      align="right"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <div className="d-flex align-items-center justify-content-end">
+                        {actions.map((action, index) => (
+                          <DataTableAction
+                            key={index}
+                            action={action}
+                            row={row}
+                            rowIndex={rowIndex}
+                            index={index}
+                            onFocusNextRow={focusNextRow}
+                          />
+                        ))}
+                      </div>
+                    </td>
+                  )}
+                </tr>
+              );
+            })}
           {!loading && data.length === 0 && (
             <DataTableLoading
               columns={columns}

package/src/dataTable/dataTable.css

@@ -106,6 +106,55 @@
       tr.odd {
         background-color: #f5f5f5;
       }
+
+      .data-table-input-number-wrapper {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+
+        button.data-table-step-btn {
+          min-width: 28px !important;
+          width: 28px !important;
+          height: 28px !important;
+          max-height: 28px !important;
+          padding: 0 !important;
+          display: inline-flex !important;
+          align-items: center !important;
+          justify-content: center !important;
+          border-radius: 4px;
+          border: 1px solid #dcdcdc;
+          background-color: #f8f9fa;
+          color: #333;
+          font-size: 14px;
+          line-height: 1;
+          cursor: pointer;
+          transition: background-color 0.15s, border-color 0.15s;
+
+          &:hover:not(:disabled) {
+            background-color: #e9ecef;
+            border-color: #adb5bd;
+          }
+
+          &:active:not(:disabled) {
+            background-color: #dee2e6;
+          }
+
+          &:disabled {
+            opacity: 0.4;
+            cursor: not-allowed;
+            background-color: #f8f9fa;
+          }
+
+          .bi {
+            font-size: 13px;
+            line-height: 1;
+          }
+        }
+
+        input {
+          margin: 0;
+        }
+      }
     }
   }
 }

package/src/dataTable/dataTable.interface.ts

@@ -15,21 +15,31 @@ export interface dataTableColumnsInterface<T> {
   enterToNextColumn?: boolean;
   options?: { label: string; value: string }[];
   onEdit?: (value: any, row: T) => void;
+  onEnter?: (value: any, row: T) => void;
   onDisable?: (row: T) => boolean;
   onRowStyle?: (row: T) => React.CSSProperties;
   type: HTMLInputTypeAttribute | "select" | "image";
   imageAlt?: (row: T) => string;
   imageStyle?: React.CSSProperties;
   imageSrc?: (row: T) => string;
+  showStepButtons?: boolean | ((row: T) => boolean);
+  stepControls?: boolean | ((row: T) => boolean);
+  withStepControls?: boolean | ((row: T) => boolean);
+  step?: number;
+  min?: number;
+  max?: number;
 }
 export interface dataTableActionsInterface<T> {
   id: string;
   label: string;
   type: "button" | "link" | "icon";
   classIcon?: string;
-  onClick: (row: T) => void;
+  onClick: (row: T, rowIndex?: number) => void;
   shouldDisplay?: (row: T) => boolean;
   disabled?: boolean;
   labelButton?: (row: T) => string;
   visible?: boolean;
+  width?: string | number;
+  minWidth?: string | number;
+  focusNextRow?: boolean;
 }

package/src/dataTable/dataTableActions/DataTableAction.tsx

@@ -4,12 +4,16 @@ import { dataTableActionsInterface } from "../dataTable.interface";
 type DataTableActionProps = {
   action: dataTableActionsInterface<any>;
   row: any;
+  rowIndex?: number;
   index?: number;
+  onFocusNextRow?: (rowIndex: number) => void;
 };
 export const DataTableAction = ({
   action,
   row,
+  rowIndex,
   index,
+  onFocusNextRow,
 }: DataTableActionProps) => {
   let title = action.label;
   const display = action.shouldDisplay ? action.shouldDisplay(row) : true;
@@ -17,14 +21,27 @@ export const DataTableAction = ({
   if (action.labelButton) {
     title = action.labelButton ? action.labelButton(row) : action.label;
   }
+
+  const handleClick = (e?: React.MouseEvent) => {
+    e?.stopPropagation();
+    action.onClick(row, rowIndex);
+    if (action.focusNextRow && rowIndex !== undefined) {
+      onFocusNextRow?.(rowIndex);
+    }
+  };
+
   return (
     <>
       {action.type === "button" && (
         <Button
           title={title}
           key={`button-action-${action.id}-${index}`}
-          onClick={() => action.onClick(row)}
+          onClick={handleClick}
           disabled={action.disabled}
+          style={{
+            minWidth: action.minWidth,
+            width: action.width,
+          }}
           className={`data-table-action button--tertiary mr-2 w-100 ${
             action.classIcon ? action.classIcon : ""
           }`}
@@ -34,7 +51,11 @@ export const DataTableAction = ({
         <div
           key={`icon-action-${action.id}-${index}`}
           className={`mr-2 `}
-          onClick={() => action.onClick(row)}
+          onClick={handleClick}
+          style={{
+            minWidth: action.minWidth,
+            width: action.width,
+          }}
         >
           <Icon classIcon={action.classIcon ?? ""} key={action.id} />
         </div>

package/src/dataTable/dataTableRow/DataTableRow.tsx

@@ -20,6 +20,36 @@ export const DataTableRow = ({
   const style = column.onRowStyle ? column.onRowStyle(row) : {};
   const isDisabled = column.onDisable?.(row) ?? false;
 
+  const hasStepButtons = Boolean(
+    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)))),
+  );
+
+  const handleStep = (direction: "plus" | "minus", e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (isDisabled) return;
+    const currentNum = Number(value) || 0;
+    const step = column.step ?? 1;
+    let newNum = direction === "plus" ? currentNum + step : currentNum - step;
+    if (column.min !== undefined && newNum < column.min) {
+      newNum = column.min;
+    }
+    if (column.max !== undefined && newNum > column.max) {
+      newNum = column.max;
+    }
+    newNum = Math.round(newNum * 1000) / 1000;
+    if (column.onEdit) {
+      column.onEdit(newNum, row);
+    }
+  };
+
   return (
     <td
       className={`${isDisabled ? "disabled" : ""}`}
@@ -62,6 +92,77 @@ 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)}
+            >
+              <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}
@@ -75,9 +176,14 @@ export const DataTableRow = ({
             }}
             onClick={(e) => e.stopPropagation()}
             onKeyDown={(e) => {
-              if (e.key === "Enter" && column.enterToNextColumn) {
-                e.preventDefault();
-                onEnterNextColumn?.(idx, rowIndex);
+              if (e.key === "Enter") {
+                if (column.onEnter) {
+                  column.onEnter(e.currentTarget.value, row);
+                }
+                if (column.enterToNextColumn) {
+                  e.preventDefault();
+                  onEnterNextColumn?.(idx, rowIndex);
+                }
               }
             }}
             onChange={(e) => {
@@ -87,6 +193,7 @@ export const DataTableRow = ({
             }}
           />
         )
+        )
       ) : column.format ? (
         column.format(value)
       ) : (