@m4l/components 9.1.9 → 9.1.10

package/components/PaperForm/constants.d.ts

@@ -0,0 +1 @@
+export declare const PAPER_FORM_KEY = "M4LPaperForm";

package/components/PaperForm/constants.js

@@ -0,0 +1,4 @@
+const PAPER_FORM_KEY = "M4LPaperForm";
+export {
+  PAPER_FORM_KEY as P
+};

package/components/PaperForm/slots/PaperFormEnum.d.ts

@@ -0,0 +1,7 @@
+export declare enum PaperFormSlots {
+    paperFormRoot = "paperFormRoot",
+    containerHeader = "containerHeader",
+    containerTitle = "containerTitle",
+    containerContent = "containerContent",
+    containerIcon = "containerIcon"
+}

package/components/PaperForm/slots/PaperFormEnum.js

@@ -0,0 +1,11 @@
+var PaperFormSlots = /* @__PURE__ */ ((PaperFormSlots2) => {
+  PaperFormSlots2["paperFormRoot"] = "paperFormRoot";
+  PaperFormSlots2["containerHeader"] = "containerHeader";
+  PaperFormSlots2["containerTitle"] = "containerTitle";
+  PaperFormSlots2["containerContent"] = "containerContent";
+  PaperFormSlots2["containerIcon"] = "containerIcon";
+  return PaperFormSlots2;
+})(PaperFormSlots || {});
+export {
+  PaperFormSlots as P
+};

package/components/PaperForm/slots/PaperFormSlots.d.ts

@@ -0,0 +1,15 @@
+export declare const PaperFormRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PaperFormOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PaperFormOwnerState> & 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 HeaderStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PaperFormOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PaperFormOwnerState> & 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 IconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Icon').IconProps, keyof import('../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PaperFormOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PaperFormOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+export declare const TitleStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Typography/types').TypographyProps, keyof import('../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PaperFormOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PaperFormOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+export declare const ContentStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PaperFormOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PaperFormOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/components/PaperForm/slots/PaperFormSlots.js

@@ -0,0 +1,33 @@
+import { P as PAPER_FORM_KEY } from "../constants.js";
+import { P as PaperFormSlots } from "./PaperFormEnum.js";
+import { p as paperFormStyles } from "../styles.js";
+import { styled } from "@mui/material/styles";
+import { T as Typography } from "../../mui_extended/Typography/Typography.js";
+import { I as Icon } from "../../Icon/Icon.js";
+const PaperFormRootStyled = styled("div", {
+  name: PAPER_FORM_KEY,
+  slot: PaperFormSlots.paperFormRoot
+})(paperFormStyles?.paperFormRoot);
+const HeaderStyled = styled("div", {
+  name: PAPER_FORM_KEY,
+  slot: PaperFormSlots.containerHeader
+})(paperFormStyles?.containerHeader);
+const IconStyled = styled(Icon, {
+  name: PAPER_FORM_KEY,
+  slot: PaperFormSlots.containerIcon
+})(paperFormStyles?.containerIcon);
+const TitleStyled = styled(Typography, {
+  name: PAPER_FORM_KEY,
+  slot: PaperFormSlots.containerTitle
+})(paperFormStyles?.containerTitle);
+const ContentStyled = styled("div", {
+  name: PAPER_FORM_KEY,
+  slot: PaperFormSlots.containerContent
+})(paperFormStyles?.containerContent);
+export {
+  ContentStyled as C,
+  HeaderStyled as H,
+  IconStyled as I,
+  PaperFormRootStyled as P,
+  TitleStyled as T
+};

package/components/PaperForm/styles.d.ts

@@ -1,6 +1,2 @@
-export declare const PaperFormRoot: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const HeaderContainer: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const IconTitleContainer: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const IconHeader: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Content: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const SkTPaperFormHeader: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+import { PaperFormStyles } from './types';
+export declare const paperFormStyles: PaperFormStyles;

package/components/PaperForm/styles.js

