@m4l/components 9.4.7-BE20260106-beta.1 → 9.4.8-BE20260108-beta.1

package/components/CheckableList/CheckableList.js

@@ -143,19 +143,9 @@ const CheckableList = (props) => {
         ownerState,
         className: clsx(className, CHECKABLE_LIST_CLASSES.root),
         "data-testid": dataTestId,
-        "aria-label": ariaLabel || "checkable list",
+        "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,
-        children: /* @__PURE__ */ jsx(LoadingContainerStyled, { ownerState, children: /* @__PURE__ */ jsx(
-          Skeleton,
-          {
-            variant: "rectangular",
-            width: "100%",
-            height: 200,
-            role: "status",
-            "aria-label": "Cargando lista de elementos",
-            "aria-live": "polite"
-          }
-        ) })
+        children: /* @__PURE__ */ jsx(LoadingContainerStyled, { ownerState, children: /* @__PURE__ */ jsx(Skeleton, { variant: "rectangular", width: "100%", height: 200 }) })
       }
     );
   }
@@ -166,28 +156,24 @@ const CheckableList = (props) => {
       ownerState,
       className: clsx(className, CHECKABLE_LIST_CLASSES.root),
       "data-testid": dataTestId,
-      role: "group",
-      "aria-label": ariaLabel || "checkable list",
+      "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledBy,
       children: [
-        searchable && /* @__PURE__ */ jsx(SearchContainerStyled, { ownerState, role: "search", children: /* @__PURE__ */ jsx(
+        searchable && /* @__PURE__ */ jsx(SearchContainerStyled, { ownerState, children: /* @__PURE__ */ jsx(
           SearchInputStyled,
           {
-            role: "searchbox",
-            "aria-label": "search",
             ownerState,
             value: searchQuery,
             onChange: (e) => setSearchQuery(e.target.value),
             placeholder: getLabel(DICCTIONARY.label_search_placeholder),
             size,
-            className: CHECKABLE_LIST_CLASSES.searchInput,
             variant: "contained",
             InputProps: {
               startAdornment: /* @__PURE__ */ jsx(Icon, { src: urlIconSearch })
             }
           }
         ) }),
-        selectAll && hasItems && /* @__PURE__ */ jsxs(SelectAllContainerStyled, { ownerState, role: "group", "aria-label": "Seleccionar todo", children: [
+        selectAll && hasItems && /* @__PURE__ */ jsxs(SelectAllContainerStyled, { ownerState, children: [
           /* @__PURE__ */ jsx(
             SelectAllCheckboxStyled,
             {
@@ -210,35 +196,26 @@ const CheckableList = (props) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx(
-          ListContainerStyled,
+        /* @__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,
           {
-            ref: setContainerElement,
-            ownerState: { ...ownerState },
-            "aria-multiselectable": multiple ? "true" : "false",
-            children: hasItems ? refHeight.current > 0 ? /* @__PURE__ */ jsx(
-              VirtualizedListStyled,
-              {
-                ref: listRef,
-                height: refHeight.current,
-                width,
-                itemCount: virtualizedItems.length,
-                itemSize: getItemSize,
-                itemData: virtualizedItems,
-                layout: "vertical",
-                className: CHECKABLE_LIST_CLASSES.virtualizedList,
-                children: renderVirtualizedItem
-              }
-            ) : null : /* @__PURE__ */ jsx(EmptyMessageWrapperStyled, { ownerState, role: "status", "aria-live": "polite", children: /* @__PURE__ */ jsx(
-              ImageText,
-              {
-                title: getLabel(DICCTIONARY.label_no_results),
-                message: getLabel(DICCTIONARY.label_no_results_description),
-                imageUrl: urlIconNoResults
-              }
-            ) })
+            title: getLabel(DICCTIONARY.label_no_results),
+            message: getLabel(DICCTIONARY.label_no_results_description),
+            imageUrl: urlIconNoResults
           }
-        )
+        ) }) })
       ]
     }
   );

package/components/CheckableList/dictionary.d.ts

@@ -10,6 +10,5 @@ export declare const DICCTIONARY: {
     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";
-    readonly label_loading: "checkable_list.label_loading";
 };
 export type TypeDictionary = typeof DICCTIONARY;

package/components/CheckableList/hooks/useCheckableListItems.js

@@ -14,27 +14,25 @@ const useCheckableListItems = ({
     return items;
   }, [items, groups, isGrouped]);
   const filteredItems = useMemo(() => {
-    const trimmedQuery = searchQuery.trim();
-    if (!trimmedQuery) {
+    if (!searchQuery.trim()) {
       return normalizedItems;
     }
-    const query = trimmedQuery.toLowerCase();
+    const query = searchQuery.toLowerCase();
     const defaultFilter = (item) => item.label.toLowerCase().includes(query) || item.description?.toLowerCase().includes(query);
     return normalizedItems.filter(
-      (item) => filterFn ? filterFn(item, trimmedQuery) : defaultFilter(item)
+      (item) => filterFn ? filterFn(item, searchQuery) : defaultFilter(item)
     );
   }, [normalizedItems, searchQuery, filterFn]);
   const filteredGroups = useMemo(() => {
-    const trimmedQuery = searchQuery.trim();
-    if (!isGrouped || !trimmedQuery) {
+    if (!isGrouped || !searchQuery.trim()) {
       return groups || [];
     }
-    const normalizedQuery = trimmedQuery.toLowerCase();
+    const normalizedQuery = searchQuery.toLowerCase();
     const defaultGroupFilter = (candidate) => candidate.label.toLowerCase().includes(normalizedQuery) || candidate.description?.toLowerCase().includes(normalizedQuery);
     return (groups || []).map((group) => ({
       ...group,
       items: group.items.filter(
-        (groupItem) => filterFn ? filterFn(groupItem, trimmedQuery) : defaultGroupFilter(groupItem)
+        (groupItem) => filterFn ? filterFn(groupItem, searchQuery) : defaultGroupFilter(groupItem)
       )
     })).filter((group) => group.items.length > 0);
   }, [groups, isGrouped, searchQuery, filterFn]);

package/components/CheckableList/hooks/useCheckableListRender.js

@@ -65,10 +65,6 @@ const useCheckableListRender = ({
         ItemWrapperStyled,
         {
           ownerState: { size, variant, disabled: itemDisabled, selected: checked },
-          role: "option",
-          "aria-label": "item",
-          "aria-selected": checked,
-          "aria-disabled": itemDisabled,
           onClick: () => !itemDisabled && handleItemToggle(item.id),
           children: [
             /* @__PURE__ */ jsx(
@@ -164,48 +160,37 @@ const useCheckableListRender = ({
         )
       ] });
       const groupBodyContent = customGroupContent ?? fallbackGroupLabel;
-      return /* @__PURE__ */ jsx(
-        GroupWrapperStyled,
+      return /* @__PURE__ */ jsx(GroupWrapperStyled, { ownerState: { size, variant, grouped: true, selected: checkboxState === true }, children: /* @__PURE__ */ jsxs(
+        GroupHeaderStyled,
         {
-          ownerState: { size, variant, grouped: true, selected: checkboxState === true },
-          role: "group",
-          "aria-label": group.label,
-          "aria-expanded": isExpanded,
-          "aria-disabled": groupDisabled,
-          children: /* @__PURE__ */ jsxs(
-            GroupHeaderStyled,
-            {
-              ownerState: { size, variant, disabled: groupDisabled },
-              onClick: handleExpand,
-              children: [
-                showCheckboxOnGroup && /* @__PURE__ */ jsx(
-                  GroupCheckboxStyled,
-                  {
-                    checked: checkboxState === true,
-                    indeterminate: checkboxState === "indeterminate",
-                    disabled: groupDisabled,
-                    size: checkboxSize,
-                    onChange: handleToggleGroup,
-                    onClick: (e) => e.stopPropagation()
-                  }
-                ),
-                group.icon && /* @__PURE__ */ jsx(GroupIconStyled, { children: group.icon }),
-                /* @__PURE__ */ jsx("div", { style: { flex: 1, minWidth: 0 }, children: groupBodyContent }),
-                groupable && /* @__PURE__ */ jsx(
-                  GroupToggleButtonStyled,
-                  {
-                    size,
-                    variant: "text",
-                    icon: isExpanded ? urlIconCompact : urlIconExpanded,
-                    onClick: handleExpand,
-                    "aria-label": isExpanded ? "Colapsar grupo" : "Expandir grupo"
-                  }
-                )
-              ]
-            }
-          )
+          ownerState: { size, variant, disabled: groupDisabled },
+          onClick: handleExpand,
+          children: [
+            showCheckboxOnGroup && /* @__PURE__ */ jsx(
+              GroupCheckboxStyled,
+              {
+                checked: checkboxState === true,
+                indeterminate: checkboxState === "indeterminate",
+                disabled: groupDisabled,
+                size: checkboxSize,
+                onChange: handleToggleGroup,
+                onClick: (e) => e.stopPropagation()
+              }
+            ),
+            group.icon && /* @__PURE__ */ jsx(GroupIconStyled, { children: group.icon }),
+            /* @__PURE__ */ jsx("div", { style: { flex: 1, minWidth: 0 }, children: groupBodyContent }),
+            groupable && /* @__PURE__ */ jsx(
+              GroupToggleButtonStyled,
+              {
+                size,
+                variant: "text",
+                icon: isExpanded ? urlIconCompact : urlIconExpanded,
+                onClick: handleExpand
+              }
+            )
+          ]
         }
-      );
+      ) });
     },
     [expandedGroups, disabled, isGroupFullySelected, isGroupPartiallySelected, getGroupItems, indeterminateBehavior, renderGroup, size, variant, showCheckboxOnGroup, checkboxSize, groupable, urlIconCompact, urlIconExpanded, handleGroupExpandToggle, handleGroupToggle, isItemSelected]
   );

package/components/SettingsLayout/SettingsLayout.js

@@ -1,12 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { useEnvironment, FlagsProvider, ModuleDictionaryProvider, ModuleSkeletonProvider, CommonFlags } from "@m4l/core";
 import { useLocales, useThemeSettingsStore } from "@m4l/graphics";
-import { S as SETTINGS_LAYOUT_DEFAULT_WIDTH } from "./constants.js";
+import { S as SETTINGS_LAYOUT_DEFAULT_MODULE_ID, a as SETTINGS_LAYOUT_DEFAULT_WIDTH } from "./constants.js";
 import { useMemo } from "react";
 import { S as SettingsLayoutBase } from "./subcomponents/SettingsLayoutBase/SettingsLayoutBase.js";
 const SettingsLayout = (props) => {
   const {
-    width = SETTINGS_LAYOUT_DEFAULT_WIDTH
+    width = SETTINGS_LAYOUT_DEFAULT_WIDTH,
+    moduleId = SETTINGS_LAYOUT_DEFAULT_MODULE_ID
   } = props;
   const currentLang = useLocales().currentLocale?.localeString;
   const { host_static_assets, environment_assets } = useEnvironment();
@@ -22,7 +23,7 @@ const SettingsLayout = (props) => {
     ModuleDictionaryProvider,
     {
       isAuth: false,
-      moduleId: "theme_settings",
+      moduleId,
       componentsDictionary,
       currentLang,
       children: /* @__PURE__ */ jsx(ModuleSkeletonProvider, { flags: [CommonFlags.FLAG_DICTIONARY_LOADED], children: /* @__PURE__ */ jsx(SettingsLayoutBase, { prefixPathIcon, width }) })

package/components/SettingsLayout/constants.d.ts

@@ -5,3 +5,4 @@ import { SettingsLayoutSlots } from './slots/SettingsLayoutEnum';
 export declare const SETTINGS_LAYOUT_COMPONENT_KEY = "M4LSettingsLayout";
 export declare const SETTINGS_LAYOUT_CLASSES: Record<keyof typeof SettingsLayoutSlots, string>;
 export declare const SETTINGS_LAYOUT_DEFAULT_WIDTH = 300;
+export declare const SETTINGS_LAYOUT_DEFAULT_MODULE_ID = "theme_settings";

package/components/SettingsLayout/constants.js

@@ -3,8 +3,10 @@ import { S as SettingsLayoutSlots } from "./slots/SettingsLayoutEnum.js";
 const SETTINGS_LAYOUT_COMPONENT_KEY = "M4LSettingsLayout";
 const SETTINGS_LAYOUT_CLASSES = getComponentClasses(SETTINGS_LAYOUT_COMPONENT_KEY, SettingsLayoutSlots);
 const SETTINGS_LAYOUT_DEFAULT_WIDTH = 300;
+const SETTINGS_LAYOUT_DEFAULT_MODULE_ID = "theme_settings";
 export {
-  SETTINGS_LAYOUT_DEFAULT_WIDTH as S,
-  SETTINGS_LAYOUT_COMPONENT_KEY as a,
-  SETTINGS_LAYOUT_CLASSES as b
+  SETTINGS_LAYOUT_DEFAULT_MODULE_ID as S,
+  SETTINGS_LAYOUT_DEFAULT_WIDTH as a,
+  SETTINGS_LAYOUT_COMPONENT_KEY as b,
+  SETTINGS_LAYOUT_CLASSES as c
 };

package/components/SettingsLayout/slots/SettingsLayoutSlots.js

@@ -1,6 +1,6 @@
 import { styled } from "@mui/material/styles";
 import { S as SettingsLayoutSlots } from "./SettingsLayoutEnum.js";
-import { a as SETTINGS_LAYOUT_COMPONENT_KEY } from "../constants.js";
+import { b as SETTINGS_LAYOUT_COMPONENT_KEY } from "../constants.js";
 import { s as settingsLayoutStyles } from "../SettingsLayout.styles.js";
 import { Backdrop } from "@mui/material";
 import { I as Icon } from "../../Icon/Icon.js";

package/components/SettingsLayout/subcomponents/SettingsLayoutBase/SettingsLayoutBase.js

@@ -6,7 +6,7 @@ import { B as BackdropStyled, g as SettingsLayoutRootStyled, H as HeaderContaine
 import { S as SettingDirection } from "../SettingDirection/SettingDirection.js";
 import { D as DICTIONARY } from "../../dictionary.js";
 import { useThemeSettingsStore } from "@m4l/graphics";
-import { b as SETTINGS_LAYOUT_CLASSES } from "../../constants.js";
+import { c as SETTINGS_LAYOUT_CLASSES } from "../../constants.js";
 import { I as IconButton } from "../../../mui_extended/IconButton/IconButton.js";
 import { S as SettingMode } from "../SettingMode/SettingMode.js";
 import { S as SettingColorPresets } from "../SettingColorPresets/SettingColorPresets.js";

package/components/SettingsLayout/types.d.ts

@@ -21,6 +21,10 @@ export interface SettingsLayoutProps {
      * Identificador usado para pruebas del componente.
      */
     dataTestId?: string;
+    /**
+     * Identificador del módulo.
+     */
+    moduleId?: string;
 }
 /**
  * Tipo para las ranuras del componente.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.4.7-BE20260106-beta.1",
+  "version": "9.4.8-BE20260108-beta.1",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {

package/components/CheckableList/CheckableList.test.d.ts

@@ -1 +0,0 @@
-export {};

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

@@ -1 +0,0 @@
-export {};

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

@@ -1 +0,0 @@
-export {};

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

@@ -1 +0,0 @@
-export {};

package/components/CheckableList/hooks/useCheckableListSelection.test.d.ts

@@ -1 +0,0 @@
-export {};

package/components/CheckableList/hooks/useCheckableListState.test.d.ts

@@ -1 +0,0 @@
-export {};

package/components/CheckableList/hooks/useCheckableListVirtualization.test.d.ts

@@ -1 +0,0 @@
-export {};