@m4l/components 9.4.45 → 9.4.46

package/components/datagrids/views/ListView/hooks/useListContent/useListContent.js

@@ -0,0 +1,112 @@
+import { jsx as t, jsxs as b } from "@emotion/react/jsx-runtime";
+import { useState as D } from "react";
+import { ContainerLabelValueColumnStyled as L, ContentWrapperColumnStyled as R, LabelHeaderColumnStyled as z, EditorCellWrapperStyled as I, ValueColumnStyled as y, EditablePlaceholderStyled as T, IconButtonEditStyled as A } from "../../../../slots/DataGridSlot.js";
+import { DICTIONARY as O } from "../../../../dictionary.js";
+import { useModuleDictionary as V } from "@m4l/core";
+import { ActionsEditOutlined as j } from "@m4l/icons";
+import { useComponentSize as H } from "../../../../../../hooks/useComponentSize/useComponentSize.js";
+import { useDataGrid as K } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
+function Q({
+  row: r,
+  rows: c,
+  rowIndex: n,
+  columns: p,
+  onRowsChange: o
+}) {
+  const { getConfigColumns: h, size: f } = K(), { getLabel: k } = V(), { currentSize: x } = H(f), [S, l] = D(null), g = h("list");
+  return {
+    listContent: p.map((e, u) => {
+      const w = g.find(
+        (m) => m.key === e.key
+      )?.showTitle !== !1;
+      return /* @__PURE__ */ t(L, { ownerState: {}, children: /* @__PURE__ */ b(
+        R,
+        {
+          ownerState: {},
+          onDoubleClick: e.renderEditCell && S !== e.key ? () => {
+            l(e.key);
+          } : void 0,
+          children: [
+            w && /* @__PURE__ */ t(z, { ownerState: {}, variant: "body", color: "text.secondary", children: e.name }),
+            (() => {
+              if (e.renderEditCell && S === e.key)
+                return /* @__PURE__ */ t(I, { ownerState: { size: f }, children: e.renderEditCell({
+                  column: e,
+                  row: r,
+                  rowIdx: u,
+                  /**
+                   * onRowChange es una función que se ejecuta cuando el usuario edita una celda.
+                   */
+                  onRowChange: (d) => {
+                    if (o) {
+                      const a = c.map(
+                        (s, C) => C === n ? d : s
+                      );
+                      o(a, {
+                        indexes: [n],
+                        column: e
+                      });
+                    }
+                  },
+                  onClose: () => l(null)
+                }) });
+              if (e.renderCell) {
+                const d = e.renderCell({
+                  column: e,
+                  row: r,
+                  rowIdx: u,
+                  isCellSelected: !1,
+                  tabIndex: -1,
+                  /**
+                   * onRowChange es una función que se ejecuta cuando el usuario edita una celda.
+                   */
+                  onRowChange: (a) => {
+                    if (o) {
+                      const s = c.map(
+                        (C, v) => v === n ? a : C
+                      );
+                      o(s, {
+                        indexes: [n],
+                        column: e
+                      });
+                    }
+                  }
+                });
+                return /* @__PURE__ */ t(y, { ownerState: {}, variant: "body", color: "text.primary", children: d });
+              }
+              const i = r[e.key], E = i == null || i === "";
+              return e.renderEditCell ? /* @__PURE__ */ b(T, { ownerState: {}, children: [
+                /* @__PURE__ */ t(
+                  y,
+                  {
+                    ownerState: {},
+                    variant: "body",
+                    color: E ? "text.secondary" : "text.primary",
+                    children: E ? k(O.EDIT_PLACEHOLDER) : i
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  A,
+                  {
+                    ownerState: {},
+                    src: /* @__PURE__ */ t(j, {}),
+                    onClick: () => {
+                      l(e.key);
+                    },
+                    size: x,
+                    role: "button",
+                    "aria-label": "Editar texto"
+                  }
+                )
+              ] }) : /* @__PURE__ */ t(y, { ownerState: {}, variant: "body", color: "text.primary", children: r[e.key] ?? "-" });
+            })()
+          ]
+        }
+      ) }, e.key);
+    }),
+    columnsCount: p.length
+  };
+}
+export {
+  Q as useListContent
+};

package/components/datagrids/views/ListView/hooks/useListVirtualizer/index.d.ts

@@ -0,0 +1,3 @@
+export { useListVirtualizer } from './useListVirtualizer';
+export type { UseListVirtualizerProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/components/datagrids/views/ListView/hooks/useListVirtualizer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../../../packages/components/src/components/datagrids/views/ListView/hooks/useListVirtualizer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC"}

package/components/datagrids/views/ListView/hooks/useListVirtualizer/types.d.ts

@@ -0,0 +1,27 @@
+import { RefObject } from 'react';
+export interface UseListVirtualizerProps {
+    /**
+     * Total number of rows to virtualize.
+     * Used to calculate the total scrollable height and determine which rows to render.
+     */
+    count: number;
+    /**
+     * Ref to the scrollable container element (the element with `overflow: auto`).
+     * The virtualizer listens to scroll events on this element to determine visible rows.
+     */
+    scrollElementRef: RefObject<HTMLDivElement | null>;
+    /**
+     * Number of extra rows to render outside the visible viewport (above and below).
+     * Prevents blank flashes during fast scrolling by pre-rendering nearby rows.
+     * @default 5
+     */
+    overscan?: number;
+    /**
+     * Estimated row height in pixels.
+     * Used as initial approximation before `measureElement` measures the real DOM size.
+     * A close estimate prevents scroll jumps and layout shifts.
+     * @default 120
+     */
+    estimateSize?: number;
+}
+//# sourceMappingURL=types.d.ts.map

package/components/datagrids/views/ListView/hooks/useListVirtualizer/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../../../../packages/components/src/components/datagrids/views/ListView/hooks/useListVirtualizer/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,uBAAuB;IACtC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,gBAAgB,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB"}

package/components/datagrids/views/ListView/hooks/useListVirtualizer/useListVirtualizer.d.ts

@@ -0,0 +1,19 @@
+import { UseListVirtualizerProps } from './types';
+/**
+ * Hook that wraps TanStack Virtual's `useVirtualizer` for the ListView.
+ *
+ * Only rows visible in the viewport (plus `overscan`) are mounted in the DOM.
+ * Row heights are measured dynamically via `measureElement` + `ResizeObserver`,
+ * so cards can have any height without manual calculation.
+ * @returns
+ * - `virtualizer` — the virtualizer instance (use `virtualizer.measureElement` as ref on each row,
+ *    and `virtualizer.scrollToIndex` to programmatically scroll to a row)
+ * - `virtualItems` — array of items to render (each has `index`, `start` offset, and `size`)
+ * - `totalSize` — total scrollable height in pixels (set on the virtual container)
+ */
+export declare function useListVirtualizer({ count, scrollElementRef, overscan, estimateSize, }: UseListVirtualizerProps): {
+    virtualizer: import('@tanstack/virtual-core').Virtualizer<HTMLDivElement, Element>;
+    virtualItems: import('@tanstack/virtual-core').VirtualItem[];
+    totalSize: number;
+};
+//# sourceMappingURL=useListVirtualizer.d.ts.map

package/components/datagrids/views/ListView/hooks/useListVirtualizer/useListVirtualizer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useListVirtualizer.d.ts","sourceRoot":"","sources":["../../../../../../../../../../packages/components/src/components/datagrids/views/ListView/hooks/useListVirtualizer/useListVirtualizer.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AASlD;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,gBAAgB,EAChB,QAAY,EACZ,YAAoC,GACrC,EAAE,uBAAuB;;;;EAazB"}

package/components/datagrids/views/ListView/hooks/useListVirtualizer/useListVirtualizer.js

@@ -0,0 +1,23 @@
+import { useVirtualizer as u } from "@tanstack/react-virtual";
+const o = 50;
+function s({
+  count: e,
+  scrollElementRef: r,
+  overscan: i = 5,
+  estimateSize: l = o
+}) {
+  const t = u({
+    count: e,
+    getScrollElement: () => r.current,
+    estimateSize: () => l,
+    overscan: i
+  });
+  return {
+    virtualizer: t,
+    virtualItems: t.getVirtualItems(),
+    totalSize: t.getTotalSize()
+  };
+}
+export {
+  s as useListVirtualizer
+};

package/components/datagrids/views/ListView/hooks/useModalDetail/index.d.ts

@@ -0,0 +1,3 @@
+export * from './useModalDetail';
+export type { UseModalDetailProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/components/datagrids/views/ListView/hooks/useModalDetail/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../../../packages/components/src/components/datagrids/views/ListView/hooks/useModalDetail/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,YAAY,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC"}

package/components/datagrids/views/ListView/hooks/useModalDetail/types.d.ts

@@ -0,0 +1,20 @@
+import { Column, RowsChangeData } from 'react-data-grid';
+import { Maybe } from '@m4l/core';
+/**
+ * Props para el hook useModalDetail
+ */
+export interface UseModalDetailProps<TRow> {
+    /**
+     * Columnas a mostrar en el modal de detalle
+     */
+    columns: readonly Column<TRow, any>[];
+    /**
+     * Función para manejar cambios en las filas (para editores)
+     */
+    onRowsChange?: Maybe<(rows: TRow[], data: RowsChangeData<TRow, any>) => void>;
+    /**
+     * Array completo de todas las filas (necesario para reconstruir el array al editar en el modal)
+     */
+    rows: readonly TRow[];
+}
+//# sourceMappingURL=types.d.ts.map

package/components/datagrids/views/ListView/hooks/useModalDetail/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../../../../packages/components/src/components/datagrids/views/ListView/hooks/useModalDetail/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAElC;;GAEG;AACH,MAAM,WAAW,mBAAmB,CAAC,IAAI;IACvC;;OAEG;IACH,OAAO,EAAE,SAAS,MAAM,CAAC,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC;IACtC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,cAAc,CAAC,IAAI,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC,CAAC;IAC9E;;OAEG;IACH,IAAI,EAAE,SAAS,IAAI,EAAE,CAAC;CACvB"}

package/components/datagrids/views/ListView/hooks/useModalDetail/useModalDetail.d.ts

@@ -0,0 +1,7 @@
+import { UseModalDetailProps } from './types';
+/**
+ * Hook que renderiza el modal de detalle para la vista de ListView
+ * mostrando TODAS las columnas sin excepción
+ */
+export declare const useModalDetail: <TRow>({ columns, onRowsChange, rows, }: UseModalDetailProps<TRow>) => (row: TRow) => void;
+//# sourceMappingURL=useModalDetail.d.ts.map

package/components/datagrids/views/ListView/hooks/useModalDetail/useModalDetail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModalDetail.d.ts","sourceRoot":"","sources":["../../../../../../../../../../packages/components/src/components/datagrids/views/ListView/hooks/useModalDetail/useModalDetail.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAI9C;;;GAGG;AACH,eAAO,MAAM,cAAc,GAAI,IAAI,EAAG,kCAInC,mBAAmB,CAAC,IAAI,CAAC,WAQlB,IAAI,SAsDb,CAAC"}

package/components/datagrids/views/ListView/hooks/useModalDetail/useModalDetail.js

@@ -0,0 +1,72 @@
+import { jsx as o, jsxs as h } from "@emotion/react/jsx-runtime";
+import { useModuleDictionary as D, useEnvironment as M } from "@m4l/core";
+import { useIsMobile as I } from "@m4l/graphics";
+import { useCallback as S } from "react";
+import { useModal as g } from "../../../../../../hooks/useModal/index.js";
+import { ContentModalSettingStyled as x, DataGridRootStyled as b } from "../../../../slots/DataGridSlot.js";
+import { pathIcons as v } from "../../../../icons.js";
+import { DICTIONARY as y } from "../../../../dictionary.js";
+import { ListDetail as A } from "../../subcomponents/ListDetail/ListDetail.js";
+import { ActionsContainer as w } from "../../../../../CommonActions/components/ActionsContainer/ActionsContainer.js";
+import { useDataGrid as L } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
+import { WindowBase as O } from "../../../../../WindowBase/WindowBase.js";
+import { ActionCancel as T } from "../../../../../CommonActions/components/ActionCancel/ActionCancel.js";
+const q = ({
+  columns: i,
+  onRowsChange: n,
+  rows: t
+}) => {
+  const { getConfigColumns: r, size: l } = L(), { openModal: s, closeModal: e } = g(), { getLabel: a } = D(), { host_static_assets: m, environment_assets: d } = M(), c = I();
+  return S(
+    (p) => {
+      const f = r("list"), u = t.findIndex((C) => C === p);
+      s({
+        initialWidth: 500,
+        initialHeight: 680,
+        fullScreen: c,
+        window: /* @__PURE__ */ o(
+          O,
+          {
+            title: a(y.DETAILS),
+            iconUrl: `${m}/${d}/${v.info}`,
+            onClose: e,
+            className: "detail-modal",
+            variant: "outlined",
+            emergeType: "modal",
+            children: /* @__PURE__ */ h(x, { ownerState: {}, children: [
+              /* @__PURE__ */ o(b, { ownerState: {}, children: /* @__PURE__ */ o(
+                A,
+                {
+                  row: p,
+                  rows: t,
+                  rowIndex: u,
+                  columns: i,
+                  viewColumnsConfig: f,
+                  onRowsChange: n,
+                  size: l ?? "medium"
+                }
+              ) }),
+              /* @__PURE__ */ o(w, { children: /* @__PURE__ */ o(T, { onClick: e }) })
+            ] })
+          }
+        )
+      });
+    },
+    [
+      i,
+      t,
+      n,
+      l,
+      r,
+      s,
+      e,
+      a,
+      m,
+      d,
+      c
+    ]
+  );
+};
+export {
+  q as useModalDetail
+};

package/components/datagrids/views/ListView/hooks/useProcessedColumns/index.d.ts

@@ -0,0 +1,3 @@
+export * from './useProcessedColumns';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/components/datagrids/views/ListView/hooks/useProcessedColumns/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../../../packages/components/src/components/datagrids/views/ListView/hooks/useProcessedColumns/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC"}

package/components/datagrids/views/ListView/hooks/useProcessedColumns/types.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Options for useProcessedColumns (list view).
+ * Same shape as cards; defined here so list does not depend on CardsView.
+ */
+export interface ProcessedColumnsOptions {
+    /**
+     * If true, applies visibility filter from list column config.
+     * If false, shows all columns (e.g. for detail).
+     * @default true
+     */
+    applyVisibilityFilter?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/components/datagrids/views/ListView/hooks/useProcessedColumns/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../../../../packages/components/src/components/datagrids/views/ListView/hooks/useProcessedColumns/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,WAAW,uBAAuB;IACtC;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC"}

package/components/datagrids/views/ListView/hooks/useProcessedColumns/useProcessedColumns.d.ts

@@ -0,0 +1,49 @@
+import { Column } from 'react-data-grid';
+import { ProcessedColumnsOptions } from './types';
+/**
+ * Processes columns for list view (visibility, order, formatter→renderCell).
+ * Same behaviour as CardsView useProcessedColumns; kept separate so list view does not depend on cards.
+ * Always uses getConfigColumns('list') for list column config.
+ */
+export declare function useProcessedColumns<TRow, TSummaryRow>(columns: readonly Column<TRow, TSummaryRow>[], options?: ProcessedColumnsOptions): {
+    name: string | import('react').ReactElement;
+    key: string;
+    width?: string | number | null | undefined;
+    minWidth?: number | null | undefined;
+    maxWidth?: number | null | undefined;
+    cellClass?: string | ((row: TRow) => string | null | undefined) | null | undefined;
+    headerCellClass?: string | null | undefined;
+    summaryCellClass?: string | ((row: TSummaryRow) => string | null | undefined) | null | undefined;
+    renderHeaderCell?: ((props: import('react-data-grid').RenderHeaderCellProps<TRow, TSummaryRow>) => import('react').ReactNode) | null | undefined;
+    renderCell?: ((props: import('react-data-grid').RenderCellProps<TRow, TSummaryRow>) => import('react').ReactNode) | null | undefined;
+    renderSummaryCell?: ((props: import('react-data-grid').RenderSummaryCellProps<TSummaryRow, TRow>) => import('react').ReactNode) | null | undefined;
+    renderGroupCell?: ((props: import('react-data-grid').RenderGroupCellProps<TRow, TSummaryRow>) => import('react').ReactNode) | null | undefined;
+    renderEditCell?: ((props: import('react-data-grid').RenderEditCellProps<TRow, TSummaryRow>) => import('react').ReactNode) | null | undefined;
+    editable?: boolean | ((row: TRow) => boolean) | null | undefined;
+    colSpan?: ((args: import('react-data-grid').ColSpanArgs<TRow, TSummaryRow>) => number | null | undefined) | null | undefined;
+    frozen?: boolean | null | undefined;
+    resizable?: boolean | null | undefined;
+    sortable?: boolean | null | undefined;
+    draggable?: boolean | null | undefined;
+    sortDescendingFirst?: boolean | null | undefined;
+    editorOptions?: {
+        readonly displayCellContent?: boolean | null | undefined;
+        readonly commitOnOutsideClick?: boolean | null | undefined;
+    } | null | undefined;
+    visible?: boolean;
+    hidden?: boolean;
+    fixed?: boolean;
+    type: import('../../../..').ColumnType;
+    exportable?: boolean;
+    align?: import('../../../../types').ColumnAlign;
+    isDraggable?: boolean;
+    withFilter?: boolean;
+    withinHeaderRenderer?: import('react').FunctionComponent<import('react-data-grid').RenderHeaderCellProps<TRow, TSummaryRow>> | undefined;
+    customFilter?: ((row: TRow, value: string) => boolean) | undefined;
+    customSort?: ((a: TRow, b: TRow) => number) | undefined;
+    formatter?: ((props: any) => JSX.Element) | undefined;
+    editor?: import('@m4l/core').Maybe<(props: import('react-data-grid').RenderEditCellProps<TRow, TSummaryRow>) => import('react').ReactNode>;
+    groupable?: boolean;
+    grouped?: boolean;
+}[];
+//# sourceMappingURL=useProcessedColumns.d.ts.map

package/components/datagrids/views/ListView/hooks/useProcessedColumns/useProcessedColumns.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useProcessedColumns.d.ts","sourceRoot":"","sources":["../../../../../../../../../../packages/components/src/components/datagrids/views/ListView/hooks/useProcessedColumns/useProcessedColumns.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAqB,MAAM,iBAAiB,CAAC;AAG5D,OAAO,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAElD;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,WAAW,EACnD,OAAO,EAAE,SAAS,MAAM,CAAC,IAAI,EAAE,WAAW,CAAC,EAAE,EAC7C,OAAO,GAAE,uBAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAsDtC"}

package/components/datagrids/views/ListView/hooks/useProcessedColumns/useProcessedColumns.js

@@ -0,0 +1,30 @@
+import { useMemo as C } from "react";
+import { SELECT_COLUMN_KEY as y } from "react-data-grid";
+import { DATAGRID_ACTIONS_COLUMN_KEY as p } from "../../../../constants.js";
+import { useDataGrid as k } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
+function A(s, u = {}) {
+  const { applyVisibilityFilter: d = !0 } = u, { getConfigColumns: f } = k(), t = C(
+    () => f("list"),
+    [f]
+  );
+  return C(() => {
+    const l = s.filter((r) => {
+      if (r.key === y || r.key === p)
+        return !1;
+      if (!d)
+        return !r.hidden;
+      const e = t.find((i) => i.key === r.key), n = e ? e.visible : !0;
+      return !r.hidden && n;
+    }).map((r) => {
+      const e = { ...r };
+      return e.formatter && !e.renderCell && (e.renderCell = e.formatter), e.editor && !e.renderEditCell && (e.renderEditCell = e.editor), e;
+    });
+    return l.sort((r, e) => {
+      const n = t.findIndex((o) => o.key === r.key), i = t.findIndex((o) => o.key === e.key), m = n === -1 ? t.length : n, c = i === -1 ? t.length : i;
+      return m - c;
+    }), l;
+  }, [s, t, d]);
+}
+export {
+  A as useProcessedColumns
+};

package/components/datagrids/views/ListView/index.d.ts

@@ -0,0 +1,3 @@
+export { ListView } from './ListView';
+export type { ListViewProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/components/datagrids/views/ListView/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/datagrids/views/ListView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC"}

package/components/datagrids/views/ListView/subcomponents/ListDetail/ListDetail.d.ts

@@ -0,0 +1,9 @@
+import { ListDetailProps } from './types';
+/**
+ * Componente genérico que renderiza TODAS las columnas de una fila
+ * en formato detalle dentro del modal.
+ *
+ * A diferencia del componente Cards, este muestra TODAS las columnas
+ */
+export declare function ListDetail<TRow>({ row, columns, onRowsChange, size, rows, rowIndex, }: ListDetailProps<TRow>): import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ListDetail.d.ts.map

package/components/datagrids/views/ListView/subcomponents/ListDetail/ListDetail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListDetail.d.ts","sourceRoot":"","sources":["../../../../../../../../../../packages/components/src/components/datagrids/views/ListView/subcomponents/ListDetail/ListDetail.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAM1C;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,EAC/B,GAAG,EACH,OAAO,EACP,YAAY,EACZ,IAAe,EACf,IAAI,EACJ,QAAQ,GACT,EAAE,eAAe,CAAC,IAAI,CAAC,oDAyKvB"}

package/components/datagrids/views/ListView/subcomponents/ListDetail/ListDetail.js

@@ -0,0 +1,113 @@
+import { jsx as t, jsxs as S } from "@emotion/react/jsx-runtime";
+import { useState as k, useCallback as I } from "react";
+import { CardDetailContainerStyled as $, ContainerLabelValueColumnStyled as F, ContentWrapperColumnStyled as K, LabelHeaderColumnStyled as O, EditorCellWrapperStyled as V, ValueColumnStyled as h, EditablePlaceholderStyled as W, IconButtonEditStyled as j } from "../../../../slots/DataGridSlot.js";
+import { DICTIONARY as z } from "../../../../dictionary.js";
+import { useModuleDictionary as H } from "@m4l/core";
+import { ActionsEditOutlined as P } from "@m4l/icons";
+import { useComponentSize as T } from "../../../../../../hooks/useComponentSize/useComponentSize.js";
+function U({
+  row: w,
+  columns: C,
+  onRowsChange: a,
+  size: E = "medium",
+  rows: o,
+  rowIndex: n
+}) {
+  const [b, c] = k(null), [f, v] = k(0), { getLabel: x } = H(), { currentSize: D } = T(E), i = o[n] ?? w, R = I(() => {
+    v((e) => e + 1);
+  }, []), L = C.map((e) => e.renderCell ? {
+    ...e,
+    // Agregar onAfterChange al objeto de la columna
+    onAfterChange: R
+  } : e);
+  return /* @__PURE__ */ t($, { ownerState: {}, children: L.map((e, s) => {
+    const r = C[s], g = !!e.onAfterChange ? `${r.key}-${f}` : `${r.key}`;
+    return /* @__PURE__ */ t(F, { ownerState: {}, children: /* @__PURE__ */ S(
+      K,
+      {
+        ownerState: {},
+        "data-testid": `list-detail-column-${r.key}`,
+        onDoubleClick: e.renderEditCell && b !== e.key ? () => c(e.key) : void 0,
+        children: [
+          /* @__PURE__ */ S(O, { ownerState: {}, variant: "body", color: "text.secondary", children: [
+            e.name,
+            ":"
+          ] }),
+          (() => {
+            if (e.renderEditCell && b === e.key)
+              return /* @__PURE__ */ t(V, { ownerState: { size: E }, children: e.renderEditCell({
+                column: r,
+                row: i,
+                rowIdx: s,
+                /**
+                 * onRowChange es una función que se ejecuta cuando el usuario edita una celda.
+                 */
+                onRowChange: (d) => {
+                  if (a) {
+                    const y = o.map(
+                      (u, p) => p === n ? d : u
+                    );
+                    a(y, {
+                      indexes: [n],
+                      column: r
+                    });
+                  }
+                },
+                onClose: () => c(null)
+              }) });
+            if (e.renderCell) {
+              const d = e.renderCell({
+                column: e,
+                row: i,
+                rowIdx: s,
+                isCellSelected: !1,
+                tabIndex: -1,
+                /**
+                 * onRowChange es una función que se ejecuta cuando el usuario edita una celda.
+                 */
+                onRowChange: (y) => {
+                  if (a) {
+                    const u = o.map(
+                      (p, A) => A === n ? y : p
+                    );
+                    a(u, {
+                      indexes: [n],
+                      column: r
+                    });
+                  }
+                }
+              });
+              return /* @__PURE__ */ t(h, { ownerState: {}, variant: "body", color: "text.primary", children: d });
+            }
+            const l = i[e.key], m = l == null || l === "";
+            return e.renderEditCell ? /* @__PURE__ */ S(W, { ownerState: {}, children: [
+              /* @__PURE__ */ t(
+                h,
+                {
+                  ownerState: {},
+                  variant: "body",
+                  color: m ? "text.secondary" : "text.primary",
+                  children: m ? x(z.EDIT_PLACEHOLDER) : l
+                }
+              ),
+              /* @__PURE__ */ t(
+                j,
+                {
+                  ownerState: {},
+                  src: /* @__PURE__ */ t(P, {}),
+                  onClick: () => c(e.key),
+                  size: D,
+                  role: "button",
+                  "aria-label": "Edit text"
+                }
+              )
+            ] }) : /* @__PURE__ */ t(h, { ownerState: {}, variant: "body", color: "text.primary", children: l ?? "-" });
+          })()
+        ]
+      }
+    ) }, g);
+  }) });
+}
+export {
+  U as ListDetail
+};

package/components/datagrids/views/ListView/subcomponents/ListDetail/index.d.ts

@@ -0,0 +1,3 @@
+export { ListDetail } from './ListDetail';
+export type { ListDetailProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/components/datagrids/views/ListView/subcomponents/ListDetail/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../../../packages/components/src/components/datagrids/views/ListView/subcomponents/ListDetail/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC"}

package/components/datagrids/views/ListView/subcomponents/ListDetail/types.d.ts

@@ -0,0 +1,39 @@
+import { Column, RowsChangeData } from 'react-data-grid';
+import { Maybe } from '@m4l/core';
+import { IViewConfig } from '../../../../contexts/DataGridContext/types';
+import { Sizes } from '@m4l/styles';
+/**
+ * Props para el componente ListDetail
+ */
+export interface ListDetailProps<TRow> {
+    /**
+     * Fila que se mostrará en el detalle
+     */
+    row: TRow;
+    /**
+     * Array completo de todas las filas (necesario para reconstruir el array al editar)
+     */
+    rows: readonly TRow[];
+    /**
+     * Índice de la fila actual en el array de filas
+     */
+    rowIndex: number;
+    /**
+     * Columnas que se mostrarán en el detalle
+     */
+    columns: readonly Column<TRow, any>[];
+    /**
+     * Configuración de las columnas de la vista
+     */
+    viewColumnsConfig: IViewConfig<any, any>[];
+    /**
+     * Función para manejar cambios en las filas (para editores)
+     */
+    onRowsChange?: Maybe<(rows: TRow[], data: RowsChangeData<TRow, any>) => void>;
+    /**
+     * Tamaño del componente
+     * @default 'medium'
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+}
+//# sourceMappingURL=types.d.ts.map

package/components/datagrids/views/ListView/subcomponents/ListDetail/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../../../../packages/components/src/components/datagrids/views/ListView/subcomponents/ListDetail/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,4CAA4C,CAAC;AACzE,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC;;GAEG;AACH,MAAM,WAAW,eAAe,CAAC,IAAI;IACnC;;OAEG;IACH,GAAG,EAAE,IAAI,CAAC;IACV;;OAEG;IACH,IAAI,EAAE,SAAS,IAAI,EAAE,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,OAAO,EAAE,SAAS,MAAM,CAAC,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC;IACtC;;OAEG;IACH,iBAAiB,EAAE,WAAW,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC;IAC3C;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,cAAc,CAAC,IAAI,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC,CAAC;IAC9E;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC;CAC3C"}

package/components/datagrids/views/ListView/subcomponents/ListRow/ListRow.d.ts

@@ -0,0 +1,12 @@
+import { RowKey } from '../../../../types';
+import { ListRowProps } from './types';
+/**
+ * Component that renders a single list row.
+ */
+declare function ListRowComponent<TRow, TKey extends RowKey = RowKey>({ row, rows, rowIndex, columns, originalColumns, rowKeyGetter, selectedRows, onSelectedRowsChange, onRowsChange, customRender, isChecked, showCheckbox, checkedRows, onCheckedRowsChange, onOpenDetail, showExpandButton, onExpandClick, }: ListRowProps<TRow, TKey>): import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * Componente que muestra una fila de lista.
+ */
+export declare const ListRow: typeof ListRowComponent;
+export {};
+//# sourceMappingURL=ListRow.d.ts.map

package/components/datagrids/views/ListView/subcomponents/ListRow/ListRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListRow.d.ts","sourceRoot":"","sources":["../../../../../../../../../../packages/components/src/components/datagrids/views/ListView/subcomponents/ListRow/ListRow.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAI3C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAIvC;;GAEG;AACH,iBAAS,gBAAgB,CAAC,IAAI,EAAE,IAAI,SAAS,MAAM,GAAG,MAAM,EAAE,EAC5D,GAAG,EACH,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,oBAAoB,EACpB,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,YAAY,EACZ,WAAW,EACX,mBAAmB,EACnB,YAAY,EACZ,gBAAuB,EACvB,aAAa,GACd,EAAE,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,oDA2H1B;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,EAEd,OAAO,gBAAgB,CAAC"}