@m4l/components 9.3.3 → 9.3.4

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 (32) hide show
  1. package/components/NumberInput/NumberInput.styles.js +1 -0
  2. package/components/PaperForm/PaperForm.js +1 -2
  3. package/components/PaperForm/components/Header.js +1 -10
  4. package/components/PaperForm/styles.js +1 -4
  5. package/components/PropertyValue/PropertyValue.js +1 -1
  6. package/components/ToastContainer/ToastContainer.js +0 -1
  7. package/components/ToastContainer/ToastContainer.styles.js +126 -122
  8. package/components/ToastContainer/constants.d.ts +670 -0
  9. package/components/ToastContainer/constants.js +672 -1
  10. package/components/hook-form/RHFColorPicker/RHFColorPicker.styles.js +2 -1
  11. package/components/hook-form/RHFDateTime/RHFDateTime.styles.js +2 -1
  12. package/components/hook-form/RHFNumberInput/RHFNumberInput.styles.js +2 -1
  13. package/components/hook-form/RHFPeriod/RHFPeriod.styles.js +2 -5
  14. package/components/hook-form/RHFPeriod/slots/RHFPeriodEnum.d.ts +1 -1
  15. package/components/hook-form/RHFPeriod/slots/RHFPeriodEnum.js +1 -1
  16. package/components/hook-form/RHFPeriod/slots/RHFPeriodSlots.d.ts +1 -1
  17. package/components/hook-form/RHFPeriod/slots/RHFPeriodSlots.js +6 -6
  18. package/components/hook-form/RHFPeriod/subcomponents/Period/Period.js +13 -11
  19. package/components/hook-form/RHFPeriod/subcomponents/Period/dictionary.js +1 -1
  20. package/components/hook-form/RHFPeriod/subcomponents/Period/types.d.ts +2 -2
  21. package/components/hook-form/RHFSelect/RHFSelect.styles.js +2 -1
  22. package/components/mui_extended/Button/ButtonStyles.js +2 -1
  23. package/components/mui_extended/IconButton/IconButton.styles.js +1 -1
  24. package/components/mui_extended/MenuItem/MenuItem.styles.js +2 -1
  25. package/components/mui_extended/TextField/constants.d.ts +5 -5
  26. package/components/mui_extended/TextField/constants.js +2 -2
  27. package/components/mui_extended/TextField/slots/TextFieldEnum.d.ts +1 -1
  28. package/components/mui_extended/TextField/slots/TextFieldEnum.js +8 -8
  29. package/index.js +8 -8
  30. package/package.json +1 -1
  31. package/storybook/components/paperForm/PaperForm.stories.d.ts +4 -0
  32. package/components/hook-form/RHFDateTime/styles.d.ts +0 -1
package/components/NumberInput/NumberInput.styles.js CHANGED
@@ -15,6 +15,7 @@ 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",
18
19
  ...getHeightSizeStyles(
19
20
  theme.generalSettings.isMobile,
20
21
  ownerState?.size || "medium",
package/components/PaperForm/PaperForm.js CHANGED
@@ -29,9 +29,8 @@ 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";
33
32
  const ownerState = {
34
- size: adjustedSize,
33
+ size: currentSize,
35
34
  color,
36
35
  isForm,
37
36
  paperFormVariant: variant
package/components/PaperForm/components/Header.js CHANGED
@@ -1,26 +1,17 @@
1
1
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
- import { useModuleSkeleton } from "@m4l/core";
3
2
  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";
5
3
  const Header = (props) => {
6
4
  const { urlIcon, title, size, dataTestId, color } = props;
7
- const isSkeleton = useModuleSkeleton();
8
5
  const ownerState = {
9
6
  color
10
7
  };
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
- };
17
8
  const renderContentHeader = () => {
18
9
  return /* @__PURE__ */ jsxs(Fragment, { children: [
19
10
  urlIcon ? /* @__PURE__ */ jsx(IconStyled, { src: urlIcon, size }) : null,
20
11
  /* @__PURE__ */ jsx(TitleStyled, { variant: "bodyDens", size, children: title })
21
12
  ] });
22
13
  };
23
- return /* @__PURE__ */ jsx(HeaderStyled, { role: "heading", ownerState, ...process.env.NODE_ENV !== "production" ? { "data-testid": dataTestId } : {}, children: isSkeleton ? renderSkeleton() : renderContentHeader() });
14
+ return /* @__PURE__ */ jsx(HeaderStyled, { role: "heading", ownerState, ...process.env.NODE_ENV !== "production" ? { "data-testid": dataTestId } : {}, children: renderContentHeader() });
24
15
  };
25
16
  export {
26
17
  Header as H
package/components/PaperForm/styles.js CHANGED
@@ -58,10 +58,7 @@ const paperFormStyles = {
58
58
  * @param theme
59
59
  ***********************************************************
60
60
  */
61
- containerIcon: () => ({
62
- display: "grid",
63
- placeItems: "center"
64
- }),
61
+ containerIcon: {},
65
62
  /**
66
63
  * ************************************************************
67
64
  * 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
- /* @__PURE__ */ jsx(
80
+ property && /* @__PURE__ */ jsx(
81
81
  Label,
82
82
  {
83
83
  size: currentSize,
package/components/ToastContainer/ToastContainer.js CHANGED
@@ -3,7 +3,6 @@ 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";
7
6
  import { R as RootStyled } from "./slots/toastContainerSlots.js";
8
7
  import { T as ToastContainerSlots } from "./slots/ToastContainerEnum.js";
9
8
  const ToastContainer = (props) => {
package/components/ToastContainer/ToastContainer.styles.js CHANGED
@@ -1,132 +1,136 @@
1
+ import { a as TOAST_NATIVE_STYLES } from "./constants.js";
1
2
  const toastStyles = {
2
3
  /** Root del componente ToastContainer */
3
4
  root: ({ theme, ownerState }) => ({
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",
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",
59
45
  ...ownerState?.fixed === false ? {
60
- top: "20px",
61
- position: "absolute"
46
+ top: 0,
47
+ position: "absolute",
48
+ zIndex: theme.vars.zIndex.snackbar,
49
+ "@supports (position: sticky)": {
50
+ position: "sticky"
51
+ }
62
52
  } : {},
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"
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"
91
125
  }
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"
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': {},
122
133
  }
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': {},
130
134
  }),
131
135
  /** 📦 Contenedor Principal del Toast 📦 */
132
136
  messageRoot: ({ theme }) => ({