@m4l/components 9.1.28 → 9.1.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/components/mui_extended/MenuItem/MenuItem.d.ts +2 -2
  2. package/components/mui_extended/MenuItem/MenuItem.js +28 -14
  3. package/components/mui_extended/MenuItem/MenuItem.styles.js +92 -29
  4. package/components/mui_extended/MenuItem/slots/MenuItemEnum.d.ts +4 -1
  5. package/components/mui_extended/MenuItem/slots/MenuItemEnum.js +3 -0
  6. package/components/mui_extended/MenuItem/slots/MenuItemSlots.d.ts +10 -1
  7. package/components/mui_extended/MenuItem/slots/MenuItemSlots.js +17 -1
  8. package/components/mui_extended/MenuItem/types.d.ts +4 -2
  9. package/package.json +1 -1
package/components/mui_extended/MenuItem/MenuItem.d.ts CHANGED
@@ -7,7 +7,7 @@ import { MenuItemProps } from './types';
7
7
  * @returns
8
8
  * @author Bruce Escobar - automatic
9
9
  * @createdAt 2024-10-22 19:53:39 - automatic
10
- * @updatedAt 2024-12-10 08:14:13 - automatic
11
- * @updatedUser Bruce Escobar - automatic
10
+ * @updatedAt 2024-12-13 12:45:48 - automatic
11
+ * @updatedUser SebastianM - automatic
12
12
  */