@@ -1,51 +1,99 @@
-import { styled } from "@mui/material/styles";
-const PaperFormRoot = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LPaperForm?.styleOverrides || {}
-}));
-const HeaderContainer = styled("div")(({ theme }) => ({
-  display: "flex",
-  flexDirection: "row",
-  alignItems: "center",
-  // height: theme.spacing(5),
-  borderBottom: `1px solid ${theme.vars.palette.divider}`,
-  paddingBottom: theme.spacing(3),
-  marginBottom: theme.spacing(2),
-  overflow: "hidden"
-}));
-const IconTitleContainer = styled("div")(({ theme }) => ({
-  display: "flex",
-  flexDirection: "row",
-  flexGrow: 1,
-  alignItems: "center",
-  color: theme.vars.palette.text.primary,
-  ...theme.colorSchemes.finalTheme.typography.subtitle1
-}));
-const IconHeader = styled("div")(({ theme }) => ({
-  // width: "24px",
-  // height: "24px",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  marginRight: theme.spacing(1.5)
-}));
-const Content = styled("div")(() => ({
-  flexGrow: 1,
-  position: "relative"
-}));
-const SkTPaperFormHeader = styled("div")(({ theme }) => ({
-  width: "auto",
-  display: "grid",
-  gridTemplateColumns: `${theme.spacing(2)} auto`,
-  gridGap: `${theme.spacing(1.5)}`,
-  paddingBottom: `${theme.spacing(3)}`,
-  borderBottom: `1px solid ${theme.vars.palette.divider}`,
-  marginBottom: `${theme.spacing(3)}`
-}));
+const paperFormStyles = {
+  /**
+   *************************************************************
+   * Estilos del contenedor principal del componente PaperForm
+   * @param theme
+   ***********************************************************
+   * @author Andrés Quintero - automatic
+   * @createdAt 2024-11-20 14:00:24 - automatic
+   * @updatedAt 2024-11-22 10:38:00 - automatic
+   * @updatedUser Andrés Quintero - automatic
+   */
+  paperFormRoot: ({ theme }) => ({
+    borderRadius: theme.size.borderRadius.r1,
+    background: theme.vars.palette.background.default,
+    border: `${theme.size.borderStroke.container}`,
+    borderColor: theme.vars.palette.border.default,
+    width: "100%",
+    height: "auto",
+    overflow: "hidden"
+  }),
+  /**
+   * ************************************************************
+   * Estilos del contenedor del header del componente PaperForm
+   * @param theme
+   ***********************************************************
+   * @author Andrés Quintero - automatic
+   * @createdAt 2024-11-20 14:00:24 - automatic
+   * @updatedAt 2024-11-22 10:38:00 - automatic
+   * @updatedUser Andrés Quintero - automatic
+   */
+  containerHeader: ({ theme, ownerState }) => ({
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings.sp1,
+    overflow: "hidden",
+    height: "auto",
+    padding: `${theme.vars.size.baseSpacings.sp2}`,
+    borderRadius: `${theme.vars.size.borderRadius.r1} ${theme.vars.size.borderRadius.r1} 0 0`,
+    background: theme.vars.palette[ownerState.color ?? "default"].hoverOpacity
+  }),
+  /**
+   * ************************************************************
+   * Estilos del título del header del componente PaperForm
+   * @param theme
+   ***********************************************************
+   * @author Andrés Quintero - automatic
+   * @createdAt 2024-11-20 14:00:24 - automatic
+   * @updatedAt 2024-11-22 10:38:00 - automatic
+   * @updatedUser Andrés Quintero - automatic
+   */
+  containerTitle: ({ theme }) => ({
+    color: theme.vars.palette.text.primary,
+    fontFamily: theme.typography.fontFamily,
+    fontSize: theme.typography.body,
+    variants: [],
+    display: "inline-flex",
+    alignItems: "center",
+    marginTop: "1px"
+  }),
+  /**
+   * ************************************************************
+   * Estilos del icono del header del componente PaperForm
+   * @param theme
+   ***********************************************************
+   * @author Andrés Quintero - automatic
+   * @createdAt 2024-11-20 14:00:24 - automatic
+   * @updatedAt 2024-11-22 10:38:00 - automatic
+   * @updatedUser Andrés Quintero - automatic
+   */
+  containerIcon: () => ({
+    display: "grid",
+    placeItems: "center"
+  }),
+  /**
+   * ************************************************************
+   * Estilos del contenido del componente PaperForm
+   * @param theme
+   ***********************************************************
+   * @author Andrés Quintero - automatic
+   * @createdAt 2024-11-20 14:00:24 - automatic
+   * @updatedAt 2024-11-22 10:38:00 - automatic
+   * @updatedUser Andrés Quintero - automatic
+   */
+  containerContent: ({ theme, ownerState }) => ({
+    width: "100%",
+    height: "auto",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: ownerState.isForm ? theme.vars.size.baseSpacings.sp2 : theme.vars.size.baseSpacings.sp0,
+    padding: theme.vars.size.baseSpacings.sp3,
+    background: theme.vars.palette.background.default
+  })
+};
 export {
-  Content as C,
-  HeaderContainer as H,
-  IconTitleContainer as I,
-  PaperFormRoot as P,
-  SkTPaperFormHeader as S,
-  IconHeader as a
+  paperFormStyles as p
 };

package/components/PaperForm/types.d.ts

@@ -1,12 +1,36 @@
 import { ReactNode } from 'react';
-import { Classes } from './classes/types';
+import { PaperFormSlots } from './slots/PaperFormEnum';
+import { OverridesStyleRules } from '@mui/material/styles/overrides';
+import { PAPER_FORM_KEY } from './constants';
+import { Theme } from '@mui/material/styles';
+import { ComponentPalletColor, Sizes } from '@m4l/styles';
 export interface PaperFormProps {
     urlIcon?: string;
     title: string;
     children: ReactNode;
+    variant?: 'standard';
+    color?: Extract<ComponentPalletColor, 'default'>;
+    size?: Extract<Sizes, 'small' | 'medium'>;
     isForm?: boolean;
+    dataTestId?: string;
 }
-export interface HeaderProps extends Omit<PaperFormProps, 'children' | 'isForm'> {
-    classes: Classes;
+/**
+ * ***************************************
+ * Interfaz de propiedades comunes usadas
+ * en HeaderProps y PaperFormOwnerState
+ * ***************************************
+ */
+interface CommonsProps {
+    paperFormVariant?: PaperFormProps['variant'];
 }
-export type OwnerState = Pick<PaperFormProps, 'isForm'>;
+export type HeaderProps = Omit<PaperFormProps, 'children' | 'isForm' | 'variant'> & CommonsProps;
+export type PaperFormOwnerState = Pick<PaperFormProps, 'isForm' | 'color'> & CommonsProps;
+/**
+ * ***********************************
+ * Slots para los estilos utilizados
+ * en el componente PaperForm
+ * **********************************
+ */
+export type PaperFormSlotsType = keyof typeof PaperFormSlots;
+export type PaperFormStyles = Partial<OverridesStyleRules<PaperFormSlotsType, typeof PAPER_FORM_KEY, Theme> | undefined> | undefined;
+export {};

package/components/SideBar/SideBar.d.ts

@@ -1,33 +1,35 @@
 import { SideBarProps } from './types';
 /**
  * Componente SideBar.
- * @param {SideBarProps} props  - Propiedades del componente.
- * @param {boolean} props.collapsed - Valor para abrir o cerrar la ventana del componente
- * @param {boolean} props.visible - Valor para cambiar a modo movile para resolucion de 600px
- * @param {VoidFunction} props.onToggleCollapse - Funcion para hacer el cambio de Valor de collapsed
- * @param {VoidFunction} props.onToggleVisible - Funcion para hacer el cambio de Valor de visible
- * @param {Array<MenuDataType>} props.menuData - Datos llenar el SideBar
- * @param {Function} props.onClick - Manejador para hacer clic en el componente.
- * @param {string} props.companyLogoNormalUrl - Renderiza logo o imagen entamaño normal.
- * @param {string} props.companyLogoSmallUrl - Renderiza logo o imagen entamaño pequeño.
- * @param {Function} props.isItemActive - Funcion para abrir item de la prop MenuData.
- * @param {string} props.collapsedWidht - Valor que le puedes dar al tamaño de width cuando esta colapsado.
- * @param {string} props.unCollapsedWidht - Valor que le puedes dar al tamaño de width cuando esta no esta colapsado.
- * @param {string} props.companyName - Nombre que se le puede dar para llenar los campo de texto de la compañía.
- * @returns - Elemento JSX que muestra el menu de navegación.
+ * @param {SideBarProps} props - Propiedades para el componente SideBar.
+ * @returns {React.ReactElement} El componente SideBar.
  * @example
- *
- *<SideBar
- * collapsed={false}
+ * ```tsx
+ * <SideBar
+ * anchored={true}
  * visible={true}
- * onToggleCollapse={() => {}}
+ * onToggleAnchored={() => {}}
  * onToggleVisible={() => {}}
  * menuData={[]}
- * onClick={() => {}}
- * companyLogoNormalUrl={''}
- * companyLogoSmallUrl={''}
- * isItemActive={(_item: MenuDataType) => false}
+ * onMenuItemClick={() => {}}
+ * companyLogoNormalUrl=""
+ * companyLogoSmallUrl=""
+ * moduleSelectedId=""
+ * expandedWidth="230px"
  * companyName=""
+ * companySlogan=""
  * />
+ * ```
+ * @author Andrés Quintero - automatic
+ * @createdAt 2024-10-31 17:50:39 - automatic
+ * @updatedAt 2024-11-14 17:08:16 - automatic
+ * @updatedUser Andrés Quintero - automatic
+ */
+/**
+ *
+ * @author Andrés Quintero - automatic
+ * @createdAt 2024-11-15 21:43:42 - automatic
+ * @updatedAt 2024-12-02 19:02:04 - automatic
+ * @updatedUser Andrés Quintero - automatic
  */
-export declare const SideBar: (props: SideBarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SideBar: import('react').MemoExoticComponent<(props: SideBarProps) => import("react/jsx-runtime").JSX.Element>;

package/components/SideBar/SideBar.js

@@ -1,78 +1,50 @@
 import { jsx } from "react/jsx-runtime";
-import { S as SideBarRoot } from "./styles.js";
-import { C as ContentDesktop } from "./subcomponents/ContentDesktop/index.js";
 import { S as SideBarProvider } from "./context/sideBarContext/index.js";
-import { g as getSideBarClassesByState } from "./classes/index.js";
-import { g as getNameDataTestId } from "./tests/utils.js";
-import { T as TEST_PROP_ID } from "../../test/constants_no_mock.js";
-import { C as ContentMobile } from "./subcomponents/ContentMobile/index.js";
-import { useResponsive } from "@m4l/styles";
-import { M as MENU_COLLAPSED_SIZE } from "./constants.js";
-const SideBar = (props) => {
+import { S as SideBarMobile } from "./subcomponents/SideBarMobile/index.js";
+import { S as SideBarDesktop } from "./subcomponents/SideBarDesktop/index.js";
+import { memo, useMemo } from "react";
+import { g as getMenuDataWithState } from "./helpers/getMenuDataWithState/index.js";
+import { useIsMobile } from "@m4l/graphics";
+import { g as getDataToSkeleton } from "./helpers/getDataToSkeleton/index.js";
+const SideBar = memo((props) => {
   const {
-    collapsed,
+    anchored,
     visible,
-    onToggleCollapse,
+    onToggleAnchored,
     onToggleVisible,
     menuData,
-    onClick,
+    onMenuItemClick,
     companyLogoNormalUrl,
     companyLogoSmallUrl,
-    isItemActive,
-    expandedWidth = "280px",
+    moduleSelectedId,
+    expandedWidth = "230px",
     companyName,
-    variantStyle = "variantDefault"
+    companySlogan
   } = props;
-  const isMobile = useResponsive("down", "md");
-  const ownerState = {
-    collapsed,
-    visible,
-    variantStyle
-  };
-  const classes = getSideBarClassesByState(ownerState);
-  return (
-    /**
-     * Componente SideBarRoot.
-     * Este componente representa la raíz de la barra lateral.
-     *
-     */
-    /* @__PURE__ */ jsx(
-      SideBarRoot,
-      {
-        className: classes.root,
-        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("root") } : {},
-        children: /* @__PURE__ */ jsx(
-          SideBarProvider,
-          {
-            value: {
-              // Propiedades y funciones proporcionadas a través del contexto
-              collapsed,
-              visible,
-              onToggleCollapse,
-              onToggleVisible,
-              menuData,
-              onClick,
-              companyLogoNormalUrl,
-              companyLogoSmallUrl,
-              isItemActive,
-              expandedWidth,
-              classes,
-              companyName
-            },
-            children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: classes.wrapperSideBar,
-                style: { width: collapsed ? MENU_COLLAPSED_SIZE : expandedWidth },
-                children: !isMobile ? /* @__PURE__ */ jsx(ContentDesktop, {}) : /* @__PURE__ */ jsx(ContentMobile, {})
-              }
-            )
-          }
-        )
-      }
-    )
+  const menuDataWithState = useMemo(() => getMenuDataWithState({ menuData: menuData ?? getDataToSkeleton(), moduleSelectedId }), [menuData, moduleSelectedId]);
+  const isMobile = useIsMobile();
+  return /* @__PURE__ */ jsx(
+    SideBarProvider,
+    {
+      value: {
+        // Propiedades y funciones proporcionadas a través del contexto
+        anchored,
+        visible,
+        onToggleAnchored,
+        onToggleVisible,
+        menuData: menuDataWithState,
+        onMenuItemClick,
+        companyLogoNormalUrl,
+        companyLogoSmallUrl,
+        moduleSelectedId,
+        expandedWidth,
+        companyName,
+        companySlogan
+      },
+      children: !isMobile ? /* @__PURE__ */ jsx(SideBarDesktop, {}) : /* @__PURE__ */ jsx(SideBarMobile, {})
+    }
   );
-};
+});
 export {
   SideBar as S
 };

package/components/SideBar/constants.d.ts

@@ -1,2 +1,6 @@
-export declare const MENU_COLLAPSED_SIZE = "14px";
-export declare const MENU_COLLAPSED_CONTAINER_SIZE = "15px";
+export declare const SIDEBAR_KEY_COMPONENT = "M4LSideBar";
+export declare const CONTAINER_BTN_ANCHORED = "M4LSideBarButtonAnchored";
+export declare const LIST_MENU_ITEM = "M4LListMenuItem";
+export declare const PATH_ARROW_DOWN_ICON = "frontend/components/sidebar/assets/icons/ChevronRight.svg";
+export declare const PATH_ARROW_RIGHT_ICON = "frontend/components/sidebar/assets/icons/arrow_right.svg";
+export declare const ITEM_DEFAULT = "No Items";

package/components/SideBar/constants.js

@@ -1,6 +1,12 @@
-const MENU_COLLAPSED_SIZE = "14px";
-const MENU_COLLAPSED_CONTAINER_SIZE = "15px";
+const SIDEBAR_KEY_COMPONENT = "M4LSideBar";
+const CONTAINER_BTN_ANCHORED = "M4LSideBarButtonAnchored";
+const LIST_MENU_ITEM = "M4LListMenuItem";
+const PATH_ARROW_DOWN_ICON = "frontend/components/sidebar/assets/icons/ChevronRight.svg";
+const PATH_ARROW_RIGHT_ICON = "frontend/components/sidebar/assets/icons/arrow_right.svg";
 export {
-  MENU_COLLAPSED_SIZE as M,
-  MENU_COLLAPSED_CONTAINER_SIZE as a
+  CONTAINER_BTN_ANCHORED as C,
+  LIST_MENU_ITEM as L,
+  PATH_ARROW_DOWN_ICON as P,
+  SIDEBAR_KEY_COMPONENT as S,
+  PATH_ARROW_RIGHT_ICON as a
 };

package/components/SideBar/context/sideBarContext/index.d.ts

@@ -3,12 +3,17 @@ import { SideBarProviderProps, SideBarProviderValue } from './types';
  * Representa el contexto para el componente Sidebar.
  * Establece un contexto llamado SideBarContext con un valor inicial initialState,
  * que puede ser utilizado por los componentes dentro del árbol de componentes para acceder a datos específicos del sidebar sin necesidad de pasar props manualmente.
+ * @createdAt 2024-11-06 17:30:06 - automatic
  */
 declare const SideBarContext: import('react').Context<SideBarProviderValue>;
 /**
  * Componente que actúa como proveedor de contexto para el componente Sidebar y sus elementos secundarios.
  * @param props Las propiedades para el proveedor del contexto Sidebar.
  * @returns El proveedor de contexto Sidebar.
+ * @author Andrés Quintero - automatic
+ * @createdAt 2024-11-06 17:30:06 - automatic
+ * @updatedAt 2024-11-26 18:02:53 - automatic
+ * @updatedUser Andrés Quintero - automatic
  */
 declare const SideBarProvider: (props: SideBarProviderProps) => import("react/jsx-runtime").JSX.Element;
 export { SideBarProvider, SideBarContext };

package/components/SideBar/context/sideBarContext/index.js

@@ -1,47 +1,37 @@
 import { jsx } from "react/jsx-runtime";
