@m4l/components 9.4.8-BE20260108-beta.1 → 9.4.9

package/components/CheckableList/CheckableList.js

@@ -143,9 +143,19 @@ const CheckableList = (props) => {
         ownerState,
         className: clsx(className, CHECKABLE_LIST_CLASSES.root),
         "data-testid": dataTestId,
-        "aria-label": ariaLabel,
+        "aria-label": ariaLabel || "checkable list",
         "aria-labelledby": ariaLabelledBy,
-        children: /* @__PURE__ */ jsx(LoadingContainerStyled, { ownerState, children: /* @__PURE__ */ jsx(Skeleton, { variant: "rectangular", width: "100%", height: 200 }) })
+        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"
+          }
+        ) })
       }
     );
   }
@@ -156,24 +166,28 @@ const CheckableList = (props) => {
       ownerState,
       className: clsx(className, CHECKABLE_LIST_CLASSES.root),
       "data-testid": dataTestId,
-      "aria-label": ariaLabel,
+      role: "group",
+      "aria-label": ariaLabel || "checkable list",
       "aria-labelledby": ariaLabelledBy,
       children: [
-        searchable && /* @__PURE__ */ jsx(SearchContainerStyled, { ownerState, children: /* @__PURE__ */ jsx(
+        searchable && /* @__PURE__ */ jsx(SearchContainerStyled, { ownerState, role: "search", 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, children: [
+        selectAll && hasItems && /* @__PURE__ */ jsxs(SelectAllContainerStyled, { ownerState, role: "group", "aria-label": "Seleccionar todo", children: [
           /* @__PURE__ */ jsx(
             SelectAllCheckboxStyled,
             {
@@ -196,26 +210,35 @@ const CheckableList = (props) => {
             }
           )
         ] }),
-        /* @__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,
+        /* @__PURE__ */ jsx(
+          ListContainerStyled,
           {
-            title: getLabel(DICCTIONARY.label_no_results),
-            message: getLabel(DICCTIONARY.label_no_results_description),
-            imageUrl: urlIconNoResults
+            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
+              }
+            ) })
           }
-        ) }) })
+        )
       ]
     }
   );

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

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

package/components/CheckableList/dictionary.d.ts

@@ -10,5 +10,6 @@ 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/useCheckableListHandlers.test.d.ts

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

package/components/CheckableList/hooks/useCheckableListItems.js

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

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

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

package/components/CheckableList/hooks/useCheckableListRender.js

@@ -65,6 +65,10 @@ 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(
@@ -160,37 +164,48 @@ const useCheckableListRender = ({
         )
       ] });
       const groupBodyContent = customGroupContent ?? fallbackGroupLabel;
-      return /* @__PURE__ */ jsx(GroupWrapperStyled, { ownerState: { size, variant, grouped: true, selected: checkboxState === true }, children: /* @__PURE__ */ jsxs(
-        GroupHeaderStyled,
+      return /* @__PURE__ */ jsx(
+        GroupWrapperStyled,
         {
-          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
-              }
-            )
-          ]
+          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"
+                  }
+                )
+              ]
+            }
+          )
         }
-      ) });
+      );
     },
     [expandedGroups, disabled, isGroupFullySelected, isGroupPartiallySelected, getGroupItems, indeterminateBehavior, renderGroup, size, variant, showCheckboxOnGroup, checkboxSize, groupable, urlIconCompact, urlIconExpanded, handleGroupExpandToggle, handleGroupToggle, isItemSelected]
   );

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

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

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

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

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

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

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

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

package/components/SettingsLayout/SettingsLayout.js

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

package/components/SettingsLayout/constants.d.ts

@@ -5,4 +5,3 @@ 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,10 +3,8 @@ 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_MODULE_ID as S,
-  SETTINGS_LAYOUT_DEFAULT_WIDTH as a,
-  SETTINGS_LAYOUT_COMPONENT_KEY as b,
-  SETTINGS_LAYOUT_CLASSES as c
+  SETTINGS_LAYOUT_DEFAULT_WIDTH as S,
+  SETTINGS_LAYOUT_COMPONENT_KEY as a,
+  SETTINGS_LAYOUT_CLASSES as b
 };

package/components/SettingsLayout/slots/SettingsLayoutSlots.js

@@ -1,6 +1,6 @@
 import { styled } from "@mui/material/styles";
 import { S as SettingsLayoutSlots } from "./SettingsLayoutEnum.js";
-import { b as SETTINGS_LAYOUT_COMPONENT_KEY } from "../constants.js";
+import { a 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 { c as SETTINGS_LAYOUT_CLASSES } from "../../constants.js";
+import { b 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,10 +21,6 @@ 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.8-BE20260108-beta.1",
+  "version": "9.4.9",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {