@m4l/components 9.1.67 → 9.1.68

package/components/mui_extended/MenuItem/MenuItem.d.ts

@@ -7,7 +7,7 @@ import { MenuItemProps } from './types';
  * @returns
  * @author Bruce Escobar - automatic
  * @createdAt 2024-10-22 19:53:39 - automatic
- * @updatedAt 2025-01-08 10:36:41 - automatic
- * @updatedUser Andrés Quintero - automatic
+ * @updatedAt 2025-01-14 11:50:41 - automatic
+ * @updatedUser cesar - automatic
  */
 export declare const MenuItem: (props: MenuItemProps) => import("react/jsx-runtime").JSX.Element;

package/components/mui_extended/MenuItem/MenuItem.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useModuleSkeleton, getPropertyByString } from "@m4l/core";
+import { useModuleSkeleton, useEnvironment, getPropertyByString } from "@m4l/core";
 import { useTheme } from "@mui/material";
 import clsx from "clsx";
 import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
@@ -18,12 +18,14 @@ const MenuItem = (props) => {
     disabled = false,
     size = "medium",
     checked = false,
+    checkable = false,
     className,
     ...other
   } = props;
   const { currentSize } = useComponentSize(size);
   const isSkeleton = useModuleSkeleton();
   const theme = useTheme();
+  const { host_static_assets, environment_assets } = useEnvironment();
   const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
   const paletteColor = getPropertyByString(
     theme.vars.palette,
@@ -35,7 +37,9 @@ const MenuItem = (props) => {
     disabled,
     selected,
     paletteColor,
-    color
+    color,
+    checkable,
+    checked
   };
   if (isSkeleton) {
     return /* @__PURE__ */ jsx(
@@ -69,8 +73,7 @@ const MenuItem = (props) => {
       );
     }
   };
-  const checkedIcon = "https://s3.us-east-1.amazonaws.com/static.made4labs/environments/d1/frontend/components/menu_item/checked.svg";
-  const hasCheckedIcon = checked && checkedIcon;
+  const checkedIcon = `${host_static_assets}/${environment_assets}/frontend/components/menu_item/checked.svg`;
   return /* @__PURE__ */ jsxs(
     MenuItemRootStyled,
     {
@@ -83,7 +86,7 @@ const MenuItem = (props) => {
       className: clsx(className, MENUITEM_CLASSES.root),
       "data-testid": "MenuItemRoot",
       children: [
-        hasCheckedIcon && /* @__PURE__ */ jsx(
+        checkable && /* @__PURE__ */ jsx(
           MenuItemIconCheckedStyled,
           {
             src: checkedIcon,

package/components/mui_extended/MenuItem/MenuItem.styles.js

@@ -2,6 +2,7 @@ import { g as getHeightSizeStyles } from "../../../utils/getHeightSizeStyles.js"
 const menuItemStyles = {
   /**
    * Estilos para el contenedor de los items del menú
+   * <<<<<<< HEAD
    * @updatedUser Andrés Quintero - automatic
    * @updatedAt 2025-01-08 10:36:41 - automatic
    * @createdAt 2025-01-08 10:36:40 - automatic
@@ -20,6 +21,22 @@ const menuItemStyles = {
    * @author Andrés Quintero - automatic
    * @updatedUser Andrés Quintero - automatic
    * @updatedAt 2025-01-08 10:36:41 - automatic
+   * =======
+   * @updatedUser cesar - automatic
+   * @updatedAt 2025-01-10 16:51:28 - automatic
+   * @createdAt 2025-01-10 16:51:28 - automatic
+   * @author cesar - automatic
+   * @updatedUser cesar - automatic
+   * @updatedAt 2025-01-10 16:51:28 - automatic
+   * @createdAt 2024-12-31 11:23:51 - automatic
+   * @author Andrés Quintero - automatic
+   * @updatedUser cesar - automatic
+   * @updatedAt 2025-01-10 16:51:28 - automatic
+   * @createdAt 2024-12-30 14:36:06 - automatic
+   * @author Andrés Quintero - automatic
+   * @updatedUser cesar - automatic
+   * @updatedAt 2025-01-10 16:51:28 - automatic
+   * >>>>>>> c15c4888 (Add checkable prop to MenuItem and update checked icon visibility logic)
    * @createdAt 2024-12-27 08:28:33 - automatic
    * @author Andrés Quintero - automatic
    */
@@ -107,8 +124,8 @@ const menuItemStyles = {
    * Estilos para el icono de los items del menú
    * @author SebastianM - automatic
    * @createdAt 2024-12-02 19:12:14 - automatic
-   * @updatedAt 2025-01-08 10:36:41 - automatic
-   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2025-01-10 16:51:28 - automatic
+   * @updatedUser cesar - automatic
    */
   menuItemIcon: () => ({
     "&.MenuItemEndIcon-root": {
@@ -119,22 +136,24 @@ const menuItemStyles = {
    * Estilos para el icono de los items del menú cuando están seleccionados
    * @author SebastianM - automatic
    * @createdAt 2024-12-13 12:45:48 - automatic
-   * @updatedAt 2025-01-08 10:36:41 - automatic
-   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2025-01-10 16:51:28 - automatic
+   * @updatedUser cesar - automatic
    */
   menuItemIconChecked: ({ ownerState }) => ({
+    visibility: ownerState.checkable ? ownerState.checked ? "visible" : "hidden" : "hidden",
     ...ownerState.selected && {
       "& .M4LIcon-icon": {
         backgroundColor: ownerState.paletteColor?.main
       }
-    }
+    },
+    variants: []
   }),
   /**
    * Estilos para la tipografía del menú item
    * @author SebastianM - automatic
    * @createdAt 2024-12-13 12:45:48 - automatic
-   * @updatedAt 2025-01-08 10:36:41 - automatic
-   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2025-01-10 16:51:28 - automatic
+   * @updatedUser cesar - automatic
    */
   menuItemTypography: () => ({}),
   /**
@@ -150,8 +169,8 @@ const menuItemStyles = {
    * Estilos para el contenedor de los items del menú en skeleton
    * @author Bruce Escobar - automatic
    * @createdAt 2024-10-22 10:38:00 - automatic
-   * @updatedAt 2025-01-08 10:36:41 - automatic
-   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2025-01-10 16:51:28 - automatic
+   * @updatedUser cesar - automatic
    */
   skeletonMenuItem: ({ theme, ownerState }) => ({
     width: "100%",

package/components/mui_extended/MenuItem/types.d.ts

@@ -48,13 +48,17 @@ export interface MenuItemProps extends Omit<MUIMenuItemProps, 'size' | 'color'>
      * Define si el ícono de check está activo
      */
     checked?: boolean;
+    /**
+     * indica si debe aparecer el icono de check
+     */
+    checkable?: boolean;
 }
 /**
  * Estado del propietario del `MenuItem` utilizado para definir propiedades internas de estilo y comportamiento.
  * Pick<MenuItemProps, 'size' | 'componentPaletteColor' | 'disabled' | 'selected'>
  * paletteColor - Define el color de la paleta aplicada al `MenuItem`.
  */
-export interface MenuItemOwnerState extends Pick<MenuItemProps, 'size' | 'componentPaletteColor' | 'disabled' | 'selected' | 'color'> {
+export interface MenuItemOwnerState extends Pick<MenuItemProps, 'checked' | 'checkable' | 'size' | 'componentPaletteColor' | 'disabled' | 'selected' | 'color'> {
     paletteColor: PaletteColor;
 }
 /**

package/package.json

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