@m4l/components 9.2.61 → 9.2.62-B07072025beta.2

package/storybook/components/extended/mui/TextField/TextFieldText.stories.d.ts

@@ -14,6 +14,7 @@ export declare const Default: Story;
  * readOnly
  */
 export declare const ReadOnly: Story;
+export declare const MultipleLines: Story;
 /**
  * Se aplica cuando el input tiene adornos.
  *

package/utils/index.d.ts

@@ -7,6 +7,7 @@ export * from './getComponentSlotRoot';
 export { getTypographyStyles } from './getTypographyStyles';
 export { getIconColor } from './getIconColor';
 export { getHeightSizeStyles } from './getSizeStyles';
+export { getSizeStyles } from './getSizeStyles';
 export * from './formatDistanceToNow';
 export * from './getValidDate';
 export * from './getNullGuard';

package/components/SideBar/subcomponents/ContentGroups/index.d.ts

@@ -1,5 +0,0 @@
-import { ContentGroupsProps } from './types';
-/**
- * Renderiza el contenido de los grupos
- */
-export declare const ContentGroups: (contentGroupsProps: ContentGroupsProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,52 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-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 { 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";
-import { M as MenuItem } from "../../../mui_extended/MenuItem/MenuItem.js";
-const ContentGroups = (contentGroupsProps) => {
-  const { menuData } = useSideBar();
-  const { getLabel } = useModuleDictionary();
-  const { size } = contentGroupsProps;
-  const { currentSize } = useComponentSize(size);
-  const ownerState = {
-    noItems: menuData.length === 0
-  };
-  const renderTitle = (title) => {
-    return /* @__PURE__ */ jsx(ContainerContentTitleStyled, { children: /* @__PURE__ */ jsx(Typography, { variant: "bodyDens", skeletonWidth: "100px", children: title }) });
-  };
-  const renderItems = (item) => {
-    return /* @__PURE__ */ jsx(ContainerContentNavItemsStyled, { children: item?.map((list) => /* @__PURE__ */ jsx(ContainerMenuItemsMain, { item: list, openSubItem: true, size: currentSize }, list.title)) });
-  };
-  const renderItemsDisabled = () => {
-    return /* @__PURE__ */ jsx(ContainerContentTitleStyled, { ownerState: { disabled: true }, children: /* @__PURE__ */ jsx(
-      MenuItem,
-      {
-        disabled: true,
-        label: getLabel("sidebar.label_no_items")
-      }
-    ) });
-  };
-  return /* @__PURE__ */ jsx(
-    ContainerContentGroupsRootStyled,
-    {
-      ownerState,
-      role: "bodysidebar",
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("content-groups") } : {},
-      children: menuData.length > 0 ? menuData.map((itemGroup) => (
-        /* Render title section in menusidebar */
-        /* @__PURE__ */ jsxs(ContainerContentGroupsStyled, { children: [
-          renderTitle(itemGroup.title),
-          renderItems(itemGroup.children)
-        ] }, itemGroup.title)
-      )) : renderItemsDisabled()
-    }
-  );
-};
-export {
-  ContentGroups as C
-};

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

@@ -1,71 +0,0 @@
-const contentGroupStyles = {
-  /**
-   * Container for the group items in the sidebar
-   */
-  containerContentGroupsRoot: ({ theme, ownerState }) => ({
-    display: "flex",
-    width: "100%",
-    height: "100%",
-    flexDirection: "column",
-    overflowY: "auto",
-    padding: `${theme.vars.size.baseSpacings.sp3} 0px 0px 0px`,
-    alignItems: "center",
-    justifyContent: ownerState?.noItems ? "center" : "flex-start"
-  }),
-  /**
-   * Wrapper for every principal item group in the sidebar
-   */
-  containerContentGroups: ({ theme }) => ({
-    display: "flex",
-    width: "100%",
-    height: "100%",
-    flexDirection: "column",
-    padding: `${theme.vars.size.baseSpacings.sp3} 0px`,
-    flex: 1,
-    overflow: "auto"
-  }),
-  /**
-   * Title wrapper for every principal item group in the sidebar
-   */
-  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,
-    textAlign: "left",
-    "& .MuiTypography-root": {
-      color: !ownerState?.disabled ? theme.vars.palette.text.primary : `${theme.vars.palette.text.primary} !important`
-    }
-  }),
-  /**
-   * Navigation wrapper for every principal item group in the sidebar
-   */
-  containerContentNavItems: ({ theme }) => ({
-    display: "flex",
-    flexDirection: "column",
-    gap: theme.vars.size.baseSpacings["sp0-5"],
-    marginRight: theme.vars.size.baseSpacings.sp4
-  }),
-  /**
-   *Container for the items in the sidebar group
-   */
-  containerContentItem: ({ theme }) => ({
-    display: "flex",
-    flexDirection: "row",
-    rowGap: theme.spacing(0.5),
-    height: "fit-content",
-    alignItems: "center",
-    cursor: "pointer",
-    padding: theme.spacing(0.5)
-  }),
-  /**
-   *Style para el contenedor del icono de flecha que indica si el item está colapsado o descolapsado para los items padres
-   */
-  containerArrowIconRoot: () => ({
-    display: "flex",
-    alignSelf: "center",
-    lineHeight: 0,
-    marginLeft: "auto"
-  })
-};
-export {
-  contentGroupStyles as c
-};

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

