@m4l/components 9.2.24 → 9.2.26

package/components/SideBar/slots/SideBarSlots.d.ts

@@ -40,6 +40,12 @@ export declare const ContainerSideBarMobileStyled: import('@emotion/styled').Sty
 export declare const ContentComponentRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').SideBarOwnerState> & Record<string, unknown> & {
     ownerState: Partial<import('../types').SideBarOwnerState> & Record<string, unknown>;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const ContentComponentHideStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').SideBarOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').SideBarOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const ContainerComponentStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').SideBarOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').SideBarOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const ContainerMenuItemsStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').SideBarOwnerState> & Record<string, unknown> & {
     ownerState: Partial<import('../types').SideBarOwnerState> & Record<string, unknown>;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/components/SideBar/slots/SideBarSlots.js

@@ -58,23 +58,33 @@ const ContentComponentRootStyled = styled("div", {
   name: SIDEBAR_KEY_COMPONENT,
   slot: ContentComponentSlots.contentComponentRoot
 })(sideBarStyles?.contentComponentRoot);
+const ContentComponentHideStyled = styled("div", {
+  name: SIDEBAR_KEY_COMPONENT,
+  slot: ContentComponentSlots.contentComponentHide
+})(sideBarStyles?.contentComponentHide);
+const ContainerComponentStyled = styled("div", {
+  name: SIDEBAR_KEY_COMPONENT,
+  slot: ContentComponentSlots.containerComponent
+})(sideBarStyles?.containerComponent);
 const ContainerMenuItemsStyled = styled("div", {
   name: SIDEBAR_KEY_COMPONENT,
   slot: ContainerMenuItemsMainSlots.containerMenuItems
 })(sideBarStyles?.containerMenuItems);
 export {
   ContentComponentRootStyled as C,
-  ContainerContentGroupsRootStyled as a,
-  ContainerContentGroupsStyled as b,
-  ContainerContentTitleStyled as c,
-  ContainerContentNavItemsStyled as d,
-  ContainerMenuItemsStyled as e,
-  ContainerArrowIconRootStyled as f,
-  ContainerFooterStyled as g,
-  ContainerHeaderSidebarRootStyled as h,
-  ContainerTitleSubtitleStyled as i,
-  ContainerDesktopContentStyled as j,
-  ContainerDesktopRootStyled as k,
-  ContainerBtnAnchoredStyled as l,
-  ContainerSideBarMobileStyled as m
+  ContentComponentHideStyled as a,
+  ContainerComponentStyled as b,
+  ContainerBtnAnchoredStyled as c,
+  ContainerContentGroupsRootStyled as d,
+  ContainerContentGroupsStyled as e,
+  ContainerContentTitleStyled as f,
+  ContainerContentNavItemsStyled as g,
+  ContainerMenuItemsStyled as h,
+  ContainerArrowIconRootStyled as i,
+  ContainerFooterStyled as j,
+  ContainerHeaderSidebarRootStyled as k,
+  ContainerTitleSubtitleStyled as l,
+  ContainerDesktopContentStyled as m,
+  ContainerDesktopRootStyled as n,
+  ContainerSideBarMobileStyled as o
 };

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

@@ -1,27 +1,58 @@
 import { jsxs, jsx } from "react/jsx-runtime";
+import { useIsMobile } from "@m4l/graphics";
+import { useEnvironment } from "@m4l/core";
 import { u as useSideBar } from "../../hooks/useSideBar/index.js";
-import { C as ContentComponentRootStyled } from "../../slots/SideBarSlots.js";
+import { C as ContentComponentRootStyled, a as ContentComponentHideStyled, b as ContainerComponentStyled, c as ContainerBtnAnchoredStyled } from "../../slots/SideBarSlots.js";
 import { C as ContentGroups } from "../ContentGroups/index.js";
 import { F as FooterSidebar } from "../FooterSidebar/index.js";
 import { H as HeaderSidebar } from "../HeaderSidebar/index.js";
