@m4l/components 9.4.8 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.4.8",
+  "version": "9.4.9",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {