@m4l/components 9.3.27 → 9.3.28-JT10112025.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 (117) hide show
  1. package/components/Color/Color.js +32 -131
  2. package/components/Color/Color.styles.js +6 -124
  3. package/components/Color/slots/ColorEnum.d.ts +1 -3
  4. package/components/Color/slots/ColorEnum.js +1 -3
  5. package/components/Color/slots/ColorSlots.d.ts +3 -18
  6. package/components/Color/slots/ColorSlots.js +6 -19
  7. package/components/Color/types.d.ts +6 -7
  8. package/components/DataGrid/DataGrid.js +1 -1
  9. package/components/DataGrid/formatters/ColumnColorFormatter/formatter.d.ts +6 -0
  10. package/components/DataGrid/formatters/ColumnColorFormatter/formatter.js +19 -0
  11. package/components/DataGrid/formatters/ColumnColorFormatter/index.d.ts +3 -0
  12. package/components/DataGrid/formatters/ColumnColorFormatter/index.js +1 -0
  13. package/components/DataGrid/formatters/ColumnColorFormatter/types.d.ts +12 -0
  14. package/components/DataGrid/formatters/ColumnColorFormatter/types.js +1 -0
  15. package/components/DataGrid/formatters/ColumnColorFormatter/useColumnColor.d.ts +14 -0
  16. package/components/DataGrid/formatters/ColumnColorFormatter/useColumnColor.js +22 -0
  17. package/components/DataGrid/formatters/index.d.ts +1 -0
  18. package/components/DataGrid/tests/helpers/generators.d.ts +26 -0
  19. package/components/DataGrid/tests/helpers/types.d.ts +2 -0
  20. package/components/DynamicFilter/subcomponents/DynamicFilterBase/DynamicFilterBase.js +1 -1
  21. package/components/DynamicSort/subcomponents/AppliedSorts/AppliedSorts.js +1 -1
  22. package/components/DynamicSort/subcomponents/DynamicSortBase/DynamicSortBase.js +1 -1
  23. package/components/Icon/Icon.js +1 -1
  24. package/components/Image/Image.js +1 -1
  25. package/components/Image/subcomponents/IntersectComponent/index.js +1 -1
  26. package/components/ImageText/ImageText.js +1 -1
  27. package/components/LanguagePopover/LanguagePopover.js +1 -1
  28. package/components/LinearProgressIndeterminate/LinearProgressIndeterminate.js +1 -1
  29. package/components/LoadingError/LoadingError.js +1 -1
  30. package/components/NumberInput/NumberInput.js +1 -1
  31. package/components/ObjectLogs/subcomponents/ObjectLogsByM4L/ObjectLogsByM4L.js +1 -1
  32. package/components/ObjectLogs/subcomponents/ObjectLogsByOthers/ObjectLogsByOthers.js +1 -1
  33. package/components/PDFViewer/PDFViewer.js +1 -1
  34. package/components/PrintingSystem/PrintingSystem.js +1 -1
  35. package/components/PropertyValue/PropertyValue.js +1 -1
  36. package/components/ToastContainer/ToastContainer.js +1 -1
  37. package/components/WindowBase/WindowBase.js +1 -1
  38. package/components/WindowConfirm/WindowConfirm.js +1 -1
  39. package/components/areas/components/AreasAdmin/AreasAdmin.js +1 -1
  40. package/components/areas/components/AreasViewer/AreasViewer.js +1 -1
  41. package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/Window.js +1 -1
  42. package/components/commercial/TopBar/TopBar.js +1 -1
  43. package/components/commercial/TopBar/component/ConteinItem/index.js +1 -1
  44. package/components/commercial/TopBar/component/ConteinItem/subcomponets/NavItem/index.js +1 -1
  45. package/components/extended/React-Spinners/PropagateLoaderSpinner/PropagateLoaderSpinner.js +1 -1
  46. package/components/extended/React-resizable-panels/SplitLayout.js +1 -1
  47. package/components/formatters/BooleanFormatter/BooleanFormatter.js +1 -1
  48. package/components/formatters/ColorFormatter/ColorFormatter.d.ts +18 -0
  49. package/components/formatters/ColorFormatter/ColorFormatter.js +35 -0
  50. package/components/formatters/ColorFormatter/ColorFormatter.styles.d.ts +2 -0
  51. package/components/formatters/ColorFormatter/ColorFormatter.styles.js +6 -0
  52. package/components/formatters/ColorFormatter/constants.d.ts +1 -0
  53. package/components/formatters/ColorFormatter/constants.js +4 -0
  54. package/components/formatters/ColorFormatter/index.d.ts +3 -0
  55. package/components/formatters/ColorFormatter/index.js +1 -0
  56. package/components/formatters/ColorFormatter/slots/ColorFormatterEnum.d.ts +3 -0
  57. package/components/formatters/ColorFormatter/slots/ColorFormatterEnum.js +7 -0
  58. package/components/formatters/ColorFormatter/slots/ColorFormatterSlots.d.ts +4 -0
  59. package/components/formatters/ColorFormatter/slots/ColorFormatterSlots.js +11 -0
  60. package/components/formatters/ColorFormatter/types.d.ts +24 -0
  61. package/components/formatters/ColorFormatter/types.js +1 -0
  62. package/components/formatters/ConcatenatedFormatter/ConcatenatedFormatter.js +1 -1
  63. package/components/formatters/DateFormatter/DateFormatter.js +1 -1
  64. package/components/formatters/DistanceToNowFormatter/DistanceToNowFormatter.js +1 -1
  65. package/components/formatters/PeriodFormatter/PeriodFormatter.js +1 -1
  66. package/components/formatters/PointsFormatter/PointsFormatter.js +1 -1
  67. package/components/formatters/PriceFormatter/PriceFormatter.js +1 -1
  68. package/components/formatters/UncertaintyFormatter/UncertaintyFormatter.js +1 -1
  69. package/components/formatters/index.d.ts +1 -0
  70. package/components/hook-form/RHFColorPicker/RFHColorPicker.js +28 -36
  71. package/components/hook-form/RHFColorPicker/RHFColorPicker.styles.js +156 -0
  72. package/components/hook-form/RHFColorPicker/hooks/useColorPicker/index.d.ts +2 -0
  73. package/components/hook-form/RHFColorPicker/hooks/useColorPicker/types.d.ts +9 -0
  74. package/components/hook-form/RHFColorPicker/hooks/useColorPicker/useColorPicker.d.ts +41 -0
  75. package/components/hook-form/RHFColorPicker/hooks/useColorPicker/useColorPicker.js +50 -0
  76. package/components/hook-form/RHFColorPicker/slots/RHFColorPickerEnum.d.ts +4 -1
  77. package/components/hook-form/RHFColorPicker/slots/RHFColorPickerEnum.js +3 -0
  78. package/components/hook-form/RHFColorPicker/slots/RHFColorPickerSlots.d.ts +21 -0
  79. package/components/hook-form/RHFColorPicker/slots/RHFColorPickerSlots.js +19 -1
  80. package/components/hook-form/RHFColorPicker/slots/index.js +1 -0
  81. package/components/hook-form/RHFColorPicker/subcomponents/ColorPickerField/ColorPickerField.d.ts +33 -0
  82. package/components/hook-form/RHFColorPicker/subcomponents/ColorPickerField/ColorPickerField.js +147 -0
  83. package/components/hook-form/RHFColorPicker/subcomponents/ColorPickerField/index.d.ts +2 -0
  84. package/components/hook-form/RHFColorPicker/subcomponents/ColorPickerField/index.js +1 -0
  85. package/components/hook-form/RHFColorPicker/subcomponents/ColorPickerField/types.d.ts +20 -0
  86. package/components/hook-form/RHFColorPicker/subcomponents/ColorPickerField/types.js +1 -0
  87. package/components/hook-form/RHFDateTime/RHFDateTime.js +1 -1
  88. package/components/hook-form/RHFNumberInput/RHFNumberInput.js +1 -1
  89. package/components/hook-form/RHFPeriod/RHFPeriod.js +1 -1
  90. package/components/hook-form/RHFSelect/RHFSelect.js +1 -1
  91. package/components/hook-form/RHFTextField/RHFTextField.js +1 -1
  92. package/components/hook-form/RHFUpload/RHFUploadImage/subcomponents/UploadImage/UploadImage.js +1 -1
  93. package/components/hook-form/RHFUpload/RHFUploadSingleFile/RHFUploadSingleFile.js +1 -1
  94. package/components/mui_extended/Accordion/Accordion.js +1 -1
  95. package/components/mui_extended/Avatar/Avatar.js +1 -1
  96. package/components/mui_extended/Avatar/subcomponents/SkeletonAvatar/index.js +1 -1
  97. package/components/mui_extended/Badge/Badge.js +1 -1
  98. package/components/mui_extended/CircularProgress/CircularProgress.js +1 -1
  99. package/components/mui_extended/DateTimePicker/DateTimePicker.js +1 -1
  100. package/components/mui_extended/Dialog/Dialog.js +1 -1
  101. package/components/mui_extended/ImageButton/ImageButton.js +1 -1
  102. package/components/mui_extended/MenuDivider/MenuDivider.js +1 -1
  103. package/components/mui_extended/NavLink/NavLink.js +1 -1
  104. package/components/mui_extended/Popover/Popover.js +1 -1
  105. package/components/mui_extended/Select/Select.js +70 -28
  106. package/components/mui_extended/Select/Select.styles.js +41 -6
  107. package/components/mui_extended/Select/types.d.ts +6 -1
  108. package/components/mui_extended/Stack/Stack.js +1 -1
  109. package/components/mui_extended/TextField/TextField.js +1 -1
  110. package/components/mui_extended/ToggleButton/ToggleButton.js +1 -1
  111. package/components/mui_extended/ToggleIconButton/ToggleIconButton.js +1 -1
  112. package/components/mui_extended/Typography/Typography.js +1 -1
  113. package/components/popups/components/PopupsViewer/subcomponents/Popup/Popup.js +1 -1
  114. package/hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js +1 -1
  115. package/index.js +58 -52
  116. package/package.json +6 -4
  117. package/test/getNameDataTestId.js +2 -2
