@m4l/components 9.2.25 → 9.2.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -10,9 +10,9 @@ export {
10
10
  CONTAINER_BTN_ANCHORED as C,
11
11
  ITEM_ACTIVE as I,
12
12
  LIST_MENU_ITEM as L,
13
- PATH_ICONS as P,
13
+ PATH_ARROW_RIGHT_ICON as P,
14
14
  SIDEBAR_KEY_COMPONENT as S,
15
15
  ITEM_IN_TREE_ACTIVE as a,
16
- PATH_ARROW_DOWN_ICON as b,
17
- PATH_ARROW_RIGHT_ICON as c
16
+ PATH_ICONS as b,
17
+ PATH_ARROW_DOWN_ICON as c
18
18
  };
@@ -22,7 +22,9 @@ export declare enum SideBarFooterSlots {
22
22
  containerFooter = "containerFooter"
23
23
  }
24
24
  export declare enum ContentComponentSlots {
25
- contentComponentRoot = "contentComponentRoot"
25
+ contentComponentRoot = "contentComponentRoot",
26
+ contentComponentHide = "contentComponentHide",
27
+ containerComponent = "containerComponent"
26
28
  }
27
29
  export declare enum ContainerMenuItemsMainSlots {
28
30
  containerMenuItems = "containerMenuItems"
@@ -28,6 +28,8 @@ var SideBarFooterSlots = /* @__PURE__ */ ((SideBarFooterSlots2) => {
28
28
  })(SideBarFooterSlots || {});
29
29
  var ContentComponentSlots = /* @__PURE__ */ ((ContentComponentSlots2) => {
30
30
  ContentComponentSlots2["contentComponentRoot"] = "contentComponentRoot";
31
+ ContentComponentSlots2["contentComponentHide"] = "contentComponentHide";
32
+ ContentComponentSlots2["containerComponent"] = "containerComponent";
31
33
  return ContentComponentSlots2;
32
34
  })(ContentComponentSlots || {});
33
35
  var ContainerMenuItemsMainSlots = /* @__PURE__ */ ((ContainerMenuItemsMainSlots2) => {
@@ -40,6 +40,12 @@ export declare const ContainerSideBarMobileStyled: import('@emotion/styled').Sty
40
40
  export declare const ContentComponentRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').SideBarOwnerState> & Record<string, unknown> & {
41
41
  ownerState: Partial<import('../types').SideBarOwnerState> & Record<string, unknown>;
42
42
  }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
43
+ export declare const ContentComponentHideStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').SideBarOwnerState> & Record<string, unknown> & {
44
+ ownerState: Partial<import('../types').SideBarOwnerState> & Record<string, unknown>;
45
+ }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
46
+ export declare const ContainerComponentStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').SideBarOwnerState> & Record<string, unknown> & {
47
+ ownerState: Partial<import('../types').SideBarOwnerState> & Record<string, unknown>;
48
+ }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
43
49
  export declare const ContainerMenuItemsStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').SideBarOwnerState> & Record<string, unknown> & {
44
50
  ownerState: Partial<import('../types').SideBarOwnerState> & Record<string, unknown>;
45
51
  }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
@@ -58,23 +58,33 @@ const ContentComponentRootStyled = styled("div", {
58
58
  name: SIDEBAR_KEY_COMPONENT,
59
59
  slot: ContentComponentSlots.contentComponentRoot
60
60
  })(sideBarStyles?.contentComponentRoot);
61
+ const ContentComponentHideStyled = styled("div", {
62
+ name: SIDEBAR_KEY_COMPONENT,
63
+ slot: ContentComponentSlots.contentComponentHide
64
+ })(sideBarStyles?.contentComponentHide);
65
+ const ContainerComponentStyled = styled("div", {
66
+ name: SIDEBAR_KEY_COMPONENT,
67
+ slot: ContentComponentSlots.containerComponent
68
+ })(sideBarStyles?.containerComponent);
61
69
  const ContainerMenuItemsStyled = styled("div", {
62
70
  name: SIDEBAR_KEY_COMPONENT,
63
71
  slot: ContainerMenuItemsMainSlots.containerMenuItems
64
72
  })(sideBarStyles?.containerMenuItems);
