next-recomponents 2.0.27 → 2.0.29

package/src/input/index.tsx

@@ -1,14 +1,12 @@
-import { DetailedHTMLProps, InputHTMLAttributes } from "react";
+import { React } from "next/dist/server/route-modules/app-page/vendored/rsc/entrypoints";
+import { InputHTMLAttributes, useState } from "react";
 
-interface InputProps
-  extends DetailedHTMLProps<
-    InputHTMLAttributes<HTMLInputElement>,
-    HTMLInputElement
-  > {
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   label: React.ReactNode;
   regex?: RegExp;
   invalidMessage?: React.ReactNode;
 }
+
 export default function Input({
   label,
   className,
@@ -18,26 +16,82 @@ export default function Input({
 }: InputProps) {
   const value = `${props?.value || ""}`;
   const isValid = !regex ? true : regex.test(value);
+  const isPassword = props.type === "password";
+  const [showPassword, setShowPassword] = useState(false);
 
   return (
     <div className="w-full">
       <label className="flex flex-col gap-1">
-        <div className="font-bold ">
+        <div className="font-bold">
           {label} {props?.required && <span className="text-red-500">*</span>}
         </div>
-        <div>
+        <div className="relative">
           <input
             {...props}
+            type={isPassword && showPassword ? "text" : props.type}
             className={[
               "p-2 w-full rounded border shadow",
-              value != "" && !isValid && "bg-red-200 text-black",
-              value != "" && isValid && "bg-green-200 text-black",
+              isPassword && "pr-10",
+              value !== "" && !isValid && "bg-red-200 text-black",
+              value !== "" && isValid && "bg-green-200 text-black",
               className,
-            ].join(" ")}
+            ]
+              .filter(Boolean)
+              .join(" ")}
           />
+          {isPassword && (
+            <button
+              type="button"
+              onClick={() => setShowPassword((prev) => !prev)}
+              className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-800 focus:outline-none"
+              aria-label={
+                showPassword ? "Ocultar contraseña" : "Mostrar contraseña"
+              }
+            >
+              {showPassword ? (
+                // Ojo cerrado (ocultar)
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-5 w-5"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
+                  />
+                </svg>
+              ) : (
+                // Ojo abierto (mostrar)
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-5 w-5"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                  />
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+                  />
+                </svg>
+              )}
+            </button>
+          )}
         </div>
       </label>
-      {!isValid && value != "" && (
+      {!isValid && value !== "" && (
         <div className="text-red-800 invalid">{invalidMessage}</div>
       )}
     </div>

package/src/table/index.tsx

@@ -22,8 +22,12 @@ interface FooterType {
   [key: string]: FooterAggregation;
 }
 
+type GridDensity = "compact" | "standard" | "comfortable";
+
 interface TableProps {
   data: any;
+  /** Muestra un input de búsqueda general que filtra filas por palabras clave */
+  searchable?: boolean;
   flex?: number;
   editableFields?: string[];
   onSelect?: (data: GridValidRowModel[]) => void;
@@ -44,6 +48,28 @@ interface TableProps {
   className?: string;
   fontSize?: string;
   colSize?: Record<string, number>;
+  /**
+   * Alto fijo de fila en px.
+   * Si se omite usa el default de MUI según `density`
+   * (compact ≈ 36, standard ≈ 52, comfortable ≈ 68).
+   * Se ignora automáticamente cuando `wrapText` es true.
+   */
+  rowHeight?: number;
+  /**
+   * Cuando es true el texto largo hace wrap en lugar de truncarse,
+   * y el alto de cada fila crece para mostrar todo el contenido.
+   * Internamente activa `getRowHeight={() => "auto"}` en el DataGrid.
+   */
+  wrapText?: boolean;
+  /**
+   * Densidad visual de la tabla.
+   * Afecta el padding de celdas y encabezados independientemente
+   * del tamaño de fuente.
+   * - "compact"     → padding mínimo, tabla muy densa
+   * - "standard"    → (default) comportamiento por defecto de MUI
+   * - "comfortable" → padding generoso, fácil de leer
+   */
+  density?: GridDensity;
   [key: string]: any;
 }
 
@@ -256,6 +282,7 @@ function useColumns(
     buttons?: Record<string, any>;
     hideColumns: string[];
     modal?: React.ReactNode;
+    wrapText?: boolean;
     handleRowUpdate: (row: GridRowModel) => GridRowModel;
     onModalOpen: (row: GridValidRowModel) => void;
   },
@@ -267,9 +294,11 @@ function useColumns(
     buttons,
     hideColumns,
     modal,
+    wrapText,
     handleRowUpdate,
     onModalOpen,
   } = options;
+
   return useMemo(() => {
     if (!rows.length) return [];
 
@@ -309,7 +338,6 @@ function useColumns(
 
           if (isNumber) {
             if (isNaN(value)) return value;
-
             return value;
           }
 
@@ -319,6 +347,20 @@ function useColumns(
         width: key == "id" ? 80 : (colSize?.[key] ?? undefined),
         editable: editableFields?.includes(key) ?? false,
         type: typeof rows[0][key] === "number" ? "number" : "string",
+        // When wrapText is enabled, allow cells to grow vertically
+        ...(wrapText && {
+          renderHeader: (params: any) => (
+            <span
+              style={{
+                whiteSpace: "normal",
+                lineHeight: 1.3,
+                wordBreak: "break-word",
+              }}
+            >
+              {params.colDef.headerName}
+            </span>
+          ),
+        }),
         renderCell: buttons?.[key]
           ? (params: any) => {
               const children =
@@ -338,14 +380,28 @@ function useColumns(
                 },
               });
             }
-          : null,
+          : wrapText
+            ? (params: any) => (
+                // Plain cell with wrap — no custom button
+                <span
+                  style={{
+                    whiteSpace: "normal",
+                    wordBreak: "break-word",
+                    lineHeight: 1.4,
+                    padding: "6px 0",
+                    display: "block",
+                  }}
+                >
+                  {params.formattedValue ?? params.value}
+                </span>
+              )
+            : null,
       }));
 
     if (modal) {
       cols.unshift({
         field: "Modal",
         headerName: "Modal",
-        // flex,
         editable: false,
         type: "string",
         width: 10,
@@ -363,10 +419,63 @@ function useColumns(
     }
 
     return cols;
-  }, [rows]);
+  }, [rows, wrapText]);
 }
 
-// ─── IHTable (array data) ─────────────────────────────────────────────────────
+// ─── SearchBar ────────────────────────────────────────────────────────────────
+
+function SearchBar({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+}) {
+  return (
+    <div className="flex items-center gap-2 px-2 pb-1">
+      <svg
+        className="text-gray-400 shrink-0"
+        width="14"
+        height="14"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+      >
+        <path
+          fillRule="evenodd"
+          d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+          clipRule="evenodd"
+        />
+      </svg>
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder="Buscar…"
+        className="w-full max-w-xs text-xs border border-gray-300 rounded px-2 py-1 outline-none focus:border-blue-400 focus:ring-1 focus:ring-blue-200 transition"
+      />
+      {value && (
+        <button
+          onClick={() => onChange("")}
+          className="text-gray-400 hover:text-gray-600 text-sm leading-none"
+          title="Limpiar búsqueda"
+        >
+          &times;
+        </button>
+      )}
+    </div>
+  );
+}
+
+/** Devuelve true si la fila contiene TODAS las palabras del query */
+function rowMatchesSearch(row: GridValidRowModel, query: string): boolean {
+  if (!query.trim()) return true;
+  const words = query.trim().toLowerCase().split(/\s+/);
+  const rowText = Object.values(row)
+    .filter((v) => v != null && v !== "")
+    .join(" ")
+    .toLowerCase();
+  return words.every((word) => rowText.includes(word));
+}
 
 function IHTable({
   data,
@@ -387,6 +496,10 @@ function IHTable({
   fontSize = "1rem",
   className,
   colSize,
+  rowHeight,
+  wrapText = false,
+  density = "standard",
+  searchable = false,
 }: TableProps) {
   if (modal && onSelect)
     throw new Error("Solo se puede usar modal o onSelect por separado");
@@ -398,6 +511,7 @@ function IHTable({
     ids: new Set(),
   });
   const [modalRow, setModalRow] = useState<GridValidRowModel | undefined>();
+  const [searchQuery, setSearchQuery] = useState("");
 
   // Inject Modal button key if modal is provided
   const resolvedButtons = modal ? { ...buttons, Modal: "" } : buttons;
@@ -437,8 +551,15 @@ function IHTable({
     return [];
   }, [selectedRows, rows]);
 
+  // Rows after applying the search filter (only when searchable is enabled)
+  const displayRows = useMemo(
+    () =>
+      searchable ? rows.filter((r) => rowMatchesSearch(r, searchQuery)) : rows,
+    [rows, searchQuery, searchable],
+  );
+
   const columns = useColumns(
-    rows,
+    displayRows,
     currentCoin,
     {
       flex,
@@ -446,6 +567,7 @@ function IHTable({
       buttons: resolvedButtons,
       hideColumns,
       modal,
+      wrapText,
       handleRowUpdate,
       onModalOpen: handleModalOpen,
     },
@@ -454,22 +576,34 @@ function IHTable({
 
   if (!rows.length) return null;
 
+  // When wrapText is active we must use getRowHeight; rowHeight prop is ignored.
+  const rowHeightProps = wrapText
+    ? { getRowHeight: () => "auto" as const }
+    : rowHeight != null
+      ? { rowHeight }
+      : {};
+
   return (
     <div className="m-2">
       {header && <div className="font-bold  p-2 ">{header}</div>}
-      <Toolbar
-        exportName={exportName}
-        onSave={onSave}
-        onSelect={onSelect}
-        rows={rows}
-        filteredRows={filteredRows}
-      />
+      <div className="flex justify-between">
+        <Toolbar
+          exportName={exportName}
+          onSave={onSave}
+          onSelect={onSelect}
+          rows={rows}
+          filteredRows={filteredRows}
+        />
+        {searchable && (
+          <SearchBar value={searchQuery} onChange={setSearchQuery} />
+        )}
+      </div>
 
       <Box
         sx={{
           display: "flex",
           flexDirection: "column",
-          height: HEIGHT_MAP[rows.length] ?? height,
+          height: HEIGHT_MAP[displayRows.length] ?? height,
           width,
           zIndex: 999999999,
         }}
@@ -485,24 +619,42 @@ function IHTable({
 
         <DataGrid
           className={className}
-          rows={rows}
+          rows={displayRows}
           columns={columns as any}
+          density={density}
           checkboxSelection={Boolean(onSelect)}
           rowSelectionModel={selectedRows}
           onRowSelectionModelChange={!modal ? setSelectedRows : undefined}
+          {...rowHeightProps}
           sx={{
-            fontSize, // equivalente a text-xs
+            fontSize,
             "& .MuiDataGrid-cell": {
               fontSize,
+              // Allow cells to wrap text when wrapText is enabled
+              ...(wrapText && {
+                alignItems: "flex-start",
+                paddingTop: "8px",
+                paddingBottom: "8px",
+                whiteSpace: "normal",
+                wordBreak: "break-word",
+              }),
             },
             "& .MuiDataGrid-columnHeader": {
               fontSize,
+              ...(wrapText && {
+                whiteSpace: "normal",
+                "& .MuiDataGrid-columnHeaderTitle": {
+                  whiteSpace: "normal",
+                  lineHeight: 1.3,
+                  wordBreak: "break-word",
+                },
+              }),
             },
             "& .MuiDataGrid-cell--editable": {
               backgroundColor: "#c6d8f0",
               fontWeight: 500,
             },
-            ...(rows.length <= Object.keys(HEIGHT_MAP).length && {
+            ...(displayRows.length <= Object.keys(HEIGHT_MAP).length && {
               "& .MuiDataGrid-filler": {
                 display: "none",
               },
@@ -511,10 +663,10 @@ function IHTable({
           editMode="row"
           processRowUpdate={handleRowUpdate}
           pageSizeOptions={[5, 10]}
-          hideFooter={rows.length <= Object.keys(HEIGHT_MAP).length}
+          hideFooter={displayRows.length <= Object.keys(HEIGHT_MAP).length}
         />
       </Box>
-      <CustomFooter footer={footer} rows={rows} />
+      <CustomFooter footer={footer} rows={displayRows} />
     </div>
   );
 }