@m4l/components 9.49.0 → 9.50.0

package/components/CheckableList/CheckableList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckableList.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/CheckableList/CheckableList.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,kBAAkB,EAEnB,MAAM,SAAS,CAAC;AA8BjB;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,qDA8QtD,CAAC"}
+{"version":3,"file":"CheckableList.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/CheckableList/CheckableList.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,kBAAkB,EAEnB,MAAM,SAAS,CAAC;AAgCjB;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,qDAiStD,CAAC"}

package/components/CheckableList/CheckableList.js

@@ -1,137 +1,138 @@
-import { jsx as e, jsxs as H } from "@emotion/react/jsx-runtime";
-import { useRef as R } from "react";
-import _ from "clsx";
-import { CHECKABLE_LIST_CLASSES as s } from "./constants.js";
-import { useModuleDictionary as ue } from "@m4l/core";
+import { jsx as e, jsxs as T } from "@emotion/react/jsx-runtime";
+import { useRef as _ } from "react";
+import v from "clsx";
+import { CHECKABLE_LIST_CLASSES as d } from "./constants.js";
+import { useModuleDictionary as ge } from "@m4l/core";
 import { DICCTIONARY as c } from "./dictionary.js";
-import { useSizeContainer as he } from "../../hooks/useSizeContainer/index.js";
-import { useStateRef as pe } from "../../hooks/useStateRef/index.js";
-import { Icon as ge } from "@m4l/base";
-import { useCheckableListState as Se } from "./hooks/useCheckableListState.js";
-import { useCheckableListItems as fe } from "./hooks/useCheckableListItems.js";
-import { useCheckableListSelection as be } from "./hooks/useCheckableListSelection.js";
-import { useCheckableListHandlers as Ce } from "./hooks/useCheckableListHandlers.js";
-import { useCheckableListVirtualization as Ie } from "./hooks/useCheckableListVirtualization.js";
-import { useCheckableListRender as ye } from "./hooks/useCheckableListRender.js";
-import { RootStyled as A, LoadingContainerStyled as Le, SearchContainerStyled as ke, SearchInputStyled as xe, SelectAllContainerStyled as ve, SelectAllCheckboxStyled as ze, ChipCountTypografyStyled as Ge, ListContainerStyled as He, VirtualizedListStyled as Re, EmptyMessageWrapperStyled as _e } from "./slots/styled.js";
-import { Skeleton as Ae } from "../extended/mui/Skeleton/Skeleton.js";
-import { ImageText as Te } from "../ImageText/ImageText.js";
-const Xe = (T) => {
+import { useSizeContainer as Se } from "../../hooks/useSizeContainer/index.js";
+import { useStateRef as fe } from "../../hooks/useStateRef/index.js";
+import { Icon as be } from "@m4l/base";
+import { useCheckableListState as Ce } from "./hooks/useCheckableListState.js";
+import { useCheckableListItems as ye } from "./hooks/useCheckableListItems.js";
+import { useCheckableListSelection as Ie } from "./hooks/useCheckableListSelection.js";
+import { useCheckableListHandlers as xe } from "./hooks/useCheckableListHandlers.js";
+import { useCheckableListVirtualization as Le } from "./hooks/useCheckableListVirtualization.js";
+import { useCheckableListRender as ke } from "./hooks/useCheckableListRender.js";
+import { RootStyled as A, LoadingContainerStyled as we, SearchContainerStyled as ze, SearchInputStyled as He, SelectAllContainerStyled as Re, SelectAllCheckboxStyled as Ge, ChipCountTypografyStyled as Te, ListContainerStyled as _e, VirtualizedListStyled as ve, VirtualContainerStyled as Ae, VirtualRowStyled as Ee, EmptyMessageWrapperStyled as Ne } from "./slots/styled.js";
+import { Skeleton as Ve } from "../extended/mui/Skeleton/Skeleton.js";
+import { ImageText as Be } from "../ImageText/ImageText.js";
+const rt = (E) => {
   const {
-    value: r = [],
-    onChange: w,
-    items: E = [],
-    groups: d,
-    multiple: m = !0,
-    selectAll: N = !1,
-    groupable: B = !0,
+    value: l = [],
+    onChange: N,
+    items: V = [],
+    groups: m,
+    multiple: u = !0,
+    selectAll: B = !1,
+    groupable: j = !0,
     expandAllGroups: D = !0,
-    searchable: V = !1,
-    filterFn: j,
-    size: l = "medium",
+    searchable: F = !1,
+    filterFn: M,
+    size: a = "medium",
     variant: g = "standard",
-    width: F = "100%",
+    width: O = "100%",
     checkboxSize: S = "medium",
-    showCheckboxOnGroup: M = !0,
-    indeterminateBehavior: O = "indicate-some",
+    showCheckboxOnGroup: P = !0,
+    indeterminateBehavior: Q = "indicate-some",
     className: f,
     "data-testid": b,
     ariaLabel: C,
-    ariaLabelledBy: I,
-    renderItem: P,
-    renderGroup: Q,
-    loading: K = !1,
-    disabled: a = !1,
-    itemRowHeight: U,
-    groupRowHeight: W
-  } = T, Y = R(null), [q, J] = pe(null), i = he(q, {
+    ariaLabelledBy: y,
+    renderItem: W,
+    renderGroup: K,
+    loading: U = !1,
+    disabled: i = !1,
+    itemRowHeight: Y,
+    groupRowHeight: q
+  } = E, I = _(null), [J, X] = fe(null), o = Se(J, {
     // excludePadding: true,
-  }), { getLabel: o } = ue(), n = R(i?.containerHeight ?? 0);
-  n.current !== i?.containerHeight && i?.containerHeight !== 0 && (n.current = i?.containerHeight ?? 0);
+  }), { getLabel: n } = ge(), s = _(o?.containerHeight ?? 0);
+  s.current !== o?.containerHeight && o?.containerHeight !== 0 && (s.current = o?.containerHeight ?? 0);
   const {
-    searchQuery: y,
-    setSearchQuery: X,
+    searchQuery: x,
+    setSearchQuery: Z,
     expandedGroups: L,
-    itemHeights: Z,
-    handleGroupExpandToggle: $
-  } = Se({
-    groups: d,
+    itemHeights: $,
+    handleGroupExpandToggle: ee
+  } = Ce({
+    groups: m,
     expandAllGroups: D
   }), {
-    isGrouped: u,
+    isGrouped: h,
     normalizedItems: k,
-    filteredItems: ee,
-    filteredGroups: te,
-    virtualizedItems: h
-  } = fe({
-    items: E,
-    groups: d,
-    searchQuery: y,
-    filterFn: j,
+    filteredItems: te,
+    filteredGroups: re,
+    virtualizedItems: w
+  } = ye({
+    items: V,
+    groups: m,
+    searchQuery: x,
+    filterFn: M,
     expandedGroups: L
   }), {
-    getGroupItems: x,
-    isItemSelected: v,
-    isGroupFullySelected: z,
-    isGroupPartiallySelected: re,
+    getGroupItems: z,
+    isItemSelected: H,
+    isGroupFullySelected: R,
+    isGroupPartiallySelected: le,
     areAllItemsSelected: p,
-    areSomeItemsSelected: le
-  } = be({
-    value: r,
+    areSomeItemsSelected: ae
+  } = Ie({
+    value: l,
     normalizedItems: k,
-    groups: d,
-    isGrouped: u
-  }), { handleItemToggle: ae, handleGroupToggle: ie, handleSelectAllToggle: oe } = Ce({
-    value: r,
-    onChange: w,
-    multiple: m,
-    disabled: a,
+    groups: m,
+    isGrouped: h
+  }), { handleItemToggle: ie, handleGroupToggle: oe, handleSelectAllToggle: ne } = xe({
+    value: l,
+    onChange: N,
+    multiple: u,
+    disabled: i,
     normalizedItems: k,
-    getGroupItems: x,
-    isGroupFullySelected: z,
-    isItemSelected: v,
+    getGroupItems: z,
+    isGroupFullySelected: R,
+    isItemSelected: H,
     areAllItemsSelected: p
-  }), { getItemSize: ne } = Ie({
-    virtualizedItems: h,
-    itemHeights: Z,
-    defaultItemRowHeight: U,
-    defaultGroupRowHeight: W
-  }), { renderVirtualizedItem: se, urlIconSearch: ce, urlIconNoResults: de } = ye({
-    isItemSelected: v,
-    disabled: a,
-    size: l,
+  }), { getItemSize: se, virtualizer: de, virtualItems: ce, totalSize: me } = Le({
+    virtualizedItems: w,
+    itemHeights: $,
+    defaultItemRowHeight: Y,
+    defaultGroupRowHeight: q,
+    scrollElementRef: I
+  }), { renderVirtualizedItem: ue, urlIconSearch: he, urlIconNoResults: pe } = ke({
+    isItemSelected: H,
+    disabled: i,
+    size: a,
     variant: g,
     checkboxSize: S,
-    handleItemToggle: ae,
-    renderItem: P,
+    handleItemToggle: ie,
+    renderItem: W,
     expandedGroups: L,
-    isGroupFullySelected: z,
-    isGroupPartiallySelected: re,
-    getGroupItems: x,
-    indeterminateBehavior: O,
-    renderGroup: Q,
-    groupable: B,
-    showCheckboxOnGroup: M,
-    handleGroupExpandToggle: $,
-    handleGroupToggle: ie
+    isGroupFullySelected: R,
+    isGroupPartiallySelected: le,
+    getGroupItems: z,
+    indeterminateBehavior: Q,
+    renderGroup: K,
+    groupable: j,
+    showCheckboxOnGroup: P,
+    handleGroupExpandToggle: ee,
+    handleGroupToggle: oe
   }), t = {
-    size: l,
+    size: a,
     variant: g,
-    disabled: a,
-    grouped: u,
-    hasSelected: r.length > 0
+    disabled: i,
+    grouped: h,
+    hasSelected: l.length > 0
   };
-  if (K)
+  if (U)
     return /* @__PURE__ */ e(
       A,
       {
         ownerState: t,
-        className: _(f, s.root),
+        className: v(f, d.root),
         "data-testid": b,
         "aria-label": C || "checkable list",
-        "aria-labelledby": I,
-        children: /* @__PURE__ */ e(Le, { ownerState: t, children: /* @__PURE__ */ e(
-          Ae,
+        "aria-labelledby": y,
+        children: /* @__PURE__ */ e(we, { ownerState: t, children: /* @__PURE__ */ e(
+          Ve,
           {
             variant: "rectangular",
             width: "100%",
@@ -143,82 +144,97 @@ const Xe = (T) => {
         ) })
       }
     );
-  const G = u ? te.length > 0 : ee.length > 0;
-  return /* @__PURE__ */ H(
+  const G = h ? re.length > 0 : te.length > 0;
+  return /* @__PURE__ */ T(
     A,
     {
       ownerState: t,
-      className: _(f, s.root),
+      className: v(f, d.root),
       "data-testid": b,
       role: "group",
       "aria-label": C || "checkable list",
-      "aria-labelledby": I,
+      "aria-labelledby": y,
       children: [
-        V && /* @__PURE__ */ e(ke, { ownerState: t, role: "search", children: /* @__PURE__ */ e(
-          xe,
+        F && /* @__PURE__ */ e(ze, { ownerState: t, role: "search", children: /* @__PURE__ */ e(
+          He,
           {
             role: "searchbox",
             "aria-label": "search",
             ownerState: t,
-            value: y,
-            onChange: (me) => X(me.target.value),
-            placeholder: o(c.label_search_placeholder),
-            size: l,
-            className: s.searchInput,
+            value: x,
+            onChange: (r) => Z(r.target.value),
+            placeholder: n(c.label_search_placeholder),
+            size: a,
+            className: d.searchInput,
             variant: "contained",
             InputProps: {
-              startAdornment: /* @__PURE__ */ e(ge, { src: ce })
+              startAdornment: /* @__PURE__ */ e(be, { src: he })
             }
           }
         ) }),
-        N && G && m && /* @__PURE__ */ H(ve, { ownerState: t, role: "group", "aria-label": "Seleccionar todo", children: [
+        B && G && u && /* @__PURE__ */ T(Re, { ownerState: t, role: "group", "aria-label": "Seleccionar todo", children: [
           /* @__PURE__ */ e(
-            ze,
+            Ge,
             {
               checked: p,
-              indeterminate: le && !p,
-              disabled: a,
+              indeterminate: ae && !p,
+              disabled: i,
               size: S,
-              onChange: oe,
-              inlineText: o(c.label_select_all)
+              onChange: ne,
+              inlineText: n(c.label_select_all)
             }
           ),
           /* @__PURE__ */ e(
-            Ge,
+            Te,
             {
               ownerState: t,
               variant: "bodyStandard",
-              size: l,
+              size: a,
               color: "text.disabled",
-              children: r.length
+              children: l.length
             }
           )
         ] }),
         /* @__PURE__ */ e(
-          He,
+          _e,
           {
-            ref: J,
+            ref: X,
             ownerState: { ...t },
-            "aria-multiselectable": m ? "true" : "false",
-            children: G ? n.current > 0 ? /* @__PURE__ */ e(
-              Re,
+            "aria-multiselectable": u ? "true" : "false",
+            children: G ? s.current > 0 ? /* @__PURE__ */ e(
+              ve,
               {
-                ref: Y,
-                height: n.current,
-                width: F,
-                itemCount: h.length,
-                itemSize: ne,
-                itemData: h,
-                layout: "vertical",
-                className: s.virtualizedList,
-                children: se
+                ref: I,
+                ownerState: {
+                  ...t,
+                  listHeight: s.current,
+                  listWidth: O
+                },
+                className: d.virtualizedList,
+                children: /* @__PURE__ */ e(Ae, { ownerState: { ...t, totalSize: me }, children: ce.map((r) => /* @__PURE__ */ e(
+                  Ee,
+                  {
+                    ref: de.measureElement,
+                    "data-index": r.index,
+                    ownerState: {
+                      ...t,
+                      offsetTop: r.start,
+                      minRowHeight: se(r.index)
+                    },
+                    children: ue({
+                      index: r.index,
+                      virtualizedItems: w
+                    })
+                  },
+                  r.key
+                )) })
               }
-            ) : null : /* @__PURE__ */ e(_e, { ownerState: t, role: "status", "aria-live": "polite", children: /* @__PURE__ */ e(
-              Te,
+            ) : null : /* @__PURE__ */ e(Ne, { ownerState: t, role: "status", "aria-live": "polite", children: /* @__PURE__ */ e(
+              Be,
               {
-                title: o(c.label_no_results),
-                message: o(c.label_no_results_description),
-                imageUrl: de
+                title: n(c.label_no_results),
+                message: n(c.label_no_results_description),
+                imageUrl: pe
               }
             ) })
           }
@@ -228,5 +244,5 @@ const Xe = (T) => {
   );
 };
 export {
-  Xe as CheckableList
+  rt as CheckableList
 };

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

@@ -1 +1 @@
-{"version":3,"file":"CheckableList.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/CheckableList/CheckableList.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAI9C,eAAO,MAAM,mBAAmB,EAAE,mBAiQjC,CAAC"}
+{"version":3,"file":"CheckableList.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/CheckableList/CheckableList.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAI9C,eAAO,MAAM,mBAAmB,EAAE,mBA8RjC,CAAC"}

package/components/CheckableList/CheckableList.styles.js

@@ -1,10 +1,10 @@
-import { getContrastTextColor as r } from "@m4l/graphics";
+import { getContrastTextColor as t } from "@m4l/graphics";
 import { getSizeStyles as s } from "../../utils/getSizeStyles/getSizeStyles.js";
 const n = {
   /**
    * Root: Estilos del contenedor principal del componente.
    */
-  root: ({ theme: e, ownerState: a }) => ({
+  root: ({ theme: e, ownerState: i }) => ({
     width: "100%",
     // height: '100%',
     flexGrow: 1,
@@ -12,7 +12,7 @@ const n = {
     display: "flex",
     flexDirection: "column",
     gap: e.vars.size.baseSpacings.sp2,
-    ...a?.disabled && {
+    ...i?.disabled && {
       opacity: 0.6,
       pointerEvents: "none"
     }
@@ -27,11 +27,11 @@ const n = {
   /**
    * searchInput: Estilos del input de búsqueda.
    */
-  searchInput: ({ theme: e, ownerState: a }) => ({
+  searchInput: ({ theme: e, ownerState: i }) => ({
     width: "100%",
-    ...s(e, a?.size || "medium", "container", (i) => ({
-      height: i,
-      minHeight: i
+    ...s(e, i?.size || "medium", "container", (a) => ({
+      height: a,
+      minHeight: a
     }))
   }),
   /**
@@ -55,7 +55,7 @@ const n = {
   /**
    * listContainer: Estilos del contenedor de la lista.
    */
-  listContainer: ({ theme: e, ownerState: a }) => ({
+  listContainer: ({ theme: e, ownerState: i }) => ({
     flex: 1,
     overflow: "hidden",
     display: "flex",
@@ -64,25 +64,51 @@ const n = {
     // border: `1px solid ${theme.vars.palette.border.secondary}`,
     // borderRadius: theme.vars.size.borderRadius.r2,
     backgroundColor: e.vars.palette.background.default,
-    ...a?.maxHeight && {
-      maxHeight: typeof a.maxHeight == "number" ? `${a.maxHeight}px` : a.maxHeight
+    ...i?.maxHeight && {
+      maxHeight: typeof i.maxHeight == "number" ? `${i.maxHeight}px` : i.maxHeight
     }
   }),
   /**
    * virtualizedList: Estilos de la lista virtualizada.
+   * Es el elemento scrolleable que TanStack Virtual observa (`getScrollElement`).
+   * El alto lo aporta `useSizeContainer` a través de `ownerState.listHeight`, igual que antes se
+   * pasaba como prop `height` a react-window.
    */
-  virtualizedList: () => ({
+  virtualizedList: ({ ownerState: e }) => ({
+    width: typeof e?.listWidth == "number" ? `${e.listWidth}px` : e?.listWidth ?? "100%",
+    height: e?.listHeight ? `${e.listHeight}px` : "100%",
+    overflow: "auto"
+  }),
+  /**
+   * virtualContainer: Contenedor que reserva la altura total del contenido virtualizado.
+   * Define el área scrolleable; su alto es la suma de todas las filas (`getTotalSize`).
+   */
+  virtualContainer: ({ ownerState: e }) => ({
+    width: "100%",
+    position: "relative",
+    height: `${e?.totalSize ?? 0}px`
+  }),
+  /**
+   * virtualRow: Wrapper de cada fila virtualizada, posicionada por TanStack Virtual.
+   * `minHeight` usa la altura estimada por `getItemSize`, de modo que las filas conservan su
+   * altura habitual pero pueden crecer cuando el contenido real lo requiere.
+   */
+  virtualRow: ({ ownerState: e }) => ({
+    position: "absolute",
+    top: 0,
+    left: 0,
     width: "100%",
-    height: "100%"
+    minHeight: `${e?.minRowHeight ?? 0}px`,
+    transform: `translateY(${e?.offsetTop ?? 0}px)`
   }),
   /**
    * itemWrapper: Estilos del contenedor de cada item.
    */
-  itemWrapper: ({ theme: e, ownerState: a }) => ({
+  itemWrapper: ({ theme: e, ownerState: i }) => ({
     display: "flex",
     alignItems: "center",
     height: "100%",
-    backgroundColor: a?.selected ? e.vars.palette.primary.opacity : "transparent",
+    backgroundColor: i?.selected ? e.vars.palette.primary.opacity : "transparent",
     // borderBottom: `1px solid ${theme.vars.palette.border.secondary}`,
     gap: e.vars.size.baseSpacings["sp2-5"],
     padding: e.vars.size.baseSpacings["sp1-5"],
@@ -97,11 +123,11 @@ const n = {
   /**
    * itemCheckbox: Estilos del checkbox del item.
    */
-  itemCheckbox: ({ theme: e, ownerState: a }) => ({
+  itemCheckbox: ({ theme: e, ownerState: i }) => ({
     flexShrink: 0,
-    ...s(e, a?.size || "medium", "action", (i) => ({
-      width: i,
-      height: i
+    ...s(e, i?.size || "medium", "action", (a) => ({
+      width: a,
+      height: a
     }))
   }),
   /**
@@ -129,18 +155,18 @@ const n = {
     alignItems: "center",
     justifyContent: "center",
     flexShrink: 0,
-    ...s(e, "medium", "action", (a) => ({
-      width: a,
-      height: a
+    ...s(e, "medium", "action", (i) => ({
+      width: i,
+      height: i
     }))
   }),
   /**
    * groupWrapper: Estilos del contenedor del grupo.
    */
-  groupWrapper: ({ theme: e, ownerState: a }) => ({
+  groupWrapper: ({ theme: e, ownerState: i }) => ({
     display: "flex",
     flexDirection: "column",
-    backgroundColor: a?.selected ? e.vars.palette.primary.opacity : "transparent",
+    backgroundColor: i?.selected ? e.vars.palette.primary.opacity : "transparent",
     borderBottom: `1px solid ${e.vars.palette.border.secondary}`,
     "&:last-child": {
       borderBottom: "none"
@@ -183,13 +209,13 @@ const n = {
   /**
    * chipCount: Estilos del contador del grupo.
    */
-  chipCount: ({ theme: e, ownerState: a }) => ({
+  chipCount: ({ theme: e, ownerState: i }) => ({
     "&&& ": {
       borderRadius: e.vars.size.borderRadius["r1-5"],
       paddingLeft: e.vars.size.baseSpacings.sp1,
       paddingRight: e.vars.size.baseSpacings.sp1,
-      backgroundColor: a?.color ?? e.vars.palette.background.surface,
-      color: a?.color ? r(a?.color) : e.vars.palette.text.secondary
+      backgroundColor: i?.color ?? e.vars.palette.background.surface,
+      color: i?.color ? t(i?.color) : e.vars.palette.text.secondary
     }
   }),
   /**
@@ -200,19 +226,19 @@ const n = {
     alignItems: "center",
     justifyContent: "center",
     flexShrink: 0,
-    ...s(e, "medium", "action", (a) => ({
-      width: a,
-      height: a
+    ...s(e, "medium", "action", (i) => ({
+      width: i,
+      height: i
     }))
   }),
   /**
    * groupToggleButton: Estilos del botón para expandir/colapsar grupo.
    */
-  groupToggleButton: ({ theme: e, ownerState: a }) => ({
+  groupToggleButton: ({ theme: e, ownerState: i }) => ({
     flexShrink: 0,
-    ...s(e, a?.size || "medium", "action", (i) => ({
-      width: i,
-      height: i
+    ...s(e, i?.size || "medium", "action", (a) => ({
+      width: a,
+      height: a
     }))
   }),
   /**

package/components/CheckableList/constants.d.ts

@@ -1,6 +1,11 @@
 export declare const CHECKABLE_LIST_KEY_COMPONENT = "M4LCheckableList";
-export declare const CHECKABLE_LIST_CLASSES: Record<"root" | "searchContainer" | "searchInput" | "selectAllContainer" | "selectAllCheckbox" | "listContainer" | "virtualizedList" | "itemWrapper" | "itemCheckbox" | "itemContentWrapper" | "itemLabel" | "itemDescription" | "itemIcon" | "groupWrapper" | "groupHeader" | "groupCheckbox" | "groupLabelCountWrapper" | "groupLabel" | "chipCount" | "groupIcon" | "groupToggleButton" | "groupItems" | "emptyMessageWrapper" | "loadingContainer", string>;
+export declare const CHECKABLE_LIST_CLASSES: Record<"root" | "searchContainer" | "searchInput" | "selectAllContainer" | "selectAllCheckbox" | "listContainer" | "virtualizedList" | "virtualContainer" | "virtualRow" | "itemWrapper" | "itemCheckbox" | "itemContentWrapper" | "itemLabel" | "itemDescription" | "itemIcon" | "groupWrapper" | "groupHeader" | "groupCheckbox" | "groupLabelCountWrapper" | "groupLabel" | "chipCount" | "groupIcon" | "groupToggleButton" | "groupItems" | "emptyMessageWrapper" | "loadingContainer", string>;
 export declare const CHECKABLE_LIST_DEFAULT_ITEM_ROW_HEIGHT = 36;
 export declare const CHECKABLE_LIST_DEFAULT_ITEM_ROW_HEIGHT_WITH_DESCRIPTION = 46;
 export declare const CHECKABLE_LIST_DEFAULT_GROUP_ROW_HEIGHT = 36;
+/**
+ * Cantidad de filas que TanStack Virtual monta fuera del viewport, arriba y abajo.
+ * Evita ver huecos en blanco durante el scroll rápido.
+ */
+export declare const CHECKABLE_LIST_VIRTUALIZER_OVERSCAN = 5;
 //# sourceMappingURL=constants.d.ts.map

package/components/CheckableList/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/CheckableList/constants.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,4BAA4B,qBAAqB,CAAC;AAE/D,eAAO,MAAM,sBAAsB,icAGlC,CAAC;AAEF,eAAO,MAAM,sCAAsC,KAAK,CAAC;AACzD,eAAO,MAAM,uDAAuD,KAAK,CAAC;AAC1E,eAAO,MAAM,uCAAuC,KAAK,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/CheckableList/constants.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,4BAA4B,qBAAqB,CAAC;AAE/D,eAAO,MAAM,sBAAsB,qeAGlC,CAAC;AAEF,eAAO,MAAM,sCAAsC,KAAK,CAAC;AACzD,eAAO,MAAM,uDAAuD,KAAK,CAAC;AAC1E,eAAO,MAAM,uCAAuC,KAAK,CAAC;AAE1D;;;GAGG;AACH,eAAO,MAAM,mCAAmC,IAAI,CAAC"}

package/components/CheckableList/constants.js

@@ -1,13 +1,14 @@
 import { getComponentClasses as E } from "../../utils/getComponentSlotRoot.js";
 import { CheckableListSlots as _ } from "./slots/slots.js";
-const C = "M4LCheckableList", o = E(
+const C = "M4LCheckableList", I = E(
   C,
   _
-), t = 36, I = 46, H = 36;
+), o = 36, t = 46, H = 36, s = 5;
 export {
-  o as CHECKABLE_LIST_CLASSES,
+  I as CHECKABLE_LIST_CLASSES,
   H as CHECKABLE_LIST_DEFAULT_GROUP_ROW_HEIGHT,
-  t as CHECKABLE_LIST_DEFAULT_ITEM_ROW_HEIGHT,
-  I as CHECKABLE_LIST_DEFAULT_ITEM_ROW_HEIGHT_WITH_DESCRIPTION,
-  C as CHECKABLE_LIST_KEY_COMPONENT
+  o as CHECKABLE_LIST_DEFAULT_ITEM_ROW_HEIGHT,
+  t as CHECKABLE_LIST_DEFAULT_ITEM_ROW_HEIGHT_WITH_DESCRIPTION,
+  C as CHECKABLE_LIST_KEY_COMPONENT,
+  s as CHECKABLE_LIST_VIRTUALIZER_OVERSCAN
 };

package/components/CheckableList/hooks/useCheckableListRender.d.ts

@@ -1,7 +1,6 @@
 import { MouseEvent, ChangeEvent } from 'react';
-import { ListChildComponentProps } from 'react-window';
 import { Sizes } from '@m4l/styles';
-import { CheckableListItem, CheckableListGroup, CheckableListRenderItemParams } from '../types';
+import { CheckableListItem, CheckableListGroup, CheckableListRenderItemParams, RenderVirtualizedItemParams } from '../types';
 export interface CheckableListRenderGroupParams {
     group: CheckableListGroup;
     items: CheckableListItem[];
@@ -41,7 +40,7 @@ interface UseCheckableListRenderProps {
 interface UseCheckableListRenderReturn {
     renderItemContent: (item: CheckableListItem, index: number) => React.ReactNode;
     renderGroupContent: (group: CheckableListGroup, index: number) => React.ReactNode;
-    renderVirtualizedItem: (props: ListChildComponentProps) => React.ReactNode;
+    renderVirtualizedItem: (params: RenderVirtualizedItemParams) => React.ReactNode;
     urlIconSearch: string;
     urlIconNoResults: string;
 }