@m4l/components 9.3.0-B23072025beta.2 → 9.3.0-BE24072025-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/components/NumberInput/NumberInput.styles.js +0 -1
  2. package/components/PaperForm/PaperForm.js +2 -1
  3. package/components/PaperForm/components/Header.js +10 -1
  4. package/components/PaperForm/styles.js +4 -1
  5. package/components/PropertyValue/PropertyValue.js +1 -1
  6. package/components/ToastContainer/ToastContainer.js +1 -0
  7. package/components/ToastContainer/ToastContainer.styles.js +122 -126
  8. package/components/ToastContainer/constants.d.ts +0 -670
  9. package/components/ToastContainer/constants.js +1 -672
  10. package/components/hook-form/RHFColorPicker/RHFColorPicker.styles.js +1 -2
  11. package/components/hook-form/RHFDateTime/RHFDateTime.styles.js +1 -2
  12. package/components/hook-form/RHFDateTime/styles.d.ts +1 -0
  13. package/components/hook-form/RHFNumberInput/RHFNumberInput.styles.js +1 -2
  14. package/components/hook-form/RHFPeriod/RHFPeriod.styles.js +5 -2
  15. package/components/hook-form/RHFPeriod/slots/RHFPeriodEnum.d.ts +1 -1
  16. package/components/hook-form/RHFPeriod/slots/RHFPeriodEnum.js +1 -1
  17. package/components/hook-form/RHFPeriod/slots/RHFPeriodSlots.d.ts +2 -2
  18. package/components/hook-form/RHFPeriod/slots/RHFPeriodSlots.js +6 -6
  19. package/components/hook-form/RHFPeriod/subcomponents/Period/Period.js +11 -13
  20. package/components/hook-form/RHFPeriod/subcomponents/Period/types.d.ts +2 -2
  21. package/components/hook-form/RHFSelect/RHFSelect.styles.js +1 -2
  22. package/components/hook-form/RHFSelect/slots/RHFSlots.d.ts +1 -1
  23. package/components/hook-form/RHFTextField/slots/RHFTextFieldSlots.d.ts +1 -1
  24. package/components/hook-form/RHFTextFieldPassword/slots/RHFTextFieldPasswordSlots.d.ts +1 -1
  25. package/components/mui_extended/Autocomplete/slots/AutocompleteSlots.d.ts +1 -1
  26. package/components/mui_extended/Button/ButtonStyles.js +0 -1
  27. package/components/mui_extended/MenuItem/MenuItem.styles.js +1 -2
  28. package/components/mui_extended/Select/index.d.ts +2 -2
  29. package/components/mui_extended/Select/slots/SelectSlots.d.ts +1 -1
  30. package/components/mui_extended/Select/slots/SelectSlots.js +1 -1
  31. package/components/mui_extended/TextField/slots/TextFieldSlots.d.ts +1 -1
  32. package/components/mui_extended/index.d.ts +1 -0
  33. package/index.js +21 -19
  34. package/package.json +1 -1
  35. package/storybook/components/paperForm/PaperForm.stories.d.ts +0 -4
  36. package/components/mui_extended/Select/types.js +0 -1
