@m4l/components 9.2.64 → 9.2.65-JT17072025.beta.1

package/components/SideBar/subcomponents/TreeGroupItems/index.js

@@ -3,18 +3,19 @@ import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { u as useSideBar } from "../../hooks/useSideBar/index.js";
 import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.js";
 import { g as getNameDataTestId } from "../../tests/utils.js";
-import { h as ContainerTreeGroupItemsStyled, i as ContainerContentGroupsStyled, j as ContainerContentTitleStyled } from "../../slots/SideBarSlots.js";
+import { f as ContainerTreeGroupItemsStyled, g as ContainerContentGroupsStyled, h as ContainerContentTitleStyled } from "../../slots/SideBarSlots.js";
 import { N as NodeMenuItemMain } from "./subcomponents/NodeMenuItemMain/NodeMenuItemMain.js";
 import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
 import { M as MenuItem } from "../../../mui_extended/MenuItem/MenuItem.js";
 const TreeGroupItems = (contentGroupsProps) => {
-  const { menuData } = useSideBar();
+  const { menuData, anchored } = useSideBar();
   const { getLabel } = useModuleDictionary();
   const { size } = contentGroupsProps;
   const { currentSize } = useComponentSize(size);
   const isSkeleton = useModuleSkeleton();
   const ownerState = {
-    noItems: menuData.length === 0
+    noItems: menuData.length === 0,
+    anchored
   };
   const renderItemsDisabled = () => {
     return /* @__PURE__ */ jsx(ContainerContentTitleStyled, { ownerState: { disabled: true }, children: /* @__PURE__ */ jsx(

package/components/SideBar/subcomponents/TreeGroupItems/styles.js

@@ -1,3 +1,4 @@
+import { g as getSizeStyles } from "../../../../utils/getSizeStyles/getSizeStyles.js";
 const contentGroupStyles = {
   /**
    * Container for the group items in the sidebar
@@ -9,9 +10,17 @@ const contentGroupStyles = {
     flex: 1,
     flexDirection: "column",
     overflowY: "auto",
-    padding: `${theme.vars.size.baseSpacings.sp3} 0px 0px 0px`,
     alignItems: "center",
-    justifyContent: ownerState?.noItems ? "center" : "flex-start"
+    justifyContent: ownerState?.noItems ? "center" : "flex-start",
+    transition: "all 0.5s",
+    paddingTop: theme.vars.size.baseSpacings.sp3,
+    paddingLeft: theme.vars.size.baseSpacings.sp4,
+    paddingRight: theme.vars.size.baseSpacings.sp4,
+    gap: theme.vars.size.baseSpacings.sp4,
+    ...!ownerState?.anchored && !theme.generalSettings.isMobile && {
+      transition: "all 0.5s",
+      visibility: "hidden"
+    }
   }),
   /**
    * Wrapper for every principal item group in the sidebar
@@ -28,6 +37,7 @@ const contentGroupStyles = {
   containerContentTitle: ({ theme, ownerState }) => ({
     padding: `${theme.vars.size.baseSpacings.sp3} ${theme.vars.size.baseSpacings.sp4} ${theme.vars.size.baseSpacings.sp1}`,
     color: theme.vars.palette.text.primary,
+    width: "100%",
     textAlign: "left",
     "& .MuiTypography-root": {
       color: !ownerState?.disabled ? theme.vars.palette.text.primary : `${theme.vars.palette.text.primary} !important`
@@ -62,6 +72,106 @@ const contentGroupStyles = {
     alignSelf: "center",
     lineHeight: 0,
     marginLeft: "auto"
+  }),
+  /**
+   * Wrapper for the menu item
+   */
+  wrapperMenuItem: ({ theme, ownerState }) => ({
+    display: "flex",
+    position: "relative",
+    paddingTop: theme.vars.size.baseSpacings.sp2,
+    paddingBottom: theme.vars.size.baseSpacings.sp2,
+    paddingLeft: theme.vars.size.baseSpacings.sp2,
+    paddingRight: theme.vars.size.baseSpacings.sp2,
+    ...getSizeStyles(
+      theme,
+      ownerState?.size || "medium",
+      "container",
+      (size) => ({
+        minHeight: size,
+        height: "auto"
+      })
+    )
+  }),
+  /**
+   * Styles applied to the container of the adornment icon in the header component
+   */
+  containerAdornmentIcon: ({ theme, ownerState }) => ({
+    overflow: "hidden",
+    borderRadius: theme.vars.size.borderRadius["r1-5"],
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    position: "relative",
+    width: "fit-content",
+    height: "fit-content",
+    minWidth: "fit-content",
+    minHeight: "fit-content",
+    padding: "1px",
+    "& .M4LIcon-root": {
+      width: "fit-content",
+      height: "fit-content",
+      padding: theme.vars.size.baseSpacings["sp0-5"],
+      "& .M4LIcon-icon": {
+        ...getSizeStyles(
+          theme,
+          ownerState?.size || "medium",
+          "case",
+          (sizeValue) => ({
+            width: `${sizeValue}!important`,
+            height: `${sizeValue}!important`,
+            minWidth: `${sizeValue}!important`,
+            minHeight: `${sizeValue}!important`
+          })
+        )
+      }
+    },
+    ...ownerState?.variant !== "itemActive" && ownerState?.variant !== "normal" && {
+      "& .M4LIcon-icon": {
+        backgroundColor: `${theme.vars.palette.chips.persianGreen.contained.colorTone}!important`
+      }
+    },
+    ...ownerState?.variant === "normal" && {
+      "& .M4LIcon-icon": {
+        backgroundColor: `${theme.vars.palette.text.secondary}!important`
+      }
+    },
+    ...ownerState?.variant === "main" && {
+      backgroundColor: theme.vars.palette.chips.persianGreen.contained.backgroundColorTone
+    },
+    ...ownerState?.variant === "root" && {
+      backgroundColor: theme.vars.palette.primary.enabled
+    },
+    ...ownerState?.variant === "itemActive" && {
+      boxShadow: theme.vars.customShadows.primary2,
+      background: `linear-gradient(to right, 
+      ${theme.vars.palette.primary.opacityGradient1}, 
+      ${theme.vars.palette.primary.opacityGradient2})`,
+      "& .M4LSideBar-backgroundAdornmentIcon": {
+        background: theme.vars.palette.background.default
+      },
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        inset: "1.4px",
+        background: theme.vars.palette.primary.enabledOpacity,
+        borderRadius: "5px"
+      },
+      "& .M4LIcon-icon": {
+        backgroundColor: `${theme.vars.palette.primary.enabled}!important`
+      }
+    }
+  }),
+  /**
+   * Styles applied to the background of the adornment icon in the header component
+   */
+  backgroundAdornmentIcon: () => ({
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: "5px"
   })
 };
 export {

package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/AdormentIcon/AdormentIcon.d.ts

@@ -0,0 +1,7 @@
+import { AdornmentIconProps } from './types';
+/**
+ * Adornment icon component
+ * @param props - Adornment icon props
+ * @returns Adornment icon component
+ */
+export declare const AdornmentIcon: (props: AdornmentIconProps) => import("react/jsx-runtime").JSX.Element;

package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/AdormentIcon/AdormentIcon.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { u as useSideBar } from "../../../../hooks/useSideBar/index.js";
+import { i as ContainerAdornmentIconStyled, j as BackgroundAdornmentIconStyled } from "../../../../slots/SideBarSlots.js";
+import { I as Icon } from "../../../../../Icon/Icon.js";
+const AdornmentIcon = (props) => {
+  const { icon, variant = "main" } = props;
+  const { classes } = useSideBar();
+  return /* @__PURE__ */ jsx(ContainerAdornmentIconStyled, { ownerState: { variant }, children: /* @__PURE__ */ jsx(BackgroundAdornmentIconStyled, { className: classes.backgroundAdornmentIcon, children: /* @__PURE__ */ jsx(Icon, { src: icon }) }) });
+};
+export {
+  AdornmentIcon as A
+};

package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/AdormentIcon/types.d.ts

@@ -0,0 +1,4 @@
+export interface AdornmentIconProps {
+    icon: string;
+    variant: 'main' | 'root' | 'itemActive' | 'normal';
+}

package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/NodeMenuItem/index.js

@@ -5,14 +5,15 @@ import { u as useSideBar } from "../../../../hooks/useSideBar/index.js";
 import { T as TEST_PROP_ID } from "../../../../../../test/constants_no_mock.js";
 import { g as getNameDataTestId } from "../../../../tests/utils.js";
 import { A as ArrowIcon } from "../ArrowIcon/index.js";
-import { l as ContainerNodeMenuItemStyled } from "../../../../slots/SideBarSlots.js";
-import { c as CLASS_NAME_MENU_ACTIVE, d as CLASS_NAME_ITEM_IN_TREE_ACTIVE, e as CLASS_NAME_HAS_CHILDREN } from "../../../../constants.js";
+import { l as ContainerNodeMenuItemStyled, W as WrapperMenuItemStyled } from "../../../../slots/SideBarSlots.js";
+import { 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 { useModuleSkeleton } from "@m4l/core";
+import { A as AdornmentIcon } from "../AdormentIcon/AdormentIcon.js";
 import { u as useCollapse } from "../../../../hooks/useCollapse/useCollapse.js";
 import { u as useComponentSize } from "../../../../../../hooks/useComponentSize/useComponentSize.js";
 import { M as MenuItem } from "../../../../../mui_extended/MenuItem/MenuItem.js";
 function NodeMenuItem(props) {
-  const { item, size, defaultOpen = false, className, isLastSibling = false } = props;
+  const { item, size, defaultOpen = false, className, isLastSibling = false, isRoot = false } = props;
   const { urlIconPrefix, classes } = useSideBar();
   const { isOpen, handlerClick, hasChildren } = useCollapse(item, defaultOpen);
   const { currentSize } = useComponentSize(size);
@@ -33,23 +34,24 @@ function NodeMenuItem(props) {
       ownerState,
       ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("menuItems") } : {},
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(WrapperMenuItemStyled, { ownerState, className: classes.wrapperMenuItem, children: /* @__PURE__ */ jsx(
           MenuItem,
           {
             className: clsx(
               CLASS_NAME_ITEM_STATE,
               className,
               item.children && item.children.length > 0 && CLASS_NAME_HAS_CHILDREN,
-              item.itemInTreeActive && CLASS_NAME_ITEM_IN_TREE_ACTIVE
+              item.itemInTreeActive && CLASS_NAME_ITEM_IN_TREE_ACTIVE,
+              !isOpen && CLASS_NAME_ITEM_CLOSED
             ),
             label: item.title,
             selected: item.active,
-            startIcon: `${urlIconPrefix}${item.iconUrl}`,
+            startIcon: /* @__PURE__ */ jsx(AdornmentIcon, { icon: `${urlIconPrefix}${item.iconUrl}`, variant: isRoot && item.itemInTreeActive ? "root" : item.active ? "itemActive" : "normal" }),
             endIcon: hasChildren ? /* @__PURE__ */ jsx(ArrowIcon, { openState: isOpen, active: item.active }) : null,
             onClick: () => handlerClick(),
             size: currentSize
           }
-        ),
+        ) }),
         hasChildren ? /* @__PURE__ */ jsx(Collapse, { in: isOpen, timeout: "auto", unmountOnExit: true, children: (item.children || []).map((child, index) => /* @__PURE__ */ jsx(
           NodeMenuItem,
           {

package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/NodeMenuItem/types.d.ts

@@ -6,4 +6,5 @@ export type NodeMenuItemProps = {
     size: Extract<Sizes, 'small' | 'medium'>;
     className?: string;
     isLastSibling?: boolean;
+    isRoot?: boolean;
 };

package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/NodeMenuItemMain/NodeMenuItemMain.js

@@ -1,17 +1,20 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { m as ContainerNodeMenuItemMainStyled, M as MenuItemMainStyled } from "../../../../slots/SideBarSlots.js";
+import { m as ContainerNodeMenuItemMainStyled, W as WrapperMenuItemStyled, M as MenuItemMainStyled } from "../../../../slots/SideBarSlots.js";
 import { g as getNameDataTestId } from "../../../../tests/utils.js";
 import { T as TEST_PROP_ID } from "../../../../../../test/constants_no_mock.js";
 import { A as ArrowIcon } from "../ArrowIcon/index.js";
 import { Collapse } from "@mui/material";
 import { N as NodeMenuItem } from "../NodeMenuItem/index.js";
-import { b as CLASS_NAME_IS_ROOT } from "../../../../constants.js";
+import { C as CLASS_NAME_IS_ROOT } from "../../../../constants.js";
 import clsx from "clsx";
 import { useModuleSkeleton } from "@m4l/core";
+import { u as useSideBar } from "../../../../hooks/useSideBar/index.js";
+import { A as AdornmentIcon } from "../AdormentIcon/AdormentIcon.js";
 import { u as useComponentSize } from "../../../../../../hooks/useComponentSize/useComponentSize.js";
 import { u as useCollapse } from "../../../../hooks/useCollapse/useCollapse.js";
 const NodeMenuItemMain = (props) => {
   const { item, size, defaultOpen = false } = props;
+  const { urlIconPrefix, classes } = useSideBar();
   const { currentSize } = useComponentSize(size);
   const { isOpen, handlerClick, hasChildren } = useCollapse(item, defaultOpen);
   const isSkeleton = useModuleSkeleton();
@@ -27,15 +30,16 @@ const NodeMenuItemMain = (props) => {
       ownerState,
       ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("menuItems") } : {},
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(WrapperMenuItemStyled, { ownerState, className: classes.wrapperMenuItem, children: /* @__PURE__ */ jsx(
           MenuItemMainStyled,
           {
             label: item.title,
-            startIcon: hasChildren ? /* @__PURE__ */ jsx(ArrowIcon, { openState: isOpen, active: item.active }) : null,
+            startIcon: /* @__PURE__ */ jsx(AdornmentIcon, { icon: `${urlIconPrefix}${item.iconUrl}`, variant: "main" }),
+            endIcon: hasChildren ? /* @__PURE__ */ jsx(ArrowIcon, { openState: isOpen, active: item.active }) : null,
             onClick: () => handlerClick(),
             size: currentSize
           }
-        ),
+        ) }),
         /* @__PURE__ */ jsx(Collapse, { in: isOpen, timeout: "auto", unmountOnExit: true, children: (item.children || []).map((child, index) => /* @__PURE__ */ jsx(
           NodeMenuItem,
           {
@@ -43,7 +47,8 @@ const NodeMenuItemMain = (props) => {
             size: currentSize,
             className: clsx(CLASS_NAME_IS_ROOT),
             defaultOpen: isSkeleton ? false : true,
-            isLastSibling: item.children?.length === index + 1
+            isLastSibling: item.children?.length === index + 1,
+            isRoot: true
           },
           child.title
         )) })

package/components/SideBar/types.d.ts

@@ -51,10 +51,6 @@ export interface SideBarProps {
      * Slogan de la empresa
      */
     companySlogan?: string;
-    /**
-     * Indica la variación de estilo del componente
-     */
-    variantStyle?: 'variantDefault' | 'variantComercial';
     moduleSelectedId?: string | undefined;
     onMenuItemClick: (item: MenuDataType) => void;
     /**
@@ -74,10 +70,19 @@ export interface SideBarProps {
      */
     urlIconPrefix?: string;
     /**
-     * Promoción del sidebar, se renderiza en el footer del sidebar
+     * Variación del componente, puede ser uno de los valores definidos en 'variantDefault' , 'variantComercial'
+     */
+    variant?: SidebarVariants;
+    /**
+     * Componente que se renderiza en el encabezado del sidebar
+     */
+    headerComponent?: ReactElement;
+    /**
+     * Componente que se renderiza en el pie de página del sidebar
      */
-    promotion?: ReactElement;
+    footerComponent?: ReactElement;
 }
+export type SidebarVariants = 'host' | 'microfrontend';
 /**
  * Interface que representa el estado de un elemento de menú en la barra lateral.
  */
@@ -96,7 +101,7 @@ export type SideBarOwnerState = Pick<IMenuDataWithState, 'active' | 'itemInTreeA
 export type SideBarStyles = M4LOverridesStyleRules<SideBarSlotsType, typeof SIDEBAR_KEY_COMPONENT, Theme>;
 export type SideBarDesktopStyles = M4LOverridesStyleRules<SideBarDesktopSlots, typeof SIDEBAR_KEY_COMPONENT, Theme>;
 export type ContentGroupsStyles = M4LOverridesStyleRules<ContentGroupsSlots, typeof SIDEBAR_KEY_COMPONENT, Theme>;
-export type HeaderSidebarStyles = M4LOverridesStyleRules<HeaderSidebarSlots, typeof SIDEBAR_KEY_COMPONENT, Theme>;
+export type HeaderComponentStyles = M4LOverridesStyleRules<HeaderSidebarSlots, typeof SIDEBAR_KEY_COMPONENT, Theme>;
 export type SideBarFooterStyles = M4LOverridesStyleRules<SideBarFooterSlots, typeof SIDEBAR_KEY_COMPONENT, Theme>;
 export type SideBarMobileStyles = M4LOverridesStyleRules<SideBarMobileSlots, typeof SIDEBAR_KEY_COMPONENT, Theme>;
 export type ContentComponentStyles = M4LOverridesStyleRules<ContentComponentSlots, typeof SIDEBAR_KEY_COMPONENT, Theme>;

package/components/areas/contexts/AreasContext/store.js

@@ -441,8 +441,8 @@ const createAreasStore = (initProps, storeDevtoolsEnabled = false) => {
                   bounds: {
                     left: MARGIN_GRIDLAYOUT,
                     top: MARGIN_GRIDLAYOUT,
-                    right: -MARGIN_GRIDLAYOUT,
-                    bottom: -MARGIN_GRIDLAYOUT
+                    right: -10,
+                    bottom: -10
                   }
                 });
               }

package/components/commercial/HamburgerMenu/HamburgerMenu.js

@@ -44,8 +44,7 @@ const HamburgerMenu = (props) => {
             onToggleVisible: handlerOnVisible,
             anchored: false,
             companyLogoSmallUrl: "",
-            companyName: "",
-            variantStyle: "variantComercial"
+            companyName: ""
           }
         )
       ]

package/components/hook-form/RHFAutocompleteAsync/reducer/RHFAutocompleteReducer.js

@@ -65,11 +65,6 @@ const RHFAutocompleteAsyncReducer = (onChangeFilterParms) => (state, action) =>
         ...state,
         isOpen: false
       };
-    // case actionsType.SET_SELECTED_OPTIONS_TO_AUTOCOMPLETE:
-    //   return {
-    //     ...state,
-    //     selectedOptions: action.payload,
-    //   };
     default:
       return state;
   }

package/components/hook-form/RHFPeriod/subcomponents/Period/Period.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import { E as ETimePeriods } from "./types.js";
-import { d as dictionary } from "./dictionary.js";
+import { D as DICTIONARY } from "./dictionary.js";
 import { useMemo } from "react";
 import { u as useComponentSize } from "../../../../../hooks/useComponentSize/useComponentSize.js";
 import { P as PeriodRootStyled, S as SelectStyled, T as TextFieldStyled } from "../../slots/RHFPeriodSlots.js";
@@ -19,9 +19,9 @@ const Period = (props) => {
   const { host_static_assets, environment_assets } = useEnvironment();
   const options = useMemo(
     () => [
-      { id: ETimePeriods.YEARS.toString(), label: getLabel(dictionary.LABEL_YEARS) },
-      { id: ETimePeriods.MONTHS.toString(), label: getLabel(dictionary.LABEL_MONTHS) },
-      { id: ETimePeriods.DAYS.toString(), label: getLabel(dictionary.LABEL_DAYS) }
+      { id: ETimePeriods.YEARS.toString(), label: getLabel(DICTIONARY.LABEL_YEARS) },
+      { id: ETimePeriods.MONTHS.toString(), label: getLabel(DICTIONARY.LABEL_MONTHS) },
+      { id: ETimePeriods.DAYS.toString(), label: getLabel(DICTIONARY.LABEL_DAYS) }
     ],
     [getLabel]
   );

package/components/hook-form/RHFPeriod/subcomponents/Period/dictionary.d.ts

@@ -1,5 +1,5 @@
 export declare const PERIOD_FORMATTER_DICTIONARY_KEY = "period_formatter";
-export declare const dictionary: {
+export declare const DICTIONARY: {
     LABEL_YEARS: string;
     LABEL_MONTHS: string;
     LABEL_DAYS: string;

package/components/hook-form/RHFPeriod/subcomponents/Period/dictionary.js

@@ -1,13 +1,14 @@
 import { g as getCommonActionsDictionary } from "../../../../CommonActions/dictionary.js";
-const dictionary = {
-  LABEL_YEARS: "period.label_years",
-  LABEL_MONTHS: "period.label_months",
-  LABEL_DAYS: "period.label_days"
+const DICTIONARY_KEY = "rhf_period";
+const DICTIONARY = {
+  LABEL_YEARS: `${DICTIONARY_KEY}.label_years`,
+  LABEL_MONTHS: `${DICTIONARY_KEY}.label_months`,
+  LABEL_DAYS: `${DICTIONARY_KEY}.label_days`
 };
 function getPeriodComponetsDictionary() {
-  return ["period"].concat(getCommonActionsDictionary());
+  return [DICTIONARY_KEY].concat(getCommonActionsDictionary());
 }
 export {
-  dictionary as d,
+  DICTIONARY as D,
   getPeriodComponetsDictionary as g
 };

package/components/mui_extended/MenuItem/MenuItem.js

@@ -20,6 +20,7 @@ const MenuItem = (props) => {
     checked = false,
     checkable = false,
     className,
+    dataTestId,
     ...other
   } = props;
   const { currentSize } = useComponentSize(size);
@@ -83,7 +84,7 @@ const MenuItem = (props) => {
       disableRipple: true,
       size: adjustedSize,
       className: clsx(className, MENUITEM_CLASSES.root),
-      "data-testid": "MenuItemRoot",
+      "data-testid": dataTestId || "MenuItemRoot",
       children: [
         checkable && /* @__PURE__ */ jsx(
           MenuItemIconCheckedStyled,
@@ -94,7 +95,7 @@ const MenuItem = (props) => {
             disabled
           }
         ),
-        /* @__PURE__ */ jsxs(MenuItemContainerStyled, { ownerState: { ...ownerState }, children: [
+        /* @__PURE__ */ jsxs(MenuItemContainerStyled, { ownerState: { ...ownerState }, className: MENUITEM_CLASSES.menuItemContainer, children: [
           renderIcon(startIcon, "MenuItemStartIcon", getComponentSlotRoot("MenuItemStartIcon")),
           /* @__PURE__ */ jsx(
             MenuItemTypographyStyled,

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

@@ -53,6 +53,10 @@ export interface MenuItemProps extends Omit<MUIMenuItemProps, 'size' | 'color'>
      * indica si debe aparecer el icono de check
      */
     checkable?: boolean;
+    /**
+     * ID para pruebas que se pasará como data-testid
+     */
+    dataTestId?: string;
 }
 /**
  * Estado del propietario del `MenuItem` utilizado para definir propiedades internas de estilo y comportamiento.

package/components/mui_extended/TabContent/TabContent.js

@@ -3,9 +3,9 @@ import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.j
 import { T as TAB_CONTENT_KEY_COMPONENT } from "./constants.js";
 import { T as TabContentRootStyled } from "./slots/TabContentSlots.js";
 const TabContent = (props) => {
-  const { children, className, background = false, ...others } = props;
+  const { children, className, hasBackground = false, ...others } = props;
   const root = getComponentSlotRoot(TAB_CONTENT_KEY_COMPONENT);
-  return /* @__PURE__ */ jsx(TabContentRootStyled, { className: root, ownerState: { background }, ...others, children });
+  return /* @__PURE__ */ jsx(TabContentRootStyled, { className: root, ownerState: { hasBackground }, ...others, children });
 };
 export {
   TabContent as T

package/components/mui_extended/TabContent/TabContent.styles.js

@@ -23,7 +23,7 @@ const tabContentStyles = {
     boxSizing: "border-box",
     zIndex: "0",
     top: "-1px",
-    ...ownerState?.background ? {
+    ...ownerState?.hasBackground ? {
       backgroundColor: theme.vars.palette.background.base,
       paddingLeft: theme.vars.size.baseSpacings.sp2,
       paddingRight: theme.vars.size.baseSpacings.sp2,

package/components/mui_extended/TabContent/types.d.ts

@@ -4,9 +4,21 @@ import { TABS_KEY_COMPONENT } from '../Tabs/constants';
 import { TabContentSlots } from './slots/TabContentEnum';
 import { M4LOverridesStyleRules } from '../../../@types/augmentations';
 export interface TabContentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * Contenido del tab.
+     */
     children: React.ReactNode;
+    /**
+     * Estilos personalizados para el contenido del tab.
+     */
     style?: React.CSSProperties;
+    /**
+     * Clave única para el contenido del tab.
+     */
     key?: Key | null | undefined;
-    background?: boolean;
+    /**
+     * Si es verdadero, el contenido del tab se mostrará con un fondo que contrasta con el fondo de la app.
+     */
+    hasBackground?: boolean;
 }
 export type TabContentStyles = M4LOverridesStyleRules<keyof typeof TabContentSlots, typeof TABS_KEY_COMPONENT, Theme>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.64",
+  "version": "9.2.65-JT17072025.beta.1",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {
@@ -34,7 +34,7 @@
     "react": "18.3.1",
     "react-chartjs-2": "^5.2.0",
     "react-color": "^2.19.3",
-    "react-data-grid": "7.0.0-beta.13",
+    "react-data-grid": "7.0.0-beta.47",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "18.3.1",

package/storybook/components/DataGrid/DataGrid.stories.d.ts

@@ -19,6 +19,10 @@ export declare const DataGridWithEventChangeUserColumn: Story;
  * DataGrid con columns formatters
  */
 export declare const DatagridWithFormatters: Story;
+/**
+ * DataGrid con columns editors
+ */
+export declare const DatagridWithEditors: Story;
 /**
  * DataGrid con columns with actions
  */

package/storybook/components/DataGrid/helpers/types.d.ts

@@ -1,4 +1,4 @@
-import { HeaderRendererProps } from 'react-data-grid';
+import { RenderHeaderCellProps } from 'react-data-grid';
 import { ChipStatusFormatterProps } from '../../../../src/components/formatters/ChipStatusFormatter/types';
 import { DeepKeyOf } from '../../../../src/utils/types';
 import { ColumnAlign } from '../../../../src/components/DataGrid/types';
@@ -21,6 +21,7 @@ export interface SeedProps {
     withActionsUser?: boolean;
     withBooleanStatus?: boolean;
     withUserType?: boolean;
+    withEditors?: boolean;
     aligns?: Record<string, ColumnAlign>;
     names?: Record<string, string>;
 }
@@ -74,7 +75,7 @@ export interface Column<TRow, TSummaryRow> {
     type: ColumnType;
     formatter?: (props: any) => JSX.Element;
     width?: number;
-    withinHeaderRenderer?: React.FunctionComponent<HeaderRendererProps<TRow, TSummaryRow>>;
+    withinHeaderRenderer?: React.FunctionComponent<RenderHeaderCellProps<TRow, TSummaryRow>>;
     customFilter?: (row: TRow, value: string) => boolean;
     customSort?: (a: TRow, b: TRow) => number;
 }

package/storybook/components/SideBar/SideBar.stories.d.ts

@@ -5,19 +5,13 @@ type Story = StoryObj<typeof SideBar>;
 /**
  * SideBar por defecto sin ningún item seleccionado
  */
-export declare const Default: Story;
+export declare const H001_VariantHost: Story;
 /**
- * SideBar colapsado por medio del botón de anclaje
- */
-export declare const CollapsedWithAnchorButton: Story;
-/**
- * SideBar colapsado con hover sobre el menú
- */
-export declare const CollapsedWithHoverOnMenu: Story;
-/**
- * SideBar colapsado retirando hover sobre el menú
+ * SideBar por defecto sin ningún item seleccionado
  */
-export declare const CollapsedWithHoverRemoved: Story;
+export declare const H002_VariantHost_Collapsed: Story;
+export declare const H003_VariantMicrofrontend: Story;
+export declare const H004_VariantMicrofrontend_Collapsed: Story;
 /**
  * SideBar con items en el menu, con un item seleccionado y 5 anidaciones incluyendo la sección padre de los menu items
  */

package/storybook/components/SideBar/subcomponents/FooterComponentHost/FooterComponentHost.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Componente que renderiza el footer de la promoción del sidebar.
+ */
+export declare const FooterComponentHost: () => import("react/jsx-runtime").JSX.Element;

package/storybook/components/SideBar/subcomponents/FooterComponentHost/index.d.ts

@@ -0,0 +1 @@
+export { FooterComponentHost as FooterComponent } from './FooterComponentHost';

package/storybook/components/SideBar/subcomponents/FooterComponentMicrofrontend/FooterComponentMicrofrontend.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Componente que renderiza el footer del sidebar.
+ */
+export declare const FooterComponentMicrofrontend: () => import("react/jsx-runtime").JSX.Element;

package/storybook/components/SideBar/subcomponents/FooterComponentMicrofrontend/FooterComponentMicrofrontend.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { FooterComponentMicrofrontend } from './FooterComponentMicrofrontend';
+declare const meta: Meta<typeof FooterComponentMicrofrontend>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Ejemplo básico del componente FooterComponentMicrofrontend.
+ * Este componente renderiza una ilustración SVG en el footer del sidebar.
+ */
+export declare const Default: Story;
+/**
+ * Ejemplo del componente dentro de un contenedor con fondo.
+ */
+export declare const WithBackground: Story;