@m4l/components 9.1.17 → 9.1.18

package/components/SideBar/constants.d.ts

@@ -3,4 +3,3 @@ 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/subcomponents/ContentGroups/index.d.ts

@@ -2,7 +2,7 @@
  * Renderiza el contenido de los grupos
  * @author Andrés Quintero - automatic
  * @createdAt 2024-11-05 17:43:01 - automatic
- * @updatedAt 2024-12-02 16:18:42 - automatic
+ * @updatedAt 2024-12-10 11:21:21 - automatic
  * @updatedUser Andrés Quintero - automatic
  */
 export declare const ContentGroups: () => import("react/jsx-runtime").JSX.Element;

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

@@ -10,6 +10,9 @@ import { M as MenuItem } from "../../../mui_extended/MenuItem/MenuItem.js";
 const ContentGroups = () => {
   const { menuData } = useSideBar();
   const { getLabel } = useModuleDictionary();
+  const ownerState = {
+    noItems: menuData.length === 0
+  };
   const renderTitle = (title) => {
     return /* @__PURE__ */ jsx(ContainerContentTitleTitleStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(Typography, { variant: "bodyDens", skeletonWidth: "100px", children: title }) });
   };
@@ -17,7 +20,7 @@ const ContentGroups = () => {
     return /* @__PURE__ */ jsx(ContainerContentNavItemsStyled, { ownerState: {}, children: item?.map((list, id) => /* @__PURE__ */ jsx(ContainerMenuItemsMain, { item: list, openSubItem: true }, id)) });
   };
   const renderItemsDisabled = () => {
-    return /* @__PURE__ */ jsx(ContainerContentTitleTitleStyled, { ownerState: {}, children: Array.from({ length: 6 }).map((_, index) => /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(ContainerContentTitleTitleStyled, { ownerState: {}, children: Array.from({ length: 1 }).map((_, index) => /* @__PURE__ */ jsx(
       MenuItem,
       {
         disabled: true,
@@ -29,7 +32,7 @@ const ContentGroups = () => {
   return /* @__PURE__ */ jsx(
     ContainerContentGroupsRootStyled,
     {
-      ownerState: {},
+      ownerState,
       role: "bodysidebar",
       ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("content-groups") } : {},
       children: menuData.length > 0 ? menuData.map((itemGroup) => (

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

@@ -3,23 +3,24 @@ const contentGroupStyles = {
    * Container for the group items in the sidebar
    * @author Andrés Quintero - automatic
    * @createdAt 2024-11-05 17:37:29 - automatic
-   * @updatedAt 2024-11-26 18:02:53 - automatic
+   * @updatedAt 2024-12-10 11:21:21 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
-  containerContentGroupsRoot: ({ theme }) => ({
+  containerContentGroupsRoot: ({ theme, ownerState }) => ({
     display: "flex",
     width: "100%",
     height: "100%",
     flexDirection: "column",
     overflowY: "auto",
     padding: `${theme.vars.size.baseSpacings.sp3} 0px 0px 0px`,
-    alignItems: "center"
+    alignItems: "center",
+    justifyContent: ownerState.noItems ? "center" : "flex-start"
   }),
   /**
    * Wrapper for every principal item group in the sidebar
    * @author Andrés Quintero - automatic
    * @createdAt 2024-11-05 17:37:29 - automatic
-   * @updatedAt 2024-11-26 18:02:53 - automatic
+   * @updatedAt 2024-12-10 11:21:21 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
   containerContentGroups: ({ theme }) => ({
@@ -32,7 +33,7 @@ const contentGroupStyles = {
    * Title wrapper for every principal item group in the sidebar
    * @author Andrés Quintero - automatic
    * @createdAt 2024-11-05 17:37:29 - automatic
-   * @updatedAt 2024-11-26 18:02:53 - automatic
+   * @updatedAt 2024-12-10 11:21:21 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
   containerContentTitle: ({ theme }) => ({
@@ -44,18 +45,19 @@ const contentGroupStyles = {
    * Navigation wrapper for every principal item group in the sidebar
    * @author Andrés Quintero - automatic
    * @createdAt 2024-11-05 17:37:29 - automatic
-   * @updatedAt 2024-11-26 18:02:53 - automatic
+   * @updatedAt 2024-12-10 11:21:21 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
-  containerContentNavItems: () => ({
+  containerContentNavItems: ({ theme }) => ({
     display: "flex",
-    flexDirection: "column"
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings["sp0-5"]
   }),
   /**
    *Container for the items in the sidebar group
    * @author Andrés Quintero - automatic
    * @createdAt 2024-11-05 17:37:29 - automatic
-   * @updatedAt 2024-11-26 18:02:53 - automatic
+   * @updatedAt 2024-12-10 11:21:21 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
   containerContentItem: ({ theme }) => ({

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

@@ -3,14 +3,15 @@ const containerMenuItemsMainStyles = {
    * Style aplicado al contenedor de los items del menú
    * @author Andrés Quintero - automatic
    * @createdAt 2024-11-19 20:54:12 - automatic
-   * @updatedAt 2024-12-02 18:19:01 - automatic
+   * @updatedAt 2024-12-10 11:21:21 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
   containerMenuItems: ({ theme }) => ({
     marginLeft: theme.vars.size.baseSpacings.sp4,
-    padding: `${theme.vars.size.baseSpacings["sp0-5"]} 0`,
+    /* padding: `${theme.vars.size.baseSpacings['sp0-5']} 0`, */
     display: "flex",
     flexDirection: "column",
+    gap: theme.vars.size.baseSpacings["sp0-5"],
     '&.M4LListMenuItem-root > [class*="inTreeActive"]': {
       justifyContent: "space-between",
       borderColor: theme.vars.palette.divider,
@@ -24,13 +25,18 @@ const containerMenuItemsMainStyles = {
       "& span": {
         color: theme.vars.palette.primary.main
       }
+    },
+    "& .MuiCollapse-wrapperInner": {
+      display: "flex",
+      flexDirection: "column",
+      gap: theme.vars.size.baseSpacings["sp0-5"]
     }
   }),
   /**
    *Style para el contenedor del icono de flecha que indica si el item está colapsado o descolapsado para los items padres
    * @author Andrés Quintero - automatic
    * @createdAt 2024-11-19 20:54:12 - automatic
-   * @updatedAt 2024-12-02 18:19:01 - automatic
+   * @updatedAt 2024-12-10 11:21:21 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
   containerArrowIconRoot: () => ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.1.17",
+  "version": "9.1.18",
   "license": "UNLICENSED",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"
@@ -10,6 +10,7 @@
     "@googlemaps/js-api-loader": "^1.16.6",
     "@hookform/resolvers": "^2.9.5",
     "@microlink/react-json-view": "^1.23.3",
+    "@types/lodash-es": "^4.17.12",
     "atmosphere.js": "^4.0.0",
     "chart.js": "^4.4.0",
     "chartjs-chart-error-bars": "^4.3.3",
@@ -24,7 +25,7 @@
     "leaflet": "^1.9.4",
     "leaflet-polylinedecorator": "^1.6.0",
     "leaflet.markercluster": "^1.5.3",
-    "lodash-es": "^4.0.0",
+    "lodash-es": "^4.17.21",
     "nprogress": "^0.2.0",
     "qrcode.react": "^3.1.0",
     "qs": "^6.0.0",