65
73
  export {
66
74
  ContentComponentRootStyled as C,
67
- ContainerContentGroupsRootStyled as a,
68
- ContainerContentGroupsStyled as b,
69
- ContainerContentTitleStyled as c,
70
- ContainerContentNavItemsStyled as d,
71
- ContainerMenuItemsStyled as e,
72
- ContainerArrowIconRootStyled as f,
73
- ContainerFooterStyled as g,
74
- ContainerHeaderSidebarRootStyled as h,
75
- ContainerTitleSubtitleStyled as i,
76
- ContainerDesktopContentStyled as j,
77
- ContainerDesktopRootStyled as k,
78
- ContainerBtnAnchoredStyled as l,
79
- ContainerSideBarMobileStyled as m
75
+ ContentComponentHideStyled as a,
76
+ ContainerComponentStyled as b,
77
+ ContainerBtnAnchoredStyled as c,
78
+ ContainerContentGroupsRootStyled as d,
79
+ ContainerContentGroupsStyled as e,
80
+ ContainerContentTitleStyled as f,
81
+ ContainerContentNavItemsStyled as g,
82
+ ContainerMenuItemsStyled as h,
83
+ ContainerArrowIconRootStyled as i,
84
+ ContainerFooterStyled as j,
85
+ ContainerHeaderSidebarRootStyled as k,
86
+ ContainerTitleSubtitleStyled as l,
87
+ ContainerDesktopContentStyled as m,
88
+ ContainerDesktopRootStyled as n,
89
+ ContainerSideBarMobileStyled as o
80
90
  };
@@ -1,27 +1,58 @@
1
1
  import { jsxs, jsx } from "react/jsx-runtime";
2
+ import { useIsMobile } from "@m4l/graphics";
3
+ import { useEnvironment } from "@m4l/core";
2
4
  import { u as useSideBar } from "../../hooks/useSideBar/index.js";
3
- import { C as ContentComponentRootStyled } from "../../slots/SideBarSlots.js";
5
+ import { C as ContentComponentRootStyled, a as ContentComponentHideStyled, b as ContainerComponentStyled, c as ContainerBtnAnchoredStyled } from "../../slots/SideBarSlots.js";
4
6
  import { C as ContentGroups } from "../ContentGroups/index.js";
5
7
  import { F as FooterSidebar } from "../FooterSidebar/index.js";
6
8
  import { H as HeaderSidebar } from "../HeaderSidebar/index.js";
9
+ import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
10
+ import { P as PATH_ARROW_RIGHT_ICON, C as CONTAINER_BTN_ANCHORED } from "../../constants.js";
7
11
  import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
12
+ import { I as IconButton } from "../../../mui_extended/IconButton/IconButton.js";
8
13
  const ContentComponent = () => {
9
14
  const { anchored, onToggleAnchored, companyName, companySlogan, companyLogoSmallUrl, expandedWidth, size } = useSideBar();
10
15
  const ownerState = {
11
- expandedWidth
16
+ expandedWidth,
17
+ anchored
12
18
  };
19
+ const { host_static_assets, environment_assets } = useEnvironment();
20
+ const isDesktop = !useIsMobile();
13
21
  const { currentSize } = useComponentSize(size);
22
+ const classRootBtnAnchored = getComponentSlotRoot(CONTAINER_BTN_ANCHORED);
23
+ const handlerAnchoredButton = () => {
24
+ onToggleAnchored(!anchored);
25
+ };
14
26
  return /* @__PURE__ */ jsxs(ContentComponentRootStyled, { ownerState, children: [
15
- /* @__PURE__ */ jsx(
16
- HeaderSidebar,
27
+ /* @__PURE__ */ jsx(ContentComponentHideStyled, { ownerState: { ...ownerState, isDesktop }, role: "complementary", "aria-label": "hidden content", children: /* @__PURE__ */ jsxs(ContainerComponentStyled, { ownerState, children: [
28
+ /* @__PURE__ */ jsx(
29
+ HeaderSidebar,
30
+ {
31
+ title: companyName ?? "",
32
+ subtitle: companySlogan ?? "",
33
+ srcIcon: companyLogoSmallUrl ?? ""
34
+ }
35
+ ),
36
+ /* @__PURE__ */ jsx(ContentGroups, { size: currentSize }),
37
+ /* @__PURE__ */ jsx(FooterSidebar, { onToggleAnchored, anchored })
38
+ ] }) }),
39
+ isDesktop && /* @__PURE__ */ jsx(
40
+ ContainerBtnAnchoredStyled,
17
41
  {
18
- title: companyName ?? "",
19
- subtitle: companySlogan ?? "",
20
- srcIcon: companyLogoSmallUrl ?? ""
42
+ className: classRootBtnAnchored,
43
+ ownerState,
44
+ children: /* @__PURE__ */ jsx(
45
+ IconButton,
46
+ {
47
+ role: "anchored-button",
48
+ variant: "outline",
49
+ rotationAngle: !anchored ? 0 : 180,
50
+ onClick: handlerAnchoredButton,
51
+ src: `${host_static_assets}/${environment_assets}/${PATH_ARROW_RIGHT_ICON}`
52
+ }
53
+ )
21
54
  }
22
- ),
23
- /* @__PURE__ */ jsx(ContentGroups, { size: currentSize }),
24
- /* @__PURE__ */ jsx(FooterSidebar, { onToggleAnchored, anchored })
55
+ )
25
56
  ] });
26
57
  };
