@m4l/components 9.1.11 → 9.1.13
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/Icon/Icon.d.ts +1 -1
- package/components/Icon/Icon.js +2 -2
- package/components/WindowBase/WindowBase.styles.js +21 -11
- package/components/WindowBase/tests/WindowBase.test.d.ts +1 -0
- package/components/WindowConfirm/WindowConfirm.d.ts +1 -1
- package/components/WindowConfirm/WindowConfirm.js +3 -2
- package/components/WindowConfirm/slots/WindowConfirmSlots.d.ts +2 -2
- package/components/WindowConfirm/slots/WindowConfirmSlots.js +8 -10
- package/components/WindowConfirm/subcomponents/MessageIllustration/MessageIllustration.js +1 -1
- package/components/mui_extended/Autocomplete/slots /AutocompleteEnum.d.ts +1 -1
- package/components/mui_extended/Autocomplete/slots /AutocompleteSlots.d.ts +1 -4
- package/components/mui_extended/Autocomplete/types.d.ts +2 -1
- package/components/mui_extended/MenuItem/MenuItem.d.ts +2 -2
- package/components/mui_extended/MenuItem/MenuItem.js +11 -6
- package/components/mui_extended/MenuItem/MenuItem.styles.js +6 -6
- package/components/mui_extended/MenuItem/slots/MenuItemEnum.d.ts +3 -3
- package/components/mui_extended/MenuItem/slots/MenuItemEnum.js +3 -3
- package/components/mui_extended/MenuItem/slots/MenuItemSlots.js +6 -6
- package/components/mui_extended/Tab/Tab.styles.js +1 -2
- package/package.json +1 -1
- package/storybook/components/extended/mui/Autocomplete/AutoComple.stories.d.ts +3 -0
|
@@ -3,7 +3,7 @@ import { IconProps } from './types';
|
|
|
3
3
|
* Provee de un medio por el cual se carga un icono svg en la plataforma web, aporta su versión provisional de carga en red.
|
|
4
4
|
* @author Bruce Escobar - automatic
|
|
5
5
|
* @createdAt 2024-10-22 19:08:59 - automatic
|
|
6
|
-
* @updatedAt 2024-12-
|
|
6
|
+
* @updatedAt 2024-12-05 14:14:39 - automatic
|
|
7
7
|
* @updatedUser SebastianM - automatic
|
|
8
8
|
*/
|
|
9
9
|
export declare const Icon: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
|
package/components/Icon/Icon.js
CHANGED
|
@@ -3,7 +3,7 @@ import { useModuleSkeleton } from "@m4l/core";
|
|
|
3
3
|
import clsx from "clsx";
|
|
4
4
|
import { a as getPropDataTestId } from "../../test/getNameDataTestId.js";
|
|
5
5
|
import { I as ICON_PREFIX, a as ICON_KEY_COMPONENT } from "./constants.js";
|
|
6
|
-
import { a as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
|
|
6
|
+
import { a as getComponentClasses, g as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
|
|
7
7
|
import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
|
|
8
8
|
import { T as TooltipStyled, R as RootStyled, I as IconStyled, a as IconSkeletonStyled } from "./slots/IconSlots.js";
|
|
9
9
|
import { I as IconSlots } from "./slots/IconEnum.js";
|
|
@@ -66,7 +66,7 @@ const Icon = (props) => {
|
|
|
66
66
|
children: /* @__PURE__ */ jsx(
|
|
67
67
|
IconStyled,
|
|
68
68
|
{
|
|
69
|
-
className: classKey.icon,
|
|
69
|
+
className: clsx(classKey.icon, getComponentSlotRoot("M4LIconClass")),
|
|
70
70
|
role: "icon",
|
|
71
71
|
ownerState: { ...ownerState },
|
|
72
72
|
...getPropDataTestId(ICON_PREFIX, IconSlots.icon, instaceDataTestId)
|
|
@@ -3,7 +3,7 @@ const windowBaseStyles = {
|
|
|
3
3
|
* Styles for the window base wrapper component.
|
|
4
4
|
* @author cesar - automatic
|
|
5
5
|
* @createdAt 2024-11-15 18:08:44 - automatic
|
|
6
|
-
* @updatedAt 2024-
|
|
6
|
+
* @updatedAt 2024-12-05 07:49:28 - automatic
|
|
7
7
|
* @updatedUser cesar - automatic
|
|
8
8
|
*/
|
|
9
9
|
wrapperWindowBase: ({ theme, ownerState }) => ({
|
|
@@ -25,7 +25,7 @@ const windowBaseStyles = {
|
|
|
25
25
|
* Styles for the content of the window base component.
|
|
26
26
|
* @author cesar - automatic
|
|
27
27
|
* @createdAt 2024-11-15 18:08:44 - automatic
|
|
28
|
-
* @updatedAt 2024-
|
|
28
|
+
* @updatedAt 2024-12-05 07:49:28 - automatic
|
|
29
29
|
* @updatedUser cesar - automatic
|
|
30
30
|
*/
|
|
31
31
|
contentWindowBase: ({ theme }) => ({
|
|
@@ -35,7 +35,7 @@ const windowBaseStyles = {
|
|
|
35
35
|
* Styles for the header of the window base component.
|
|
36
36
|
* @author cesar - automatic
|
|
37
37
|
* @createdAt 2024-11-15 18:08:44 - automatic
|
|
38
|
-
* @updatedAt 2024-
|
|
38
|
+
* @updatedAt 2024-12-05 07:49:28 - automatic
|
|
39
39
|
* @updatedUser cesar - automatic
|
|
40
40
|
*/
|
|
41
41
|
headerWindowComponent: ({ theme, ownerState }) => ({
|
|
@@ -71,7 +71,7 @@ const windowBaseStyles = {
|
|
|
71
71
|
* Styles for the content of the header of the window base component.
|
|
72
72
|
* @author cesar - automatic
|
|
73
73
|
* @createdAt 2024-11-15 18:08:44 - automatic
|
|
74
|
-
* @updatedAt 2024-
|
|
74
|
+
* @updatedAt 2024-12-05 07:49:28 - automatic
|
|
75
75
|
* @updatedUser cesar - automatic
|
|
76
76
|
*/
|
|
77
77
|
headerContentWindowBase: ({ theme }) => ({
|
|
@@ -86,7 +86,7 @@ const windowBaseStyles = {
|
|
|
86
86
|
* Styles for the title of the header of the window base component.
|
|
87
87
|
* @author cesar - automatic
|
|
88
88
|
* @createdAt 2024-11-15 18:08:44 - automatic
|
|
89
|
-
* @updatedAt 2024-
|
|
89
|
+
* @updatedAt 2024-12-05 07:49:28 - automatic
|
|
90
90
|
* @updatedUser cesar - automatic
|
|
91
91
|
*/
|
|
92
92
|
headerTitleWindowBase: ({ theme }) => ({
|
|
@@ -98,7 +98,7 @@ const windowBaseStyles = {
|
|
|
98
98
|
* Styles for the subtitle container of the header of the window base component.
|
|
99
99
|
* @author cesar - automatic
|
|
100
100
|
* @createdAt 2024-11-15 18:08:44 - automatic
|
|
101
|
-
* @updatedAt 2024-
|
|
101
|
+
* @updatedAt 2024-12-05 07:49:28 - automatic
|
|
102
102
|
* @updatedUser cesar - automatic
|
|
103
103
|
*/
|
|
104
104
|
subtitleContainer: ({ theme }) => ({
|
|
@@ -113,7 +113,7 @@ const windowBaseStyles = {
|
|
|
113
113
|
* @returns An object containing the styles for the dot window base component.
|
|
114
114
|
* @author cesar - automatic
|
|
115
115
|
* @createdAt 2024-11-22 19:40:23 - automatic
|
|
116
|
-
* @updatedAt 2024-
|
|
116
|
+
* @updatedAt 2024-12-05 07:49:28 - automatic
|
|
117
117
|
* @updatedUser cesar - automatic
|
|
118
118
|
*/
|
|
119
119
|
pointWindowBase: ({ theme, ownerState }) => ({
|
|
@@ -140,7 +140,7 @@ const windowBaseStyles = {
|
|
|
140
140
|
* Styles for the subtitle of the header of the window base component.
|
|
141
141
|
* @author cesar - automatic
|
|
142
142
|
* @createdAt 2024-11-15 18:08:44 - automatic
|
|
143
|
-
* @updatedAt 2024-
|
|
143
|
+
* @updatedAt 2024-12-05 07:49:28 - automatic
|
|
144
144
|
* @updatedUser cesar - automatic
|
|
145
145
|
*/
|
|
146
146
|
headerSubTitleWindowBase: ({ theme }) => ({
|
|
@@ -152,7 +152,7 @@ const windowBaseStyles = {
|
|
|
152
152
|
* Styles for the icon of the header of the window base component.
|
|
153
153
|
* @author cesar - automatic
|
|
154
154
|
* @createdAt 2024-11-18 08:11:19 - automatic
|
|
155
|
-
* @updatedAt 2024-
|
|
155
|
+
* @updatedAt 2024-12-05 07:49:28 - automatic
|
|
156
156
|
* @updatedUser cesar - automatic
|
|
157
157
|
*/
|
|
158
158
|
headerIconWindowBase: ({ theme }) => ({
|
|
@@ -166,7 +166,7 @@ const windowBaseStyles = {
|
|
|
166
166
|
* Styles for the icons wrapper of the window base component.
|
|
167
167
|
* @author cesar - automatic
|
|
168
168
|
* @createdAt 2024-11-18 08:11:19 - automatic
|
|
169
|
-
* @updatedAt 2024-
|
|
169
|
+
* @updatedAt 2024-12-05 07:49:28 - automatic
|
|
170
170
|
* @updatedUser cesar - automatic
|
|
171
171
|
*/
|
|
172
172
|
iconsWrapperWindowBase: () => ({
|
|
@@ -177,7 +177,7 @@ const windowBaseStyles = {
|
|
|
177
177
|
* Styles for the dot icon of the window base component.
|
|
178
178
|
* @author cesar - automatic
|
|
179
179
|
* @createdAt 2024-11-22 19:40:23 - automatic
|
|
180
|
-
* @updatedAt 2024-
|
|
180
|
+
* @updatedAt 2024-12-05 07:49:28 - automatic
|
|
181
181
|
* @updatedUser cesar - automatic
|
|
182
182
|
*/
|
|
183
183
|
pointIcon: ({ theme, ownerState }) => ({
|
|
@@ -197,6 +197,16 @@ const windowBaseStyles = {
|
|
|
197
197
|
height: theme.vars.size.desktop.medium.base
|
|
198
198
|
}
|
|
199
199
|
}
|
|
200
|
+
}),
|
|
201
|
+
/**
|
|
202
|
+
* Styles for the menu actions of the window base component.
|
|
203
|
+
* @author cesar - automatic
|
|
204
|
+
* @createdAt 2024-12-05 07:49:27 - automatic
|
|
205
|
+
* @updatedAt 2024-12-05 07:49:28 - automatic
|
|
206
|
+
* @updatedUser cesar - automatic
|
|
207
|
+
*/
|
|
208
|
+
menuActionsWindowBase: () => ({
|
|
209
|
+
left: "-50px"
|
|
200
210
|
})
|
|
201
211
|
};
|
|
202
212
|
export {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -22,7 +22,7 @@ import { WindowConfirmProps } from './types';
|
|
|
22
22
|
* />
|
|
23
23
|
* @author SebastianM - automatic
|
|
24
24
|
* @createdAt 2024-11-06 09:00:05 - automatic
|
|
25
|
-
* @updatedAt 2024-
|
|
25
|
+
* @updatedAt 2024-12-04 16:53:46 - automatic
|
|
26
26
|
* @updatedUser cesar - automatic
|
|
27
27
|
*/
|
|
28
28
|
export declare const WindowConfirm: (props: WindowConfirmProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -8,7 +8,8 @@ import { W as WINDOW_CONFIRM_KEY_COMPONENT } from "./constants.js";
|
|
|
8
8
|
import { g as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
|
|
9
9
|
import clsx from "clsx";
|
|
10
10
|
import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
|
|
11
|
-
import { W as
|
|
11
|
+
import { W as WindowBase } from "../WindowBase/WindowBase.js";
|
|
12
|
+
import { W as WindowConfirmRootStyled, a as WindowConfirmContentStyled, M as MessageIllustrationStyled, A as ActionsContainerStyled, b as ActionCancelStyled, c as ActionIntroStyled } from "./slots/WindowConfirmSlots.js";
|
|
12
13
|
import { W as WindowConfirmSlots } from "./slots/WindowConfirmEnum.js";
|
|
13
14
|
const WindowConfirm = (props) => {
|
|
14
15
|
const {
|
|
@@ -51,7 +52,7 @@ const WindowConfirm = (props) => {
|
|
|
51
52
|
};
|
|
52
53
|
const { color } = getVariantMapping(variant);
|
|
53
54
|
const mappedVariant = getVariantMapping(variant).color;
|
|
54
|
-
return /* @__PURE__ */ jsx(AppearanceComponentProvider, { defaultSize: currentSize, children: /* @__PURE__ */ jsx(
|
|
55
|
+
return /* @__PURE__ */ jsx(AppearanceComponentProvider, { defaultSize: currentSize, children: /* @__PURE__ */ jsx(WindowBase, { variant: "text", title: getLabel("modal_dialog.label_window_confirm"), onClose: () => closeModal(), children: /* @__PURE__ */ jsx(
|
|
55
56
|
WindowConfirmRootStyled,
|
|
56
57
|
{
|
|
57
58
|
className: clsx(getComponentSlotRoot(WINDOW_CONFIRM_KEY_COMPONENT)),
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
export declare const WindowBaseRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').OwnerStateWindowConfirm> & Record<string, unknown> & {
|
|
2
2
|
ownerState: Partial<import('..').OwnerStateWindowConfirm> & Record<string, unknown>;
|
|
3
3
|
}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
|
|
4
|
-
export declare const WrapperWindowBaseStyled: import('@emotion/styled').StyledComponent<
|
|
4
|
+
export declare const WrapperWindowBaseStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').OwnerStateWindowConfirm> & Record<string, unknown> & {
|
|
5
5
|
ownerState: Partial<import('..').OwnerStateWindowConfirm> & Record<string, unknown>;
|
|
6
|
-
},
|
|
6
|
+
}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
|
|
7
7
|
export declare const WindowConfirmRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').OwnerStateWindowConfirm> & Record<string, unknown> & {
|
|
8
8
|
ownerState: Partial<import('..').OwnerStateWindowConfirm> & Record<string, unknown>;
|
|
9
9
|
}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
|
|
@@ -2,7 +2,6 @@ import { styled } from "@mui/material/styles";
|
|
|
2
2
|
import { W as WINDOW_CONFIRM_KEY_COMPONENT } from "../constants.js";
|
|
3
3
|
import { W as WindowConfirmSlots } from "./WindowConfirmEnum.js";
|
|
4
4
|
import { w as windowConfirmStyles } from "../WindowConfirm.styles.js";
|
|
5
|
-
import { W as WindowBase } from "../../WindowBase/WindowBase.js";
|
|
6
5
|
import { M as MessageIllustration } from "../subcomponents/MessageIllustration/MessageIllustration.js";
|
|
7
6
|
import { A as ActionsContainer } from "../../CommonActions/components/ActionsContainer/ActionsContainer.js";
|
|
8
7
|
import { A as ActionCancel } from "../../CommonActions/components/ActionCancel/ActionCancel.js";
|
|
@@ -13,7 +12,7 @@ styled("div", {
|
|
|
13
12
|
name: WINDOW_CONFIRM_KEY_COMPONENT,
|
|
14
13
|
slot: WindowConfirmSlots.windowBaseRoot
|
|
15
14
|
})(windowConfirmStyles?.windowBaseRoot);
|
|
16
|
-
|
|
15
|
+
styled("div", {
|
|
17
16
|
name: WINDOW_CONFIRM_KEY_COMPONENT,
|
|
18
17
|
slot: WindowConfirmSlots.wrapperWindowBase
|
|
19
18
|
})(windowConfirmStyles?.wrapperWindowBase);
|
|
@@ -66,12 +65,11 @@ export {
|
|
|
66
65
|
IllustrationContainerStyled as I,
|
|
67
66
|
MessageIllustrationStyled as M,
|
|
68
67
|
TextContentStyled as T,
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
MessageStyled as g
|
|
68
|
+
WindowConfirmRootStyled as W,
|
|
69
|
+
WindowConfirmContentStyled as a,
|
|
70
|
+
ActionCancelStyled as b,
|
|
71
|
+
ActionIntroStyled as c,
|
|
72
|
+
IllustrationIconStyled as d,
|
|
73
|
+
TitleStyled as e,
|
|
74
|
+
MessageStyled as f
|
|
77
75
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
2
|
import { useModuleDictionary, useEnvironment } from "@m4l/core";
|
|
3
3
|
import { d as dictionary } from "../../dictionary.js";
|
|
4
|
-
import { I as IllustrationContainerStyled,
|
|
4
|
+
import { I as IllustrationContainerStyled, d as IllustrationIconStyled, T as TextContentStyled, e as TitleStyled, f as MessageStyled } from "../../slots/WindowConfirmSlots.js";
|
|
5
5
|
const MessageIllustration = (props) => {
|
|
6
6
|
const { getLabel } = useModuleDictionary();
|
|
7
7
|
const {
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
export declare const AutocompleteRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').AutocompleteOwnerState> & Record<string, unknown> & {
|
|
2
|
-
ownerState: Partial<import('../types').AutocompleteOwnerState> & Record<string, unknown>;
|
|
3
|
-
}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
|
|
4
1
|
export declare const IconButtonStyled: import('@emotion/styled').StyledComponent<Pick<import('../../IconButton/types').IconButtonProps, keyof import('../../IconButton/types').IconButtonProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').AutocompleteOwnerState> & Record<string, unknown> & {
|
|
5
2
|
ownerState: Partial<import('../types').AutocompleteOwnerState> & Record<string, unknown>;
|
|
6
3
|
}, {}, {}>;
|
|
@@ -33,6 +30,6 @@ export declare const ImageStyled: import('@emotion/styled').StyledComponent<Pick
|
|
|
33
30
|
export declare const SkeletonAutocompleteStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Skeleton/types').SkeletonProps, keyof import('../../Skeleton/types').SkeletonProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').AutocompleteOwnerState> & Record<string, unknown> & {
|
|
34
31
|
ownerState: Partial<import('../types').AutocompleteOwnerState> & Record<string, unknown>;
|
|
35
32
|
}, {}, {}>;
|
|
36
|
-
export declare const
|
|
33
|
+
export declare const PopperComponentStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').PopperProps & import('react').RefAttributes<HTMLDivElement>, "children" | "ref" | "title" | "component" | "id" | "container" | "components" | "hidden" | "color" | "content" | "style" | "open" | "transition" | "className" | "onChange" | "sx" | "translate" | "slots" | "slotProps" | "slot" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "placement" | "componentsProps" | "disablePortal" | "keepMounted" | "anchorEl" | "modifiers" | "popperOptions" | "popperRef"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').AutocompleteOwnerState> & Record<string, unknown> & {
|
|
37
34
|
ownerState: Partial<import('../types').AutocompleteOwnerState> & Record<string, unknown>;
|
|
38
35
|
}, {}, {}>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AutocompleteChangeReason, AutocompleteCloseReason, AutocompleteFreeSoloValueMapping, AutocompleteInputChangeReason, AutocompleteValue, AutocompleteProps as MUIAutocompleteProps, Theme, PaletteColor } from '@mui/material';
|
|
1
|
+
import { AutocompleteChangeReason, AutocompleteCloseReason, AutocompleteFreeSoloValueMapping, AutocompleteInputChangeReason, AutocompleteValue, AutocompleteProps as MUIAutocompleteProps, Theme, PaletteColor, PopperProps } from '@mui/material';
|
|
2
2
|
import { ComponentPalletColor, Sizes } from '@m4l/styles';
|
|
3
3
|
import { ChangeEvent } from 'react';
|
|
4
4
|
import { TextFieldProps } from '../TextField/types';
|
|
@@ -14,6 +14,7 @@ export type AutocompleteType = 'text' | 'image';
|
|
|
14
14
|
* @createdAt 2024-11-28 17:06:36 - automatic
|
|
15
15
|
*/
|
|
16
16
|
export interface AutocompleteProps<T, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = true, FreeSolo extends boolean | undefined = false> extends Omit<MUIAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>, 'variant' | 'color' | 'size' | 'onChange' | 'value' | 'classes' | 'defaultValue' | 'onBlur' | 'onFocus' | 'autoComplete'>, Omit<TextFieldProps, 'label' | 'variant' | 'defaultValue' | 'classes' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'ref' | 'onChange'> {
|
|
17
|
+
popperProps?: Omit<PopperProps, 'color'>;
|
|
17
18
|
onFocus?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
|
|
18
19
|
autoComplete?: string;
|
|
19
20
|
/**
|
|
@@ -7,7 +7,7 @@ import { MenuItemProps } from './types';
|
|
|
7
7
|
* @returns
|
|
8
8
|
* @author Bruce Escobar - automatic
|
|
9
9
|
* @createdAt 2024-10-22 19:53:39 - automatic
|
|
10
|
-
* @updatedAt 2024-12-
|
|
11
|
-
* @updatedUser
|
|
10
|
+
* @updatedAt 2024-12-05 16:30:55 - automatic
|
|
11
|
+
* @updatedUser SebastianM - automatic
|
|
12
12
|
*/
|
|
13
13
|
export declare const MenuItem: (props: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { createElement } from "react";
|
|
3
|
-
import { useTheme } from "@mui/material";
|
|
4
3
|
import { useModuleSkeleton, getPropertyByString } from "@m4l/core";
|
|
4
|
+
import { useTheme } from "@mui/material";
|
|
5
5
|
import clsx from "clsx";
|
|
6
|
-
import { M as MenuItemSkeletonStyled, a as MenuItemRootStyled, b as MenuItemIconStyled } from "./slots/MenuItemSlots.js";
|
|
7
6
|
import { g as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
|
|
8
7
|
import { M as MENUITEM_KEY_COMPONENT } from "./constants.js";
|
|
8
|
+
import { M as MenuItemSkeletonStyled, a as MenuItemRootStyled, b as MenuItemIconStyled } from "./slots/MenuItemSlots.js";
|
|
9
9
|
import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
|
|
10
10
|
import { T as Typography } from "../Typography/Typography.js";
|
|
11
11
|
const MenuItem = (props) => {
|
|
@@ -38,7 +38,13 @@ const MenuItem = (props) => {
|
|
|
38
38
|
componentPaletteColor: color
|
|
39
39
|
};
|
|
40
40
|
if (isSkeleton) {
|
|
41
|
-
return /* @__PURE__ */ jsx(
|
|
41
|
+
return /* @__PURE__ */ jsx(
|
|
42
|
+
MenuItemSkeletonStyled,
|
|
43
|
+
{
|
|
44
|
+
"data-testid": "SkeletonMenuItem",
|
|
45
|
+
ownerState: { ...ownerState }
|
|
46
|
+
}
|
|
47
|
+
);
|
|
42
48
|
}
|
|
43
49
|
const renderIcon = (icon, instaceDataTestId, className) => {
|
|
44
50
|
if (!icon) {
|
|
@@ -70,9 +76,8 @@ const MenuItem = (props) => {
|
|
|
70
76
|
value,
|
|
71
77
|
ownerState: { ...ownerState },
|
|
72
78
|
disabled,
|
|
73
|
-
className: clsx("M4LMenuItemRoot",
|
|
74
|
-
"data-testid": "MenuItemRoot"
|
|
75
|
-
role: "menuitem"
|
|
79
|
+
className: clsx("M4LMenuItemRoot", classRoot),
|
|
80
|
+
"data-testid": "MenuItemRoot"
|
|
76
81
|
},
|
|
77
82
|
renderIcon(startIcon, "MenuItemStartIcon"),
|
|
78
83
|
/* @__PURE__ */ jsx(
|
|
@@ -3,10 +3,10 @@ const menuItemStyles = {
|
|
|
3
3
|
* Estilos para el contenedor de los items del menú
|
|
4
4
|
* @author Bruce Escobar - automatic
|
|
5
5
|
* @createdAt 2024-10-22 10:38:00 - automatic
|
|
6
|
-
* @updatedAt 2024-12-
|
|
6
|
+
* @updatedAt 2024-12-05 14:14:39 - automatic
|
|
7
7
|
* @updatedUser SebastianM - automatic
|
|
8
8
|
*/
|
|
9
|
-
|
|
9
|
+
menuItemRoot: ({ theme, ownerState }) => ({
|
|
10
10
|
width: "100%",
|
|
11
11
|
gap: theme.vars.size.baseSpacings.sp1,
|
|
12
12
|
padding: theme.vars.size.baseSpacings.sp1,
|
|
@@ -56,10 +56,10 @@ const menuItemStyles = {
|
|
|
56
56
|
* Estilos para el icono de los items del menú
|
|
57
57
|
* @author SebastianM - automatic
|
|
58
58
|
* @createdAt 2024-12-02 19:12:14 - automatic
|
|
59
|
-
* @updatedAt 2024-12-
|
|
59
|
+
* @updatedAt 2024-12-05 14:14:39 - automatic
|
|
60
60
|
* @updatedUser SebastianM - automatic
|
|
61
61
|
*/
|
|
62
|
-
|
|
62
|
+
menuItemIcon: ({ ownerState }) => ({
|
|
63
63
|
"&.M4LMenuItemEndIcon": {
|
|
64
64
|
marginLeft: "auto"
|
|
65
65
|
},
|
|
@@ -73,10 +73,10 @@ const menuItemStyles = {
|
|
|
73
73
|
* Estilos para el contenedor de los items del menú en skeleton
|
|
74
74
|
* @author Bruce Escobar - automatic
|
|
75
75
|
* @createdAt 2024-10-22 10:38:00 - automatic
|
|
76
|
-
* @updatedAt 2024-12-
|
|
76
|
+
* @updatedAt 2024-12-05 14:14:39 - automatic
|
|
77
77
|
* @updatedUser SebastianM - automatic
|
|
78
78
|
*/
|
|
79
|
-
|
|
79
|
+
skeletonMenuItem: ({ theme, ownerState }) => ({
|
|
80
80
|
width: "100%",
|
|
81
81
|
padding: theme.vars.size.baseSpacings.sp2,
|
|
82
82
|
borderRadius: theme.vars.size.borderRadius.r0,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
var MenuItemSlots = /* @__PURE__ */ ((MenuItemSlots2) => {
|
|
2
|
-
MenuItemSlots2["
|
|
3
|
-
MenuItemSlots2["
|
|
4
|
-
MenuItemSlots2["
|
|
2
|
+
MenuItemSlots2["menuItemRoot"] = "menuItemRoot";
|
|
3
|
+
MenuItemSlots2["menuItemIcon"] = "menuItemIcon";
|
|
4
|
+
MenuItemSlots2["skeletonMenuItem"] = "skeletonMenuItem";
|
|
5
5
|
return MenuItemSlots2;
|
|
6
6
|
})(MenuItemSlots || {});
|
|
7
7
|
export {
|
|
@@ -7,16 +7,16 @@ import { S as Skeleton } from "../../Skeleton/Skeleton.js";
|
|
|
7
7
|
import { I as Icon } from "../../../Icon/Icon.js";
|
|
8
8
|
const MenuItemRootStyled = styled(MenuItem, {
|
|
9
9
|
name: MENUITEM_KEY_COMPONENT,
|
|
10
|
-
slot: MenuItemSlots.
|
|
11
|
-
})(menuItemStyles?.
|
|
10
|
+
slot: MenuItemSlots.menuItemRoot
|
|
11
|
+
})(menuItemStyles?.menuItemRoot);
|
|
12
12
|
const MenuItemIconStyled = styled(Icon, {
|
|
13
13
|
name: MENUITEM_KEY_COMPONENT,
|
|
14
|
-
slot: MenuItemSlots.
|
|
15
|
-
})(menuItemStyles?.
|
|
14
|
+
slot: MenuItemSlots.menuItemIcon
|
|
15
|
+
})(menuItemStyles?.menuItemIcon);
|
|
16
16
|
const MenuItemSkeletonStyled = styled(Skeleton, {
|
|
17
17
|
name: MENUITEM_KEY_COMPONENT,
|
|
18
|
-
slot: MenuItemSlots.
|
|
19
|
-
})(menuItemStyles?.
|
|
18
|
+
slot: MenuItemSlots.skeletonMenuItem
|
|
19
|
+
})(menuItemStyles?.skeletonMenuItem);
|
|
20
20
|
export {
|
|
21
21
|
MenuItemSkeletonStyled as M,
|
|
22
22
|
MenuItemRootStyled as a,
|
|
@@ -87,9 +87,8 @@ const tabStyles = {
|
|
|
87
87
|
backgroundColor: !ownerState.disabled ? ownerState.paletteColor?.main : theme.vars.palette.text.secondary
|
|
88
88
|
},
|
|
89
89
|
"span": {
|
|
90
|
-
color: !ownerState.disabled ? theme.vars.palette.primary.main : theme.vars.palette.text.secondary
|
|
90
|
+
color: !ownerState.disabled ? theme.vars.palette.primary.main : theme.vars.palette.text.secondary
|
|
91
91
|
//ownerState.paletteColor?.main
|
|
92
|
-
prop1: "para evaluar"
|
|
93
92
|
},
|
|
94
93
|
// Efecto ripple en estado seleccionado
|
|
95
94
|
"& .MuiTouchRipple-root": {
|
package/package.json
CHANGED
|
@@ -15,3 +15,6 @@ export declare const TextSingle: Story;
|
|
|
15
15
|
export declare const TextMultiple: Story;
|
|
16
16
|
export declare const ImageSingle: Story;
|
|
17
17
|
export declare const ImageMultiple: Story;
|
|
18
|
+
export declare const Loading: Story;
|
|
19
|
+
export declare const Refresh: Story;
|
|
20
|
+
export declare const Skeleton: Story;
|