@m4l/components 9.3.34-BE20251127-beta.1 → 9.3.34-JT20251210-beta.1

package/components/CheckableList/CheckableList.js

@@ -0,0 +1,225 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import clsx from "clsx";
+import { C as CHECKABLE_LIST_CLASSES } from "./constants.js";
+import { useModuleDictionary } from "@m4l/core";
+import { D as DICCTIONARY } from "./dictionary.js";
+import { u as useSizeContainer } from "../../hooks/useSizeContainer/index.js";
+import { u as useStateRef } from "../../hooks/useStateRef/index.js";
+import { u as useCheckableListState } from "./hooks/useCheckableListState.js";
+import { u as useCheckableListItems } from "./hooks/useCheckableListItems.js";
+import { u as useCheckableListSelection } from "./hooks/useCheckableListSelection.js";
+import { u as useCheckableListHandlers } from "./hooks/useCheckableListHandlers.js";
+import { u as useCheckableListVirtualization } from "./hooks/useCheckableListVirtualization.js";
+import { u as useCheckableListRender } from "./hooks/useCheckableListRender.js";
+import { R as RootStyled, L as LoadingContainerStyled, S as SearchContainerStyled, a as SearchInputStyled, b as SelectAllContainerStyled, c as SelectAllCheckboxStyled, C as ChipCountTypografyStyled, d as ListContainerStyled, V as VirtualizedListStyled, E as EmptyMessageWrapperStyled } from "./slots/styled.js";
+import { S as Skeleton } from "../mui_extended/Skeleton/Skeleton.js";
+import { I as ImageText } from "../ImageText/ImageText.js";
+import { I as Icon } from "../Icon/Icon.js";
+const CheckableList = (props) => {
+  const {
+    value = [],
+    onChange,
+    items = [],
+    groups,
+    multiple = true,
+    selectAll = false,
+    groupable = true,
+    expandAllGroups = true,
+    searchable = false,
+    filterFn,
+    size = "medium",
+    variant = "standard",
+    width = "100%",
+    checkboxSize = "medium",
+    showCheckboxOnGroup = true,
+    indeterminateBehavior = "indicate-some",
+    className,
+    "data-testid": dataTestId,
+    ariaLabel,
+    ariaLabelledBy,
+    renderItem,
+    renderGroup,
+    loading = false,
+    disabled = false,
+    itemRowHeight,
+    groupRowHeight
+  } = props;
+  const listRef = useRef(null);
+  const [containerElement, setContainerElement] = useStateRef(null);
+  const containerSize = useSizeContainer(containerElement, {
+    // excludePadding: true,
+  });
+  const { getLabel } = useModuleDictionary();
+  const refHeight = useRef(containerSize?.containerHeight ?? 0);
+  if (refHeight.current !== containerSize?.containerHeight) {
+    if (containerSize?.containerHeight !== 0) {
+      refHeight.current = containerSize?.containerHeight;
+    }
+  }
+  const {
+    searchQuery,
+    setSearchQuery,
+    expandedGroups,
+    itemHeights,
+    handleGroupExpandToggle
+  } = useCheckableListState({
+    groups,
+    expandAllGroups
+  });
+  const {
+    isGrouped,
+    normalizedItems,
+    filteredItems,
+    filteredGroups,
+    virtualizedItems
+  } = useCheckableListItems({
+    items,
+    groups,
+    searchQuery,
+    filterFn,
+    expandedGroups
+  });
+  const {
+    getGroupItems,
+    isItemSelected,
+    isGroupFullySelected,
+    isGroupPartiallySelected,
+    areAllItemsSelected,
+    areSomeItemsSelected
+  } = useCheckableListSelection({
+    value,
+    normalizedItems,
+    groups,
+    isGrouped
+  });
+  const { handleItemToggle, handleGroupToggle, handleSelectAllToggle } = useCheckableListHandlers({
+    value,
+    onChange,
+    multiple,
+    disabled,
+    normalizedItems,
+    getGroupItems,
+    isGroupFullySelected,
+    isItemSelected,
+    areAllItemsSelected
+  });
+  const { getItemSize } = useCheckableListVirtualization({
+    virtualizedItems,
+    itemHeights,
+    defaultItemRowHeight: itemRowHeight,
+    defaultGroupRowHeight: groupRowHeight
+  });
+  const { renderVirtualizedItem, urlIconSearch, urlIconNoResults } = useCheckableListRender({
+    isItemSelected,
+    disabled,
+    size,
+    variant,
+    checkboxSize,
+    handleItemToggle,
+    renderItem,
+    expandedGroups,
+    isGroupFullySelected,
+    isGroupPartiallySelected,
+    getGroupItems,
+    indeterminateBehavior,
+    renderGroup,
+    groupable,
+    showCheckboxOnGroup,
+    handleGroupExpandToggle,
+    handleGroupToggle
+  });
+  const ownerState = {
+    size,
+    variant,
+    disabled,
+    grouped: isGrouped,
+    hasSelected: value.length > 0
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx(
+      RootStyled,
+      {
+        ownerState,
+        className: clsx(className, CHECKABLE_LIST_CLASSES.root),
+        "data-testid": dataTestId,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        children: /* @__PURE__ */ jsx(LoadingContainerStyled, { ownerState, children: /* @__PURE__ */ jsx(Skeleton, { variant: "rectangular", width: "100%", height: 200 }) })
+      }
+    );
+  }
+  const hasItems = isGrouped ? filteredGroups.length > 0 : filteredItems.length > 0;
+  return /* @__PURE__ */ jsxs(
+    RootStyled,
+    {
+      ownerState,
+      className: clsx(className, CHECKABLE_LIST_CLASSES.root),
+      "data-testid": dataTestId,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      children: [
+        searchable && /* @__PURE__ */ jsx(SearchContainerStyled, { ownerState, children: /* @__PURE__ */ jsx(
+          SearchInputStyled,
+          {
+            ownerState,
+            value: searchQuery,
+            onChange: (e) => setSearchQuery(e.target.value),
+            placeholder: getLabel(DICCTIONARY.label_search_placeholder),
+            size,
+            variant: "contained",
+            InputProps: {
+              startAdornment: /* @__PURE__ */ jsx(Icon, { src: urlIconSearch })
+            }
+          }
+        ) }),
+        selectAll && hasItems && /* @__PURE__ */ jsxs(SelectAllContainerStyled, { ownerState, children: [
+          /* @__PURE__ */ jsx(
+            SelectAllCheckboxStyled,
+            {
+              checked: areAllItemsSelected,
+              indeterminate: areSomeItemsSelected && !areAllItemsSelected,
+              disabled,
+              size: checkboxSize,
+              onChange: handleSelectAllToggle,
+              inlineText: getLabel(DICCTIONARY.label_select_all)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ChipCountTypografyStyled,
+            {
+              ownerState,
+              variant: "body",
+              size,
+              color: "text.disabled",
+              children: value.length
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(ListContainerStyled, { ref: setContainerElement, ownerState: { ...ownerState }, children: hasItems ? refHeight.current > 0 ? /* @__PURE__ */ jsx(
+          VirtualizedListStyled,
+          {
+            ref: listRef,
+            height: refHeight.current,
+            width,
+            itemCount: virtualizedItems.length,
+            itemSize: getItemSize,
+            itemData: virtualizedItems,
+            layout: "vertical",
+            children: renderVirtualizedItem
+          }
+        ) : null : /* @__PURE__ */ jsx(EmptyMessageWrapperStyled, { ownerState, children: /* @__PURE__ */ jsx(
+          ImageText,
+          {
+            title: getLabel(DICCTIONARY.label_no_results),
+            message: getLabel(DICCTIONARY.label_no_results_description),
+            imageUrl: urlIconNoResults
+          }
+        ) }) })
+      ]
+    }
+  );
+};
+export {
+  CheckableList as C
+};

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

@@ -0,0 +1,2 @@
+import { CheckableListStyles } from './types';
+export declare const checkableListStyles: CheckableListStyles;

package/components/CheckableList/CheckableList.styles.js

@@ -0,0 +1,247 @@
+import { getContrastTextColor } from "@m4l/graphics";
+import { g as getSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
+const checkableListStyles = {
+  /**
+   * Root: Estilos del contenedor principal del componente.
+   */
+  root: ({ theme, ownerState }) => ({
+    width: "100%",
+    // height: '100%',
+    flexGrow: 1,
+    overflow: "hidden",
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings.sp2,
+    ...ownerState?.disabled && {
+      opacity: 0.6,
+      pointerEvents: "none"
+    }
+  }),
+  /**
+   * searchContainer: Estilos del contenedor de búsqueda.
+   */
+  searchContainer: ({ theme }) => ({
+    width: "100%",
+    padding: theme.vars.size.baseSpacings.sp1
+  }),
+  /**
+   * searchInput: Estilos del input de búsqueda.
+   */
+  searchInput: ({ theme, ownerState }) => ({
+    width: "100%",
+    ...getSizeStyles(theme, ownerState?.size || "medium", "container", (size) => ({
+      height: size,
+      minHeight: size
+    }))
+  }),
+  /**
+   * selectAllContainer: Estilos del contenedor de "Seleccionar todo".
+   */
+  selectAllContainer: ({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    padding: theme.vars.size.baseSpacings.sp1,
+    paddingLeft: theme.vars.size.baseSpacings.sp2,
+    borderBottom: `1px solid ${theme.vars.palette.border.secondary}`
+  }),
+  /**
+   * selectAllCheckbox: Estilos del checkbox de "Seleccionar todo".
+   */
+  selectAllCheckbox: ({ theme }) => ({
+    "&&& .MuiTypography-root": {
+      color: theme.vars.palette.text.secondary
+    }
+  }),
+  /**
+   * listContainer: Estilos del contenedor de la lista.
+   */
+  listContainer: ({ theme, ownerState }) => ({
+    flex: 1,
+    overflow: "hidden",
+    display: "flex",
+    flexDirection: "column",
+    flexGrow: 1,
+    // border: `1px solid ${theme.vars.palette.border.secondary}`,
+    // borderRadius: theme.vars.size.borderRadius.r2,
+    backgroundColor: theme.vars.palette.background.default,
+    ...ownerState?.maxHeight && {
+      maxHeight: typeof ownerState.maxHeight === "number" ? `${ownerState.maxHeight}px` : ownerState.maxHeight
+    }
+  }),
+  /**
+   * virtualizedList: Estilos de la lista virtualizada.
+   */
+  virtualizedList: () => ({
+    width: "100%",
+    height: "100%"
+  }),
+  /**
+   * itemWrapper: Estilos del contenedor de cada item.
+   */
+  itemWrapper: ({ theme, ownerState }) => ({
+    display: "flex",
+    alignItems: "center",
+    height: "100%",
+    backgroundColor: ownerState?.selected ? theme.vars.palette.primary.opacity : "transparent",
+    // borderBottom: `1px solid ${theme.vars.palette.border.secondary}`,
+    gap: theme.vars.size.baseSpacings["sp2-5"],
+    padding: theme.vars.size.baseSpacings["sp1-5"],
+    paddingLeft: theme.vars.size.baseSpacings.sp2,
+    paddingRight: theme.vars.size.baseSpacings["sp2-5"],
+    cursor: "pointer",
+    transition: "background-color 0.1s",
+    "&:hover": {
+      backgroundColor: theme.vars.palette.action.hover
+    }
+  }),
+  /**
+   * itemCheckbox: Estilos del checkbox del item.
+   */
+  itemCheckbox: ({ theme, ownerState }) => ({
+    flexShrink: 0,
+    ...getSizeStyles(theme, ownerState?.size || "medium", "action", (size) => ({
+      width: size,
+      height: size
+    }))
+  }),
+  /**
+   * itemLabel: Estilos del label del item.
+   */
+  itemLabel: () => ({}),
+  /**
+   * itemDescription: Estilos de la descripción del item.
+   */
+  itemDescription: () => ({}),
+  /**
+   * itemContentWrapper: Estilos del contenedor de contenido del item.
+   */
+  itemContentWrapper: ({ theme }) => ({
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings["sp0-5"]
+  }),
+  /**
+   * itemIcon: Estilos del icono del item.
+   */
+  itemIcon: ({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    ...getSizeStyles(theme, "medium", "action", (size) => ({
+      width: size,
+      height: size
+    }))
+  }),
+  /**
+   * groupWrapper: Estilos del contenedor del grupo.
+   */
+  groupWrapper: ({ theme, ownerState }) => ({
+    display: "flex",
+    flexDirection: "column",
+    backgroundColor: ownerState?.selected ? theme.vars.palette.primary.opacity : "transparent",
+    borderBottom: `1px solid ${theme.vars.palette.border.secondary}`,
+    "&:last-child": {
+      borderBottom: "none"
+    }
+  }),
+  /**
+   * groupHeader: Estilos del header del grupo.
+   */
+  groupHeader: ({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    height: "100%",
+    gap: theme.vars.size.baseSpacings.sp1,
+    padding: theme.vars.size.baseSpacings["sp1-5"],
+    paddingLeft: theme.vars.size.baseSpacings.sp2,
+    // backgroundColor: theme.vars.palette.background.paper,
+    cursor: "pointer"
+  }),
+  /**
+   * groupCheckbox: Estilos del checkbox del grupo.
+   */
+  groupCheckbox: () => ({}),
+  /**
+   * groupLabelTagWrapper: Estilos del contenedor del label del grupo.
+   */
+  groupLabelCountWrapper: ({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: theme.vars.size.baseSpacings.sp1
+  }),
+  /**
+   * groupLabel: Estilos del label del grupo.
+   */
+  groupLabel: ({ theme }) => ({
+    flex: 1,
+    // fontWeight: 600,
+    color: theme.vars.palette.text.primary
+  }),
+  /**
+   * chipCount: Estilos del contador del grupo.
+   */
+  chipCount: ({ theme, ownerState }) => ({
+    "&&& ": {
+      borderRadius: theme.vars.size.borderRadius["r1-5"],
+      paddingLeft: theme.vars.size.baseSpacings["sp1"],
+      paddingRight: theme.vars.size.baseSpacings["sp1"],
+      backgroundColor: ownerState?.color ?? theme.vars.palette.background.surface,
+      color: ownerState?.color ? getContrastTextColor(ownerState?.color) : theme.vars.palette.text.secondary
+    }
+  }),
+  /**
+   * groupIcon: Estilos del icono del grupo.
+   */
+  groupIcon: ({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    ...getSizeStyles(theme, "medium", "action", (size) => ({
+      width: size,
+      height: size
+    }))
+  }),
+  /**
+   * groupToggleButton: Estilos del botón para expandir/colapsar grupo.
+   */
+  groupToggleButton: ({ theme, ownerState }) => ({
+    flexShrink: 0,
+    ...getSizeStyles(theme, ownerState?.size || "medium", "action", (size) => ({
+      width: size,
+      height: size
+    }))
+  }),
+  /**
+   * groupItems: Estilos del contenedor de items del grupo.
+   */
+  groupItems: () => ({
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden"
+  }),
+  /**
+   * emptyMessage: Estilos del mensaje cuando no hay items.
+   */
+  emptyMessageWrapper: () => ({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center"
+  }),
+  /**
+   * loadingContainer: Estilos del contenedor de carga.
+   */
+  loadingContainer: ({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: theme.vars.size.baseSpacings.sp3
+  })
+};
+export {
+  checkableListStyles as c
+};

package/components/CheckableList/constants.d.ts

@@ -0,0 +1,5 @@
+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_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;

package/components/CheckableList/constants.js

@@ -0,0 +1,17 @@
+import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
+import { C as CheckableListSlots } from "./slots/slots.js";
+const CHECKABLE_LIST_KEY_COMPONENT = "M4LCheckableList";
+const CHECKABLE_LIST_CLASSES = getComponentClasses(
+  CHECKABLE_LIST_KEY_COMPONENT,
+  CheckableListSlots
+);
+const CHECKABLE_LIST_DEFAULT_ITEM_ROW_HEIGHT = 36;
+const CHECKABLE_LIST_DEFAULT_ITEM_ROW_HEIGHT_WITH_DESCRIPTION = 46;
+const CHECKABLE_LIST_DEFAULT_GROUP_ROW_HEIGHT = 36;
+export {
+  CHECKABLE_LIST_CLASSES as C,
+  CHECKABLE_LIST_DEFAULT_ITEM_ROW_HEIGHT as a,
+  CHECKABLE_LIST_DEFAULT_GROUP_ROW_HEIGHT as b,
+  CHECKABLE_LIST_DEFAULT_ITEM_ROW_HEIGHT_WITH_DESCRIPTION as c,
+  CHECKABLE_LIST_KEY_COMPONENT as d
+};

package/components/CheckableList/dictionary.d.ts

@@ -0,0 +1,14 @@
+export declare const CHECKABLE_LIST_DICTIONARY_ID = "checkable_list";
+/**
+ * getCheckableListComponentsDictionary: Devuelve un array con los ids de los componentes que
+ * componente CheckableList.
+ */
+export declare function getCheckableListComponentsDictionary(): string[];
+export declare const DICCTIONARY: {
+    readonly label_search_placeholder: "checkable_list.label_search_placeholder";
+    readonly label_no_results: "checkable_list.label_no_results";
+    readonly label_no_results_description: "checkable_list.label_no_results_description";
+    readonly label_group_title: "checkable_list.label_group_title";
+    readonly label_select_all: "checkable_list.label_select_all";
+};
+export type TypeDictionary = typeof DICCTIONARY;

package/components/CheckableList/dictionary.js

@@ -0,0 +1,14 @@
+const CHECKABLE_LIST_DICTIONARY_ID = "checkable_list";
+function getCheckableListComponentsDictionary() {
+  return [CHECKABLE_LIST_DICTIONARY_ID];
+}
+const DICCTIONARY = {
+  label_search_placeholder: `${CHECKABLE_LIST_DICTIONARY_ID}.label_search_placeholder`,
+  label_no_results: `${CHECKABLE_LIST_DICTIONARY_ID}.label_no_results`,
+  label_no_results_description: `${CHECKABLE_LIST_DICTIONARY_ID}.label_no_results_description`,
+  label_select_all: `${CHECKABLE_LIST_DICTIONARY_ID}.label_select_all`
+};
+export {
+  DICCTIONARY as D,
+  getCheckableListComponentsDictionary as g
+};

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

@@ -0,0 +1,6 @@
+export { useCheckableListState } from './useCheckableListState';
+export { useCheckableListItems } from './useCheckableListItems';
+export { useCheckableListSelection } from './useCheckableListSelection';
+export { useCheckableListHandlers } from './useCheckableListHandlers';
+export { useCheckableListVirtualization } from './useCheckableListVirtualization';
+export { useCheckableListRender } from './useCheckableListRender';

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

@@ -0,0 +1,21 @@
+import { CheckableListGroup, CheckableListItem } from '../types';
+interface UseCheckableListHandlersProps {
+    value: (string | number)[];
+    onChange?: (selectedIds: (string | number)[]) => void;
+    multiple?: boolean;
+    disabled?: boolean;
+    normalizedItems: CheckableListItem[];
+    getGroupItems: (group: CheckableListGroup) => CheckableListItem[];
+    isGroupFullySelected: (group: CheckableListGroup) => boolean;
+    isItemSelected: (itemId: string | number) => boolean;
+    areAllItemsSelected: boolean;
+}
+/**
+ * Hook para manejar los event handlers del componente CheckableList
+ */
+export declare const useCheckableListHandlers: ({ value, onChange, multiple, disabled, normalizedItems, getGroupItems, isGroupFullySelected, isItemSelected, areAllItemsSelected, }: UseCheckableListHandlersProps) => {
+    handleItemToggle: (itemId: string | number) => void;
+    handleGroupToggle: (group: CheckableListGroup) => void;
+    handleSelectAllToggle: () => void;
+};
+export {};

package/components/CheckableList/hooks/useCheckableListHandlers.js

@@ -0,0 +1,66 @@
+import { useCallback } from "react";
+const useCheckableListHandlers = ({
+  value,
+  onChange,
+  multiple = true,
+  disabled = false,
+  normalizedItems,
+  getGroupItems,
+  isGroupFullySelected,
+  isItemSelected,
+  areAllItemsSelected
+}) => {
+  const handleItemToggle = useCallback(
+    (itemId) => {
+      if (!onChange || disabled) {
+        return;
+      }
+      if (multiple) {
+        const newValue = isItemSelected(itemId) ? value.filter((id) => id !== itemId) : [...value, itemId];
+        onChange(newValue);
+      } else {
+        onChange(isItemSelected(itemId) ? [] : [itemId]);
+      }
+    },
+    [onChange, disabled, multiple, value, isItemSelected]
+  );
+  const handleGroupToggle = useCallback(
+    (group) => {
+      if (!onChange || disabled) {
+        return;
+      }
+      const groupItems = getGroupItems(group);
+      const allSelected = isGroupFullySelected(group);
+      if (allSelected) {
+        const newValue = value.filter(
+          (id) => !groupItems.some((item) => item.id === id)
+        );
+        onChange(newValue);
+      } else {
+        const itemIds = groupItems.map((item) => item.id);
+        const newValue = [.../* @__PURE__ */ new Set([...value, ...itemIds])];
+        onChange(newValue);
+      }
+    },
+    [onChange, disabled, value, getGroupItems, isGroupFullySelected]
+  );
+  const handleSelectAllToggle = useCallback(() => {
+    if (!onChange || disabled) {
+      return;
+    }
+    if (areAllItemsSelected) {
+      onChange([]);
+    } else {
+      const allIds = normalizedItems.map((item) => item.id);
+      onChange(allIds);
+    }
+  }, [onChange, disabled, areAllItemsSelected, normalizedItems]);
+  return {
+    handleItemToggle,
+    handleGroupToggle,
+    handleSelectAllToggle
+  };
+};
+export {
+  useCheckableListHandlers as u
+};

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

@@ -0,0 +1,19 @@
+import { CheckableListItem, CheckableListGroup, VirtualizedItem } from '../types';
+interface UseCheckableListItemsProps {
+    items?: CheckableListItem[];
+    groups?: CheckableListGroup[];
+    searchQuery: string;
+    filterFn?: (item: CheckableListItem, query: string) => boolean;
+    expandedGroups: Set<string | number>;
+}
+/**
+ * Hook para manejar la normalización, filtrado y construcción de items virtualizados
+ */
+export declare const useCheckableListItems: ({ items, groups, searchQuery, filterFn, expandedGroups, }: UseCheckableListItemsProps) => {
+    isGrouped: boolean;
+    normalizedItems: CheckableListItem[];
+    filteredItems: CheckableListItem[];
+    filteredGroups: CheckableListGroup[];
+    virtualizedItems: VirtualizedItem[];
+};
+export {};