@@ -1,63 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { Collapse } from "@mui/material";
-import { useState } from "react";
-import { useIsMobile } from "@m4l/graphics";
-import clsx from "clsx";
-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 { h as ContainerMenuItemsStyled } from "../../../../slots/SideBarSlots.js";
-import { a as getComponentSlotRoot } from "../../../../../../utils/getComponentSlotRoot.js";
-import { I as ITEM_ACTIVE, b as ITEM_IN_TREE_ACTIVE, L as LIST_MENU_ITEM } from "../../../../constants.js";
-import { u as useComponentSize } from "../../../../../../hooks/useComponentSize/useComponentSize.js";
-import { M as MenuItem } from "../../../../../mui_extended/MenuItem/MenuItem.js";
-function ContainerMenuItemsMain(props) {
-  const { item, size } = props;
-  const { onMenuItemClick, onToggleVisible, urlIconPrefix } = useSideBar();
-  const [openSub, setOpenSub] = useState(props.openSubItem ?? false);
-  const hasChildren = item.children && Array.isArray(item.children) && item.children.length > 0;
-  const isMobile = useIsMobile();
-  const { currentSize } = useComponentSize(size);
-  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
-  const ownerState = {
-    active: item.active,
-    itemInTreeActive: item.itemInTreeActive,
-    sidebarSize: adjustedSize
-  };
-  const handlerClick = () => {
-    onMenuItemClick(item);
-    setOpenSub(!openSub);
-    if (isMobile && (!hasChildren || hasChildren === void 0)) {
-      onToggleVisible(true);
-    }
-  };
-  const classRoot = getComponentSlotRoot(LIST_MENU_ITEM);
-  return /* @__PURE__ */ jsxs(
-    ContainerMenuItemsStyled,
-    {
-      className: clsx(classRoot),
-      role: "listitem",
-      ownerState,
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("menuItems") } : {},
-      children: [
-        /* @__PURE__ */ jsx(
-          MenuItem,
-          {
-            className: clsx(item.active ? ITEM_ACTIVE : ITEM_IN_TREE_ACTIVE),
-            label: item.title,
-            selected: item.active || item.itemInTreeActive,
-            startIcon: `${urlIconPrefix}${item.iconUrl}`,
-            endIcon: hasChildren ? /* @__PURE__ */ jsx(ArrowIcon, { openState: openSub, active: item.active }) : null,
-            onClick: () => handlerClick(),
-            size: adjustedSize
-          }
-        ),
-        hasChildren ? /* @__PURE__ */ jsx(Collapse, { in: openSub, timeout: "auto", unmountOnExit: true, children: (item.children || []).map((child) => /* @__PURE__ */ jsx(ContainerMenuItemsMain, { item: child, size: adjustedSize }, child.title)) }) : null
-      ]
-    }
-  );
-}
-export {
-  ContainerMenuItemsMain as C
-};

package/components/SideBar/subcomponents/ContentGroups/subcomponents/ContainerMenuItemsMain/styles.d.ts

@@ -1,2 +0,0 @@
-import { ContainerMenuItemsMainStyles } from '../../../../types';
-export declare const containerMenuItemsMainStyles: ContainerMenuItemsMainStyles;

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

