@m4l/components 9.74.0-beta-m4lcom-785-data-grids-implementar-la-funcionalidad-de-scroll-infinito.0 → 9.74.0

package/components/Pager/subcomponents/CustomTablePagination/CustomTablePagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomTablePagination.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/Pager/subcomponents/CustomTablePagination/CustomTablePagination.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AASrD;;GAEG;AACH,eAAO,MAAM,qBAAqB,GAAI,OAAO,0BAA0B,qDAmGtE,CAAC"}
+{"version":3,"file":"CustomTablePagination.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/Pager/subcomponents/CustomTablePagination/CustomTablePagination.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AASrD;;GAEG;AACH,eAAO,MAAM,qBAAqB,GAAI,OAAO,0BAA0B,qDA6GtE,CAAC"}

package/components/Pager/subcomponents/CustomTablePagination/CustomTablePagination.js

@@ -1,65 +1,73 @@
-import { jsxs as O, Fragment as j, jsx as w } from "@emotion/react/jsx-runtime";
-import { PagerActions as E } from "../PagerActions/PagerActions.js";
-import { RowsPerPageSelect as I } from "../RowsPerPageSelect/RowsPerPageSelect.js";
-import { useState as L, useMemo as n, useEffect as T, useCallback as z } from "react";
-import { useModuleDictionary as k } from "@m4l/core";
-import { PAGER_DICTIONARY as m } from "../../dicctionary.js";
-import { ActionsContainerStyled as v } from "../../slots/PagerSlots.js";
-const J = (y) => {
+import { jsxs as w, Fragment as N, jsx as g } from "@emotion/react/jsx-runtime";
+import { PagerActions as O } from "../PagerActions/PagerActions.js";
+import { useState as L, useMemo as r, useEffect as x, useCallback as T } from "react";
+import { useModuleDictionary as j } from "@m4l/core";
+import { PAGER_DICTIONARY as P } from "../../dicctionary.js";
+import { ContainerTotalRowSelectStyled as E, TotalRowStyled as I, LabelSelectContainerStyled as W, RowsPerPageStyled as F, ActionsContainerStyled as G } from "../../slots/PagerSlots.js";
+import { Select as V } from "../../../extended/mui/Select/Select.js";
+const U = (v) => {
   const {
-    count: e,
-    page: P,
-    rowsPerPage: i = 25,
-    rowsPerPageOptions: g = [10, 25, 50, 100],
-    onRowsPerPageChange: u,
+    count: t,
+    page: u,
+    rowsPerPage: d = 25,
+    rowsPerPageOptions: l = [10, 25, 50, 100],
+    onRowsPerPageChange: h,
     onPageChange: c,
-    size: f,
-    labelOf: h,
-    labelTotalRows: A
-  } = y, [r, p] = L(i), [R, d] = L(Math.max(0, P)), { getLabel: o } = k(), s = n(() => Math.max(1, Math.ceil(e / r)), [e, r]);
-  T(() => {
-    d(Math.max(0, Math.min(P, s - 1)));
-  }, [P, s]), T(() => {
-    g.includes(i) && p(i);
-  }, [i, g]);
-  const l = n(() => Math.max(0, Math.min(R, s - 1)), [R, s]), b = n(() => o(m.page), [o]), M = n(() => o(m.rows), [o]), S = n(() => o(m.rows_per_page), [o]), C = n(() => o(m.no_records), [o]), _ = n(() => {
-    if (e === 0)
-      return C;
-    const a = l + 1;
-    return `${b} ${a} ${h} ${s}`;
-  }, [l, s, e, h, b, C]), $ = z((a) => {
-    const t = Number(a.id), N = Math.ceil(e / t), x = Math.min(l, N - 1);
-    p(t), d(x), u && u({ id: t, value: t, label: `${t} ${M}` }), c && c(null, x);
-  }, [e, l, M, c, u]), D = z((a) => {
-    a && $(a);
+    size: m,
+    labelOf: p,
+    labelTotalRows: z
+  } = v, [n, S] = L(d), [b, f] = L(Math.max(0, u)), { getLabel: o } = j(), s = r(() => Math.max(1, Math.ceil(t / n)), [t, n]);
+  x(() => {
+    f(Math.max(0, Math.min(u, s - 1)));
+  }, [u, s]), x(() => {
+    l.includes(d) && S(d);
+  }, [d, l]);
+  const i = r(() => Math.max(0, Math.min(b, s - 1)), [b, s]), R = r(() => o(P.page), [o]), C = r(() => o(P.rows), [o]), A = r(() => o(P.rows_per_page), [o]), M = r(() => o(P.no_records), [o]), _ = r(() => {
+    if (t === 0)
+      return M;
+    const e = i + 1;
+    return `${R} ${e} ${p} ${s}`;
+  }, [i, s, t, p, R, M]), $ = T((e) => {
+    const a = Number(e.id), D = Math.ceil(t / a), y = Math.min(i, D - 1);
+    S(a), f(y), h && h({ id: a, value: a, label: `${a} ${C}` }), c && c(null, y);
+  }, [t, i, C, c, h]), k = T((e) => {
+    e && $(e);
   }, [$]);
-  return /* @__PURE__ */ O(j, { children: [
-    g?.length > 1 ? /* @__PURE__ */ w(
-      I,
+  return /* @__PURE__ */ w(N, { children: [
+    l?.length > 1 ? /* @__PURE__ */ w(E, { children: [
+      /* @__PURE__ */ g(I, { skeletonWidth: 50, size: m, variant: "bodyStandard", children: `${z}: ${Math.min(n, t - i * n)} ${p} ${t}` }),
+      /* @__PURE__ */ w(W, { children: [
+        /* @__PURE__ */ g(F, { skeletonWidth: 50, size: m, variant: "bodyStandard", children: `${A}:` }),
+        /* @__PURE__ */ g(
+          V,
+          {
+            size: m,
+            value: l.includes(n) ? n.toString() : l[0].toString(),
+            onChange: k,
+            options: l.map((e) => ({
+              id: e.toString(),
+              value: e.toString(),
+              label: e.toString()
+            }))
+          }
+        )
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ g(G, { children: /* @__PURE__ */ g(
+      O,
       {
-        size: f,
-        totalRowText: `${A}: ${Math.min(r, e - l * r)} ${h} ${e}`,
-        labelRowsPerPage: S,
-        rowsPerPage: r,
-        rowsPerPageOptions: g,
-        onChange: D
-      }
-    ) : null,
-    /* @__PURE__ */ w(v, { children: /* @__PURE__ */ w(
-      E,
-      {
-        size: f,
-        count: e,
-        page: l,
-        rowsPerPage: r,
+        size: m,
+        count: t,
+        page: i,
+        rowsPerPage: n,
         pageCounter: _,
-        onPageChange: (a, t) => {
-          d(t), c && c(a, t);
+        onPageChange: (e, a) => {
+          f(a), c && c(e, a);
         }
       }
     ) })
   ] });
 };
 export {
-  J as CustomTablePagination
+  U as CustomTablePagination
 };

package/components/TabsNavigator/TabsNavigator.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabsNavigator.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/TabsNavigator/TabsNavigator.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAc9C,eAAO,MAAM,mBAAmB,EAAE,mBA0RjC,CAAC"}
+{"version":3,"file":"TabsNavigator.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/TabsNavigator/TabsNavigator.styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAc9C,eAAO,MAAM,mBAAmB,EAAE,mBA+RjC,CAAC"}

package/components/TabsNavigator/TabsNavigator.styles.js

@@ -1,14 +1,15 @@
 import { keyframes as p } from "@emotion/react";
-import { TAB_MAX_HEIGHT as i, TAB_MAX_WIDTH as e, TABS_NAVIGATOR_CLASSES as t, WIDTH_SCROLL_BAR as c } from "./constants.js";
+import { ICON_SVG_SHAPE_SELECTOR as c } from "@m4l/base";
+import { TAB_MAX_HEIGHT as i, TAB_MAX_WIDTH as e, TABS_NAVIGATOR_CLASSES as t, WIDTH_SCROLL_BAR as v } from "./constants.js";
 import { getSizeStyles as s } from "../../utils/getSizeStyles/getSizeStyles.js";
-const v = p`
+const b = p`
   0%, 10% {
     transform: translateX(0);
   }
   90%, 100% {
     transform: translateX(var(--scroll-distance));
   }
-`, f = {
+`, y = {
   /**
    * Root Styles
    */
@@ -50,38 +51,38 @@ const v = p`
     "&:hover": {
       overflow: "visible"
     },
-    // Estilos de estado focus-visible aplica para estado selected y no selected.
+    // Focus-visible styles apply to both selected and unselected states.
     "&:focus-visible": {
       [`& .${t.tabNavigatorIconContainer}`]: {
         boxShadow: `inset 0px 0px 0px 1px ${a.vars.palette.primary.focusVisible}`
       }
     },
-    // Estilos de estado CON selección
+    // Selected state styles
     ...r?.selected && {
-      // Estilos de estado hover
+      // Hover state styles
       [`& .${t.tabNavigatorIconContainer}`]: {
         backgroundColor: a.vars.palette.primary.hoverOpacity
       },
-      // Estilos de estado active
+      // Active state styles
       [`&:active .${t.tabNavigatorIconContainer}`]: {
         backgroundColor: a.vars.palette.primary.activeOpacity
       },
-      // Estilos de estado focus-visible
+      // Focus-visible state styles
       [`&:focus-visible .${t.tabNavigatorIconContainer}`]: {
         backgroundColor: a.vars.palette.primary.activeOpacity
       }
     },
-    // Estilos de estado SIN seleccionado
+    // Unselected state styles
     ...!r?.selected && {
-      // Estilos de estado hover
+      // Hover state styles
       [`&:hover .${t.tabNavigatorIconContainer}`]: {
         backgroundColor: a.vars.palette.default.hoverOpacity
       },
-      // Estilos de estado active
+      // Active state styles
       [`&:active .${t.tabNavigatorIconContainer}`]: {
         backgroundColor: a.vars.palette.default.activeOpacity
       },
-      // Estilos de estado focus-visible
+      // Focus-visible state styles
       [`&:focus-visible .${t.tabNavigatorIconContainer}`]: {
         backgroundColor: a.vars.palette.default.activeOpacity
       }
@@ -96,7 +97,7 @@ const v = p`
       display: "flex",
       flexDirection: "row",
       overflow: "visible",
-      width: n * e + d + c,
+      width: n * e + d + v,
       maxHeight: 300,
       gap: a.vars.size.baseSpacings.sp1
     };
@@ -140,7 +141,7 @@ const v = p`
         whiteSpace: "normal"
       },
       [`& .${t.typographyTextMarqueeContainer} .${t.typographyTextMarquee}[data-should-animate="true"]`]: {
-        animation: `${v} var(--scroll-duration, 3s) linear forwards`,
+        animation: `${b} var(--scroll-duration, 3s) linear forwards`,
         textOverflow: "clip"
       }
     }
@@ -186,7 +187,12 @@ const v = p`
       borderColor: `${a.vars.palette.primary.selectedOpacity} !important`,
       backgroundColor: a.vars.palette.primary.enabledOpacity,
       "&&& .M4LIcon-icon": {
-        backgroundColor: a.vars.palette.primary.enabled
+        backgroundColor: a.vars.palette.primary.semanticText
+      },
+      "&&& .MuiSvgIcon-root": {
+        [c]: {
+          fill: a.vars.palette.primary.semanticText
+        }
       }
     }
   }),
@@ -205,7 +211,7 @@ const v = p`
     ),
     "& .M4LIcon-icon": {
       ...r?.selected ? {
-        backgroundColor: a.vars.palette.text.primary
+        backgroundColor: a.vars.palette.primary.semanticText
       } : {
         backgroundColor: a.vars.palette.text.secondary
       }
@@ -255,5 +261,5 @@ const v = p`
   })
 };
 export {
-  f as tabsNavigatorStyles
+  y as tabsNavigatorStyles
 };

package/components/datagrids/Datagrid.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Datagrid.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/datagrids/Datagrid.styles.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAIzC,eAAO,MAAM,cAAc,EAAE,cA09C5B,CAAC"}
+{"version":3,"file":"Datagrid.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/datagrids/Datagrid.styles.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAIzC,eAAO,MAAM,cAAc,EAAE,cAs7C5B,CAAC"}