package/components/NumberInput/NumberInput.styles.js CHANGED
@@ -15,7 +15,6 @@ const numberInputStyles = {
15
15
  paddingLeft: theme.vars.size.baseSpacings.sp1,
16
16
  paddingRight: ownerState?.noButtons && theme.vars.size.baseSpacings.sp1,
17
17
  boxSizing: "border-box",
18
- overflow: "hidden",
19
18
  ...getHeightSizeStyles(
20
19
  theme.generalSettings.isMobile,
21
20
  ownerState?.size || "medium",
package/components/PaperForm/PaperForm.js CHANGED
@@ -29,8 +29,9 @@ function PaperForm(props) {
29
29
  const { currentSize } = useComponentSize(size);
30
30
  const paperFormRef = useRef(null);
31
31
  const rootClass = getComponentSlotRoot(PAPER_FORM_KEY);
32
+ const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
32
33
  const ownerState = {
33
- size: currentSize,
34
+ size: adjustedSize,
34
35
  color,
35
36
  isForm,
36
37
  paperFormVariant: variant
package/components/PaperForm/components/Header.js CHANGED
@@ -1,17 +1,26 @@
1
1
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
+ import { useModuleSkeleton } from "@m4l/core";
2
3
  import { H as HeaderStyled, I as IconStyled, T as TitleStyled } from "../slots/PaperFormSlots.js";
4
+ import { S as Skeleton } from "../../mui_extended/Skeleton/Skeleton.js";
3
5
  const Header = (props) => {
4
6
  const { urlIcon, title, size, dataTestId, color } = props;
7
+ const isSkeleton = useModuleSkeleton();
5
8
  const ownerState = {
6
9
  color
7
10
  };
11
+ const renderSkeleton = () => {
12
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
13
+ urlIcon ? /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: 16, height: 16 }) : null,
14
+ /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 80, height: 16 })
15
+ ] });
16
+ };
8
17
  const renderContentHeader = () => {
9
18
  return /* @__PURE__ */ jsxs(Fragment, { children: [
10
19
  urlIcon ? /* @__PURE__ */ jsx(IconStyled, { src: urlIcon, size }) : null,
11
20
  /* @__PURE__ */ jsx(TitleStyled, { variant: "bodyDens", size, children: title })
12
21
  ] });
13
22
  };
14
- return /* @__PURE__ */ jsx(HeaderStyled, { role: "heading", ownerState, ...process.env.NODE_ENV !== "production" ? { "data-testid": dataTestId } : {}, children: renderContentHeader() });
23
+ return /* @__PURE__ */ jsx(HeaderStyled, { role: "heading", ownerState, ...process.env.NODE_ENV !== "production" ? { "data-testid": dataTestId } : {}, children: isSkeleton ? renderSkeleton() : renderContentHeader() });
15
24
  };