+import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
+import { P as PATH_ARROW_RIGHT_ICON, C as CONTAINER_BTN_ANCHORED } from "../../constants.js";
 import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/IconButton.js";
 const ContentComponent = () => {
   const { anchored, onToggleAnchored, companyName, companySlogan, companyLogoSmallUrl, expandedWidth, size } = useSideBar();
   const ownerState = {
-    expandedWidth
+    expandedWidth,
+    anchored
   };
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const isDesktop = !useIsMobile();
   const { currentSize } = useComponentSize(size);
+  const classRootBtnAnchored = getComponentSlotRoot(CONTAINER_BTN_ANCHORED);
+  const handlerAnchoredButton = () => {
+    onToggleAnchored(!anchored);
+  };
   return /* @__PURE__ */ jsxs(ContentComponentRootStyled, { ownerState, children: [
-    /* @__PURE__ */ jsx(
-      HeaderSidebar,
+    /* @__PURE__ */ jsx(ContentComponentHideStyled, { ownerState: { ...ownerState, isDesktop }, role: "complementary", "aria-label": "hidden content", children: /* @__PURE__ */ jsxs(ContainerComponentStyled, { ownerState, children: [
+      /* @__PURE__ */ jsx(
+        HeaderSidebar,
+        {
+          title: companyName ?? "",
+          subtitle: companySlogan ?? "",
+          srcIcon: companyLogoSmallUrl ?? ""
+        }
+      ),
+      /* @__PURE__ */ jsx(ContentGroups, { size: currentSize }),
+      /* @__PURE__ */ jsx(FooterSidebar, { onToggleAnchored, anchored })
+    ] }) }),
+    isDesktop && /* @__PURE__ */ jsx(
+      ContainerBtnAnchoredStyled,
       {
-        title: companyName ?? "",
-        subtitle: companySlogan ?? "",
-        srcIcon: companyLogoSmallUrl ?? ""
+        className: classRootBtnAnchored,
+        ownerState,
+        children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            role: "anchored-button",
+            variant: "outline",
+            rotationAngle: !anchored ? 0 : 180,
+            onClick: handlerAnchoredButton,
+            src: `${host_static_assets}/${environment_assets}/${PATH_ARROW_RIGHT_ICON}`
+          }
+        )
       }
-    ),
-    /* @__PURE__ */ jsx(ContentGroups, { size: currentSize }),
-    /* @__PURE__ */ jsx(FooterSidebar, { onToggleAnchored, anchored })
+    )
   ] });
 };
 export {

package/components/SideBar/subcomponents/ContentComponent/style.js

@@ -2,10 +2,39 @@ const contentComponentStyles = {
   /**
    * Estilos del contenedor principal del sidebar
    */
-  contentComponentRoot: ({ ownerState }) => ({
+  contentComponentRoot: ({ theme }) => ({
+    position: "relative",
     display: "grid",
     height: "100%",
     gridTemplateRows: "auto 1fr auto",
+    width: "auto",
+    backgroundColor: theme.vars.palette.background.default
+  }),
+  /**
+   * Estilos del contenedor que oculta el contenido cuando se encuentra des anclado.
+   */
+  contentComponentHide: ({ theme, ownerState }) => ({
+    width: "100%",
+    height: "100%",
+    overflow: "hidden",
+    transition: "all 0.5s",
+    ...!ownerState.anchored && {
+      width: ownerState?.anchored && ownerState.isDesktop ? ownerState.expandedWidth : !ownerState.isDesktop ? "100%" : theme.vars.size.baseSpacings.sp4,
+      "&:hover": {
+        transition: "all 0.5s",
+        width: ownerState.expandedWidth,
+        contentVisibility: "visible",
+        '& [class*="containerFooter"]': {
+          borderWidth: theme.vars.size.baseSpacings["sp0-5"]
+        }
+      }
+    }
+  }),
+  /**
+   * Contenedor que abraza el contenido del menu en primer lugar.
+   */
+  containerComponent: ({ ownerState }) => ({
+    height: "100%",
     width: ownerState.expandedWidth
   })
 };

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

@@ -3,7 +3,7 @@ import { useModuleDictionary } 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 { a as ContainerContentGroupsRootStyled, b as ContainerContentGroupsStyled, c as ContainerContentTitleStyled, d as ContainerContentNavItemsStyled } from "../../slots/SideBarSlots.js";
+import { d as ContainerContentGroupsRootStyled, e as ContainerContentGroupsStyled, f as ContainerContentTitleStyled, g as ContainerContentNavItemsStyled } from "../../slots/SideBarSlots.js";
 import { C as ContainerMenuItemsMain } from "./subcomponents/ContainerMenuItemsMain/index.js";
 import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
 import { T as Typography } from "../../../mui_extended/Typography/Typography.js";

package/components/SideBar/subcomponents/ContentGroups/subcomponents/ContainerMenuItemsMain/index.js

@@ -7,9 +7,9 @@ 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 "./subcomponents/ArrowIcon/index.js";
-import { e as ContainerMenuItemsStyled } from "../../../../slots/SideBarSlots.js";
+import { h as ContainerMenuItemsStyled } from "../../../../slots/SideBarSlots.js";
 import { a as getComponentSlotRoot } from "../../../../../../utils/getComponentSlotRoot.js";
-import { I as ITEM_ACTIVE, a as ITEM_IN_TREE_ACTIVE, P as PATH_ICONS, L as LIST_MENU_ITEM } from "../../../../constants.js";
+import { I as ITEM_ACTIVE, a as ITEM_IN_TREE_ACTIVE, b as PATH_ICONS, L as LIST_MENU_ITEM } from "../../../../constants.js";
 import { useEnvironment } from "@m4l/core";
 import { u as useComponentSize } from "../../../../../../hooks/useComponentSize/useComponentSize.js";
 import { M as MenuItem } from "../../../../../mui_extended/MenuItem/MenuItem.js";

package/components/SideBar/subcomponents/ContentGroups/subcomponents/ContainerMenuItemsMain/subcomponents/ArrowIcon/index.js

@@ -2,8 +2,8 @@ import { jsx } from "react/jsx-runtime";
 import { useEnvironment } from "@m4l/core";
 import { T as TEST_PROP_ID } from "../../../../../../../../test/constants_no_mock.js";
 import { g as getNameDataTestId } from "../../../../../../tests/utils.js";
-import { b as PATH_ARROW_DOWN_ICON } from "../../../../../../constants.js";
-import { f as ContainerArrowIconRootStyled } from "../../../../../../slots/SideBarSlots.js";
+import { c as PATH_ARROW_DOWN_ICON } from "../../../../../../constants.js";
+import { i as ContainerArrowIconRootStyled } from "../../../../../../slots/SideBarSlots.js";
 import { I as IconButton } from "../../../../../../../mui_extended/IconButton/IconButton.js";
 function ArrowIcon(props) {
   const { openState, active } = props;

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

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 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 { g as ContainerFooterStyled } from "../../slots/SideBarSlots.js";
+import { j as ContainerFooterStyled } from "../../slots/SideBarSlots.js";
 import { I as Image } from "../../../Image/Image.js";
 function FooterSidebar({ anchored }) {
   const { companyLogoNormalUrl } = useSideBar();

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { h as ContainerHeaderSidebarRootStyled, i as ContainerTitleSubtitleStyled } from "../../slots/SideBarSlots.js";
+import { k as ContainerHeaderSidebarRootStyled, l as ContainerTitleSubtitleStyled } from "../../slots/SideBarSlots.js";
 import { T as Typography } from "../../../mui_extended/Typography/Typography.js";
 import { I as Image } from "../../../Image/Image.js";
 const HeaderSidebar = ({ srcIcon, title, subtitle }) => {

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

@@ -1,16 +1,13 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useEnvironment } from "@m4l/core";
+import { jsx } from "react/jsx-runtime";
+import { useFirstRender } from "@m4l/graphics";
 import { u as useSideBar } from "../../hooks/useSideBar/index.js";
-import { j as ContainerDesktopContentStyled, k as ContainerDesktopRootStyled, l as ContainerBtnAnchoredStyled } from "../../slots/SideBarSlots.js";
-import { c as PATH_ARROW_RIGHT_ICON, S as SIDEBAR_KEY_COMPONENT, C as CONTAINER_BTN_ANCHORED } from "../../constants.js";
+import { m as ContainerDesktopContentStyled, n as ContainerDesktopRootStyled } from "../../slots/SideBarSlots.js";
+import { S as SIDEBAR_KEY_COMPONENT } from "../../constants.js";
 import { C as ContentComponent } from "../ContentComponent/index.js";
 import { useState, useEffect } from "react";
-import { useFirstRender } from "@m4l/graphics";
 import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
-import { I as IconButton } from "../../../mui_extended/IconButton/IconButton.js";
 const SideBarDesktop = () => {
-  const { anchored, onToggleAnchored, expandedWidth } = useSideBar();
-  const { host_static_assets, environment_assets } = useEnvironment();
+  const { anchored, expandedWidth } = useSideBar();
   const [eventAnchored, setEventAnchored] = useState(anchored);
   const isFirstRender = useFirstRender([anchored]);
   useEffect(() => {
@@ -23,56 +20,21 @@ const SideBarDesktop = () => {
     anchored: eventAnchored,
     expandedWidth
   };
-  const handlerOnMouseEnter = () => {
-    if (!anchored) {
-      setEventAnchored(true);
-    }
-  };
-  const handlerOnMouseLeave = () => {
-    if (!anchored) {
-      setEventAnchored(false);
-    }
-  };
-  const handlerAnchoredButton = () => {
-    onToggleAnchored(!anchored);
-  };
   const classRoot = getComponentSlotRoot(SIDEBAR_KEY_COMPONENT);
-  const classRootBtnAnchored = getComponentSlotRoot(CONTAINER_BTN_ANCHORED);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     ContainerDesktopContentStyled,
     {
       role: "menu",
       className: classRoot,
       ownerState,
-      onMouseLeave: handlerOnMouseLeave,
-      children: [
-        /* @__PURE__ */ jsx(
-          ContainerDesktopRootStyled,
-          {
-            ownerState,
-            role: "menubar",
-            onMouseEnter: handlerOnMouseEnter,
-            children: /* @__PURE__ */ jsx(ContentComponent, {})
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ContainerBtnAnchoredStyled,
-          {
-            className: classRootBtnAnchored,
-            ownerState,
-            children: /* @__PURE__ */ jsx(
-              IconButton,
-              {
-                role: "anchored-button",
-                variant: "outline",
-                rotationAngle: !eventAnchored ? 0 : 180,
-                onClick: handlerAnchoredButton,
-                src: `${host_static_assets}/${environment_assets}/${PATH_ARROW_RIGHT_ICON}`
-              }
-            )
-          }
-        )
-      ]
+      children: /* @__PURE__ */ jsx(
+        ContainerDesktopRootStyled,
+        {
+          ownerState,
+          role: "menubar",
+          children: /* @__PURE__ */ jsx(ContentComponent, {})
+        }
+      )
     }
   );
 };

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

@@ -1,23 +1,30 @@
 const sideBarDesktopStyles = {
+  /**
+   * Contenedor del sidebar en modo desktop, contiene el contenido del sidebar
+   * y el boton de anclaje. Permite poner el boton de anclaje en posicion absoluta
+   * sin que se oculte por el overflow hidden que tiene el contenido del sidebar
+   */
+  containerDesktopContent: ({ theme, ownerState }) => {
+    const width = ownerState?.anchored ? ownerState.expandedWidth : theme.vars.size.baseSpacings.sp4;
+    return {
+      height: "100%",
+      position: "relative",
+      minWidth: width,
+      maxWidth: width,
+      transition: "all 0.5s"
+    };
+  },
   /**
    * Styles applied to the root element of the `SideBar` component in desktop mode.
    */
-  containerDesktopRoot: ({ theme, ownerState }) => ({
+  containerDesktopRoot: ({ ownerState, theme }) => ({
     height: "100%",
     width: "fit-content",
-    maxWidth: ownerState?.anchored ? ownerState.expandedWidth : theme.vars.size.baseSpacings.sp4,
-    overflow: "hidden",
+    overflow: "visible",
     borderRight: `1px solid ${theme.vars.palette.border.default}`,
-    transition: "all 0.5s",
-    position: "relative",
+    position: !ownerState.anchored ? "absolute" : "relative",
+    inset: 0,
     //add hover effect
-    "&:hover": {
-      maxWidth: ownerState.expandedWidth,
-      contentVisibility: "visible",
-      '& [class*="containerFooter"]': {
-        borderWidth: theme.vars.size.baseSpacings["sp0-5"]
-      }
-    },
     zIndex: 999
   }),
   /**
@@ -28,32 +35,28 @@ const sideBarDesktopStyles = {
     right: "-20px",
     top: "20px",
     zIndex: 1e3,
-    padding: `${theme.vars.size.baseSpacings.sp6} 10px`,
+    padding: `${theme.vars.size.baseSpacings.sp10} 10px`,
     "& .MuiButtonBase-root": {
       background: theme.vars.palette.background.default
     },
-    "&:hover": {
-      "& .MuiButtonBase-root": {
-        border: `1px solid ${theme.palette.border.default}`,
-        background: theme.vars.palette.primary.enabled,
-        '& [class*="M4LIcon-root"] > div': {
-          backgroundColor: theme.vars.palette.background.default
-        }
-      },
-      "& .MuiButtonBase-root:active": {
-        background: theme.vars.palette.primary.active
+    "&&& .M4LIconButton-root:hover": {
+      backgroundColor: theme.vars.palette.primary.enabled,
+      "& .M4LIcon-icon": {
+        backgroundColor: `${theme.vars.palette.primary.contrastText}!important`
       }
     }
-  }),
-  /**
-   * Contenedor del sidebar en modo desktop, contiene el contenido del sidebar
-   * y el boton de anclaje. Permite poner el boton de anclaje en posicion absoluta
-   * sin que se oculte por el overflow hidden que tiene el contenido del sidebar
-   */
-  containerDesktopContent: () => ({
-    width: "fit-content",
-    height: "100%",
-    position: "relative"
+    // '&:hover': {
+    //   '& .MuiButtonBase-root': {
+    //     border: `1px solid ${theme.palette.border.default}`,
+    //     background: theme.vars.palette.primary.enabled,
+    //     '& [class*="M4LIcon-root"] > div':{
+    //       backgroundColor: theme.vars.palette.background.default,
+    //     },
+    //   },
+    //   '& .MuiButtonBase-root:active': {
+    //     background: theme.vars.palette.primary.active,
+    //   },
+    // },
   })
 };
 export {

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

@@ -4,7 +4,7 @@ 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 { D as Drawer } from "./subcomponents/Drawer.js";
-import { m as ContainerSideBarMobileStyled } from "../../slots/SideBarSlots.js";
+import { o as ContainerSideBarMobileStyled } from "../../slots/SideBarSlots.js";
 import { C as ContentComponent } from "../ContentComponent/index.js";
 const SideBarMobile = () => {
   const {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.24",
+  "version": "9.2.26",
   "license": "UNLICENSED",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0  --no-warn-ignored"

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

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { PrintingSystem } from '../../../src/components/PrintingSystem/PrintingSystem';
+declare const meta: Meta<typeof PrintingSystem>;
+export default meta;
+type Story = StoryObj<typeof PrintingSystem>;
+export declare const Base: Story;

package/components/PrintingSystem/styles.js

@@ -1,7 +0,0 @@
-import { styled } from "@mui/material";
-const PrintingSystemRoot = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LPrintingSystem?.styleOverrides || {}
-}));
-export {
-  PrintingSystemRoot as P
-};