@m4l/components 9.4.8 → 9.4.10

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/SideBar/subcomponents/ContentComponent/style.js

@@ -1,16 +1,29 @@
 import { C as CLASS_NAME_IS_ROOT, a as CLASS_NAME_MENU_ACTIVE, b as CLASS_NAME_ITEM_IN_TREE_ACTIVE, c as CLASS_NAME_HAS_CHILDREN, d as CLASS_NAME_ITEM_CLOSED } from "../../constants.js";
 import { g as getTypographyStyles } from "../../../../utils/getTypographyStyles.js";
+import { g as getSizeStyles } from "../../../../utils/getSizeStyles/getSizeStyles.js";
 const contentComponentStyles = {
   /**
    * Estilos del contenedor principal del sidebar
    */
-  contentComponentRoot: ({ theme }) => ({
+  contentComponentRoot: ({ theme, ownerState }) => ({
     position: "relative",
     display: "flex",
     flexDirection: "column",
     height: "100%",
     width: "100%",
-    backgroundColor: theme.vars.palette.background.default
+    backgroundColor: theme.vars.palette.background.default,
+    '& [class*="M4LMenuItem-root"]': {
+      ...getSizeStyles(
+        theme,
+        ownerState?.size || "medium",
+        "action",
+        (height) => {
+          return {
+            minHeight: `${height}!important`
+          };
+        }
+      )
+    }
   }),
   /**
    * Contenedor que abraza el contenido del menu en primer lugar.

package/components/mui_extended/MenuItem/MenuItem.js

@@ -4,7 +4,7 @@ import clsx from "clsx";
 import React, { useMemo, cloneElement } from "react";
 import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
 import { M as MENUITEM_CLASSES } from "./constants.js";
-import { M as MenuItemIconStyled, a as MenuItemSkeletonStyled, b as MenuItemRootStyled, c as MenuItemIconCheckedStyled, d as MenuItemContainerStyled, e as MenuItemTypographyStyled } from "./slots/MenuItemSlots.js";
+import { M as MenuItemIconStyled, a as MenuItemSkeletonStyled, b as MenuItemRootStyled, c as MenuItemIconCheckedStyled, d as MenuItemTypographyStyled } from "./slots/MenuItemSlots.js";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
 const MenuItem = (props) => {
   const {
@@ -95,20 +95,18 @@ const MenuItem = (props) => {
             disabled
           }
         ),
-        /* @__PURE__ */ jsxs(MenuItemContainerStyled, { ownerState: { ...ownerState }, className: MENUITEM_CLASSES.menuItemContainer, children: [
-          renderIcon(startIcon, "MenuItemStartIcon", getComponentSlotRoot("MenuItemStartIcon")),
-          /* @__PURE__ */ jsx(
-            MenuItemTypographyStyled,
-            {
-              ownerState: { ...ownerState },
-              variant: "body",
-              size: adjustedSize,
-              "data-testid": "MenuItemLabel",
-              children: label
-            }
-          ),
-          renderIcon(endIcon, "MenuItemEndIcon", getComponentSlotRoot("MenuItemEndIcon"))
-        ] })
+        renderIcon(startIcon, "MenuItemStartIcon", getComponentSlotRoot("MenuItemStartIcon")),
+        /* @__PURE__ */ jsx(
+          MenuItemTypographyStyled,
+          {
+            ownerState: { ...ownerState },
+            variant: "body",
+            size: adjustedSize,
+            "data-testid": "MenuItemLabel",
+            children: label
+          }
+        ),
+        renderIcon(endIcon, "MenuItemEndIcon", getComponentSlotRoot("MenuItemEndIcon"))
       ]
     }
   );

package/components/mui_extended/MenuItem/MenuItem.styles.js