@@ -1,6 +1,6 @@
1
1
  import { jsxs, jsx } from "react/jsx-runtime";
2
2
  import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.js";
3
- import { a as getNameDataTestId } from "../../../test/getNameDataTestId.js";
3
+ import { g as getNameDataTestId } from "../../../test/getNameDataTestId.js";
4
4
  import { P as PATH_EXPANDED_ICON, A as ACCORDION_KEY } from "./constants.js";
5
5
  import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
6
6
  import { A as AccordionRootStyled, a as AccordionSummaryStyled, I as IconLabelStyled, L as LabelStyled, b as IconExpandedStyled, c as AccordionDetailsStyled } from "./slots/AccordionSlots.js";
@@ -3,7 +3,7 @@ import { forwardRef } from "react";
3
3
  import { useModuleSkeleton } from "@m4l/core";
4
4
  import { S as SkeletonAvatar } from "./subcomponents/SkeletonAvatar/index.js";
5
5
  import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.js";
6
- import { a as getNameDataTestId } from "../../../test/getNameDataTestId.js";
6
+ import { g as getNameDataTestId } from "../../../test/getNameDataTestId.js";
7
7
  import { A as AvatarRootStyled } from "./slots/AvatarSlots.js";
8
8
  import { A as AVATAR_KEY } from "./constants.js";
