@m4l/components 9.1.42 → 9.1.43
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/components/mui_extended/Button/ButtonStyles.js +11 -11
- package/components/mui_extended/CircularProgress/CircularProgress.test.d.ts +1 -0
- package/components/mui_extended/MenuItem/MenuItem.styles.js +0 -12
- package/components/mui_extended/Select/Select.d.ts +7 -5
- package/components/mui_extended/Select/Select.test.d.ts +1 -0
- package/components/mui_extended/Select/dictionary.d.ts +3 -0
- package/components/mui_extended/Select/slots/SelectEnum.d.ts +7 -2
- package/components/mui_extended/Select/slots/SelectSlots.d.ts +16 -4
- package/components/mui_extended/Select/slots/index.d.ts +2 -2
- package/components/mui_extended/Select/types.d.ts +16 -14
- package/package.json +1 -1
- package/components/mui_extended/Select/stories/SelectOutlied.stories.d.ts +0 -75
- package/components/mui_extended/Select/stories/SelectStandar.stories.d.ts +0 -29
|
@@ -3,7 +3,7 @@ const buttonStyles = {
|
|
|
3
3
|
* Styles for the root element of the button component.
|
|
4
4
|
* @author SebastianM - automatic
|
|
5
5
|
* @createdAt 2024-11-06 07:42:00 - automatic
|
|
6
|
-
* @updatedAt 2024-
|
|
6
|
+
* @updatedAt 2024-12-18 17:33:44 - automatic
|
|
7
7
|
* @updatedUser SebastianM - automatic
|
|
8
8
|
*/
|
|
9
9
|
buttonRoot: ({ theme, ownerState }) => ({
|
|
@@ -38,7 +38,7 @@ const buttonStyles = {
|
|
|
38
38
|
borderColor: ownerState.paletteColor?.main,
|
|
39
39
|
backgroundColor: "transparent",
|
|
40
40
|
...ownerState.color === "default" && {
|
|
41
|
-
|
|
41
|
+
"& .M4LIconClass": {
|
|
42
42
|
backgroundColor: theme.vars.palette.text.primary
|
|
43
43
|
}
|
|
44
44
|
},
|
|
@@ -47,7 +47,7 @@ const buttonStyles = {
|
|
|
47
47
|
},
|
|
48
48
|
...ownerState.color === "warning" && {
|
|
49
49
|
color: ownerState.paletteColor?.active,
|
|
50
|
-
|
|
50
|
+
"& .M4LIconClass": {
|
|
51
51
|
backgroundColor: ownerState.paletteColor?.active
|
|
52
52
|
}
|
|
53
53
|
},
|
|
@@ -56,11 +56,11 @@ const buttonStyles = {
|
|
|
56
56
|
backgroundColor: ownerState.paletteColor?.hoverOpacity
|
|
57
57
|
},
|
|
58
58
|
"&:active": {
|
|
59
|
-
|
|
59
|
+
"& .M4LIconClass": {
|
|
60
60
|
backgroundColor: ownerState.paletteColor?.active
|
|
61
61
|
},
|
|
62
62
|
...ownerState.color === "default" && {
|
|
63
|
-
|
|
63
|
+
"& .M4LIconClass": {
|
|
64
64
|
backgroundColor: theme.vars.palette.text.primary
|
|
65
65
|
}
|
|
66
66
|
},
|
|
@@ -81,13 +81,13 @@ const buttonStyles = {
|
|
|
81
81
|
borderColor: ownerState.paletteColor?.main,
|
|
82
82
|
backgroundColor: "transparent",
|
|
83
83
|
...ownerState.color === "default" && {
|
|
84
|
-
|
|
84
|
+
"& .M4LIconClass": {
|
|
85
85
|
backgroundColor: theme.vars.palette.text.primary
|
|
86
86
|
}
|
|
87
87
|
},
|
|
88
88
|
...ownerState.color === "warning" && {
|
|
89
89
|
color: ownerState.paletteColor?.active,
|
|
90
|
-
|
|
90
|
+
"& .M4LIconClass": {
|
|
91
91
|
backgroundColor: ownerState.paletteColor?.active
|
|
92
92
|
}
|
|
93
93
|
},
|
|
@@ -96,11 +96,11 @@ const buttonStyles = {
|
|
|
96
96
|
backgroundColor: ownerState.paletteColor?.hoverOpacity
|
|
97
97
|
},
|
|
98
98
|
"&:active": {
|
|
99
|
-
|
|
99
|
+
"& .M4LIconClass": {
|
|
100
100
|
backgroundColor: ownerState.paletteColor?.active
|
|
101
101
|
},
|
|
102
102
|
...ownerState.color === "default" && {
|
|
103
|
-
|
|
103
|
+
"& .M4LIconClass": {
|
|
104
104
|
backgroundColor: theme.vars.palette.text.primary
|
|
105
105
|
}
|
|
106
106
|
},
|
|
@@ -145,7 +145,7 @@ const buttonStyles = {
|
|
|
145
145
|
* Styles for the text of the button component.
|
|
146
146
|
* @author SebastianM - automatic
|
|
147
147
|
* @createdAt 2024-11-07 18:00:35 - automatic
|
|
148
|
-
* @updatedAt 2024-
|
|
148
|
+
* @updatedAt 2024-12-18 17:33:44 - automatic
|
|
149
149
|
* @updatedUser SebastianM - automatic
|
|
150
150
|
*/
|
|
151
151
|
textButton: ({ theme, ownerState }) => ({
|
|
@@ -173,7 +173,7 @@ const buttonStyles = {
|
|
|
173
173
|
* Styles for the skeleton button component.
|
|
174
174
|
* @author SebastianM - automatic
|
|
175
175
|
* @createdAt 2024-11-06 10:12:30 - automatic
|
|
176
|
-
* @updatedAt 2024-
|
|
176
|
+
* @updatedAt 2024-12-18 17:33:44 - automatic
|
|
177
177
|
* @updatedUser SebastianM - automatic
|
|
178
178
|
*/
|
|
179
179
|
skeletonButton: ({ theme, ownerState }) => ({
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -5,18 +5,6 @@ const menuItemStyles = {
|
|
|
5
5
|
* @updatedAt 2024-12-27 08:28:36 - automatic
|
|
6
6
|
* @createdAt 2024-12-27 08:28:33 - automatic
|
|
7
7
|
* @author Andrés Quintero - automatic
|
|
8
|
-
* @updatedUser Andrés Quintero - automatic
|
|
9
|
-
* @updatedAt 2024-12-27 08:28:36 - automatic
|
|
10
|
-
* @createdAt 2024-12-27 08:27:31 - automatic
|
|
11
|
-
* @author Andrés Quintero - automatic
|
|
12
|
-
* @updatedUser Andrés Quintero - automatic
|
|
13
|
-
* @updatedAt 2024-12-27 08:28:36 - automatic
|
|
14
|
-
* @createdAt 2024-12-13 12:45:48 - automatic
|
|
15
|
-
* @author SebastianM - automatic
|
|
16
|
-
* @author Bruce Escobar - automatic
|
|
17
|
-
* @createdAt 2024-10-22 10:38:00 - automatic
|
|
18
|
-
* @updatedAt 2024-12-27 08:28:36 - automatic
|
|
19
|
-
* @updatedUser Andrés Quintero - automatic
|
|
20
8
|
*/
|
|
21
9
|
menuItemRoot: ({ theme, ownerState }) => ({
|
|
22
10
|
width: "100%",
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import { SelectProps } from './types';
|
|
2
2
|
/**
|
|
3
|
-
* Select component
|
|
4
|
-
* @
|
|
5
|
-
* @
|
|
6
|
-
* @
|
|
7
|
-
* @
|
|
3
|
+
* Select component for rendering a dropdown with various options.
|
|
4
|
+
* @param {SelectProps} props - The properties for the Select component.
|
|
5
|
+
* @returns {JSX.Element} The rendered Select component.
|
|
6
|
+
* @author SebastianM - automatic
|
|
7
|
+
* @createdAt 2024-12-23 10:47:53 - automatic
|
|
8
|
+
* @updatedAt 2024-12-30 16:12:59 - automatic
|
|
9
|
+
* @updatedUser SebastianM - automatic
|
|
8
10
|
*/
|
|
9
11
|
export declare const Select: (props: SelectProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
export declare enum SelectSlots {
|
|
2
2
|
selectRoot = "selectRoot",
|
|
3
|
-
|
|
3
|
+
iconButton = "iconButton",
|
|
4
4
|
menuItemSelect = "menuItemSelect",
|
|
5
|
-
skeletonSelect = "skeletonMenuItem"
|
|
5
|
+
skeletonSelect = "skeletonMenuItem",
|
|
6
|
+
renderOptionContainer = "renderOptionContainer",
|
|
7
|
+
labelOption = "labelOption",
|
|
8
|
+
labelPlaceholer = "labelPlaceholer",
|
|
9
|
+
menuOptions = "menuOptions",
|
|
10
|
+
menu = "menu"
|
|
6
11
|
}
|
|
@@ -1,12 +1,24 @@
|
|
|
1
|
-
export declare const
|
|
1
|
+
export declare const SelectRootStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').SelectProps<unknown>, "children" | "value" | "ref" | "onClose" | "title" | "size" | "name" | "error" | "input" | "rows" | "id" | "type" | "components" | "hidden" | "color" | "content" | "style" | "open" | "multiple" | "disabled" | "variant" | "margin" | "translate" | "sx" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "slot" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "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" | "componentsProps" | "onOpen" | "slotProps" | "slots" | "label" | "autoComplete" | "placeholder" | "readOnly" | "required" | "maxRows" | "fullWidth" | "inputProps" | "inputRef" | "multiline" | "minRows" | "disableInjectingGlobalStyles" | "endAdornment" | "inputComponent" | "renderSuffix" | "startAdornment" | "disableUnderline" | "native" | "autoWidth" | "defaultOpen" | "displayEmpty" | "IconComponent" | "labelId" | "MenuProps" | "renderValue" | "SelectDisplayProps"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').SelectOwnerState> & Record<string, unknown> & {
|
|
2
2
|
ownerState: Partial<import('..').SelectOwnerState> & Record<string, unknown>;
|
|
3
3
|
}, {}, {}>;
|
|
4
|
-
export declare const
|
|
4
|
+
export declare const IconButtonStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../IconButton/types').IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "children" | "value" | "title" | "component" | "size" | "name" | "id" | "type" | "selected" | "action" | "hidden" | "content" | "style" | "icon" | "tooltip" | "disabled" | "variant" | "translate" | "sx" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "slot" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "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" | "placement" | "form" | "src" | "rotationAngle" | "tooltipContent" | "instaceDataTestId" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "componentPaletteColor" | "badgeContent" | "dictionaryTooltipId" | keyof import('react').RefAttributes<HTMLButtonElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').SelectOwnerState> & Record<string, unknown> & {
|
|
5
5
|
ownerState: Partial<import('..').SelectOwnerState> & Record<string, unknown>;
|
|
6
6
|
}, {}, {}>;
|
|
7
|
-
export declare const
|
|
7
|
+
export declare const MenuItemSelectStyled: 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
8
|
ownerState: Partial<import('..').SelectOwnerState> & Record<string, unknown>;
|
|
9
9
|
}, {}, {}>;
|
|
10
|
-
export declare const
|
|
10
|
+
export declare const SkeletonSelectStyled: 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
|
+
}, {}, {}>;
|
|
13
|
+
export declare const RenderOptionContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').SelectOwnerState> & Record<string, unknown> & {
|
|
14
|
+
ownerState: Partial<import('..').SelectOwnerState> & Record<string, unknown>;
|
|
15
|
+
}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
|
|
16
|
+
export declare const MenuOptionsStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').SelectOwnerState> & Record<string, unknown> & {
|
|
17
|
+
ownerState: Partial<import('..').SelectOwnerState> & Record<string, unknown>;
|
|
18
|
+
}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
|
|
19
|
+
export declare const LabelOptionStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Typography/types').TypographyProps, keyof import('../../Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').SelectOwnerState> & Record<string, unknown> & {
|
|
20
|
+
ownerState: Partial<import('..').SelectOwnerState> & Record<string, unknown>;
|
|
21
|
+
}, {}, {}>;
|
|
22
|
+
export declare const LabelPlaceholerStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Typography/types').TypographyProps, keyof import('../../Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').SelectOwnerState> & Record<string, unknown> & {
|
|
11
23
|
ownerState: Partial<import('..').SelectOwnerState> & Record<string, unknown>;
|
|
12
24
|
}, {}, {}>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from './';
|
|
2
|
-
export
|
|
1
|
+
export * from './SelectEnum';
|
|
2
|
+
export * from './SelectSlots';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
+
import { ComponentPalletColor, Sizes } from '@m4l/styles';
|
|
2
|
+
import { PaletteColor, Theme } from '@mui/material';
|
|
1
3
|
import { SelectProps as MUISelectProps } from '@mui/material/Select';
|
|
2
|
-
import { Theme, PaletteColor } from '@mui/material';
|
|
3
4
|
import { OverridesStyleRules } from '@mui/material/styles/overrides';
|
|
4
|
-
import { Sizes, ComponentPalletColor } from '@m4l/styles';
|
|
5
5
|
import { SELECT_KEY_COMPONENT } from './constants';
|
|
6
6
|
import { SelectSlots } from './slots';
|
|
7
7
|
/**
|
|
@@ -12,9 +12,10 @@ import { SelectSlots } from './slots';
|
|
|
12
12
|
* @createdAt 2024-10-22 10:30:26 - automatic
|
|
13
13
|
*/
|
|
14
14
|
export type selectOption = {
|
|
15
|
-
id:
|
|
15
|
+
id: string;
|
|
16
16
|
label: string;
|
|
17
|
-
|
|
17
|
+
startAdornment?: string;
|
|
18
|
+
endAdornment?: string;
|
|
18
19
|
};
|
|
19
20
|
/**
|
|
20
21
|
* Propiedades que acepta el componente `Select`, extendiendo las propiedades de Material-UI `SelectProps`.
|
|
@@ -32,28 +33,29 @@ export type selectOption = {
|
|
|
32
33
|
* variant - Variante del Select.
|
|
33
34
|
* @author Bruce Escobar - automatic
|
|
34
35
|
* @createdAt 2024-10-22 10:30:26 - automatic
|
|
35
|
-
* @updatedAt 2024-
|
|
36
|
-
* @updatedUser
|
|
36
|
+
* @updatedAt 2024-12-30 16:12:59 - automatic
|
|
37
|
+
* @updatedUser SebastianM - automatic
|
|
37
38
|
*/
|
|
38
|
-
export interface SelectProps extends Omit<MUISelectProps, 'size' | 'onChange' | 'value' | 'error'> {
|
|
39
|
+
export interface SelectProps extends Omit<MUISelectProps, 'size' | 'onChange' | 'value' | 'error' | 'variant' | 'color'> {
|
|
39
40
|
id?: string;
|
|
40
|
-
size?: Sizes
|
|
41
|
+
size?: Extract<Sizes, 'small' | 'medium'>;
|
|
41
42
|
src?: string;
|
|
42
43
|
options: Array<selectOption>;
|
|
43
44
|
value: number | string | string[] | number[];
|
|
44
45
|
onChange: (options: selectOption | selectOption[]) => void;
|
|
45
|
-
multiple?: boolean;
|
|
46
46
|
disabled?: boolean;
|
|
47
47
|
error?: boolean;
|
|
48
|
-
|
|
49
|
-
color?: Extract<ComponentPalletColor, '
|
|
50
|
-
variant: '
|
|
48
|
+
placeholder?: string;
|
|
49
|
+
color?: Extract<ComponentPalletColor, 'default'>;
|
|
50
|
+
variant: 'text' | 'outlined';
|
|
51
|
+
className?: string;
|
|
51
52
|
}
|
|
52
53
|
/**
|
|
53
54
|
* Propiedades internas que definen el estado del componente `Select`.
|
|
54
55
|
* paletteColor - Color de la paleta aplicado al Select.
|
|
55
56
|
*/
|
|
56
|
-
export interface SelectOwnerState extends Pick<SelectProps, 'classes' | 'size' | 'error' | '
|
|
57
|
+
export interface SelectOwnerState extends Pick<SelectProps, 'classes' | 'size' | 'error' | 'color' | 'variant' | 'disabled'> {
|
|
58
|
+
dissabled?: boolean;
|
|
57
59
|
paletteColor: PaletteColor;
|
|
58
60
|
}
|
|
59
61
|
/**
|
|
@@ -63,4 +65,4 @@ export type SelectSlotsType = keyof typeof SelectSlots;
|
|
|
63
65
|
/**
|
|
64
66
|
* Estilos aplicables al componente Select.
|
|
65
67
|
*/
|
|
66
|
-
export type SelectStyles = Partial<OverridesStyleRules<SelectSlotsType, typeof SELECT_KEY_COMPONENT, Theme
|
|
68
|
+
export type SelectStyles = Partial<OverridesStyleRules<SelectSlotsType, typeof SELECT_KEY_COMPONENT, Theme>>;
|
package/package.json
CHANGED
|
@@ -1,75 +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 20:03:58 - 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 20:03:57 - automatic
|
|
56
|
-
* @createdAt 2024-10-22 10:39:37 - automatic
|
|
57
|
-
* @createdAt 2024-10-22 10:39:37 - automatic
|
|
58
|
-
*/
|
|
59
|
-
export declare const SelectWithErrorWithoutIcon: Story;
|
|
60
|
-
export declare const SelectWithErrorWithIcon: Story;
|
|
61
|
-
export declare const SelectErrorWithHoverWithoutIcon: Story;
|
|
62
|
-
export declare const SelectErrorWithHoverWithIcon: Story;
|
|
63
|
-
/**
|
|
64
|
-
* Historias select con estado error,
|
|
65
|
-
*/
|
|
66
|
-
export declare const SelectDisabledWithoutIcon: Story;
|
|
67
|
-
/**
|
|
68
|
-
* Historia select disabled con icono en el item
|
|
69
|
-
* @createdAt 2024-10-22 10:38:00 - automatic
|
|
70
|
-
*/
|
|
71
|
-
export declare const SelectDisabledWithIcon: Story;
|
|
72
|
-
/**
|
|
73
|
-
* Select in skeleton mode
|
|
74
|
-
*/
|
|
75
|
-
export declare const WithSkeleton: Story;
|
|
@@ -1,29 +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
|
-
* @author Bruce Escobar - automatic
|
|
8
|
-
* @createdAt 2024-10-22 20:03:57 - automatic
|
|
9
|
-
* @updatedAt 2024-10-22 20:03:58 - automatic
|
|
10
|
-
* @updatedUser Bruce Escobar - automatic
|
|
11
|
-
*/
|
|
12
|
-
export declare const Base: Story;
|
|
13
|
-
export declare const SelectWithoutIcon: Story;
|
|
14
|
-
export declare const SelectWithIcon: Story;
|
|
15
|
-
export declare const SelectWithHoverWithoutIcon: Story;
|
|
16
|
-
export declare const SelectWithHoverWithIcon: Story;
|
|
17
|
-
export declare const SelectWithFocusWithoutIcon: Story;
|
|
18
|
-
export declare const SelectWithFocusWithIcon: Story;
|
|
19
|
-
export declare const SelectWithErrorWithoutIcon: Story;
|
|
20
|
-
export declare const SelectWithErrorWithIcon: Story;
|
|
21
|
-
export declare const SelectErrorWithHoverWithoutIcon: Story;
|
|
22
|
-
export declare const SelectErrorWithHoverWithIcon: Story;
|
|
23
|
-
export declare const SelectDisabledWithoutIcon: Story;
|
|
24
|
-
export declare const SelectDisabledWithIcon: Story;
|
|
25
|
-
/**
|
|
26
|
-
* Select in skeleton mode
|
|
27
|
-
*/
|
|
28
|
-
export declare const WithSkeleton: Story;
|
|
29
|
-
export default meta;
|