@@ -1,4 +1,4 @@
-import { a as getHeightSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
+import { g as getSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
 const menuItemStyles = {
   /**
    * Estilos para el contenedor de los items del menú contenedor
@@ -11,14 +11,15 @@ const menuItemStyles = {
     };
     return {
       width: "100%",
-      gap: theme.vars.size.baseSpacings.sp4,
-      paddingTop: theme.vars.size.baseSpacings.sp1,
-      paddingBottom: theme.vars.size.baseSpacings.sp1,
-      paddingLeft: theme.vars.size.baseSpacings.sp4,
-      paddingRight: theme.vars.size.baseSpacings.sp4,
-      borderRadius: theme.vars.size.borderRadius.r0,
+      gap: theme.vars.size.baseSpacings.sp1,
+      paddingTop: theme.vars.size.baseSpacings["sp1-5"],
+      paddingBottom: theme.vars.size.baseSpacings["sp1-5"],
+      paddingLeft: theme.vars.size.baseSpacings.sp2,
+      paddingRight: theme.vars.size.baseSpacings.sp2,
       borderLeft: theme.vars.size.borderStroke.container,
       borderLeftColor: "transparent",
+      transition: "background-color 0.3s ease",
+      borderRadius: theme.vars.size.borderRadius["r1-5"],
       // Estilos base para el texto y el ícono
       "&&& .M4LTypography-root": {
         paddingLeft: theme.vars.size.baseSpacings.sp1,
@@ -37,38 +38,32 @@ const menuItemStyles = {
         }
       },
       "&:hover": {
-        backgroundColor: paletteColor.hoverOpacity,
-        "& .M4LTypography-root": {
-          paddingLeft: theme.vars.size.baseSpacings.sp1
-        }
+        backgroundColor: `${paletteColor.hoverOpacity} !important`
       },
-      // '&:focus-visible': {
-      //   outline: theme.vars.size.borderStroke.container,
-      //   outlineColor: theme.vars.palette.border.main,
-      //   outlineOffset: theme.vars.size.baseSpacings['sp0-5'],
-      // },
       ...ownerState?.selected && {
-        borderLeftColor: paletteColor.enabled
+        backgroundColor: `${paletteColor.opacity} !important`,
+        border: theme.vars.size.borderStroke.container,
+        borderColor: paletteColor.enabledOpacity
       },
       "& .M4LImage-root": {
         marginRight: 6,
         marginLeft: 6,
-        ...getHeightSizeStyles(
-          theme.generalSettings.isMobile,
+        ...getSizeStyles(
+          theme,
           ownerState?.size || "medium",
           "base",
-          (val) => {
+          (size) => {
             return {
-              height: val,
-              width: val
+              height: size,
+              width: size
             };
           }
         )
       },
-      ...getHeightSizeStyles(
-        theme.generalSettings.isMobile,
+      ...getSizeStyles(
+        theme,
         ownerState?.size || "medium",
-        "action",
+        "box",
         (height) => {
           return {
             //height: 'auto !important',
@@ -113,31 +108,23 @@ const menuItemStyles = {
     textOverflow: "ellipsis",
     cursor: "inherit"
   }),
-  /**
-   * Estilos para el contenedor de los items del menú contenedor
-   */
-  menuItemContainer: ({ theme }) => ({
-    display: "flex",
-    alignItems: "center",
-    width: "100%",
-    gap: theme.vars.size.baseSpacings["sp0-5"],
-    overflow: "hidden"
-  }),
   /**
    * Estilos para el contenedor de los items del menú en skeleton
    */
   skeletonMenuItem: ({ theme, ownerState }) => ({
-    width: "100%",
-    padding: theme.vars.size.baseSpacings.sp2,
-    borderRadius: theme.vars.size.borderRadius.r0,
-    display: "flex",
-    alignItems: "center",
-    background: theme.vars.palette.skeleton.default,
-    ...getHeightSizeStyles(
-      theme.generalSettings.isMobile,
-      ownerState?.size || "medium",
-      "action"
-    )
+    "&&&": {
+      width: "100%",
+      padding: theme.vars.size.baseSpacings.sp2,
+      borderRadius: theme.vars.size.borderRadius["r1-5"],
+      display: "flex",
+      alignItems: "center",
+      background: `${theme.vars.palette.skeleton.default} !important`,
+      ...getSizeStyles(
+        theme,
+        ownerState?.size || "medium",
+        "action"
+      )
+    }
   })
 };
 export {

package/components/mui_extended/MenuItem/constants.d.ts

@@ -9,4 +9,4 @@ export declare const MENUITEM_KEY_COMPONENT = "M4LMenuItem";
 /**
  * Inventario de clases CSS para el componente MenuItem
  */
-export declare const MENUITEM_CLASSES: Record<"root" | "menuItemIcon" | "menuItemIconChecked" | "menuItemContainer" | "skeletonMenuItem" | "menuItemTypography", string>;
+export declare const MENUITEM_CLASSES: Record<"root" | "menuItemIcon" | "menuItemIconChecked" | "skeletonMenuItem" | "menuItemTypography", string>;

package/components/mui_extended/MenuItem/slots/MenuItemEnum.d.ts

@@ -2,7 +2,6 @@ export declare enum MenuItemSlots {
     root = "menuItemRoot",
     menuItemIcon = "menuItemIcon",
     menuItemIconChecked = "menuItemIconChecked",
-    menuItemContainer = "menuItemContainer",
     skeletonMenuItem = "skeletonMenuItem",
     menuItemTypography = "menuItemTypography"
 }

package/components/mui_extended/MenuItem/slots/MenuItemEnum.js

@@ -2,7 +2,6 @@ var MenuItemSlots = /* @__PURE__ */ ((MenuItemSlots2) => {
   MenuItemSlots2["root"] = "menuItemRoot";
   MenuItemSlots2["menuItemIcon"] = "menuItemIcon";
   MenuItemSlots2["menuItemIconChecked"] = "menuItemIconChecked";
-  MenuItemSlots2["menuItemContainer"] = "menuItemContainer";
   MenuItemSlots2["skeletonMenuItem"] = "skeletonMenuItem";
   MenuItemSlots2["menuItemTypography"] = "menuItemTypography";
   return MenuItemSlots2;

package/components/mui_extended/MenuItem/slots/MenuItemSlots.d.ts

@@ -3,9 +3,6 @@ declare const MenuItemRootStyled: import('@emotion/styled').StyledComponent<Pick
 }, "children" | "divider" | "selected" | "disabled" | "action" | "className" | "style" | "classes" | "sx" | "autoFocus" | "tabIndex" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "dense" | "disableGutters">, "value" | "children" | "ref" | "title" | "id" | "divider" | "selected" | "disabled" | "action" | "color" | "content" | "translate" | "className" | "style" | "classes" | "sx" | "slot" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "dense" | "disableGutters"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('..').MenuItemOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;
-declare const MenuItemContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
-    ownerState?: (Partial<import('..').MenuItemOwnerState> & Record<string, unknown>) | undefined;
-}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 declare const MenuItemTypographyStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../Typography/types').TypographyProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>, "size" | "children" | "title" | "component" | "zIndex" | "id" | "disabled" | "paragraph" | "border" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontSize" | "textTransform" | "fontFamily" | "typography" | "variant" | "color" | "dataTestid" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "content" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "top" | "translate" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "className" | "style" | "classes" | "sx" | "p" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "align" | "htmlFor" | "gutterBottom" | "noWrap" | "variantMapping" | "skeletonWidth" | "skeletonRows" | "ellipsis" | keyof import('react').RefAttributes<HTMLSpanElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('..').MenuItemOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;
@@ -18,4 +15,4 @@ declare const MenuItemIconCheckedStyled: import('@emotion/styled').StyledCompone
 declare const MenuItemSkeletonStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Skeleton/types').SkeletonProps, keyof import('../../Skeleton/types').SkeletonProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('..').MenuItemOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;
-export { MenuItemRootStyled, MenuItemIconStyled, MenuItemIconCheckedStyled, MenuItemTypographyStyled, MenuItemContainerStyled, MenuItemSkeletonStyled, };
+export { MenuItemRootStyled, MenuItemIconStyled, MenuItemIconCheckedStyled, MenuItemTypographyStyled, MenuItemSkeletonStyled, };

package/components/mui_extended/MenuItem/slots/MenuItemSlots.js

@@ -10,10 +10,6 @@ const MenuItemRootStyled = styled(MenuItem, {
   name: MENUITEM_KEY_COMPONENT,
   slot: MenuItemSlots.root
 })(menuItemStyles?.root);
-const MenuItemContainerStyled = styled("div", {
-  name: MENUITEM_KEY_COMPONENT,
-  slot: MenuItemSlots.menuItemContainer
-})(menuItemStyles?.menuItemContainer);
 const MenuItemTypographyStyled = styled(Typography, {
   name: MENUITEM_KEY_COMPONENT,
   slot: MenuItemSlots.menuItemTypography
@@ -35,6 +31,5 @@ export {
   MenuItemSkeletonStyled as a,
   MenuItemRootStyled as b,
   MenuItemIconCheckedStyled as c,
-  MenuItemContainerStyled as d,
-  MenuItemTypographyStyled as e
+  MenuItemTypographyStyled as d
 };

package/components/mui_extended/Select/Select.js

@@ -234,7 +234,7 @@ const Select = forwardRef(
                 disabled,
                 selected: isSelected,
                 label: option.label,
-                startIcon: RenderIcon(option.startAdornment)
+                startIcon: option.startAdornment
               },
               String(option.id)
             );

package/package.json

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