27
58
  export {
@@ -2,10 +2,39 @@ const contentComponentStyles = {
2
2
  /**
3
3
  * Estilos del contenedor principal del sidebar
4
4
  */
5
- contentComponentRoot: ({ ownerState }) => ({
5
+ contentComponentRoot: ({ theme }) => ({
6
+ position: "relative",
6
7
  display: "grid",
7
8
  height: "100%",
8
9
  gridTemplateRows: "auto 1fr auto",
10
+ width: "auto",
11
+ backgroundColor: theme.vars.palette.background.default
12
+ }),
13
+ /**
14
+ * Estilos del contenedor que oculta el contenido cuando se encuentra des anclado.
15
+ */
16
+ contentComponentHide: ({ theme, ownerState }) => ({
17
+ width: "100%",
18
+ height: "100%",
19
+ overflow: "hidden",
20
+ transition: "all 0.5s",
21
+ ...!ownerState.anchored && {
22
+ width: ownerState?.anchored && ownerState.isDesktop ? ownerState.expandedWidth : !ownerState.isDesktop ? "100%" : theme.vars.size.baseSpacings.sp4,
23
+ "&:hover": {
24
+ transition: "all 0.5s",
25
+ width: ownerState.expandedWidth,
26
+ contentVisibility: "visible",
27
+ '& [class*="containerFooter"]': {
28
+ borderWidth: theme.vars.size.baseSpacings["sp0-5"]
29
+ }
30
+ }
31
+ }
32
+ }),
33
+ /**
34
+ * Contenedor que abraza el contenido del menu en primer lugar.
35
+ */
36
+ containerComponent: ({ ownerState }) => ({
37
+ height: "100%",
9
38
  width: ownerState.expandedWidth
10
39
  })
11
40
  };
@@ -3,7 +3,7 @@ import { useModuleDictionary } from "@m4l/core";
3
3
  import { u as useSideBar } from "../../hooks/useSideBar/index.js";
4
4
  import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.js";
5
5
  import { g as getNameDataTestId } from "../../tests/utils.js";
6
- import { a as ContainerContentGroupsRootStyled, b as ContainerContentGroupsStyled, c as ContainerContentTitleStyled, d as ContainerContentNavItemsStyled } from "../../slots/SideBarSlots.js";
6
+ import { d as ContainerContentGroupsRootStyled, e as ContainerContentGroupsStyled, f as ContainerContentTitleStyled, g as ContainerContentNavItemsStyled } from "../../slots/SideBarSlots.js";
7
7
  import { C as ContainerMenuItemsMain } from "./subcomponents/ContainerMenuItemsMain/index.js";
8
8
  import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
9
9
  import { T as Typography } from "../../../mui_extended/Typography/Typography.js";
@@ -7,9 +7,9 @@ import { u as useSideBar } from "../../../../hooks/useSideBar/index.js";
7
7
  import { T as TEST_PROP_ID } from "../../../../../../test/constants_no_mock.js";
8
8
  import { g as getNameDataTestId } from "../../../../tests/utils.js";
9
9
  import { A as ArrowIcon } from "./subcomponents/ArrowIcon/index.js";
10
- import { e as ContainerMenuItemsStyled } from "../../../../slots/SideBarSlots.js";
10
+ import { h as ContainerMenuItemsStyled } from "../../../../slots/SideBarSlots.js";
11
11
  import { a as getComponentSlotRoot } from "../../../../../../utils/getComponentSlotRoot.js";
12
- import { I as ITEM_ACTIVE, a as ITEM_IN_TREE_ACTIVE, P as PATH_ICONS, L as LIST_MENU_ITEM } from "../../../../constants.js";
12
+ import { I as ITEM_ACTIVE, a as ITEM_IN_TREE_ACTIVE, b as PATH_ICONS, L as LIST_MENU_ITEM } from "../../../../constants.js";
13
13
  import { useEnvironment } from "@m4l/core";
14
14
  import { u as useComponentSize } from "../../../../../../hooks/useComponentSize/useComponentSize.js";
15
15
  import { M as MenuItem } from "../../../../../mui_extended/MenuItem/MenuItem.js";
@@ -2,8 +2,8 @@ import { jsx } from "react/jsx-runtime";
2
2
  import { useEnvironment } from "@m4l/core";
3
3
  import { T as TEST_PROP_ID } from "../../../../../../../../test/constants_no_mock.js";
4
4
  import { g as getNameDataTestId } from "../../../../../../tests/utils.js";
5
- import { b as PATH_ARROW_DOWN_ICON } from "../../../../../../constants.js";
6
- import { f as ContainerArrowIconRootStyled } from "../../../../../../slots/SideBarSlots.js";
5
+ import { c as PATH_ARROW_DOWN_ICON } from "../../../../../../constants.js";
6
+ import { i as ContainerArrowIconRootStyled } from "../../../../../../slots/SideBarSlots.js";
7
7
  import { I as IconButton } from "../../../../../../../mui_extended/IconButton/IconButton.js";
8
8
  function ArrowIcon(props) {
9
9
  const { openState, active } = props;
@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
2
2
  import { u as useSideBar } from "../../hooks/useSideBar/index.js";
3
3
  import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.js";
4
4
  import { g as getNameDataTestId } from "../../tests/utils.js";
5
- import { g as ContainerFooterStyled } from "../../slots/SideBarSlots.js";
5
+ import { j as ContainerFooterStyled } from "../../slots/SideBarSlots.js";
6
6
  import { I as Image } from "../../../Image/Image.js";
7
7
  function FooterSidebar({ anchored }) {
8
8
  const { companyLogoNormalUrl } = useSideBar();
@@ -1,5 +1,5 @@
1
1
  import { jsxs, jsx } from "react/jsx-runtime";
2
- import { h as ContainerHeaderSidebarRootStyled, i as ContainerTitleSubtitleStyled } from "../../slots/SideBarSlots.js";
2
+ import { k as ContainerHeaderSidebarRootStyled, l as ContainerTitleSubtitleStyled } from "../../slots/SideBarSlots.js";
3
3
  import { T as Typography } from "../../../mui_extended/Typography/Typography.js";
4
4
  import { I as Image } from "../../../Image/Image.js";
5
5
  const HeaderSidebar = ({ srcIcon, title, subtitle }) => {
@@ -1,16 +1,13 @@
1
- import { jsxs, jsx } from "react/jsx-runtime";
2
- import { useEnvironment } from "@m4l/core";
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { useFirstRender } from "@m4l/graphics";
3
3
  import { u as useSideBar } from "../../hooks/useSideBar/index.js";
4
- import { j as ContainerDesktopContentStyled, k as ContainerDesktopRootStyled, l as ContainerBtnAnchoredStyled } from "../../slots/SideBarSlots.js";
5
- import { c as PATH_ARROW_RIGHT_ICON, S as SIDEBAR_KEY_COMPONENT, C as CONTAINER_BTN_ANCHORED } from "../../constants.js";
4
+ import { m as ContainerDesktopContentStyled, n as ContainerDesktopRootStyled } from "../../slots/SideBarSlots.js";
5
+ import { S as SIDEBAR_KEY_COMPONENT } from "../../constants.js";
6
6
  import { C as ContentComponent } from "../ContentComponent/index.js";
7
7
  import { useState, useEffect } from "react";
8
- import { useFirstRender } from "@m4l/graphics";
9
8
  import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
10
- import { I as IconButton } from "../../../mui_extended/IconButton/IconButton.js";
11
9
  const SideBarDesktop = () => {
12
- const { anchored, onToggleAnchored, expandedWidth } = useSideBar();
13
- const { host_static_assets, environment_assets } = useEnvironment();
10
+ const { anchored, expandedWidth } = useSideBar();
14
11
  const [eventAnchored, setEventAnchored] = useState(anchored);
15
12
  const isFirstRender = useFirstRender([anchored]);
16
13
  useEffect(() => {
@@ -23,56 +20,21 @@ const SideBarDesktop = () => {
23
20
  anchored: eventAnchored,
24
21
  expandedWidth
25
22
  };
26
- const handlerOnMouseEnter = () => {
27
- if (!anchored) {
28
- setEventAnchored(true);
29
- }
30
- };
31
- const handlerOnMouseLeave = () => {
32
- if (!anchored) {
33
- setEventAnchored(false);
34
- }
35
- };
36
- const handlerAnchoredButton = () => {
37
- onToggleAnchored(!anchored);
38
- };
39
23
  const classRoot = getComponentSlotRoot(SIDEBAR_KEY_COMPONENT);
40
- const classRootBtnAnchored = getComponentSlotRoot(CONTAINER_BTN_ANCHORED);
41
- return /* @__PURE__ */ jsxs(
24
+ return /* @__PURE__ */ jsx(
42
25
  ContainerDesktopContentStyled,
43
26
  {
44
27
  role: "menu",
45
28
  className: classRoot,
46
29
  ownerState,
47
- onMouseLeave: handlerOnMouseLeave,
48
- children: [
49
- /* @__PURE__ */ jsx(
50
- ContainerDesktopRootStyled,
51
- {
52
- ownerState,
53
- role: "menubar",
54
- onMouseEnter: handlerOnMouseEnter,
55
- children: /* @__PURE__ */ jsx(ContentComponent, {})
56
- }
57
- ),
58
- /* @__PURE__ */ jsx(
59
- ContainerBtnAnchoredStyled,
60
- {
61
- className: classRootBtnAnchored,
62
- ownerState,
63
- children: /* @__PURE__ */ jsx(
64
- IconButton,
65
- {
66
- role: "anchored-button",
67
- variant: "outline",
68
- rotationAngle: !eventAnchored ? 0 : 180,
69
- onClick: handlerAnchoredButton,
70
- src: `${host_static_assets}/${environment_assets}/${PATH_ARROW_RIGHT_ICON}`
71
- }
72
- )
73
- }
74
- )
75
- ]
30
+ children: /* @__PURE__ */ jsx(
31
+ ContainerDesktopRootStyled,
32
+ {
33
+ ownerState,
34
+ role: "menubar",
35
+ children: /* @__PURE__ */ jsx(ContentComponent, {})
36
+ }
37
+ )
76
38
  }
77
39
  );
78
40
  };
@@ -1,23 +1,30 @@
1
1
  const sideBarDesktopStyles = {
2
+ /**
3
+ * Contenedor del sidebar en modo desktop, contiene el contenido del sidebar
4
+ * y el boton de anclaje. Permite poner el boton de anclaje en posicion absoluta
5
+ * sin que se oculte por el overflow hidden que tiene el contenido del sidebar
6
+ */
7
+ containerDesktopContent: ({ theme, ownerState }) => {
8
+ const width = ownerState?.anchored ? ownerState.expandedWidth : theme.vars.size.baseSpacings.sp4;
9
+ return {
10
+ height: "100%",
11
+ position: "relative",
12
+ minWidth: width,
13
+ maxWidth: width,
14
+ transition: "all 0.5s"
15
+ };
16
+ },
2
17
  /**
3
18
  * Styles applied to the root element of the `SideBar` component in desktop mode.
4
19
  */
5
- containerDesktopRoot: ({ theme, ownerState }) => ({
20
+ containerDesktopRoot: ({ ownerState, theme }) => ({
6
21
  height: "100%",
7
22
  width: "fit-content",
8
- maxWidth: ownerState?.anchored ? ownerState.expandedWidth : theme.vars.size.baseSpacings.sp4,
9
- overflow: "hidden",
23
+ overflow: "visible",
10
24
  borderRight: `1px solid ${theme.vars.palette.border.default}`,
11
- transition: "all 0.5s",
12
- position: "relative",
25
+ position: !ownerState.anchored ? "absolute" : "relative",
26
+ inset: 0,
13
27
  //add hover effect
14
- "&:hover": {
15
- maxWidth: ownerState.expandedWidth,
16
- contentVisibility: "visible",
17
- '& [class*="containerFooter"]': {
18
- borderWidth: theme.vars.size.baseSpacings["sp0-5"]
19
- }
20
- },
21
28
  zIndex: 999
22
29
  }),
23
30
  /**
@@ -28,32 +35,28 @@ const sideBarDesktopStyles = {
28
35
  right: "-20px",
29
36
  top: "20px",
30
37
  zIndex: 1e3,
31
- padding: `${theme.vars.size.baseSpacings.sp6} 10px`,
38
+ padding: `${theme.vars.size.baseSpacings.sp10} 10px`,
32
39
  "& .MuiButtonBase-root": {
33
40
  background: theme.vars.palette.background.default
34
41
  },
35
- "&:hover": {
36
- "& .MuiButtonBase-root": {
37
- border: `1px solid ${theme.palette.border.default}`,
38
- background: theme.vars.palette.primary.enabled,
39
- '& [class*="M4LIcon-root"] > div': {
40
- backgroundColor: theme.vars.palette.background.default
41
- }
42
- },
43
- "& .MuiButtonBase-root:active": {
44
- background: theme.vars.palette.primary.active
42
+ "&&& .M4LIconButton-root:hover": {
43
+ backgroundColor: theme.vars.palette.primary.enabled,
44
+ "& .M4LIcon-icon": {
45
+ backgroundColor: `${theme.vars.palette.primary.contrastText}!important`
45
46
  }
46
47
  }
47
- }),
48
- /**
49
- * Contenedor del sidebar en modo desktop, contiene el contenido del sidebar
50
- * y el boton de anclaje. Permite poner el boton de anclaje en posicion absoluta
51
- * sin que se oculte por el overflow hidden que tiene el contenido del sidebar
52
- */
53
- containerDesktopContent: () => ({
54
- width: "fit-content",
55
- height: "100%",
56
- position: "relative"
48
+ // '&:hover': {
49
+ // '& .MuiButtonBase-root': {
50
+ // border: `1px solid ${theme.palette.border.default}`,
51
+ // background: theme.vars.palette.primary.enabled,
52
+ // '& [class*="M4LIcon-root"] > div':{
53
+ // backgroundColor: theme.vars.palette.background.default,
54
+ // },
55
+ // },
56
+ // '& .MuiButtonBase-root:active': {
57
+ // background: theme.vars.palette.primary.active,
58
+ // },
59
+ // },
57
60
  })
58
61
  };
59
62
  export {
@@ -4,7 +4,7 @@ import { u as useSideBar } from "../../hooks/useSideBar/index.js";
4
4
  import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.js";
5
5
  import { g as getNameDataTestId } from "../../tests/utils.js";
6
6
  import { D as Drawer } from "./subcomponents/Drawer.js";
7
- import { m as ContainerSideBarMobileStyled } from "../../slots/SideBarSlots.js";
7
+ import { o as ContainerSideBarMobileStyled } from "../../slots/SideBarSlots.js";
8
8
  import { C as ContentComponent } from "../ContentComponent/index.js";
9
9
  const SideBarMobile = () => {
10
10
  const {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@m4l/components",
3
- "version": "9.2.25",
3
+ "version": "9.2.26",
4
4
  "license": "UNLICENSED",
5
5
  "lint-staged": {
6
6
  "*.{js,ts,tsx}": "eslint --fix --max-warnings 0 --no-warn-ignored"