@m4l/components 8.1.0-beta.devLeury.Select → 8.1.0-beta.devManuela.IconButton

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 (29) hide show
  1. package/@types/types.d.ts +2 -26
  2. package/components/mui_extended/IconButton/IconButton.d.ts +1 -5
  3. package/components/mui_extended/IconButton/IconButton.js +61 -26
  4. package/components/mui_extended/IconButton/IconButton.styles.js +4 -1
  5. package/components/mui_extended/IconButton/slots/IconButtonEnum.d.ts +2 -1
  6. package/components/mui_extended/IconButton/slots/IconButtonEnum.js +1 -0
  7. package/components/mui_extended/IconButton/slots/IconButtonSlots.d.ts +3 -0
  8. package/components/mui_extended/IconButton/slots/IconButtonSlots.js +7 -1
  9. package/components/mui_extended/IconButton/types.d.ts +46 -2
  10. package/package.json +1 -1
  11. package/components/mui_extended/MenuItem/MenuItem.d.ts +0 -11
  12. package/components/mui_extended/MenuItem/MenuItem.stories.d.ts +0 -37
  13. package/components/mui_extended/MenuItem/MenuItem.styles.d.ts +0 -2
  14. package/components/mui_extended/MenuItem/constants.d.ts +0 -8
  15. package/components/mui_extended/MenuItem/index.d.ts +0 -2
  16. package/components/mui_extended/MenuItem/slots/MenuItemEnum.d.ts +0 -5
  17. package/components/mui_extended/MenuItem/slots/MenuItemSlots.d.ts +0 -11
  18. package/components/mui_extended/MenuItem/slots/index.d.ts +0 -2
  19. package/components/mui_extended/MenuItem/types.d.ts +0 -41
  20. package/components/mui_extended/Select/Select.d.ts +0 -9
  21. package/components/mui_extended/Select/Select.styles.d.ts +0 -2
  22. package/components/mui_extended/Select/constants.d.ts +0 -8
  23. package/components/mui_extended/Select/index.d.ts +0 -2
  24. package/components/mui_extended/Select/slots/SelectEnum.d.ts +0 -6
  25. package/components/mui_extended/Select/slots/SelectSlots.d.ts +0 -12
  26. package/components/mui_extended/Select/slots/index.d.ts +0 -2
  27. package/components/mui_extended/Select/stories/SelectOutlied.stories.d.ts +0 -74
  28. package/components/mui_extended/Select/stories/SelectStandar.stories.d.ts +0 -25
  29. package/components/mui_extended/Select/types.d.ts +0 -66
package/@types/types.d.ts CHANGED
@@ -41,17 +41,7 @@ import type {
41
41
 
42
42
  import type { BadgeSlotsType, BadgeOwnerState } from '../components/mui_extended/Badge/types';
43
43
  import { SkeletonOwnerState, SkeletonSlotsType } from '../components/mui_extended/Skeleton/types';
44
- import {
45
- TypographyOwnerState,
46
- TypographySlotsType,
47
- } from '../components/mui_extended/Typography/types';
48
-
49
- import type {
50
- MenuItemSlotsType,
51
- MenuItemOwnerState,
52
- } from '../components/mui_extended/MenuItem/types';
53
-
54
- import { SelectOwnerState, SelectSlotsType } from '../components/mui_extended/Select/types';
44
+ import { TypographyOwnerState, TypographySlotsType } from '../components/mui_extended/Typography/types';
55
45
 
56
46
  declare module '@mui/material/styles' {
57
47
  // Define the slots in the theme
@@ -70,9 +60,7 @@ declare module '@mui/material/styles' {
70
60
  M4LTooltip: TooltipSlotsType;
71
61
  M4LIconButton: IconButtonSlotsType;
72
62
  M4LBadge: BadgeSlotsType;
73
- M4LMenuItem: MenuItemSlotsType;
74
63
  M4LSkeleton: SkeletonSlotsType;
75
- M4LSelect: SelectSlotsType;
76
64
  M4LTypography: TypographySlotsType;
77
65
  }
78
66
 
@@ -92,9 +80,7 @@ declare module '@mui/material/styles' {
92
80
  M4LTooltip: Partial<TooltipOwnerState>;
93
81
  M4LIconButton: Partial<IconButtonOwnerState>;
94
82
  M4LBadge: Partial<BadgeOwnerState>;
95
- M4LMenuItem: Partial<MenuItemOwnerState>;
96
83
  M4LSkeleton: Partial<SkeletonOwnerState>;
97
- M4LSelect: Partial<SelectOwnerState>;
98
84
  M4LTypography: Partial<TypographyOwnerState>;
99
85
  }
100
86
 
@@ -169,25 +155,15 @@ declare module '@mui/material/styles' {
169
155
  styleOverrides?: ComponentsOverrides<Theme>['M4LBadge'];
170
156
  variants?: ComponentsVariants['M4LBadge'];
171
157
  };
172
- M4LMenuItem?: {
173
- defaultProps?: ComponentsPropsList['M4LMenuItem'];
174
- styleOverrides?: ComponentsOverrides<Theme>['M4LMenuItem'];
175
- variants?: ComponentsVariants['M4LMenuItem'];
176
- };
177
158
  M4LSkeleton?: {
178
159
  defaultProps?: ComponentsPropsList['M4LSkeleton'];
179
160
  styleOverrides?: ComponentsOverrides<Theme>['M4LSkeleton'];
180
161
  variants?: ComponentsVariants['M4LSkeleton'];
181
162
  };
182
- M4LSelect: {
183
- defaultProps?: ComponentsPropsList['M4LSelect'];
184
- styleOverrides?: ComponentsOverrides<Theme>['M4LSelect'];
185
- variants?: ComponentsVariants['M4LSelect'];
186
- };
187
163
  M4LTypography?: {
188
164
  defaultProps?: ComponentsPropsList['M4LTypography'];
189
165
  styleOverrides?: ComponentsOverrides<Theme>['M4LTypography'];
190
166
  variants?: ComponentsVariants['M4LTypography'];
191
- };
167
+ }
192
168
  }