9
9
  import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
@@ -1,6 +1,6 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { T as TEST_PROP_ID } from "../../../../../test/constants_no_mock.js";
3
- import { a as getNameDataTestId } from "../../../../../test/getNameDataTestId.js";
3
+ import { g as getNameDataTestId } from "../../../../../test/getNameDataTestId.js";
4
4
  import { A as AVATAR_KEY } from "../../constants.js";
5
5
  import { S as Skeleton } from "../../../Skeleton/Skeleton.js";
6
6
  const SkeletonAvatar = (props) => {
@@ -1,5 +1,5 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
2
+ import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
3
3
  import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
4
4
  import { B as BADGE_LABEL_KEY_COMPONENT } from "./constants.js";
5
5
  import { B as BadgeRootStyled } from "./slots/BadgeSlots.js";
@@ -1,6 +1,6 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { useModuleSkeleton } from "@m4l/core";
3
- import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
3
+ import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
4
4
  import { S as SkeletonStyled, R as RootStyled } from "./slots/CircularProgressSlots.js";
5
5
  import { C as CircularProgressSlots } from "./slots/CircularProgressEnum.js";
6
6
  import { C as CIRCULAR_PROGRESS_PREFIX } from "./constants.js";
@@ -3,7 +3,7 @@ import clsx from "clsx";
3
3
  import { useMemo, useCallback } from "react";
4
4
  import { useEnvironment, useModuleSkeleton } from "@m4l/core";
5
5
  import { useIsMobile } from "@m4l/graphics";
6
- import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
6
+ import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
7
7
  import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
8
8
  import { P as PopperStyled, a as PickersCalendarHeaderStyled, I as IconButtonStyled, b as PickersDayStyled, c as PaperStyled, S as SkeletonStyled, M as MobileDateTimePickerRootStyled, D as DesktopDateTimePickerRootStyled } from "./slots/DateTimePickerSlots.js";
9
9
  import { d as date, c as chevron_right, a as chevron_left, b as chevron_down } from "./icons.js";
@@ -1,6 +1,6 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { forwardRef } from "react";
3
- import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
3
+ import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
4
4
  import { D as DIALOG_KEY_COMPONENT } from "./constants.js";
5
5
  import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
6
6
  import clsx from "clsx";
@@ -6,7 +6,7 @@ import { I as Image } from "../../Image/Image.js";
6
6
  import { W as WrapperImageButton } from "./styles.js";
7
7
  import { u as useUtilityClasses } from "./utils/Clases/index.js";
8
8
  import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.js";
9
- import { a as getNameDataTestId } from "../../../test/getNameDataTestId.js";
9
+ import { g as getNameDataTestId } from "../../../test/getNameDataTestId.js";
10
10
  import { I as IMAGE_BUTTON_KEY_COMPONENT } from "./tests/constants.js";
11
11
  function ImageButton({
12
12
  src,
@@ -4,7 +4,7 @@ import { M as MENU_DIVIDER_KEY_COMPONENT } from "./constants.js";
4
4
  import { M as MenuDividerRootStyled, D as DividerStyled } from "./slots/MenuDividerSlots.js";
5
5
  import { M as MenuDividerSlots } from "./slots/MenuDividerEnum.js";
6
6
  import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
7
- import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
7
+ import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
8
8
  import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
9
9
  const MenuDivider = (props) => {
10
10
  const {
@@ -4,7 +4,7 @@ import { useModuleSkeleton } from "@m4l/core";
4
4
  import { c as classNavLinkRoot, N as NAV_LINK_SPECIFY, a as NAV_LINK_KEY_COMPONENT } from "./constants.js";
5
5
  import { N as NavLinkSlots } from "./slots/NavLinkEnum.js";
6
6
  import { clsx } from "clsx";
7
- import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
7
+ import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
8
8
  import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
9
9
  const NavLink = (props) => {
10
10
  const {
@@ -1,5 +1,5 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
2
+ import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
3
3
  import { P as POPOVER_PREFIX, a as POPOVER_CLASS_NAME_SPECIFY } from "./constants.js";
4
4
  import clsx from "clsx";
5
5
  import { P as PopoverRootStyled } from "./slots/PopoverSlots.js";
@@ -1,12 +1,13 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { useEnvironment, useModuleSkeleton, useModuleDictionary } from "@m4l/core";
3
3
  import { useTheme } from "@mui/material";
4
+ import { useForkRef } from "@mui/material/utils";
4
5
  import clsx from "clsx";
5
- import { forwardRef, useMemo, useState, useCallback } from "react";
6
+ import { forwardRef, useMemo, useState, useRef, useCallback, useEffect } from "react";
6
7
  import { A as ArrowDownStyled, a as AdormentStyled, S as SelectRootStyled, b as SkeletonSelectStyled, M as MenuItemListStyled, c as MenuItemNoOptionStyled, L as LabelPlaceholerStyled, R as RenderValueContainerStyled, d as RenderValueTypography } from "./slots/SelectSlots.js";
7
8
  import { I as ICON_ARROW_DOWN, S as SELECT_CLASSES, a as SELECT_KEY_COMPONENT } from "./constants.js";
8
9
  import { S as SELECT_DICTIONARY } from "./dictionary.js";
9
- import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
10
+ import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
10
11
  import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
11
12
  import { C as Chip } from "../../Chip/Chip.js";
12
13
  import { S as SelectSlots } from "./slots/SelectEnum.js";
@@ -23,6 +24,7 @@ const Select = forwardRef(
23
24
  placeholder,
24
25
  className,
25
26
  dataTestId,
27
+ readOnly = false,
26
28
  ...otherProps
27
29
  }, ref) {
28
30
  const { currentSize } = useComponentSize(size);
@@ -33,22 +35,27 @@ const Select = forwardRef(
33
35
  const arrowDropDownIcon = `${host_static_assets}/${environment_assets}/${ICON_ARROW_DOWN}`;
34
36
  const selectedValue = useMemo(() => value, [value]);
35
37
  const [openLocal, setOpenLocal] = useState(false);
38
+ const selectRef = useRef(null);
36
39
  const theme = useTheme();
37
40
  const ownerState = useMemo(() => ({
38
41
  size: adjustedSize,
39
42
  disabled,
40
43
  error,
41
44
  variant,
42
- multiple
43
- }), [adjustedSize, disabled, error, variant, multiple]);
45
+ multiple,
46
+ readOnly
47
+ }), [adjustedSize, disabled, error, variant, multiple, readOnly]);
44
48
  const handleLocalChange = useCallback((event) => {
49
+ if (readOnly || disabled) {
50
+ return;
51
+ }
45
52
  const newValue = event.target.value;
46
53
  if (!onChange) {
47
54
  return;
48
55
  }
49
56
  if (multiple) {
50
- const selectedOptions = options.filter((option) => newValue.includes(option.id));
51
- if (selectedOptions.length > 0) {
57
+ if (Array.isArray(newValue)) {
58
+ const selectedOptions = options.filter((option) => newValue.includes(option.id));
52
59
  onChange(selectedOptions);
53
60
  }
54
61
  } else {
@@ -57,28 +64,41 @@ const Select = forwardRef(
57
64
  onChange(selectedOption);
58
65
  }
59
66
  }
60
- }, [multiple, onChange, options]);
67
+ }, [multiple, onChange, options, readOnly, disabled]);
61
68
  const handleDelete = useCallback((optionToDelete) => {
69
+ if (readOnly || disabled) {
70
+ return;
71
+ }
62
72
  if (multiple && Array.isArray(selectedValue)) {
63
73
  const newSelectedOptions = options.filter((option) => option.id !== optionToDelete.id && selectedValue.includes(option.id));
64
74
  onChange?.(newSelectedOptions);
65
75
  }
66
- }, [multiple, selectedValue, onChange, options]);
76
+ }, [multiple, selectedValue, onChange, options, readOnly, disabled]);
77
+ const handleToggleClick = useCallback(() => {
78
+ if (disabled || readOnly) {
79
+ return;
80
+ }
81
+ if (multiple) {
82
+ if (!openLocal) {
83
+ setOpenLocal(true);
84
+ }
85
+ return;
86
+ }
87
+ setOpenLocal(!openLocal);
88
+ }, [disabled, readOnly, multiple, openLocal]);
67
89
  const ArrowIcon = useMemo(() => {
68
90
  return () => /* @__PURE__ */ jsx(
69
91
  ArrowDownStyled,
70
92
  {
71
93
  ownerState: { ...ownerState },
72
94
  icon: arrowDropDownIcon,
73
- disabled,
95
+ disabled: disabled || readOnly,
74
96
  size: adjustedSize,
75
- onClick: () => {
76
- !disabled && setOpenLocal(!openLocal);
77
- },
97
+ onClick: handleToggleClick,
78
98
  rotationAngle: openLocal ? 180 : 0
79
99
  }
80
100
  );
81
- }, [ownerState, arrowDropDownIcon, disabled, adjustedSize, openLocal]);
101
+ }, [ownerState, arrowDropDownIcon, disabled, readOnly, adjustedSize, openLocal, handleToggleClick]);
82
102
  const RenderIcon = useCallback((icon) => {
83
103
  if (!icon) {
84
104
  return null;
@@ -104,8 +124,8 @@ const Select = forwardRef(
104
124
  e.stopPropagation();
105
125
  }, []);
106
126
  const renderValue = () => {
107
- if (!selectedValue || multiple && Array.isArray(selectedValue) && selectedValue.length === 0) {
108
- return /* @__PURE__ */ jsx(LabelPlaceholerStyled, { variant: "body", color: "text.disabled", children: placeholder });
127
+ if (selectedValue === null || selectedValue === void 0 || multiple && Array.isArray(selectedValue) && selectedValue.length === 0) {
128
+ return /* @__PURE__ */ jsx(LabelPlaceholerStyled, { ownerState: { disabled, readOnly }, variant: "body", color: "text.disabled", children: placeholder });
109
129
  }
110
130
  if (multiple) {
111
131
  if (!Array.isArray(selectedValue)) {
@@ -124,7 +144,7 @@ const Select = forwardRef(
124
144
  label: option.label,
125
145
  startIcon: option.startAdornment,
126
146
  opacity: true,
127
- onDeleted: () => handleDelete(option),
147
+ onDeleted: readOnly || disabled ? void 0 : () => handleDelete(option),
128
148
  iconButtonProps: { onMouseDown: onMouseDownIconButtonChip, onKeyDown: onKeyDownIconButtonChip }
129
149
  },
130
150
  option.id
@@ -135,17 +155,26 @@ const Select = forwardRef(
135
155
  const selectedOption = options.find((option) => String(option.id) === String(selectedValue));
136
156
  return selectedOption ? /* @__PURE__ */ jsxs(RenderValueContainerStyled, { ownerState: { ...ownerState }, className: SELECT_CLASSES.renderValueContainer, children: [
137
157
  selectedOption.startAdornment && RenderIcon(selectedOption.startAdornment),
138
- /* @__PURE__ */ jsx(RenderValueTypography, { variant: "body", color: "text.primary", size: adjustedSize, className: SELECT_CLASSES.renderValueTypography, children: selectedOption.label })
158
+ /* @__PURE__ */ jsx(RenderValueTypography, { ownerState: { disabled, readOnly }, variant: "body", color: "text.primary", size: adjustedSize, className: SELECT_CLASSES.renderValueTypography, children: selectedOption.label })
139
159
  ] }) : "";
140
160
  }
141
161
  };
142
162
  const onOpen = useCallback(() => {
163
+ if (disabled || readOnly) {
164
+ return;
165
+ }
143
166
  setOpenLocal(true);
144
- }, []);
167
+ }, [disabled, readOnly]);
145
168
  const onClose = useCallback(() => {
146
169
  setOpenLocal(false);
147
170
  }, []);
171
+ useEffect(() => {
172
+ if (readOnly && openLocal) {
173
+ setOpenLocal(false);
174
+ }
175
+ }, [readOnly, openLocal]);
148
176
  const StyledSelect = useMemo(() => SelectRootStyled(), []);
177
+ const handleRef = useForkRef(selectRef, ref);
149
178
  if (isSkeleton) {
150
179
  return /* @__PURE__ */ jsx(SkeletonSelectStyled, { ownerState: { ...ownerState }, className: SELECT_CLASSES.skeletonSelect });
151
180
  }
@@ -154,7 +183,7 @@ const Select = forwardRef(
154
183
  {
155
184
  ...otherProps,
156
185
  ...getPropDataTestId(SELECT_KEY_COMPONENT, SelectSlots.root, dataTestId),
157
- ref,
186
+ ref: handleRef,
158
187
  className: clsx(SELECT_CLASSES.root, SELECT_CLASSES[variant], className),
159
188
  ownerState: { ...ownerState },
160
189
  IconComponent: ArrowIcon,
@@ -165,29 +194,42 @@ const Select = forwardRef(
165
194
  disabled,
166
195
  error,
167
196
  renderValue,
168
- open: openLocal,
197
+ open: readOnly ? false : openLocal,
169
198
  native: false,
170
199
  onOpen,
171
200
  onClose,
201
+ onClick: handleToggleClick,
172
202
  displayEmpty: true,
203
+ inputProps: {
204
+ ...otherProps.inputProps,
205
+ readOnly
206
+ },
173
207
  MenuProps: {
174
208
  disableScrollLock: true,
209
+ anchorOrigin: {
210
+ vertical: "bottom",
211
+ horizontal: "left"
212
+ },
213
+ transformOrigin: {
214
+ vertical: "top",
215
+ horizontal: "left"
216
+ },
175
217
  sx: {
176
218
  "& .MuiPaper-root": {
177
- paddingTop: theme.vars.size.baseSpacings.sp3,
178
- paddingBottom: theme.vars.size.baseSpacings.sp3,
179
- paddingLeft: 0,
180
- paddingRight: 0,
219
+ padding: theme.vars.size.baseSpacings.sp1,
181
220
  maxHeight: "200px",
182
221
  overflow: "auto",
222
+ minWidth: `${(selectRef?.current?.offsetWidth ?? 0) + 1}px!important`,
223
+ // +1 para incluir el border del contenedor root.
183
224
  "& .MuiList-root": {
184
225
  padding: 0,
185
- display: "flex",
186
- flexDirection: "column",
226
+ display: "grid",
227
+ gridTemplateColumns: "auto",
187
228
  gap: theme.vars.size.baseSpacings.sp1,
188
- width: "fit-content",
229
+ width: "fit-content!important",
230
+ minWidth: "100%",
189
231
  "& .MuiMenuItem-root": {
190
- width: "fit-content"
232
+ width: "100%"
191
233
  }
192
234
  }
193
235
  }
@@ -13,6 +13,18 @@ const selectStyles = {
13
13
  border: theme.vars.size.borderStroke.actionInput,
14
14
  borderColor: ownerState?.error ? theme.vars.palette[color].enabled : theme.vars.palette.border.default,
15
15
  padding: 0,
16
+ cursor: ownerState?.readOnly || ownerState?.disabled ? "default" : "pointer",
17
+ ...ownerState?.readOnly && {
18
+ "& .M4LSelect-renderValueTypography": {
19
+ userSelect: "text",
20
+ cursor: "text"
21
+ }
22
+ },
23
+ "& .MuiSelect-nativeInput": {
24
+ inset: 0,
25
+ border: "unset",
26
+ outline: "unset"
27
+ },
16
28
  "& .MuiOutlinedInput-notchedOutline": {
17
29
  all: "unset",
18
30
  display: "none"
@@ -41,7 +53,10 @@ const selectStyles = {
41
53
  boxSizing: "border-box",
42
54
  display: "flex",
43
55
  flexDirection: "column",
44
- flexWrap: "unset"
56
+ flexWrap: "unset",
57
+ ...ownerState?.readOnly && {
58
+ cursor: "default"
59
+ }
45
60
  },
46
61
  // Estilos para la variante text
47
62
  [`&&&.${SELECT_CLASSES.text}`]: {
@@ -106,8 +121,12 @@ const selectStyles = {
106
121
  }
107
122
  }),
108
123
  arrowDown: {},
109
- renderValueTypography: () => ({
110
- lineHeight: "inherit!important"
124
+ /**
125
+ * Styles for the render value typography
126
+ */
127
+ renderValueTypography: ({ ownerState }) => ({
128
+ lineHeight: "inherit!important",
129
+ cursor: ownerState?.readOnly || ownerState?.disabled ? "default" : "pointer"
111
130
  }),
112
131
  // chip: () => ({
113
132
  // }),
@@ -122,16 +141,32 @@ const selectStyles = {
122
141
  * Styles for the label placeholder
123
142
  * @returns {object} The styles for the label placeholder
124
143
  */
125
- labelPlaceholer: ({ theme }) => ({
144
+ labelPlaceholer: ({ theme, ownerState }) => ({
126
145
  paddingLeft: theme.vars.size.baseSpacings.sp1,
127
- paddingRight: theme.vars.size.baseSpacings.sp3
146
+ paddingRight: theme.vars.size.baseSpacings.sp3,
147
+ cursor: ownerState?.readOnly || ownerState?.disabled ? "default" : "pointer"
128
148
  }),
129
149
  /**
130
150
  * Styles for the menu item select
131
151
  * @param {object} theme - The theme object
132
152
  * @returns {object} The styles for the menu item select
133
153
  */
134
- menuItem: {},
154
+ menuItem: {
155
+ "& .M4LMenuItem-menuItemContainer": {
156
+ width: "fit-content",
157
+ overflow: "unset",
158
+ "& .M4LImage-root": {
159
+ flexGrow: 1,
160
+ overflow: "auto",
161
+ flexShrink: 0
162
+ },
163
+ "& .M4LTypography-root": {
164
+ textOverflow: "unset",
165
+ overflow: "unset",
166
+ whiteSpace: "unset"
167
+ }
168
+ }
169
+ },
135
170
  /**
136
171
  * Estilos del menuItem que no tiene opciones
137
172
  * @param {object} theme - The theme object
@@ -45,6 +45,10 @@ export interface BaseSelectProps {
45
45
  * Identificador único del componente, para pruebas automatizadas.
46
46
  */
47
47
  dataTestId?: string;
48
+ /**
49
+ * Define si el Select está en modo solo lectura.
50
+ */
51
+ readOnly?: boolean;
48
52
  }
49
53
  export type SelectOptionValue<T extends string | number, Multiple> = Multiple extends true ? Array<SelectOption<T>> : SelectOption<T> | null;
50
54
  /**
@@ -72,8 +76,9 @@ export interface SelectProps<T extends string | number, Multiple extends boolean
72
76
  * Propiedades internas que definen el estado del componente `Select`.
73
77
  * paletteColor - Color de la paleta aplicado al Select.
74
78
  */
75
- export interface SelectOwnerState<T extends string | number, Multiple extends boolean | undefined = false> extends Pick<SelectProps<T, Multiple>, 'classes' | 'size' | 'error' | 'variant' | 'disabled' | 'multiple'> {
79
+ export interface SelectOwnerState<T extends string | number, Multiple extends boolean | undefined = false> extends Pick<SelectProps<T, Multiple>, 'classes' | 'size' | 'error' | 'variant' | 'disabled' | 'multiple' | 'readOnly'> {
76
80
  disabled?: boolean;
81
+ readOnly?: boolean;
77
82
  }
78
83
  /**
79
84
  * Define los tipos de slots disponibles en el Select.
@@ -1,5 +1,5 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
2
+ import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
3
3
  import { S as STACK_KEY_COMPONENT } from "./constant.js";
4
4
  import { M as MUISTackRootStyled } from "./slots/StackSlot.js";
5
5
  import { S as StackSlots } from "./slots/StackEnum.js";
@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { useModuleSkeleton } from "@m4l/core";
3
3
  import clsx from "clsx";
4
4
  import { S as SkeletonStyled, T as TextFieldRootStyled, L as LimitContainerStyled, a as LimitTextFirstStyled, b as LimitTextSeparatorStyled, c as LimitTextSecondStyled } from "./slots/TextFieldSlots.js";
5
- import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
5
+ import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
6
6
  import { T as TEXT_FIELD_CLASSES, a as TEXT_FIELD_KEY_COMPONENT } from "./constants.js";
7
7
  import { T as TextFieldSlots } from "./slots/TextFieldEnum.js";
8
8
  import { useTheme } from "@mui/material";
@@ -1,7 +1,7 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { w as withToggle } from "../../../hocs/withToggle/index.js";
3
3
  import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
4
- import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
4
+ import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
5
5
  import clsx from "clsx";
6
6
  import { T as TOGGLE_BUTTON_KEY_COMPONENT } from "./constants.js";
7
7
  import { T as ToggleButtonRootStyled } from "./slots/ToggleButtonSlots.js";
@@ -1,6 +1,6 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import clsx from "clsx";
3
- import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
3
+ import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
4
4
  import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
5
5
  import { T as TOGGLE_ICON_BUTTON_KEY_COMPONENT, a as TOGGLE_ICON_BUTTON_CLASS_NAME_SPECIFY } from "./constants.js";
6
6
  import { w as withToggle } from "../../../hocs/withToggle/index.js";
@@ -4,7 +4,7 @@ import { useModuleSkeleton } from "@m4l/core";
4
4
  import { T as TYPOGRAPHY_CLASSES, a as TYPOGRAPHY_KEY_COMPONENT, b as TYPOGRAPHY_CLASS_NAME_SPECIFY } from "./constants.js";
5
5
  import { T as TypographySlots } from "./slots/typographyEnum.js";
6
6
  import { S as StyledMUITypography, a as StyledSkeleton } from "./slots/typographySlots.js";
7
- import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
7
+ import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
8
8
  import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
9
9
  function Typography(props) {
10
10
  const {
@@ -6,7 +6,7 @@ import { P as PopupDragWindowRootStyled } from "../../slots/popupsViewerSlots.js
6
6
  import { u as usePopups } from "../../../PopupsProvider/hooks/usePopups.js";
7
7
  import { T as TEST_PROP_ID } from "../../../../../../test/constants_no_mock.js";
8
8
  import { a as POPUPS_VIEWER_CLASS_NAME } from "../../constants.js";
9
- import { a as getNameDataTestId } from "../../../../../../test/getNameDataTestId.js";
9
+ import { g as getNameDataTestId } from "../../../../../../test/getNameDataTestId.js";
10
10
  import { M as MemonizedWindowBaseMicroFrontend } from "../../../../../WindowBase/subcomponents/MicroFrontend/MicroFrontend.js";
11
11
  import { W as WindowBaseComponent } from "../../../../../WindowBase/subcomponents/Component/index.js";
12
12
  import { d as deepShallow } from "../../../../../../utils/deepShallow.js";
@@ -5,7 +5,7 @@ import { D as DynamicFilter } from "../../components/DynamicFilter/DynamicFilter
5
5
  import { D as DynamicSort } from "../../components/DynamicSort/DynamicSort.js";
6
6
  import { I as IconButton } from "../../components/mui_extended/IconButton/IconButton.js";
7
7
  import { T as ToggleIconButton } from "../../components/mui_extended/ToggleIconButton/ToggleIconButton.js";
8
- import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
8
+ import { a as getPropDataTestId } from "../../test/getNameDataTestId.js";
9
9
  import { C as COOKIE_APPLIED_FILTERS, a as COOKIE_APPLIED_SORTS, M as M4LDYNAMIC_KEY_FILTER_AND_SORT } from "./constants.js";
10
10
  import { I as ICON_PATH_FILTER, a as ICON_PATH_SORT, A as ASSETS } from "./icons.js";
11
11
  import { D as DynamicFilterAndSortSlots } from "./slots/DynamicFilterAndSortEnum.js";