@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.
- package/@types/types.d.ts +2 -26
- package/components/mui_extended/IconButton/IconButton.d.ts +1 -5
- package/components/mui_extended/IconButton/IconButton.js +61 -26
- package/components/mui_extended/IconButton/IconButton.styles.js +4 -1
- package/components/mui_extended/IconButton/slots/IconButtonEnum.d.ts +2 -1
- package/components/mui_extended/IconButton/slots/IconButtonEnum.js +1 -0
- package/components/mui_extended/IconButton/slots/IconButtonSlots.d.ts +3 -0
- package/components/mui_extended/IconButton/slots/IconButtonSlots.js +7 -1
- package/components/mui_extended/IconButton/types.d.ts +46 -2
- package/package.json +1 -1
- package/components/mui_extended/MenuItem/MenuItem.d.ts +0 -11
- package/components/mui_extended/MenuItem/MenuItem.stories.d.ts +0 -37
- package/components/mui_extended/MenuItem/MenuItem.styles.d.ts +0 -2
- package/components/mui_extended/MenuItem/constants.d.ts +0 -8
- package/components/mui_extended/MenuItem/index.d.ts +0 -2
- package/components/mui_extended/MenuItem/slots/MenuItemEnum.d.ts +0 -5
- package/components/mui_extended/MenuItem/slots/MenuItemSlots.d.ts +0 -11
- package/components/mui_extended/MenuItem/slots/index.d.ts +0 -2
- package/components/mui_extended/MenuItem/types.d.ts +0 -41
- package/components/mui_extended/Select/Select.d.ts +0 -9
- package/components/mui_extended/Select/Select.styles.d.ts +0 -2
- package/components/mui_extended/Select/constants.d.ts +0 -8
- package/components/mui_extended/Select/index.d.ts +0 -2
- package/components/mui_extended/Select/slots/SelectEnum.d.ts +0 -6
- package/components/mui_extended/Select/slots/SelectSlots.d.ts +0 -12
- package/components/mui_extended/Select/slots/index.d.ts +0 -2
- package/components/mui_extended/Select/stories/SelectOutlied.stories.d.ts +0 -74
- package/components/mui_extended/Select/stories/SelectStandar.stories.d.ts +0 -25
- 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
|
-
*
|
|
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(
|
|
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
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
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
|
-
|
|
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:
|
|
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
|
|
@@ -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
|
-
|
|
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
|
-
|
|
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,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,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,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,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,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,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,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;
|