13
13
  export declare const MenuItem: (props: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
package/components/mui_extended/MenuItem/MenuItem.js CHANGED
@@ -1,13 +1,12 @@
1
- import { jsx } from "react/jsx-runtime";
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { createElement } from "react";
3
3
  import { useModuleSkeleton, getPropertyByString } from "@m4l/core";
4
4
  import { useTheme } from "@mui/material";
5
5
  import clsx from "clsx";
6
6
  import { g as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
7
7
  import { M as MENUITEM_KEY_COMPONENT } from "./constants.js";
8
- import { M as MenuItemSkeletonStyled, a as MenuItemRootStyled, b as MenuItemIconStyled } from "./slots/MenuItemSlots.js";
8
+ import { M as MenuItemSkeletonStyled, a as MenuItemRootStyled, b as MenuItemIconCheckedStyled, c as MenuItemContainerStyled, d as MenuItemTypographyStyled, e as MenuItemIconStyled } from "./slots/MenuItemSlots.js";
9
9
  import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
10
- import { T as Typography } from "../Typography/Typography.js";
11
10
  const MenuItem = (props) => {
12
11
  const {
13
12
  startIcon,
@@ -15,10 +14,12 @@ const MenuItem = (props) => {
15
14
  key,
16
15
  label,
17
16
  value,
17
+ skeletonWidth = "100%",
18
18
  selected = false,
19
19
  color = "primary",
20
20
  disabled = false,
21
21
  size = "medium",
22
+ checked = false,
22
23
  ...other
23
24
  } = props;
24
25
  const { currentSize } = useComponentSize(size);
@@ -35,13 +36,14 @@ const MenuItem = (props) => {
35
36
  disabled,
36
37
  selected,
37
38
  paletteColor,
38
- componentPaletteColor: color
39
+ color
39
40
  };
40
41
  if (isSkeleton) {
41
42
  return /* @__PURE__ */ jsx(
42
43
  MenuItemSkeletonStyled,
43
44
  {
44
45
  "data-testid": "SkeletonMenuItem",
46
+ width: skeletonWidth,
45
47
  ownerState: { ...ownerState }
46
48
  }
47
49
  );
@@ -62,11 +64,13 @@ const MenuItem = (props) => {
62
64
  size: adjustedSize,
63
65
  disabled,
64
66
  instaceDataTestId,
65
- className: clsx(className, "M4LMenuItemIcon")
67
+ className
66
68
  }
67
69
  );
68
70
  }
69
71
  };
72
+ const checkedIcon = "https://s3.us-east-1.amazonaws.com/static.made4labs/environments/d1/frontend/components/menu_item/checked.svg";
73
+ const hasCheckedIcon = checked && checkedIcon;
70
74
  const classRoot = getComponentSlotRoot(MENUITEM_KEY_COMPONENT);
71
75
  return /* @__PURE__ */ createElement(
72
76
  MenuItemRootStyled,
@@ -76,21 +80,31 @@ const MenuItem = (props) => {
76
80
  value,
77
81
  ownerState: { ...ownerState },
78
82
  disabled,
83
+ disableRipple: true,
79
84
  className: clsx("M4LMenuItemRoot", classRoot),
80
85
  "data-testid": "MenuItemRoot"
81
86
  },
82
- renderIcon(startIcon, "MenuItemStartIcon"),
83
- /* @__PURE__ */ jsx(
84
- Typography,
87
+ hasCheckedIcon && /* @__PURE__ */ jsx(
88
+ MenuItemIconCheckedStyled,
85
89
  {
86
- variant: "body",
87
- size: adjustedSize,
88
- className: "M4LMenuItemLabel",
89
- "data-testid": "MenuItemLabel",
90
- children: label
90
+ src: checkedIcon,
91
+ ownerState: { ...ownerState }
91
92
  }
92
93
  ),
93
- renderIcon(endIcon, "MenuItemEndIcon", "M4LMenuItemEndIcon")
94
+ /* @__PURE__ */ jsxs(MenuItemContainerStyled, { ownerState: { ...ownerState }, children: [
95
+ renderIcon(startIcon, "MenuItemStartIcon", getComponentSlotRoot("MenuItemStartIcon")),
96
+ /* @__PURE__ */ jsx(
97
+ MenuItemTypographyStyled,
98
+ {
99
+ ownerState: { ...ownerState },
100
+ variant: "body",
101
+ size: adjustedSize,
102
+ "data-testid": "MenuItemLabel",
103
+ children: label
104
+ }
105
+ ),
106
+ renderIcon(endIcon, "MenuItemEndIcon", getComponentSlotRoot("MenuItemEndIcon"))
107
+ ] })
94
108
  );
95
109
  };
96
110
  export {
package/components/mui_extended/MenuItem/MenuItem.styles.js CHANGED
@@ -1,24 +1,71 @@
1
1
  const menuItemStyles = {
2
2
  /**
3
3
  * Estilos para el contenedor de los items del menú
4
+ * @updatedUser SebastianM - automatic
5
+ * @updatedAt 2024-12-13 12:45:48 - automatic
6
+ * @createdAt 2024-12-13 12:45:48 - automatic
7
+ * @author SebastianM - automatic
4
8
  * @author Bruce Escobar - automatic
5
9
  * @createdAt 2024-10-22 10:38:00 - automatic
6
- * @updatedAt 2024-12-10 08:14:13 - automatic
7
- * @updatedUser Bruce Escobar - automatic
10
+ * @updatedAt 2024-12-13 12:45:48 - automatic
11
+ * @updatedUser SebastianM - automatic
8
12
  */
9
13
  menuItemRoot: ({ theme, ownerState }) => ({
10
14
  width: "100%",
11
- gap: theme.vars.size.baseSpacings.sp1,
15
+ gap: theme.vars.size.baseSpacings.sp3,
12
16
  padding: theme.vars.size.baseSpacings.sp1,
17
+ borderRadius: theme.vars.size.borderRadius.r0,
13
18
  ...ownerState.selected && {
14
- borderLeft: theme.vars.size.borderStroke.container,
15
- borderRadius: theme.vars.size.borderRadius.r0,
16
- borderColor: ownerState.paletteColor?.main
19
+ ...ownerState.color === "primary" && {
20
+ borderLeft: theme.vars.size.borderStroke.container,
21
+ borderColor: ownerState.paletteColor?.main
22
+ },
23
+ "& .M4lclassCssSpecificity.M4lclassCssSpecificity": {
24
+ color: ownerState.paletteColor?.enabled
25
+ },
26
+ "& .M4LIconClass-root": {
27
+ backgroundColor: ownerState.paletteColor?.enabled
28
+ },
29
+ "&:hover": {
30
+ backgroundColor: ownerState.paletteColor?.hoverOpacity,
31
+ "&:active": {
32
+ backgroundColor: ownerState.paletteColor?.activeOpacity,
33
+ "& .M4lclassCssSpecificity": {
34
+ color: ownerState.paletteColor?.active
35
+ },
36
+ "& .M4LIconClass-root": {
37
+ color: ownerState.paletteColor?.active
38
+ }
39
+ }
40
+ }
17
41
  },
18
- // Estados del label
19
- "& .M4LMenuItemLabel": {
20
- ...ownerState.selected && {
21
- color: ownerState.paletteColor?.main
42
+ ...ownerState.color === "default" && {
43
+ "& .M4lclassCssSpecificity": {
44
+ color: theme.vars.palette.text.primary
45
+ },
46
+ "& .M4LIconClass-root": {
47
+ backgroundColor: theme.vars.palette.text.primary
48
+ },
49
+ "&:hover": {
50
+ backgroundColor: ownerState.paletteColor?.hoverOpacity,
51
+ "&:active": {
52
+ backgroundColor: ownerState.paletteColor?.activeOpacity,
53
+ "&.M4lclassCssSpecificity": {
54
+ color: theme.vars.palette.text.primary
55
+ },
56
+ "& .M4LIconClass-root": {
57
+ backgroundColor: theme.vars.palette.text.primary
58
+ }
59
+ }
60
+ }
61
+ },
62
+ ...ownerState.disabled && {
63
+ pointerEvents: "none",
64
+ "& .M4lclassCssSpecificity.M4lclassCssSpecificity": {
65
+ color: theme.vars.palette.text.disabled
66
+ },
67
+ "& .M4LIconClass-root": {
68
+ backgroundColor: theme.vars.palette.text.disabled
22
69
  }
23
70
  },
24
71
  // Estilos específicos para el tamaño small
@@ -40,41 +87,57 @@ const menuItemStyles = {
40
87
  height: theme.vars.size.desktop.medium.action,
41
88
  minHeight: theme.vars.size.desktop.medium.action
42
89
  }
43
- },
44
- "&.M4LMenuItemRoot .M4LTypography-root .MuiTypography-body": {
45
- paddingRight: theme.vars.size.baseSpacings.sp1,
46
- paddingLeft: theme.vars.size.baseSpacings.sp2,
47
- ...ownerState.selected && {
48
- color: ownerState.paletteColor?.main
49
- }
50
- },
51
- "&:hover.M4LMenuItemRoot": {
52
- background: ownerState.selected ? ownerState.paletteColor?.opacity : theme.vars.palette.background.hover
53
90
  }
54
91
  }),
55
92
  /**
56
93
  * Estilos para el icono de los items del menú
57
94
  * @author SebastianM - automatic
58
95
  * @createdAt 2024-12-02 19:12:14 - automatic
59
- * @updatedAt 2024-12-10 08:14:13 - automatic
60
- * @updatedUser Bruce Escobar - automatic
96
+ * @updatedAt 2024-12-13 12:45:48 - automatic
97
+ * @updatedUser SebastianM - automatic
61
98
  */
62
- menuItemIcon: ({ ownerState }) => ({
63
- "&.M4LMenuItemEndIcon": {
99
+ menuItemIcon: () => ({
100
+ "&.MenuItemEndIcon-root": {
64
101
  marginLeft: "auto"
65
- },
66
- "& .M4LIconClass-root": {
67
- ...ownerState.selected && {
102
+ }
103
+ }),
104
+ /**
105
+ * Estilos para el icono de los items del menú cuando están seleccionados
106
+ * @author SebastianM - automatic
107
+ * @createdAt 2024-12-13 12:45:48 - automatic
108
+ * @updatedAt 2024-12-13 12:45:48 - automatic
109
+ * @updatedUser SebastianM - automatic
110
+ */
111
+ menuItemIconChecked: ({ ownerState }) => ({
112
+ ...ownerState.selected && {
113
+ "& .M4LIconClass-root": {
68
114
  backgroundColor: ownerState.paletteColor?.main
69
115
  }
70
116
  }
71
117
  }),
118
+ /**
119
+ * Estilos para la tipografía del menú item
120
+ * @author SebastianM - automatic
121
+ * @createdAt 2024-12-13 12:45:48 - automatic
122
+ * @updatedAt 2024-12-13 12:45:48 - automatic
123
+ * @updatedUser SebastianM - automatic
124
+ */
125
+ menuItemTypography: () => ({}),
126
+ /**
127
+ * Estilos para el contenedor de los items del menú
128
+ */
129
+ menuItemContainer: ({ theme }) => ({
130
+ display: "flex",
131
+ alignItems: "center",
132
+ width: "100%",
133
+ gap: theme.vars.size.baseSpacings["sp0-5"]
134
+ }),
72
135
  /**
73
136
  * Estilos para el contenedor de los items del menú en skeleton
74
137
  * @author Bruce Escobar - automatic
75
138
  * @createdAt 2024-10-22 10:38:00 - automatic
76
- * @updatedAt 2024-12-10 08:14:13 - automatic
77
- * @updatedUser Bruce Escobar - automatic
139
+ * @updatedAt 2024-12-13 12:45:48 - automatic
140
+ * @updatedUser SebastianM - automatic
78
141
  */
79
142
  skeletonMenuItem: ({ theme, ownerState }) => ({
80
143
  width: "100%",
package/components/mui_extended/MenuItem/slots/MenuItemEnum.d.ts CHANGED
@@ -1,5 +1,8 @@
1
1
  export declare enum MenuItemSlots {
2
2
  menuItemRoot = "menuItemRoot",
3
3
  menuItemIcon = "menuItemIcon",
4
- skeletonMenuItem = "skeletonMenuItem"
4
+ menuItemIconChecked = "menuItemIconChecked",
5
+ menuItemContainer = "menuItemContainer",
6
+ skeletonMenuItem = "skeletonMenuItem",
7
+ menuItemTypography = "menuItemTypography"
5
8
  }
package/components/mui_extended/MenuItem/slots/MenuItemEnum.js CHANGED
@@ -1,7 +1,10 @@
1
1
  var MenuItemSlots = /* @__PURE__ */ ((MenuItemSlots2) => {
2
2
  MenuItemSlots2["menuItemRoot"] = "menuItemRoot";
3
3
  MenuItemSlots2["menuItemIcon"] = "menuItemIcon";
4
+ MenuItemSlots2["menuItemIconChecked"] = "menuItemIconChecked";
5
+ MenuItemSlots2["menuItemContainer"] = "menuItemContainer";
4
6
  MenuItemSlots2["skeletonMenuItem"] = "skeletonMenuItem";
7
+ MenuItemSlots2["menuItemTypography"] = "menuItemTypography";
5
8
  return MenuItemSlots2;
6
9
  })(MenuItemSlots || {});
7
10
  export {
package/components/mui_extended/MenuItem/slots/MenuItemSlots.d.ts CHANGED
@@ -3,10 +3,19 @@ declare const MenuItemRootStyled: import('@emotion/styled').StyledComponent<Pick
3
3
  }, "children" | "selected" | "action" | "divider" | "style" | "dense" | "disabled" | "className" | "classes" | "sx" | "disableGutters" | "autoFocus" | "tabIndex" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef">, "children" | "value" | "ref" | "title" | "id" | "selected" | "action" | "divider" | "hidden" | "color" | "content" | "style" | "dense" | "disabled" | "className" | "classes" | "onChange" | "sx" | "translate" | "disableGutters" | "slot" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').MenuItemOwnerState> & Record<string, unknown> & {
4
4
  ownerState: Partial<import('..').MenuItemOwnerState> & Record<string, unknown>;
5
5
  }, {}, {}>;
6
+ declare const MenuItemContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').MenuItemOwnerState> & Record<string, unknown> & {
7
+ ownerState: Partial<import('..').MenuItemOwnerState> & Record<string, unknown>;
8
+ }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
9
+ declare const MenuItemTypographyStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Typography/types').TypographyProps, keyof import('../../Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').MenuItemOwnerState> & Record<string, unknown> & {
10
+ ownerState: Partial<import('..').MenuItemOwnerState> & Record<string, unknown>;
11
+ }, {}, {}>;
6
12
  declare const MenuItemIconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../Icon').IconProps, keyof import('../../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').MenuItemOwnerState> & Record<string, unknown> & {
7
13
  ownerState: Partial<import('..').MenuItemOwnerState> & Record<string, unknown>;
8
14
  }, {}, {}>;
15
+ declare const MenuItemIconCheckedStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../Icon').IconProps, keyof import('../../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').MenuItemOwnerState> & Record<string, unknown> & {
16
+ ownerState: Partial<import('..').MenuItemOwnerState> & Record<string, unknown>;
17
+ }, {}, {}>;
9
18
  declare const MenuItemSkeletonStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Skeleton/types').SkeletonProps, keyof import('../../Skeleton/types').SkeletonProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').MenuItemOwnerState> & Record<string, unknown> & {
10
19
  ownerState: Partial<import('..').MenuItemOwnerState> & Record<string, unknown>;
11
20
  }, {}, {}>;
12
- export { MenuItemRootStyled, MenuItemIconStyled, MenuItemSkeletonStyled };
21
+ export { MenuItemRootStyled, MenuItemIconStyled, MenuItemIconCheckedStyled, MenuItemTypographyStyled, MenuItemContainerStyled, MenuItemSkeletonStyled, };
package/components/mui_extended/MenuItem/slots/MenuItemSlots.js CHANGED
@@ -3,16 +3,29 @@ import { MenuItem } from "@mui/material";
3
3
  import { M as MENUITEM_KEY_COMPONENT } from "../constants.js";
4
4
  import { m as menuItemStyles } from "../MenuItem.styles.js";
5
5
  import { M as MenuItemSlots } from "./MenuItemEnum.js";
6
+ import { T as Typography } from "../../Typography/Typography.js";
6
7
  import { S as Skeleton } from "../../Skeleton/Skeleton.js";
7
8
  import { I as Icon } from "../../../Icon/Icon.js";
8
9
  const MenuItemRootStyled = styled(MenuItem, {
9
10
  name: MENUITEM_KEY_COMPONENT,
10
11
  slot: MenuItemSlots.menuItemRoot
11
12
  })(menuItemStyles?.menuItemRoot);
13
+ const MenuItemContainerStyled = styled("div", {
14
+ name: MENUITEM_KEY_COMPONENT,
15
+ slot: MenuItemSlots.menuItemContainer
16
+ })(menuItemStyles?.menuItemContainer);
17
+ const MenuItemTypographyStyled = styled(Typography, {
18
+ name: MENUITEM_KEY_COMPONENT,
19
+ slot: MenuItemSlots.menuItemTypography
20
+ })(menuItemStyles?.menuItemTypography);
12
21
  const MenuItemIconStyled = styled(Icon, {
13
22
  name: MENUITEM_KEY_COMPONENT,
14
23
  slot: MenuItemSlots.menuItemIcon
15
24
  })(menuItemStyles?.menuItemIcon);
25
+ const MenuItemIconCheckedStyled = styled(Icon, {
26
+ name: MENUITEM_KEY_COMPONENT,
27
+ slot: MenuItemSlots.menuItemIconChecked
28
+ })(menuItemStyles?.menuItemIconChecked);
16
29
  const MenuItemSkeletonStyled = styled(Skeleton, {
17
30
  name: MENUITEM_KEY_COMPONENT,
18
31
  slot: MenuItemSlots.skeletonMenuItem
@@ -20,5 +33,8 @@ const MenuItemSkeletonStyled = styled(Skeleton, {
20
33
  export {
21
34
  MenuItemSkeletonStyled as M,
22
35
  MenuItemRootStyled as a,
23
- MenuItemIconStyled as b
36
+ MenuItemIconCheckedStyled as b,
37
+ MenuItemContainerStyled as c,
38
+ MenuItemTypographyStyled as d,
39
+ MenuItemIconStyled as e
24
40
  };
package/components/mui_extended/MenuItem/types.d.ts CHANGED
@@ -21,17 +21,19 @@ export interface MenuItemProps extends Omit<MUIMenuItemProps, 'size' | 'color'>
21
21
  endIcon?: ReactNode;
22
22
  label: string;
23
23
  selected?: boolean;
24
- componentPaletteColor?: ComponentPalletColor;
25
24
  color?: Extract<ComponentPalletColor, 'primary' | 'default' | 'error'>;
25
+ componentPaletteColor?: ComponentPalletColor;
26
26
  disabled?: boolean;
27
27
  size?: Extract<Sizes, 'small' | 'medium'>;
28
+ skeletonWidth?: string | number;
29
+ checked?: boolean;
28
30
  }
29
31
  /**
30
32
  * Estado del propietario del `MenuItem` utilizado para definir propiedades internas de estilo y comportamiento.
31
33
  * Pick<MenuItemProps, 'size' | 'componentPaletteColor' | 'disabled' | 'selected'>
32
34
  * paletteColor - Define el color de la paleta aplicada al `MenuItem`.
33
35
  */
34
- export interface MenuItemOwnerState extends Pick<MenuItemProps, 'size' | 'componentPaletteColor' | 'disabled' | 'selected'> {
36
+ export interface MenuItemOwnerState extends Pick<MenuItemProps, 'size' | 'componentPaletteColor' | 'disabled' | 'selected' | 'color'> {
35
37
  paletteColor: PaletteColor;
36
38
  }
37
39
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@m4l/components",
3
- "version": "9.1.28",
3
+ "version": "9.1.29",
4
4
  "license": "UNLICENSED",
5
5
  "lint-staged": {
6
6
  "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"