@@ -1,47 +0,0 @@
-import { a as getHeightSizeStyles } from "../../../../../../utils/getSizeStyles/getSizeStyles.js";
-import { I as ITEM_ACTIVE, b as ITEM_IN_TREE_ACTIVE } from "../../../../constants.js";
-const containerMenuItemsMainStyles = {
-  /**
-   * Style aplicado al contenedor de los items del menú
-   */
-  containerMenuItems: ({ theme, ownerState }) => ({
-    marginLeft: theme.vars.size.baseSpacings.sp4,
-    display: "flex",
-    flexDirection: "column",
-    gap: theme.vars.size.baseSpacings["sp0-5"],
-    ...getHeightSizeStyles(
-      theme.generalSettings.isMobile,
-      ownerState?.size || "medium",
-      "container",
-      (height) => {
-        return {
-          height: "auto",
-          minHeight: height
-        };
-      }
-    ),
-    [`&.M4LListMenuItem-root > .M4LMenuItem-root[class*="${ITEM_IN_TREE_ACTIVE}"]`]: {
-      borderColor: theme.vars.palette.divider,
-      "& span": {
-        color: theme.vars.palette.text.primary
-      }
-    },
-    [`&.M4LListMenuItem-root > .M4LMenuItem-root[class*="${ITEM_IN_TREE_ACTIVE}"] .M4LIconClass-root`]: {
-      background: theme.vars.palette.text.primary
-    },
-    [`&.M4LListMenuItem-root > .M4LMenuItem-root[class*="${ITEM_ACTIVE}"]`]: {
-      borderColor: theme.vars.palette.primary.enabled,
-      "& span": {
-        color: theme.vars.palette.primary.enabled
-      }
-    },
-    "& .MuiCollapse-wrapperInner": {
-      display: "flex",
-      flexDirection: "column",
-      gap: theme.vars.size.baseSpacings["sp0-5"]
-    }
-  })
-};
-export {
-  containerMenuItemsMainStyles as c
-};

package/components/SideBar/subcomponents/ContentGroups/subcomponents/ContainerMenuItemsMain/types.d.ts

@@ -1,7 +0,0 @@
-import { Sizes } from '@m4l/styles';
-import { IMenuDataWithState } from '../../../../types';
-export type NavListSubItemProps = {
-    item: IMenuDataWithState;
-    openSubItem?: boolean;
-    size: Sizes;
-};

package/components/SideBar/subcomponents/ContentGroups/types.d.ts

@@ -1,4 +0,0 @@
-import { Sizes } from '@m4l/styles';
-export interface ContentGroupsProps {
-    size?: Sizes;
-}

package/components/SideBar/subcomponents/FooterSidebar/types.d.ts

@@ -1,5 +0,0 @@
-export interface FooterSidebarProps {
-    onToggleAnchored: (anchored: boolean) => void;
-    anchored: boolean;
-}
-export type WrapperCollapseButtonProps = Pick<FooterSidebarProps, 'anchored'>;

package/components/SideBar/subcomponents/HeaderSidebar/index.d.ts

@@ -1,6 +0,0 @@
-import { HeaderSidebarProps } from './types';
-/**
- * Component HeaderSidebar representa el encabezado de la barra lateral.<
- */
-declare const HeaderSidebar: ({ srcIcon, title, subtitle }: HeaderSidebarProps) => import("react/jsx-runtime").JSX.Element;
-export default HeaderSidebar;

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

@@ -1,25 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-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 }) => {
-  return /* @__PURE__ */ jsxs(ContainerHeaderSidebarRootStyled, { role: "heading", children: [
-    /* @__PURE__ */ jsx(
-      Image,
-      {
-        width: "24px",
-        height: "24px",
-        src: srcIcon,
-        alt: "logo"
-      },
-      "Logo"
-    ),
-    /* @__PURE__ */ jsxs(ContainerTitleSubtitleStyled, { children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "subtitleDens", size: "medium", skeletonWidth: 120, children: title }),
-      /* @__PURE__ */ jsx(Typography, { variant: "paragraph", size: "medium", margin: 0, skeletonWidth: 150, children: subtitle })
-    ] })
-  ] });
-};
-export {
-  HeaderSidebar as H
-};

package/components/SideBar/subcomponents/HeaderSidebar/styles.d.ts

@@ -1,2 +0,0 @@
-import { HeaderSidebarStyles } from '../../types';
-export declare const headerSidebarStyles: HeaderSidebarStyles;

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

@@ -1,24 +0,0 @@
-const headerSidebarStyles = {
-  /**
-   * Container del header del sidebar
-   */
-  containerHeaderSidebarRoot: ({ theme }) => ({
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    padding: `${theme.vars.size.baseSpacings.sp6} ${theme.vars.size.baseSpacings.sp5}`,
-    gap: `${theme.vars.size.baseSpacings.sp2}`
-  }),
-  /**
-   * Contenedor del título y subtítulo del sidebar
-   */
-  containerTitleSubtitle: ({ theme }) => ({
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "start",
-    gap: `${theme.vars.size.baseSpacings.sp1}`
-  })
-};
-export {
-  headerSidebarStyles as h
-};

package/components/SideBar/subcomponents/HeaderSidebar/types.d.ts

@@ -1,5 +0,0 @@
-export interface HeaderSidebarProps {
-    srcIcon: string;
-    title: string;
-    subtitle: string;
-}