16
25
  export {
17
26
  Header as H
package/components/PaperForm/styles.js CHANGED
@@ -58,7 +58,10 @@ const paperFormStyles = {
58
58
  * @param theme
59
59
  ***********************************************************
60
60
  */
61
- containerIcon: {},
61
+ containerIcon: () => ({
62
+ display: "grid",
63
+ placeItems: "center"
64
+ }),
62
65
  /**
63
66
  * ************************************************************
64
67
  * Estilos del contenido del componente PaperForm
package/components/PropertyValue/PropertyValue.js CHANGED
@@ -77,7 +77,7 @@ function PropertyValue(props) {
77
77
  children: [
78
78
  /* @__PURE__ */ jsxs(NameStyled, { ownerState, children: [
79
79
  renderIcon(),
80
- property && /* @__PURE__ */ jsx(
80
+ /* @__PURE__ */ jsx(
81
81
  Label,
82
82
  {
83
83
  size: currentSize,
package/components/ToastContainer/ToastContainer.js CHANGED
@@ -3,6 +3,7 @@ import { ToastContainer as ToastContainer$1 } from "react-toastify";
3
3
  import { D as DEFAULT_CLOSE_TIME, T as TOAST_KEY_COMPONENT } from "./constants.js";
4
4
  import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
5
5
  import { ModuleSkeletonProvider } from "@m4l/core";
6
+ import "react-toastify/dist/ReactToastify.min.css";
6
7
  import { R as RootStyled } from "./slots/toastContainerSlots.js";
7
8
  import { T as ToastContainerSlots } from "./slots/ToastContainerEnum.js";
8
9
  const ToastContainer = (props) => {
package/components/ToastContainer/ToastContainer.styles.js CHANGED
@@ -1,136 +1,132 @@
1
- import { a as TOAST_NATIVE_STYLES } from "./constants.js";
2
1
  const toastStyles = {
3
2
  /** Root del componente ToastContainer */
4
3
  root: ({ theme, ownerState }) => ({
5
- ...TOAST_NATIVE_STYLES,
6
- "&&&": {
7
- "--toastify-color-light": theme.vars.palette.background.default,
8
- "--toastify-color-dark": theme.vars.palette.background.default,
9
- "--toastify-color-info": theme.vars.palette.info.enabled,
10
- "--toastify-color-success": theme.vars.palette.success.enabled,
11
- "--toastify-color-warning": theme.vars.palette.warning.enabled,
12
- "--toastify-color-error": theme.vars.palette.error.enabled,
13
- "--toastify-color-transparent": "rgba(255, 255, 255, 0.7)",
14
- "--toastify-icon-color-info": "var(--toastify-color-info)",
15
- "--toastify-icon-color-success": "var(--toastify-color-success)",
16
- "--toastify-icon-color-warning": "var(--toastify-color-warning)",
17
- "--toastify-icon-color-error": "var(--toastify-color-error)",
18
- "--toastify-toast-width": "320px",
19
- "--toastify-toast-background": "#fff",
20
- "--toastify-toast-min-height": "64px",
21
- "--toastify-toast-max-height": "800px",
22
- "--toastify-font-family": "sans-serif",
23
- "--toastify-z-index": "9999",
24
- "--toastify-text-color-light": "#757575",
25
- "--toastify-text-color-dark": "#fff",
26
- //Used only for colored theme
27
- "--toastify-text-color-info": "#fff",
28
- "--toastify-text-color-success": "#fff",
29
- "--toastify-text-color-warning": "#fff",
30
- "--toastify-text-color-error": "#fff",
31
- "--toastify-spinner-color": "#616161",
32
- "--toastify-spinner-color-empty-area": "#e0e0e0",
33
- // Used when no type is provided
34
- // toast("**hello**")
35
- // '--toastify-color-progress-light': 'var(--toastify-color-info)',
36
- // // Used when no type is provided
37
- // '--toastify-color-progress-dark': 'var(--toastify-color-info)',
38
- // '--toastify-color-progress-info': 'var(--toastify-color-info)',
39
- // '--toastify-color-progress-success': 'var(--toastify-color-success)',
40
- // '--toastify-color-progress-warning': 'var(--toastify-color-warning)',
41
- // '--toastify-color-progress-error': 'var(--toastify-color-error)',
42
- "--toastify-toast-bd-radius": "8px",
43
- // used to control the opacity of the progress trail
44
- "--toastify-color-progress-bgo": ".2",
4
+ "--toastify-color-light": theme.vars.palette.background.default,
5
+ "--toastify-color-dark": theme.vars.palette.background.default,
6
+ "--toastify-color-info": theme.vars.palette.info.enabled,
7
+ "--toastify-color-success": theme.vars.palette.success.enabled,
8
+ "--toastify-color-warning": theme.vars.palette.warning.enabled,
9
+ "--toastify-color-error": theme.vars.palette.error.enabled,
10
+ "--toastify-color-transparent": "rgba(255, 255, 255, 0.7)",
11
+ "--toastify-icon-color-info": "var(--toastify-color-info)",
12
+ "--toastify-icon-color-success": "var(--toastify-color-success)",
13
+ "--toastify-icon-color-warning": "var(--toastify-color-warning)",
14
+ "--toastify-icon-color-error": "var(--toastify-color-error)",
15
+ "--toastify-toast-width": "320px",
16
+ "--toastify-toast-background": "#fff",
17
+ "--toastify-toast-min-height": "64px",
18
+ "--toastify-toast-max-height": "800px",
19
+ "--toastify-font-family": "sans-serif",
20
+ "--toastify-z-index": "9999",
21
+ "--toastify-text-color-light": "#757575",
22
+ "--toastify-text-color-dark": "#fff",
23
+ //Used only for colored theme
24
+ "--toastify-text-color-info": "#fff",
25
+ "--toastify-text-color-success": "#fff",
26
+ "--toastify-text-color-warning": "#fff",
27
+ "--toastify-text-color-error": "#fff",
28
+ "--toastify-spinner-color": "#616161",
29
+ "--toastify-spinner-color-empty-area": "#e0e0e0",
30
+ // Used when no type is provided
31
+ // toast("**hello**")
32
+ // '--toastify-color-progress-light': 'var(--toastify-color-info)',
33
+ // // Used when no type is provided
34
+ // '--toastify-color-progress-dark': 'var(--toastify-color-info)',
35
+ // '--toastify-color-progress-info': 'var(--toastify-color-info)',
36
+ // '--toastify-color-progress-success': 'var(--toastify-color-success)',
37
+ // '--toastify-color-progress-warning': 'var(--toastify-color-warning)',
38
+ // '--toastify-color-progress-error': 'var(--toastify-color-error)',
39
+ "--toastify-toast-bd-radius": "8px",
40
+ // used to control the opacity of the progress trail
41
+ "--toastify-color-progress-bgo": ".2",
42
+ ...ownerState?.fixed === false ? {
43
+ top: 0,
44
+ position: "absolute",
45
+ zIndex: theme.vars.zIndex.snackbar,
46
+ "@supports (position: sticky)": {
47
+ position: "sticky"
48
+ }
49
+ } : {},
50
+ "& .Toastify": {
51
+ margin: 0,
52
+ padding: 0,
53
+ height: 0
54
+ },
55
+ "& .Toastify__toast-container": {
56
+ display: "flex",
57
+ flexDirection: "column",
58
+ gap: "16px",
45
59
  ...ownerState?.fixed === false ? {
46
- top: 0,
47
- position: "absolute",
48
- zIndex: theme.vars.zIndex.snackbar,
49
- "@supports (position: sticky)": {
50
- position: "sticky"
51
- }
60
+ top: "20px",
61
+ position: "absolute"
52
62
  } : {},
53
- "& .Toastify": {
54
- margin: 0,
55
- padding: 0,
56
- height: 0
57
- },
58
- "& .Toastify__toast-container": {
59
- display: "flex",
60
- flexDirection: "column",
61
- gap: "16px",
62
- ...ownerState?.fixed === false ? {
63
- top: "20px",
64
- position: "absolute"
65
- } : {},
66
- [theme.breakpoints.down(480)]: {
67
- width: "100%",
68
- minWidth: "100%",
69
- padding: "0"
70
- }
71
- },
72
- /** Used to define the position of the ToastContainer */
73
- // '.Toastify__toast-container--top-left': {},
74
- // '.Toastify__toast-container--top-center': {},
75
- // '.Toastify__toast-container--top-right': {},
76
- // '.Toastify__toast-container--bottom-left': {},
77
- // '.Toastify__toast-container--bottom-center': {},
78
- // '.Toastify__toast-container--bottom-right': {},
79
- "& .Toastify__toast--stacked[data-collapsed=true]:not(:last-child) > *": {
80
- opacity: 0.2
81
- },
82
- /** Classes for the displayed toast */
83
- "& .Toastify__toast": {
84
- minHeight: "min-content",
85
- margin: "0",
86
- padding: "0",
87
- backgroundColor: theme.vars.palette.background.default,
88
- boxShadow: theme.customShadows?.z4,
89
- borderRadius: "4px",
90
- border: `1px solid ${theme.vars.palette.border.default}`,
91
- [theme.breakpoints.down(480)]: {
92
- margin: "1%",
93
- width: "98% !important"
94
- }
95
- },
96
- ".Toastify__toast--rtl": {},
97
- "& .Toastify__toast-body": {
98
- margin: "0px",
99
- padding: "0px"
100
- },
101
- /** Used to position the icon */
102
- // '& .Toastify__toast-icon': {},
103
- /** handle the notification color and the text color based on the theme */
104
- // '& .Toastify__toast-theme--dark': {},
105
- // '& .Toastify__toast-theme--light': {},
106
- // '& .Toastify__toast-theme--colored.Toastify__toast--default': {},
107
- // '& .Toastify__toast-theme--colored.Toastify__toast--info': {},
108
- // '& .Toastify__toast-theme--colored.Toastify__toast--success': {},
109
- // '& .Toastify__toast-theme--colored.Toastify__toast--warning': {},
110
- // '& .Toastify__toast-theme--colored.Toastify__toast--error': {},
111
- "& .Toastify__progress-bar--wrp": {
112
- position: "absolute",
113
- top: 0,
114
- height: "2px",
115
- borderTopLeftRadius: "2px",
116
- borderTopRightRadius: "2px",
117
- borderBottomLeftRadius: "0",
118
- borderBottomRightRadius: "0",
119
- overflow: "hidden"
120
- },
121
- "& .Toastify__progress-bar": {
122
- borderTopLeftRadius: "2px",
123
- borderBottomLeftRadius: "0",
124
- borderBottomRightRadius: "0"
63
+ [theme.breakpoints.down(480)]: {
64
+ width: "100%",
65
+ minWidth: "100%",
66
+ padding: "0"
67
+ }
68
+ },
69
+ /** Used to define the position of the ToastContainer */
70
+ // '.Toastify__toast-container--top-left': {},
71
+ // '.Toastify__toast-container--top-center': {},
72
+ // '.Toastify__toast-container--top-right': {},
73
+ // '.Toastify__toast-container--bottom-left': {},
74
+ // '.Toastify__toast-container--bottom-center': {},
75
+ // '.Toastify__toast-container--bottom-right': {},
76
+ "& .Toastify__toast--stacked[data-collapsed=true]:not(:last-child) > *": {
77
+ opacity: 0.2
78
+ },
79
+ /** Classes for the displayed toast */
80
+ "& .Toastify__toast": {
81
+ minHeight: "min-content",
82
+ margin: "0",
83
+ padding: "0",
84
+ backgroundColor: theme.vars.palette.background.default,
85
+ boxShadow: theme.customShadows?.z4,
86
+ borderRadius: "4px",
87
+ border: `1px solid ${theme.vars.palette.border.default}`,
88
+ [theme.breakpoints.down(480)]: {
89
+ margin: "1%",
90
+ width: "98% !important"
125
91
  }
126
- // '& .Toastify__progress-bar--rtl': {},
127
- // '& .Toastify__progress-bar-theme--light': {},
128
- // '& .Toastify__progress-bar-theme--dark': {},
129
- // '& .Toastify__progress-bar--info': {},
130
- // '& .Toastify__progress-bar--success': {},
131
- // '& .Toastify__progress-bar--warning': {},
132
- // '& .Toastify__progress-bar--error': {},
92
+ },
93
+ ".Toastify__toast--rtl": {},
94
+ "& .Toastify__toast-body": {
95
+ margin: "0px",
96
+ padding: "0px"
97
+ },
98
+ /** Used to position the icon */
99
+ // '& .Toastify__toast-icon': {},
100
+ /** handle the notification color and the text color based on the theme */
101
+ // '& .Toastify__toast-theme--dark': {},
102
+ // '& .Toastify__toast-theme--light': {},
103
+ // '& .Toastify__toast-theme--colored.Toastify__toast--default': {},
104
+ // '& .Toastify__toast-theme--colored.Toastify__toast--info': {},
105
+ // '& .Toastify__toast-theme--colored.Toastify__toast--success': {},
106
+ // '& .Toastify__toast-theme--colored.Toastify__toast--warning': {},
107
+ // '& .Toastify__toast-theme--colored.Toastify__toast--error': {},
108
+ "& .Toastify__progress-bar--wrp": {
109
+ position: "absolute",
110
+ top: 0,
111
+ height: "2px",
112
+ borderTopLeftRadius: "2px",
113
+ borderTopRightRadius: "2px",
114
+ borderBottomLeftRadius: "0",
115
+ borderBottomRightRadius: "0",
116
+ overflow: "hidden"
117
+ },
118
+ "& .Toastify__progress-bar": {
119
+ borderTopLeftRadius: "2px",
120
+ borderBottomLeftRadius: "0",
121
+ borderBottomRightRadius: "0"
133
122
  }
123
+ // '& .Toastify__progress-bar--rtl': {},
124
+ // '& .Toastify__progress-bar-theme--light': {},
125
+ // '& .Toastify__progress-bar-theme--dark': {},
126
+ // '& .Toastify__progress-bar--info': {},
127
+ // '& .Toastify__progress-bar--success': {},
128
+ // '& .Toastify__progress-bar--warning': {},
129
+ // '& .Toastify__progress-bar--error': {},
134
130
  }),
135
131
  /** 📦 Contenedor Principal del Toast 📦 */
136
132
  messageRoot: ({ theme }) => ({