@m4l/components 9.3.43 → 9.4.0

package/@types/export.d.ts

@@ -55,8 +55,8 @@ declare module '@mui/material/styles' {
     M4LCheckBox?: {
       styleOverrides?: ComponentsOverrides<Theme>['M4LCheckBox'];
     };
-    M4LRadioButton?: {
-      styleOverrides?: ComponentsOverrides<Theme>['M4LRadioButton'];
+    M4LRadio?: {
+      styleOverrides?: ComponentsOverrides<Theme>['M4LRadio'];
     };
     M4LDataGrid?: {
       styleOverrides?: ComponentsOverrides<Theme>['M4LDataGrid'];

package/@types/types.d.ts

@@ -77,9 +77,9 @@ import {
   CheckBoxSlotsType,
 } from '../components/mui_extended/CheckBox/types';
 import {
-  RadioButtonOwnerState,
-  RadioButtonSlotsType,
-} from '../components/mui_extended/RadioButton/types';
+  RadioOwnerState,
+  RadioSlotsType,
+} from '../components/mui_extended/Radio/types';
 import {
   RHFNumberInputOwnerState,
   RHFNumberInputSlotsType,
@@ -324,6 +324,7 @@ import {
   IconsFormatterOwnerState,
   IconsFormatterSlotsType,
 } from '../components/formatters/IconsFormatter/types';
+import { CheckableListOwnerState, CheckableListSlotsType } from '../components/CheckableList/types';
 import { RHFDatePickerOwnerState, RHFDatePickerSlotsType } from '../components/hook-form/RHFDatePicker/types';
 import { DatePickerOwnerState, DatePickerSlotsType } from '../components/mui_extended/DatePicker/types';
 import {
@@ -354,7 +355,7 @@ declare module '@mui/material/styles' {
     M4LSelect: SelectSlotsType;
     M4LTypography: TypographySlotsType;
     M4LCheckBox: CheckBoxSlotsType;
-    M4LRadioButton: RadioButtonSlotsType;
+    M4LRadio: RadioSlotsType;
     M4LRHFNumberInput: RHFNumberInputSlotsType;
     M4LTab: TabSlotsType;
     M4LButton: ButtonSlotsType;
@@ -426,6 +427,7 @@ declare module '@mui/material/styles' {
     M4LMFIsolationApp: MFIsolationAppSlotsType;
     M4LTagsFormatter: TagsFormatterSlotsType;
     M4LIconsFormatter: IconsFormatterSlotsType;
+    M4LCheckableList: CheckableListSlotsType;
     M4LRHFDatePicker: RHFDatePickerSlotsType;
     M4LDatePicker: DatePickerSlotsType;
     M4LImageFormatter: ImageFormatterSlotsType;
@@ -452,7 +454,7 @@ declare module '@mui/material/styles' {
     M4LSelect: Partial<SelectOwnerState>;
     M4LTypography: Partial<TypographyOwnerState>;
     M4LCheckBox: Partial<CheckBoxOwnerState>;
-    M4LRadioButton: Partial<RadioButtonOwnerState>;
+    M4LRadio: Partial<RadioOwnerState>;
     M4LRHFNumberInput: Partial<RHFNumberInputOwnerState>;
     M4LTab: Partial<TabOwnerState>;
     M4LButton: Partial<ButtonOwnerState>;
@@ -523,6 +525,7 @@ declare module '@mui/material/styles' {
     M4LMFIsolationApp: Partial<MFIsolationAppOwnerState>;
     M4LTagsFormatter: Partial<TagsFormatterOwnerState>;
     M4LIconsFormatter: Partial<IconsFormatterOwnerState>;
+    M4LCheckableList: Partial<CheckableListOwnerState>;
     M4LDatePicker: Partial<DatePickerOwnerState>;
     M4LRHFDatePicker: Partial<RHFDatePickerOwnerState>;
     M4LImageFormatter: Partial<ImageFormatterOwnerState>;
@@ -648,10 +651,10 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LCheckBox'];
       variants?: ComponentsVariants['M4LCheckBox'];
     };
-    M4LRadioButton?: {
-      defaultProps?: ComponentsPropsList['M4LRadioButton'];
-      styleOverrides?: ComponentsOverrides<Theme>['M4LRadioButton'];
-      variants?: ComponentsVariants['M4LRadioButton'];
+    M4LRadio?: {
+      defaultProps?: ComponentsPropsList['M4LRadio'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LRadio'];
+      variants?: ComponentsVariants['M4LRadio'];
     };
     M4LActionCancel?: {
       defaultProps?: ComponentsPropsList['M4LActionCancel'];
@@ -993,6 +996,10 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LIconsFormatter'];
       variants?: ComponentsVariants['M4LIconsFormatter'];
     };
+    M4LCheckableList?: {
+      defaultProps?: ComponentsPropsList['M4LCheckableList'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LCheckableList'];
+      variants?: ComponentsVariants['M4LCheckableList'];
     M4LRHFDatePicker?: {
       defaultProps?: ComponentsPropsList['M4LRHFDatePicker'];
       styleOverrides?: ComponentsOverrides<Theme>['M4LRHFDatePicker'];
@@ -1008,5 +1015,6 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LImageFormatter'];
       variants?: ComponentsVariants['M4LImageFormatter'];
     };
-  }
+  };
 }
+}

package/components/CheckableList/CheckableList.d.ts

@@ -0,0 +1,20 @@
+import { CheckableListProps } from './types';
+/**
+ * Componente CheckableList
+ *
+ * Componente que renderiza una lista de items chequeables que opcionalmente puede ser agrupada.
+ * Utiliza virtualización para manejar grandes cantidades de items de manera eficiente.
+ * @example
+ * ```tsx
+ * <CheckableList
+ *   items={[
+ *     { id: 1, label: 'Item 1' },
+ *     { id: 2, label: 'Item 2' },
+ *   ]}
+ *   value={[1]}
+ *   onChange={(ids) => console.log(ids)}
+ *   width="100%"
+ * />
+ * ```
+ */
+export declare const CheckableList: (props: CheckableListProps) => import("react/jsx-runtime").JSX.Element;

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 {};