-import { createContext, useState } from "react";
-import { g as getSideBarClassesByState } from "../../classes/index.js";
+import { createContext } from "react";
 const initialState = {
-  collapsed: false,
+  anchored: false,
   visible: true,
-  onToggleCollapse: () => {
+  onToggleAnchored: (_anchored) => {
   },
-  onToggleVisible: () => {
+  onToggleVisible: (_visible) => {
   },
-  onToggleOverlay: () => {
-  },
-  overlay: false,
   menuData: [],
   companyLogoNormalUrl: "",
   companyLogoSmallUrl: "",
-  onClick: () => {
+  onMenuItemClick: (_item) => {
   },
-  isItemActive: () => false,
   expandedWidth: "",
-  // Obtener las clases iniciales para la barra lateral
-  classes: getSideBarClassesByState({ collapsed: false, visible: true }),
-  companyName: ""
+  companyName: "",
+  companySlogan: ""
 };
 const SideBarContext = createContext(initialState);
 const SideBarProvider = (props) => {
   const { value, children } = props;
-  const [overlay, setOverlay] = useState(false);
-  const onToggleOverlay = (value2) => {
-    setOverlay(value2);
-  };
   const {
-    collapsed,
+    anchored,
     visible,
-    onToggleCollapse,
+    onToggleAnchored,
     onToggleVisible,
     menuData,
-    onClick,
+    onMenuItemClick,
     companyLogoNormalUrl,
     companyLogoSmallUrl,
-    isItemActive,
     expandedWidth,
-    classes,
-    companyName
+    moduleSelectedId,
+    companyName,
+    companySlogan
   } = value;
   return (
     // Proporcionar el contexto con las propiedades desestructuradas
@@ -49,20 +39,18 @@ const SideBarProvider = (props) => {
       SideBarContext.Provider,
       {
         value: {
-          collapsed,
+          anchored,
           visible,
-          onToggleCollapse,
+          onToggleAnchored,
           onToggleVisible,
           menuData,
-          onClick,
+          onMenuItemClick,
           companyLogoNormalUrl,
           companyLogoSmallUrl,
-          isItemActive,
+          moduleSelectedId,
           expandedWidth,
-          classes,
           companyName,
-          onToggleOverlay,
-          overlay
+          companySlogan
         },
         children
       }

package/components/SideBar/context/sideBarContext/types.d.ts

@@ -1,22 +1,26 @@
 import { ReactNode } from 'react';
-import { Classes, SideBarProps } from '../../types';
+import { IMenuDataWithState, SideBarProps } from '../../types';
 /**
  * Valor proporcionado por el proveedor del contexto Sidebar.
+ * @createdAt 2024-11-06 17:30:06 - automatic
  */
 export interface SideBarProviderValue extends SideBarProps {
     /**
      * Las clases asociadas al proveedor del contexto Sidebar.
+     * @author Andrés Quintero - automatic
+     * @createdAt 2024-11-06 17:30:06 - automatic
+     * @updatedAt 2024-11-14 16:05:25 - automatic
+     * @updatedUser Andrés Quintero - automatic
      */
-    classes: Classes;
-    onToggleOverlay: (value: boolean) => void;
-    overlay: boolean;
+    anchored: boolean;
+    menuData: Array<IMenuDataWithState>;
 }
 /**
  * Propiedades para el proveedor del contexto Sidebar.
  */
 export interface SideBarProviderProps {
     /** value contendrá el valor que se proporcionará en el contexto*/
-    value: Omit<SideBarProviderValue, 'onToggleOverlay' | 'overlay'>;
+    value: Omit<SideBarProviderValue, 'collapsed'>;
     /** children contendrá los elementos secundarios que estarán dentro del ámbito del proveedor del contexto.*/
     children: ReactNode;
 }

package/components/SideBar/dictionary.d.ts

@@ -0,0 +1 @@
+export declare function getSideBarComponentsDictionary(): string[];

package/components/SideBar/helpers/getDataToSkeleton/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Función helper para obtener los datos de los elementos de menú para el esqueleto.<
+ * @author Andrés Quintero - automatic
+ * @createdAt 2024-11-20 10:32:52 - automatic
+ * @updatedAt 2024-11-26 18:02:53 - automatic
+ * @updatedUser Andrés Quintero - automatic
+ */
+export declare const getDataToSkeleton: () => {
+    title: string;
+    children: {
+        id: string;
+        title: string;
+        url: string;
+    }[];
+}[];