193
169
  }
@@ -1,11 +1,7 @@
1
1
  import { IconButtonProps } from './types';
2
2
  /**
3
- * Provee un botón con un icono para que los clientes ejecuten acciones en la plataforma web. Aporta su versión provisional de carga en red.
3
+ *Los Icon button son habitualmente ubicados en barras de aplicaciones y barras de herramientas. Además, resulta adecuado emplear iconos en botones de alternancia que posibilitan la selección o deselección de una única opción, como añadir o eliminar una estrella a un elemento.
4
4
  * @param props
5
5
  * @returns
6
- * @author Juan Escobar - automatic
7
- * @updatedAt 2024-10-15 17:33:28 - automatic
8
- * @updatedUser Juan Escobar - automatic
9
- * @createdAt 2024-10-15 17:33:28 - automatic
10
6
  */
11
7
  export declare const IconButton: (props: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,10 +1,10 @@
1
- import { jsx } from "react/jsx-runtime";
1
+ import { jsx, Fragment } from "react/jsx-runtime";
2
2
  import { useMemo } from "react";
3
+ import { getPropertyByString } from "@m4l/core";
3
4
  import { useTheme } from "@mui/material";
4
5
  import { e as evalIconColor } from "./helpers/evalIconColor.js";
5
- import { getPropertyByString, useModuleDictionary } from "@m4l/core";
6
6
  import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
7
- import { S as StyledMUIIconButton, B as BadgeStyled, I as IconStyled } from "./slots/IconButtonSlots.js";
7
+ import { T as TooltipStyled, S as StyledMUIIconButton, B as BadgeStyled, I as IconStyled } from "./slots/IconButtonSlots.js";
8
8
  const IconButton = (props) => {
9
9
  const {
10
10
  src,
@@ -14,15 +14,20 @@ const IconButton = (props) => {
14
14
  disabled,
15
15
  onClick,
16
16
  badgeContent,
17
- withBadge = false,
18
17
  dictionaryTooltipId,
18
+ tooltipContent,
19
+ placement = "bottom",
20
+ instaceDataTestId,
19
21
  componentPaletteColor = "default",
20
- rotationAngle,
21
22
  ...other
22
23
  } = props;
23
24
  const { currentSize } = useComponentSize(size);
24
25
  const theme = useTheme();
25
- const paletteColor = getPropertyByString(theme.palette, disabled ? "default" : componentPaletteColor, theme.palette.default);
26
+ const paletteColor = getPropertyByString(
27
+ theme.palette,
28
+ disabled ? "default" : componentPaletteColor,
29
+ theme.palette.default
30
+ );
26
31
  const ownerState = {
27
32
  variant,
28
33
  size,
@@ -34,20 +39,53 @@ const IconButton = (props) => {
34
39
  () => evalIconColor(componentPaletteColor, variant),
35
40
  [componentPaletteColor, variant]
36
41
  );
37
- const { getLabel } = useModuleDictionary();
38
- const finalTooltip = useMemo(() => {
39
- if (disabled) {
40
- return void 0;
41
- }
42
- if (tooltip && tooltip !== "") {
43
- return tooltip;
44
- }
45
- if (dictionaryTooltipId && getLabel) {
46
- return getLabel(dictionaryTooltipId);
42
+ return /* @__PURE__ */ jsx(Fragment, { children: tooltipContent ? /* @__PURE__ */ jsx(
43
+ TooltipStyled,
44
+ {
45
+ title: tooltipContent.toString(),
46
+ ownerState: {},
47
+ placement,
48
+ children: /* @__PURE__ */ jsx(
49
+ StyledMUIIconButton,
50
+ {
51
+ ownerState: { ...ownerState },
52
+ onClick: !disabled ? onClick : void 0,
53
+ disableRipple: true,
54
+ disabled,
55
+ "data-testid": "IconButtonRoot",
56
+ tabIndex: 0,
57
+ ...other,
58
+ children: badgeContent ? /* @__PURE__ */ jsx(
59
+ BadgeStyled,
60
+ {
61
+ ownerState: { ...ownerState },
62
+ badgeContent,
63
+ componentPaletteColor,
64
+ children: /* @__PURE__ */ jsx(
65
+ IconStyled,
66
+ {
67
+ ownerState: { ...ownerState },
68
+ src,
69
+ size: currentSize,
70
+ color: iconColor,
71
+ disabled
72
+ }
73
+ )
74
+ }
75
+ ) : /* @__PURE__ */ jsx(
76
+ IconStyled,
77
+ {
78
+ ownerState: { ...ownerState },
79
+ src,
80
+ size: currentSize,
81
+ color: iconColor,
82
+ disabled
83
+ }
84
+ )
85
+ }
86
+ )
47
87
  }
48
- return void 0;
49
- }, [tooltip, dictionaryTooltipId, getLabel, disabled]);
50
- return /* @__PURE__ */ jsx(
88
+ ) : /* @__PURE__ */ jsx(
51
89
  StyledMUIIconButton,
52
90
  {
53
91
  ownerState: { ...ownerState },
@@ -57,7 +95,7 @@ const IconButton = (props) => {
57
95
  "data-testid": "IconButtonRoot",
58
96
  tabIndex: 0,
59
97
  ...other,
60
- children: withBadge ? /* @__PURE__ */ jsx(
98
+ children: badgeContent ? /* @__PURE__ */ jsx(
61
99
  BadgeStyled,
62
100
  {
63
101
  ownerState: { ...ownerState },
@@ -70,9 +108,7 @@ const IconButton = (props) => {
70
108
  src,
71
109
  size: currentSize,
72
110
  color: iconColor,
73
- disabled,
74
- tooltipContent: finalTooltip,
75
- rotationAngle
111
+ disabled
76
112
  }
77
113
  )
78
114
  }
@@ -83,12 +119,11 @@ const IconButton = (props) => {
83
119
  src,
84
120
  size: currentSize,
85
121
  color: iconColor,
86
- disabled,
87
- tooltipContent: finalTooltip
122
+ disabled
88
123
  }
89
124
  )
90
125
  }
91
- );
126
+ ) });
92
127
  };
93
128
  export {
94
129
  IconButton as I
@@ -255,7 +255,10 @@ const iconButtonStyles = {
255
255
  }
256
256
  }
257
257
  }),
258
- //
258
+ /**
259
+ * Tooltip Styles
260
+ */
261
+ tooltip: () => ({}),
259
262
  /**
260
263
  * Comentado por el momento, falta de documentación en Figma de Badge
261
264
  */
@@ -1,5 +1,6 @@
1
1
  export declare enum IconButtonSlots {
2
2
  styledMUIIconButton = "styledMUIIconButton",
3
3
  icon = "icon",
4
- badgeIconButton = "badgeIconButton"
4
+ badgeIconButton = "badgeIconButton",
5
+ tooltip = "tooltip"
5
6
  }
@@ -2,6 +2,7 @@ var IconButtonSlots = /* @__PURE__ */ ((IconButtonSlots2) => {
2
2
  IconButtonSlots2["styledMUIIconButton"] = "styledMUIIconButton";
3
3
  IconButtonSlots2["icon"] = "icon";
4
4
  IconButtonSlots2["badgeIconButton"] = "badgeIconButton";
5
+ IconButtonSlots2["tooltip"] = "tooltip";
5
6
  return IconButtonSlots2;
6
7
  })(IconButtonSlots || {});
7
8
  export {
@@ -11,3 +11,6 @@ export declare const BadgeStyled: import('@emotion/styled').StyledComponent<Pick
11
11
  }, "color" | "sx" | "classes" | "className" | "style" | "children" | "components" | "componentsProps" | "slotProps" | "slots" | "badgeContent" | "variant" | "anchorOrigin" | "invisible" | "max" | "overlap" | "showZero">, "color" | "content" | "translate" | "sx" | "classes" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "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" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "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" | "components" | "componentsProps" | "slotProps" | "slots" | "ref" | "key" | "badgeContent" | "variant" | "anchorOrigin" | "invisible" | "max" | "overlap" | "showZero"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').IconButtonOwnerState> & Record<string, unknown> & {
12
12
  ownerState: Partial<import('../types').IconButtonOwnerState> & Record<string, unknown>;
13
13
  }, {}, {}>;
14
+ export declare const TooltipStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Tooltip').TooltipProps, keyof import('../../Tooltip').TooltipProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').IconButtonOwnerState> & Record<string, unknown> & {
15
+ ownerState: Partial<import('../types').IconButtonOwnerState> & Record<string, unknown>;
16
+ }, {}, {}>;
@@ -4,6 +4,7 @@ import { i as iconButtonStyles } from "../IconButton.styles.js";
4
4
  import { I as IconButtonSlots } from "./IconButtonEnum.js";
5
5
  import { IconButton, Badge } from "@mui/material";
6
6
  import { I as Icon } from "../../../Icon/Icon.js";
7
+ import { T as Tooltip } from "../../Tooltip/Tooltip.js";
7
8
  const StyledMUIIconButton = styled(IconButton, {
8
9
  name: ICON_BUTTON_KEY_COMPONENT,
9
10
  slot: IconButtonSlots.styledMUIIconButton
@@ -16,8 +17,13 @@ const BadgeStyled = styled(Badge, {
16
17
  name: ICON_BUTTON_KEY_COMPONENT,
17
18
  slot: IconButtonSlots.badgeIconButton
18
19
  })(iconButtonStyles?.badgeIconButton);
20
+ const TooltipStyled = styled(Tooltip, {
21
+ name: ICON_BUTTON_KEY_COMPONENT,
22
+ slot: IconButtonSlots.tooltip
23
+ })(iconButtonStyles?.tooltip);
19
24
  export {
20
25
  BadgeStyled as B,
21
26
  IconStyled as I,
22
- StyledMUIIconButton as S
27
+ StyledMUIIconButton as S,
28
+ TooltipStyled as T
23
29
  };
@@ -6,16 +6,60 @@ import { ComponentPalletColor, Sizes } from '@m4l/styles';
6
6
  import { ICON_BUTTON_KEY_COMPONENT } from './constants';
7
7
  import { IconButtonSlots } from './slots';
8
8
  import { BadgeProps } from '../Badge';
9
+ import { TooltipProps } from '../../mui_extended';
10
+ import { ReactNode } from 'react';
9
11
  export type IconButtonVariants = 'contained' | 'outline' | 'text';
10
12
  export type IconButtonSize = 'small' | 'medium';
11
- export interface IconButtonProps extends Omit<IconProps, 'size' | 'color'>, Omit<MUIIconButtonProps, 'size' | 'color' | 'disabled'>, Pick<BadgeProps, 'badgeContent'> {
13
+ /**
14
+ * Props for the IconButton component.
15
+ * Omit<IconProps, 'size' | 'color'>
16
+ * Omit<MUIIconButtonProps, 'size' | 'color' | 'disabled'>
17
+ * Pick<BadgeProps, 'badgeContent'>
18
+ * Pick<TooltipProps, 'placement'>
19
+ * [tooltip] - The text to display in the tooltip.
20
+ * [dictionaryTooltipId] - The ID for the dictionary tooltip.
21
+ * [variant] - The variant of the IconButton.
22
+ * [size] - The size of the IconButton.
23
+ * [withBadge] - Whether the IconButton includes a badge.
24
+ * [tooltipContent] - The content to display in the tooltip.
25
+ * [componentPaletteColor] - The color palette for the component.
26
+ * [disabled] - Whether the IconButton is disabled.
27
+ * [instaceDataTestId] - A unique identifier for the HTML element, useful for unit and integration testing.
28
+ */
29
+ export interface IconButtonProps extends Omit<IconProps, 'size' | 'color'>, Omit<MUIIconButtonProps, 'size' | 'color' | 'disabled'>, Pick<BadgeProps, 'badgeContent'>, Pick<TooltipProps, 'placement'> {
30
+ /**
31
+ * Define el uso de tooltip en IconButton
32
+ */
12
33
  tooltip?: string;
34
+ /**
35
+ * Representa la identificación del tooltip en el diccionario para que designe internamente el getLabel
36
+ */
13
37
  dictionaryTooltipId?: string;
38
+ /**
39
+ * Variante del componente , modifica la aparencia grafica
40
+ */
14
41
  variant?: IconButtonVariants;
42
+ /**
43
+ * Define el tamaño del componente
44
+ */
15
45
  size?: Sizes;
16
- withBadge?: boolean;
46
+ /**
47
+ * Define el mensaje interno del tooltip
48
+ */
49
+ tooltipContent?: ReactNode;
50
+ /**
51
+ * Opciones de color del componente
52
+ */
17
53
  componentPaletteColor?: ComponentPalletColor;
54
+ /**
55
+ * Representa si el componente se encuentra deshabilitado
56
+ */
18
57
  disabled?: boolean;
58
+ /**
59
+ * Propiedad que sirve para complementar el nombre del data-testid, aporta un identificador único del elemento html en toda aplicación.
60
+ * Es útil para realizar pruebas unitarias y de integración.
61
+ */
62
+ instaceDataTestId?: string;
19
63
  }
20
64
  export type OwnerState = Pick<IconButtonProps, 'size' | 'variant' | 'componentPaletteColor'> & {
21
65
  disabled?: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@m4l/components",
3
- "version": "8.1.0-beta.devLeury.Select",
3
+ "version": "8.1.0-beta.devManuela.IconButton",
4
4
  "license": "UNLICENSED",
5
5
  "lint-staged": {
6
6
  "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"
@@ -1,11 +0,0 @@
1
- import { MenuItemProps } from './types';
2
- /**
3
- * MenuItem component renders a menu item with optional icon and label.
4
- * It supports different sizes, colors, and states such as disabled and selected.
5
- * If the module is in skeleton mode, it renders a skeleton menu item instead.
6
- * @author Bruce Escobar - automatic
7
- * @createdAt 2024-10-22 10:30:26 - automatic
8
- * @updatedAt 2024-10-22 10:31:35 - automatic
9
- * @updatedUser Bruce Escobar - automatic
10
- */
11
- export declare const MenuItem: (props: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,37 +0,0 @@
1
- import { Meta, StoryObj } from '@storybook/react/*';
2
- import { MenuItem } from '.';
3
- declare const meta: Meta<typeof MenuItem>;
4
- type Story = StoryObj<typeof MenuItem>;
5
- /**
6
- * Historia base para `MenuItem` en modo estándar.
7
- */
8
- export declare const Base: Story;
9
- /**
10
- * Historia para `MenuItem` activado y con ícono.
11
- */
12
- export declare const ActiveWithIcon: Story;
13
- /**
14
- * Historia para `MenuItem` activado sin ícono.
15
- */
16
- export declare const ActiveWithoutIcon: Story;
17
- /**
18
- * Historia para `MenuItem` desactivado con ícono.
19
- */
20
- export declare const InactiveWithIcon: Story;
21
- /**
22
- * Historia para `MenuItem` desactivado sin ícono.
23
- */
24
- export declare const InactiveWithoutIcon: Story;
25
- /**
26
- * Historia para `MenuItem` deshabilitado con ícono.
27
- */
28
- export declare const DisabledWithIcon: Story;
29
- /**
30
- * Historia para `MenuItem` deshabilitado sin ícono.
31
- */
32
- export declare const DisabledWithoutIcon: Story;
33
- /**
34
- * Historia para `MenuItem` en modo skeleton.
35
- */
36
- export declare const WithSkeleton: Story;
37
- export default meta;
@@ -1,2 +0,0 @@
1
- import { MenuItemStyles } from './types';
2
- export declare const menuItemStyles: MenuItemStyles;
@@ -1,8 +0,0 @@
1
- /**
2
- * Clave de identificación del componente MenuItem dentro del sistema.
3
- *
4
- * Esta constante se utiliza como identificador único para asociar y personalizar estilos y configuraciones
5
- * relacionadas con el componente `MenuItem` dentro del sistema de temas y estilos.
6
- * @default 'M4LMenuItem'
7
- */
8
- export declare const MENUITEM_KEY_COMPONENT = "M4LMenuItem";
@@ -1,2 +0,0 @@
1
- export * from './MenuItem';
2
- export * from './types';
@@ -1,5 +0,0 @@
1
- export declare enum MenuItemSlots {
2
- menuItemRoot = "menuItemRoot",
3
- menuItemIcon = "menuItemIcon",
4
- skeletonMenuItem = "skeletonMenuItem"
5
- }
@@ -1,11 +0,0 @@
1
- export declare const MenuItemRoot: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').MenuItemOwnProps & Omit<import('@mui/material').ButtonBaseOwnProps, "classes"> & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
2
- ref?: ((instance: HTMLLIElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLLIElement> | null | undefined;
3
- }, "disabled" | "sx" | "classes" | "autoFocus" | "className" | "style" | "tabIndex" | "children" | "divider" | "action" | "dense" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "selected" | "disableGutters">, "color" | "content" | "translate" | "disabled" | "sx" | "classes" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "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" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "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" | "ref" | "divider" | "action" | "dense" | "key" | "value" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "selected" | "disableGutters"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').MenuItemOwnerState> & Record<string, unknown> & {
4
- ownerState: Partial<import('..').MenuItemOwnerState> & Record<string, unknown>;
5
- }, {}, {}>;
6
- export declare const MenuItemIcon: 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
- ownerState: Partial<import('..').MenuItemOwnerState> & Record<string, unknown>;
8
- }, {}, {}>;
9
- export declare const SkeletonMenuItem: 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
- ownerState: Partial<import('..').MenuItemOwnerState> & Record<string, unknown>;
11
- }, {}, {}>;
@@ -1,2 +0,0 @@
1
- export * from './';
2
- export { MenuItemSlots } from './MenuItemEnum';
@@ -1,41 +0,0 @@
1
- import { MenuItemProps as MUIMenuItemProps, Theme, PaletteColor } from '@mui/material';
2
- import { OverridesStyleRules } from '@mui/material/styles/overrides';
3
- import { Sizes, ComponentPalletColor } from '@m4l/styles';
4
- import { MenuItemSlots } from './slots';
5
- import { MENUITEM_KEY_COMPONENT } from './constants';
6
- /**
7
- * Props para el componente `MenuItem`, extendiendo las propiedades originales de Material UI.
8
- * Omit<MUIMenuItemProps, 'size' | 'color'>
9
- * [icon] - Prop opcional para el ícono mostrado en el `MenuItem`.
10
- * label - Texto que describe el `MenuItem`.
11
- * [selected] - Indica si el item está seleccionado.
12
- * [componentPaletteColor] - Personalización del color de la paleta del componente.
13
- * [color] - Define el color del `MenuItem` (solo 'primary' permitido).
14
- * [disabled] - Indica si el `MenuItem` está deshabilitado.
15
- * [size] - Tamaño del `MenuItem` (por defecto 'medium').
16
- */
17
- export interface MenuItemProps extends Omit<MUIMenuItemProps, 'size' | 'color'> {
18
- icon?: string;
19
- label: string;
20
- selected?: boolean;
21
- componentPaletteColor?: ComponentPalletColor;
22
- color?: Extract<ComponentPalletColor, 'primary'>;
23
- disabled?: boolean;
24
- size?: Sizes;
25
- }
26
- /**
27
- * Estado del propietario del `MenuItem` utilizado para definir propiedades internas de estilo y comportamiento.
28
- * Pick<MenuItemProps, 'size' | 'componentPaletteColor' | 'disabled' | 'selected'>
29
- * paletteColor - Define el color de la paleta aplicada al `MenuItem`.
30
- */
31
- export interface MenuItemOwnerState extends Pick<MenuItemProps, 'size' | 'componentPaletteColor' | 'disabled' | 'selected'> {
32
- paletteColor: PaletteColor;
33
- }
34
- /**
35
- * Define los tipos de Slots disponibles para el `MenuItem`.
36
- */
37
- export type MenuItemSlotsType = keyof typeof MenuItemSlots;
38
- /**
39
- * Estilos aplicables al `MenuItem` utilizando temas y slots personalizados.
40
- */
41
- export type MenuItemStyles = Partial<OverridesStyleRules<MenuItemSlotsType, typeof MENUITEM_KEY_COMPONENT, Theme> | undefined> | undefined;
@@ -1,9 +0,0 @@
1
- import { SelectProps } from './types';
2
- /**
3
- * Select component is an extended version of Material UI Select, which offers additional features such as size control, color palette customization, and icon support.
4
- * @author Bruce Escobar - automatic
5
- * @createdAt 2024-10-22 10:30:26 - automatic
6
- * @updatedAt 2024-10-22 10:31:35 - automatic
7
- * @updatedUser Bruce Escobar - automatic
8
- */
9
- export declare const Select: (props: SelectProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,2 +0,0 @@
1
- import { SelectStyles } from './types';
2
- export declare const selectStyles: SelectStyles;
@@ -1,8 +0,0 @@
1
- /**
2
- * Clave de identificación del componente Select dentro del sistema.
3
- *
4
- * Esta constante se utiliza como identificador único para asociar y personalizar estilos y configuraciones
5
- * relacionadas con el componente `Select` dentro del sistema de temas y estilos.
6
- * @default 'M4LSelect'
7
- */
8
- export declare const SELECT_KEY_COMPONENT = "M4LSelect";
@@ -1,2 +0,0 @@
1
- export * from './Select';
2
- export * from './types';
@@ -1,6 +0,0 @@
1
- export declare enum SelectSlots {
2
- selectRoot = "selectRoot",
3
- rowIconSelect = "rowIconSelect",
4
- menuItemSelect = "menuItemSelect",
5
- skeletonSelect = "skeletonMenuItem"
6
- }
@@ -1,12 +0,0 @@
1
- export declare const SelectRoot: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').SelectProps<unknown>, "color" | "content" | "translate" | "margin" | "size" | "disabled" | "sx" | "classes" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "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" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "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" | "components" | "componentsProps" | "onClose" | "onOpen" | "open" | "slotProps" | "slots" | "ref" | "error" | "name" | "multiple" | "input" | "label" | "value" | "type" | "variant" | "autoComplete" | "placeholder" | "readOnly" | "required" | "rows" | "fullWidth" | "inputProps" | "inputRef" | "disableInjectingGlobalStyles" | "endAdornment" | "inputComponent" | "multiline" | "renderSuffix" | "maxRows" | "minRows" | "startAdornment" | "disableUnderline" | "autoWidth" | "defaultOpen" | "displayEmpty" | "IconComponent" | "labelId" | "MenuProps" | "native" | "renderValue" | "SelectDisplayProps"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').SelectOwnerState> & Record<string, unknown> & {
2
- ownerState: Partial<import('..').SelectOwnerState> & Record<string, unknown>;
3
- }, {}, {}>;
4
- export declare const RowIconSelect: import('@emotion/styled').StyledComponent<Pick<import('../../../Icon').IconProps, keyof import('../../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').SelectOwnerState> & Record<string, unknown> & {
5
- ownerState: Partial<import('..').SelectOwnerState> & Record<string, unknown>;
6
- }, {}, {}>;
7
- export declare const MenuItemSelect: import('@emotion/styled').StyledComponent<Pick<import('../../MenuItem').MenuItemProps, keyof import('../../MenuItem').MenuItemProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').SelectOwnerState> & Record<string, unknown> & {
8
- ownerState: Partial<import('..').SelectOwnerState> & Record<string, unknown>;
9
- }, {}, {}>;
10
- export declare const SkeletonSelect: import('@emotion/styled').StyledComponent<Pick<import('../../Skeleton/types').SkeletonProps, keyof import('../../Skeleton/types').SkeletonProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').SelectOwnerState> & Record<string, unknown> & {
11
- ownerState: Partial<import('..').SelectOwnerState> & Record<string, unknown>;
12
- }, {}, {}>;
@@ -1,2 +0,0 @@
1
- export * from './';
2
- export { SelectSlots } from './SelectEnum';
@@ -1,74 +0,0 @@
1
- import { Meta, StoryObj } from '@storybook/react';
2
- import { Select } from '../Select';
3
- declare const meta: Meta<typeof Select>;
4
- export default meta;
5
- type Story = StoryObj<typeof Select>;
6
- /**
7
- * Historia base del componente Select.
8
- * Utiliza el tamaño 'medium' y una lista de opciones predefinidas.
9
- * El color del componente es 'primary' y tiene un evento onChange
10
- * que maneja el cambio de la selección.
11
- * - name: Nombre del input del componente.
12
- * - size: Tamaño del select, se puede usar 'small' o 'medium' (en este caso 'medium').
13
- * - options: Lista de opciones disponibles para seleccionar en el componente, en sus propiedades puede llegara "icono" que es la url del icono que se visualizara en las opciones.
14
- * - color: Color del select, con valor por defecto 'primary'.
15
- * - componentPaletteColor: Paleta de colores personalizada para el select (en este caso 'primary').
16
- * - onChange: Función callback que maneja el evento cuando el usuario selecciona una opción.
17
- * @author Bruce Escobar - automatic
18
- * @createdAt 2024-10-22 10:38:00 - automatic
19
- * @updatedAt 2024-10-22 10:39:38 - automatic
20
- * @updatedUser Bruce Escobar - automatic
21
- */
22
- export declare const Base: Story;
23
- /**
24
- * Historia select con valor seleccionado sin icono, los argumentos son los mismos de la historia Base
25
- * @createdAt 2024-10-22 10:38:00 - automatic
26
- */
27
- export declare const SelectWithoutIcon: Story;
28
- /**
29
- * Historia select con valor seleccionado con icono, los argumentos son los mismos de la historia Base
30
- * @createdAt 2024-10-22 10:38:00 - automatic
31
- */
32
- export declare const SelectWithIcon: Story;
33
- /**
34
- *Historia select hover con valor seleccionado sin icono, los argumentos son los mismos de la historia Base
35
- * @createdAt 2024-10-22 10:38:00 - automatic
36
- */
37
- export declare const SelectWithHoverWithoutIcon: Story;
38
- /**
39
- *Historia select hover con valor seleccionado con icono, los argumentos son los mismos de la historia Base
40
- * @createdAt 2024-10-22 10:38:00 - automatic
41
- */
42
- export declare const SelectWithHoverWithIcon: Story;
43
- /**
44
- *Historia select focus con valor seleccionado sin icono, los argumentos son los mismos de la historia Base
45
- * @createdAt 2024-10-22 10:38:00 - automatic
46
- */
47
- export declare const SelectWithFocusWithoutIcon: Story;
48
- /**
49
- *Historia select focus con valor seleccionado con icono, los argumentos son los mismos de la historia Base
50
- * @createdAt 2024-10-22 10:38:00 - automatic
51
- */
52
- export declare const SelectWithFocusWithIcon: Story;
53
- /**
54
- * Historias select con estado error,
55
- * @createdAt 2024-10-22 10:39:37 - automatic
56
- * @createdAt 2024-10-22 10:39:37 - automatic
57
- */
58
- export declare const SelectWithErrorWithoutIcon: Story;
59
- export declare const SelectWithErrorWithIcon: Story;
60
- export declare const SelectErrorWithHoverWithoutIcon: Story;
61
- export declare const SelectErrorWithHoverWithIcon: Story;
62
- /**
63
- * Historias select con estado error,
64
- */
65
- export declare const SelectDisabledWithoutIcon: Story;
66
- /**
67
- * Historia select disabled con icono en el item
68
- * @createdAt 2024-10-22 10:38:00 - automatic
69
- */
70
- export declare const SelectDisabledWithIcon: Story;
71
- /**
72
- * Select in skeleton mode
73
- */
74
- export declare const WithSkeleton: Story;
@@ -1,25 +0,0 @@
1
- import { Meta, StoryObj } from '@storybook/react';
2
- import { Select } from '../Select';
3
- declare const meta: Meta<typeof Select>;
4
- type Story = StoryObj<typeof Select>;
5
- /**
6
- * Base Select component
7
- */
8
- export declare const Base: Story;
9
- export declare const SelectWithoutIcon: Story;
10
- export declare const SelectWithIcon: Story;
11
- export declare const SelectWithHoverWithoutIcon: Story;
12
- export declare const SelectWithHoverWithIcon: Story;
13
- export declare const SelectWithFocusWithoutIcon: Story;
14
- export declare const SelectWithFocusWithIcon: Story;
15
- export declare const SelectWithErrorWithoutIcon: Story;
16
- export declare const SelectWithErrorWithIcon: Story;
17
- export declare const SelectErrorWithHoverWithoutIcon: Story;
18
- export declare const SelectErrorWithHoverWithIcon: Story;
19
- export declare const SelectDisabledWithoutIcon: Story;
20
- export declare const SelectDisabledWithIcon: Story;
21
- /**
22
- * Select in skeleton mode
23
- */
24
- export declare const WithSkeleton: Story;
25
- export default meta;
@@ -1,66 +0,0 @@
1
- import { SelectProps as MUISelectProps } from '@mui/material/Select';
2
- import { Theme, PaletteColor } from '@mui/material';
3
- import { OverridesStyleRules } from '@mui/material/styles/overrides';
4
- import { Sizes, ComponentPalletColor } from '@m4l/styles';
5
- import { SELECT_KEY_COMPONENT } from './constants';
6
- import { SelectSlots } from './slots';
7
- /**
8
- * Representa una opción dentro del Select.
9
- * id - Identificador único de la opción. Puede ser número o string.
10
- * label - Texto que representa la opción.
11
- * [icon] - (Opcional) URL del ícono asociado a la opción.
12
- * @createdAt 2024-10-22 10:30:26 - automatic
13
- */
14
- export type selectOption = {
15
- id: number | string;
16
- label: string;
17
- icon?: string;
18
- };
19
- /**
20
- * Propiedades que acepta el componente `Select`, extendiendo las propiedades de Material-UI `SelectProps`.
21
- * [id] - Identificador opcional del componente.
22
- * [size] - Tamaño del Select, valores posibles: 'small', 'medium', etc.
23
- * [src] - Fuente opcional, si es aplicable.
24
- * options - Array de opciones que recibirá el Select.
25
- * value - Valor o valores seleccionados.
26
- * onChange - Función que se ejecuta al cambiar la selección.
27
- * [multiple] - Define si el Select es de selección múltiple.
28
- * [disabled] - Establece si el Select está deshabilitado.
29
- * [error] - Define si el Select está en estado de error.
30
- * [componentPaletteColor] - Personaliza el color del componente.
31
- * [color] - Define el color del Select.
32
- * variant - Variante del Select.
33
- * @author Bruce Escobar - automatic
34
- * @createdAt 2024-10-22 10:30:26 - automatic
35
- * @updatedAt 2024-10-22 10:31:36 - automatic
36
- * @updatedUser Bruce Escobar - automatic
37
- */
38
- export interface SelectProps extends Omit<MUISelectProps, 'size' | 'onChange' | 'value' | 'error'> {
39
- id?: string;
40
- size?: Sizes;
41
- src?: string;
42
- options: Array<selectOption>;
43
- value: number | string | string[] | number[];
44
- onChange: (options: selectOption | selectOption[]) => void;
45
- multiple?: boolean;
46
- disabled?: boolean;
47
- error?: boolean;
48
- componentPaletteColor?: ComponentPalletColor;
49
- color?: Extract<ComponentPalletColor, 'primary'>;
50
- variant: 'standard' | 'outlined';
51
- }
52
- /**
53
- * Propiedades internas que definen el estado del componente `Select`.
54
- * paletteColor - Color de la paleta aplicado al Select.
55
- */
56
- export interface SelectOwnerState extends Pick<SelectProps, 'classes' | 'size' | 'error' | 'componentPaletteColor' | 'variant' | 'disabled'> {
57
- paletteColor: PaletteColor;
58
- }
59
- /**
60
- * Define los tipos de slots disponibles en el Select.
61
- */
62
- export type SelectSlotsType = keyof typeof SelectSlots;
63
- /**
64
- * Estilos aplicables al componente Select.
65
- */
66
- export type SelectStyles = Partial<OverridesStyleRules<SelectSlotsType, typeof SELECT_KEY_COMPONENT, Theme> | undefined> | undefined;