@m4l/components 8.1.0-beta.devDaniel.inputNumberSpinner → 8.1.0-beta.devLeury.Select
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 +35 -16
- package/components/HelperError/HelperError.js +1 -2
- package/components/HelperError/types.d.ts +0 -4
- package/components/Label/Label.js +1 -9
- package/components/Label/types.d.ts +0 -4
- package/components/hook-form/RHFInputNumberSpinner/RHFInputNumberSpinner.d.ts +5 -0
- package/components/hook-form/RHFInputNumberSpinner/RHFInputNumberSpinner.stories.d.ts +21 -0
- package/components/hook-form/RHFInputNumberSpinner/RHFInputNumberSpinner.styles.d.ts +2 -0
- package/components/hook-form/RHFInputNumberSpinner/constants.d.ts +1 -0
- package/components/hook-form/RHFInputNumberSpinner/index.d.ts +1 -0
- package/components/hook-form/RHFInputNumberSpinner/slots/RHFInputNumberSpinnerSlots.d.ts +23 -0
- package/components/hook-form/RHFInputNumberSpinner/slots/RHFInputNumberSpinnnerEnum.d.ts +9 -0
- package/components/hook-form/RHFInputNumberSpinner/slots/index.d.ts +2 -0
- package/components/hook-form/RHFInputNumberSpinner/subcomponents/SkeletonSpinner/index.d.ts +4 -0
- package/components/hook-form/RHFInputNumberSpinner/types.d.ts +21 -0
- package/components/hook-form/RHFInputNumberSpinner/useRHFInputNumberSpinner.d.ts +13 -0
- package/components/mui_extended/MenuItem/MenuItem.d.ts +11 -0
- package/components/mui_extended/MenuItem/MenuItem.stories.d.ts +37 -0
- package/components/mui_extended/MenuItem/MenuItem.styles.d.ts +2 -0
- package/components/mui_extended/MenuItem/constants.d.ts +8 -0
- package/components/mui_extended/MenuItem/index.d.ts +2 -0
- package/components/mui_extended/MenuItem/slots/MenuItemEnum.d.ts +5 -0
- package/components/mui_extended/MenuItem/slots/MenuItemSlots.d.ts +11 -0
- package/components/mui_extended/MenuItem/slots/index.d.ts +2 -0
- package/components/mui_extended/MenuItem/types.d.ts +41 -0
- package/components/mui_extended/Select/Select.d.ts +9 -0
- package/components/mui_extended/Select/Select.styles.d.ts +2 -0
- package/components/mui_extended/Select/constants.d.ts +8 -0
- package/components/mui_extended/Select/index.d.ts +2 -0
- package/components/mui_extended/Select/slots/SelectEnum.d.ts +6 -0
- package/components/mui_extended/Select/slots/SelectSlots.d.ts +12 -0
- package/components/mui_extended/Select/slots/index.d.ts +2 -0
- package/components/mui_extended/Select/stories/SelectOutlied.stories.d.ts +74 -0
- package/components/mui_extended/Select/stories/SelectStandar.stories.d.ts +25 -0
- package/components/mui_extended/Select/types.d.ts +66 -0
- package/package.json +1 -1
- package/components/ControlIncrement/ControlIncrement.d.ts +0 -5
- package/components/ControlIncrement/ControlIncrement.styles.d.ts +0 -8
- package/components/ControlIncrement/constants.d.ts +0 -25
- package/components/ControlIncrement/slots/ControlIncrementEnum.d.ts +0 -6
- package/components/ControlIncrement/slots/ControltrolIncrementSlots.d.ts +0 -14
- package/components/ControlIncrement/slots/index.d.ts +0 -2
- package/components/ControlIncrement/stories/ControlClick/ControlIncrement.controlclick.stories.d.ts +0 -13
- package/components/ControlIncrement/stories/DefaultAndDisabled/ControlIncrement.defaultanddisabled.stories.d.ts +0 -17
- package/components/ControlIncrement/stories/Sizes/ControlIncrement.sizes.stories.d.ts +0 -21
- package/components/ControlIncrement/types.d.ts +0 -56
- package/components/InputNumberSpinner/InputNumberSpinner.d.ts +0 -5
- package/components/InputNumberSpinner/InputNumberSpinner.styles.d.ts +0 -8
- package/components/InputNumberSpinner/constants.d.ts +0 -9
- package/components/InputNumberSpinner/hooks/types.d.ts +0 -13
- package/components/InputNumberSpinner/hooks/useInputNumberSpinner.d.ts +0 -19
- package/components/InputNumberSpinner/index.d.ts +0 -2
- package/components/InputNumberSpinner/slots/InputNumberSpinnerEnum.d.ts +0 -7
- package/components/InputNumberSpinner/slots/InputNumberSpinnerSlots.d.ts +0 -15
- package/components/InputNumberSpinner/slots/index.d.ts +0 -2
- package/components/InputNumberSpinner/stories/Default/InputNumberSpinner.default.stories.d.ts +0 -25
- package/components/InputNumberSpinner/stories/Error/InputNumberSpinner.error.stories.d.ts +0 -25
- package/components/InputNumberSpinner/stories/Sizes/InputNumberSpinner.sizes.stories.d.ts +0 -41
- package/components/InputNumberSpinner/stories/Variants/InputNumberSpinner.variants.stories.d.ts +0 -25
- package/components/InputNumberSpinner/types.d.ts +0 -64
package/@types/types.d.ts
CHANGED
|
@@ -9,6 +9,10 @@ import {
|
|
|
9
9
|
MenuActionsOwnerState,
|
|
10
10
|
MenuActionsSlotsType,
|
|
11
11
|
} from '../components/mui_extended/MenuActions/types';
|
|
12
|
+
import {
|
|
13
|
+
RHFInputNumberSpinnerOwnerState,
|
|
14
|
+
RHFInputNumberSpinnerSlotsType,
|
|
15
|
+
} from '../components/hook-form/RHFInputNumberSpinner/types';
|
|
12
16
|
|
|
13
17
|
import {
|
|
14
18
|
PopupViewerSlotsType,
|
|
@@ -36,10 +40,18 @@ import type {
|
|
|
36
40
|
} from '../components/mui_extended/IconButton/types';
|
|
37
41
|
|
|
38
42
|
import type { BadgeSlotsType, BadgeOwnerState } from '../components/mui_extended/Badge/types';
|
|
39
|
-
import { ControlIncrementOwnerState, ControlIncrementSlotsType } from '../components/ControlIncrement/types';
|
|
40
43
|
import { SkeletonOwnerState, SkeletonSlotsType } from '../components/mui_extended/Skeleton/types';
|
|
41
|
-
import {
|
|
42
|
-
|
|
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';
|
|
43
55
|
|
|
44
56
|
declare module '@mui/material/styles' {
|
|
45
57
|
// Define the slots in the theme
|
|
@@ -48,7 +60,7 @@ declare module '@mui/material/styles' {
|
|
|
48
60
|
RHFTextField: RHFTextFieldSlotsType;
|
|
49
61
|
M4LDynamicSort: DynamicSortSlotsType;
|
|
50
62
|
M4LMenuActions: MenuActionsSlotsType;
|
|
51
|
-
|
|
63
|
+
M4LRHFInputNumberSpinner: RHFInputNumberSpinnerSlotsType;
|
|
52
64
|
M4LPopupsViewer: PopupViewerSlotsType;
|
|
53
65
|
M4LIcon: IconSlotsType;
|
|
54
66
|
M4LDragResizeWindow: DragResizeWindowSlotsType;
|
|
@@ -58,8 +70,9 @@ declare module '@mui/material/styles' {
|
|
|
58
70
|
M4LTooltip: TooltipSlotsType;
|
|
59
71
|
M4LIconButton: IconButtonSlotsType;
|
|
60
72
|
M4LBadge: BadgeSlotsType;
|
|
61
|
-
|
|
73
|
+
M4LMenuItem: MenuItemSlotsType;
|
|
62
74
|
M4LSkeleton: SkeletonSlotsType;
|
|
75
|
+
M4LSelect: SelectSlotsType;
|
|
63
76
|
M4LTypography: TypographySlotsType;
|
|
64
77
|
}
|
|
65
78
|
|
|
@@ -69,7 +82,7 @@ declare module '@mui/material/styles' {
|
|
|
69
82
|
RHFTextField: Partial<RHFTextFieldOwnerState>;
|
|
70
83
|
M4LDynamicSort: Partial<DynamicSortOwnerState>;
|
|
71
84
|
M4LMenuActions: Partial<MenuActionsOwnerState>;
|
|
72
|
-
|
|
85
|
+
M4LRHFInputNumberSpinner: Partial<RHFInputNumberSpinnerOwnerState>;
|
|
73
86
|
M4LPopupsViewer: Partial<PopupsViewerOwnerState>;
|
|
74
87
|
M4LIcon: Partial<IconOwnerState>;
|
|
75
88
|
M4LDragResizeWindow: Partial<DragResizeWindowOwnerState>;
|
|
@@ -79,8 +92,9 @@ declare module '@mui/material/styles' {
|
|
|
79
92
|
M4LTooltip: Partial<TooltipOwnerState>;
|
|
80
93
|
M4LIconButton: Partial<IconButtonOwnerState>;
|
|
81
94
|
M4LBadge: Partial<BadgeOwnerState>;
|
|
82
|
-
|
|
95
|
+
M4LMenuItem: Partial<MenuItemOwnerState>;
|
|
83
96
|
M4LSkeleton: Partial<SkeletonOwnerState>;
|
|
97
|
+
M4LSelect: Partial<SelectOwnerState>;
|
|
84
98
|
M4LTypography: Partial<TypographyOwnerState>;
|
|
85
99
|
}
|
|
86
100
|
|
|
@@ -105,10 +119,10 @@ declare module '@mui/material/styles' {
|
|
|
105
119
|
styleOverrides?: ComponentsOverrides<Theme>['M4LMenuActions'];
|
|
106
120
|
variants?: ComponentsVariants['M4LMenuActions'];
|
|
107
121
|
};
|
|
108
|
-
|
|
109
|
-
defaultProps?: ComponentsPropsList['
|
|
110
|
-
styleOverrides?: ComponentsOverrides<Theme>['
|
|
111
|
-
variants?: ComponentsVariants['
|
|
122
|
+
M4LRHFInputNumberSpinner?: {
|
|
123
|
+
defaultProps?: ComponentsPropsList['M4LRHFInputNumberSpinner'];
|
|
124
|
+
styleOverrides?: ComponentsOverrides<Theme>['M4LRHFInputNumberSpinner'];
|
|
125
|
+
variants?: ComponentsVariants['M4LRHFInputNumberSpinner'];
|
|
112
126
|
};
|
|
113
127
|
M4LPopupsViewer?: {
|
|
114
128
|
defaultProps?: ComponentsPropsList['M4LPopupsViewer'];
|
|
@@ -155,20 +169,25 @@ declare module '@mui/material/styles' {
|
|
|
155
169
|
styleOverrides?: ComponentsOverrides<Theme>['M4LBadge'];
|
|
156
170
|
variants?: ComponentsVariants['M4LBadge'];
|
|
157
171
|
};
|
|
158
|
-
|
|
159
|
-
defaultProps?: ComponentsPropsList['
|
|
160
|
-
styleOverrides?: ComponentsOverrides<Theme>['
|
|
161
|
-
variants?: ComponentsVariants['
|
|
172
|
+
M4LMenuItem?: {
|
|
173
|
+
defaultProps?: ComponentsPropsList['M4LMenuItem'];
|
|
174
|
+
styleOverrides?: ComponentsOverrides<Theme>['M4LMenuItem'];
|
|
175
|
+
variants?: ComponentsVariants['M4LMenuItem'];
|
|
162
176
|
};
|
|
163
177
|
M4LSkeleton?: {
|
|
164
178
|
defaultProps?: ComponentsPropsList['M4LSkeleton'];
|
|
165
179
|
styleOverrides?: ComponentsOverrides<Theme>['M4LSkeleton'];
|
|
166
180
|
variants?: ComponentsVariants['M4LSkeleton'];
|
|
167
181
|
};
|
|
182
|
+
M4LSelect: {
|
|
183
|
+
defaultProps?: ComponentsPropsList['M4LSelect'];
|
|
184
|
+
styleOverrides?: ComponentsOverrides<Theme>['M4LSelect'];
|
|
185
|
+
variants?: ComponentsVariants['M4LSelect'];
|
|
186
|
+
};
|
|
168
187
|
M4LTypography?: {
|
|
169
188
|
defaultProps?: ComponentsPropsList['M4LTypography'];
|
|
170
189
|
styleOverrides?: ComponentsOverrides<Theme>['M4LTypography'];
|
|
171
190
|
variants?: ComponentsVariants['M4LTypography'];
|
|
172
|
-
}
|
|
191
|
+
};
|
|
173
192
|
}
|
|
174
193
|
}
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { T as TypographyStyled } from "./slots/HelperErrorSlots.js";
|
|
3
3
|
const HelperError = (props) => {
|
|
4
|
-
const { message = "", skeletonWidth
|
|
4
|
+
const { message = "", skeletonWidth } = props;
|
|
5
5
|
return /* @__PURE__ */ jsx(
|
|
6
6
|
TypographyStyled,
|
|
7
7
|
{
|
|
8
|
-
className,
|
|
9
8
|
ownerState: {},
|
|
10
9
|
variant: "body",
|
|
11
10
|
skeletonWidth,
|
|
@@ -12,10 +12,6 @@ export interface HelperErrorProps extends Pick<TypographyProps, 'skeletonWidth'>
|
|
|
12
12
|
* Mensaje que se visualiza en el componente HelperError.
|
|
13
13
|
*/
|
|
14
14
|
message: string | undefined;
|
|
15
|
-
/**
|
|
16
|
-
* Propiedad que permite administrar estilos para su uso en los slots
|
|
17
|
-
*/
|
|
18
|
-
className?: string;
|
|
19
15
|
}
|
|
20
16
|
/**
|
|
21
17
|
* Representa el estado del componente HelperError, incluyendo todas las propiedades de HelperErrorProps.
|
|
@@ -2,15 +2,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
|
2
2
|
import { useEnvironment, useModuleSkeleton } from "@m4l/core";
|
|
3
3
|
import { L as LabelRootStyled, T as TypographyStyled, a as TypographyMandatoryMessageStyled, I as IconHelperMessageStyled, S as SkeletonStyled } from "./slots/LabelSlots.js";
|
|
4
4
|
const Label = (props) => {
|
|
5
|
-
const {
|
|
6
|
-
helperMessage,
|
|
7
|
-
label,
|
|
8
|
-
mandatory,
|
|
9
|
-
mandatoryMessage,
|
|
10
|
-
htmlFor,
|
|
11
|
-
id,
|
|
12
|
-
size = "medium"
|
|
13
|
-
} = props;
|
|
5
|
+
const { helperMessage, label, mandatory, mandatoryMessage, htmlFor, id, size = "medium" } = props;
|
|
14
6
|
const { host_static_assets, environment_assets } = useEnvironment();
|
|
15
7
|
const isSkeleton = useModuleSkeleton();
|
|
16
8
|
return /* @__PURE__ */ jsx(LabelRootStyled, { ownerState: {}, htmlFor, id, label: "", children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
@@ -17,10 +17,6 @@ export interface LabelProps {
|
|
|
17
17
|
id?: string;
|
|
18
18
|
/** Define el tamaño de la etiqueta. Puede ser 'small' o 'medium'. Por defecto es 'medium'. */
|
|
19
19
|
size?: 'small' | 'medium';
|
|
20
|
-
/**
|
|
21
|
-
* Propiedad que permite administrar estilos para su uso en los slots
|
|
22
|
-
*/
|
|
23
|
-
className?: string;
|
|
24
20
|
}
|
|
25
21
|
export type OwnerState = Pick<LabelProps, 'size'>;
|
|
26
22
|
export interface LabelOwnerState extends LabelProps, OwnerState {
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { RHFInputNumberSpinner } from './RHFInputNumberSpinner';
|
|
3
|
+
declare const meta: Meta<typeof RHFInputNumberSpinner>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof RHFInputNumberSpinner>;
|
|
6
|
+
/**
|
|
7
|
+
* Base RHFInputNumberSpinner component
|
|
8
|
+
*/
|
|
9
|
+
export declare const Base: Story;
|
|
10
|
+
/**
|
|
11
|
+
* Base RHFInputNumberSpinner component
|
|
12
|
+
*/
|
|
13
|
+
export declare const Porcentaje: Story;
|
|
14
|
+
/**
|
|
15
|
+
* RHFInputNumberSpinner in skeleton mode
|
|
16
|
+
*/
|
|
17
|
+
export declare const WithSkeleton: Story;
|
|
18
|
+
/**
|
|
19
|
+
* RHFInputNumberSpinner in error state
|
|
20
|
+
*/
|
|
21
|
+
export declare const WithError: Story;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const RHF_INPUTNUMBER_SPINNER_KEY_COMPONENT = "M4LRHFInputNumberSpinner";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './RHFInputNumberSpinner';
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
export declare const RootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').RHFInputNumberSpinnerOwnerState> & Record<string, unknown> & {
|
|
2
|
+
ownerState: Partial<import('../types').RHFInputNumberSpinnerOwnerState> & Record<string, unknown>;
|
|
3
|
+
}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
|
|
4
|
+
export declare const InputStyled: import('@emotion/styled').StyledComponent<Pick<{
|
|
5
|
+
variant?: import('@mui/material').TextFieldVariants | undefined;
|
|
6
|
+
} & Omit<import('@mui/material').FilledTextFieldProps | import('@mui/material').StandardTextFieldProps | import('@mui/material').OutlinedTextFieldProps, "variant">, "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" | "ref" | "error" | "name" | "label" | "select" | "key" | "component" | "value" | "type" | "variant" | "autoComplete" | "placeholder" | "required" | "rows" | "fullWidth" | "inputProps" | "inputRef" | "SelectProps" | "multiline" | "maxRows" | "minRows" | "hiddenLabel" | "focused" | "InputProps" | "FormHelperTextProps" | "helperText" | "InputLabelProps"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').RHFInputNumberSpinnerOwnerState> & Record<string, unknown> & {
|
|
7
|
+
ownerState: Partial<import('../types').RHFInputNumberSpinnerOwnerState> & Record<string, unknown>;
|
|
8
|
+
}, {}, {}>;
|
|
9
|
+
export declare const ContainInputStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').RHFInputNumberSpinnerOwnerState> & Record<string, unknown> & {
|
|
10
|
+
ownerState: Partial<import('../types').RHFInputNumberSpinnerOwnerState> & Record<string, unknown>;
|
|
11
|
+
}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
|
|
12
|
+
export declare const SpanStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').RHFInputNumberSpinnerOwnerState> & Record<string, unknown> & {
|
|
13
|
+
ownerState: Partial<import('../types').RHFInputNumberSpinnerOwnerState> & Record<string, unknown>;
|
|
14
|
+
}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof import('react').ClassAttributes<HTMLSpanElement> | keyof import('react').HTMLAttributes<HTMLSpanElement>>, {}>;
|
|
15
|
+
export declare const ContainButtonStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').RHFInputNumberSpinnerOwnerState> & Record<string, unknown> & {
|
|
16
|
+
ownerState: Partial<import('../types').RHFInputNumberSpinnerOwnerState> & Record<string, unknown>;
|
|
17
|
+
}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
|
|
18
|
+
export declare const ButtonStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../mui_extended/Button').ButtonProps, keyof import('../../../mui_extended/Button').ButtonProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').RHFInputNumberSpinnerOwnerState> & Record<string, unknown> & {
|
|
19
|
+
ownerState: Partial<import('../types').RHFInputNumberSpinnerOwnerState> & Record<string, unknown>;
|
|
20
|
+
}, {}, {}>;
|
|
21
|
+
export declare const ActionsInputSkeletonStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../mui_extended/Button').ButtonProps, keyof import('../../../mui_extended/Button').ButtonProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').RHFInputNumberSpinnerOwnerState> & Record<string, unknown> & {
|
|
22
|
+
ownerState: Partial<import('../types').RHFInputNumberSpinnerOwnerState> & Record<string, unknown>;
|
|
23
|
+
}, {}, {}>;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { Theme } from '@mui/material/styles';
|
|
2
|
+
import { OverridesStyleRules } from '@mui/material/styles/overrides';
|
|
3
|
+
import { RHFInputNumberSpinnerSlots } from './slots/RHFInputNumberSpinnnerEnum';
|
|
4
|
+
import { RHF_INPUTNUMBER_SPINNER_KEY_COMPONENT } from './constants';
|
|
5
|
+
import { TextFieldProps } from '@mui/material';
|
|
6
|
+
export interface RHFInputNumberSpinnerProps extends Omit<TextFieldProps, 'variant' | 'onChange'> {
|
|
7
|
+
steps: number;
|
|
8
|
+
maxLength: number;
|
|
9
|
+
valueType: 'pt' | '%';
|
|
10
|
+
onChange?: (value: number) => void;
|
|
11
|
+
}
|
|
12
|
+
export interface OwnerState {
|
|
13
|
+
/**
|
|
14
|
+
* Variable para el cambio a error
|
|
15
|
+
*/
|
|
16
|
+
isValid?: boolean;
|
|
17
|
+
}
|
|
18
|
+
export interface RHFInputNumberSpinnerOwnerState extends RHFInputNumberSpinnerProps, OwnerState {
|
|
19
|
+
}
|
|
20
|
+
export type RHFInputNumberSpinnerSlotsType = keyof typeof RHFInputNumberSpinnerSlots;
|
|
21
|
+
export type RHFInputNumberSpinnerStyles = Partial<OverridesStyleRules<RHFInputNumberSpinnerSlots, typeof RHF_INPUTNUMBER_SPINNER_KEY_COMPONENT, Theme> | undefined> | undefined;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { default as React, ChangeEvent } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* TODO: Documentar
|
|
4
|
+
*/
|
|
5
|
+
export declare const useRHFInputNumberSpinner: (maxLength: number, steps: number | undefined, name: string) => {
|
|
6
|
+
control: import('react-hook-form').Control<import('react-hook-form').FieldValues, any>;
|
|
7
|
+
value: any;
|
|
8
|
+
handleChange: (e: ChangeEvent<HTMLInputElement>, field: any) => void;
|
|
9
|
+
handleButtonChange: (direction?: "up" | "down") => void;
|
|
10
|
+
mouseDownDirection: "down" | "up" | undefined;
|
|
11
|
+
setMouseDownDirection: React.Dispatch<React.SetStateAction<"down" | "up" | undefined>>;
|
|
12
|
+
isSkeleton: boolean;
|
|
13
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
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;
|
|
@@ -0,0 +1,37 @@
|
|
|
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;
|
|
@@ -0,0 +1,8 @@
|
|
|
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";
|
|
@@ -0,0 +1,11 @@
|
|
|
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
|
+
}, {}, {}>;
|
|
@@ -0,0 +1,41 @@
|
|
|
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;
|
|
@@ -0,0 +1,9 @@
|
|
|
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;
|
|
@@ -0,0 +1,8 @@
|
|
|
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";
|
|
@@ -0,0 +1,12 @@
|
|
|
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
|
+
}, {}, {}>;
|
|
@@ -0,0 +1,74 @@
|
|
|
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;
|