@m4l/components 9.3.16-BE091925-beta.1 → 9.3.16-JT19092025.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 (47) hide show
  1. package/components/Stepper/Stepper.styles.js +6 -1
  2. package/components/Stepper/hooks/useDynamicValidation/index.d.ts +9 -0
  3. package/components/Stepper/hooks/useDynamicValidation/index.js +57 -0
  4. package/components/Stepper/hooks/useStepperActions/index.js +21 -3
  5. package/components/Stepper/subcomponents/StepArea/index.js +4 -0
  6. package/components/Stepper/subcomponents/StepperButtons/StepperCancelButton/index.d.ts +2 -1
  7. package/components/Stepper/subcomponents/StepperButtons/StepperCancelButton/index.js +39 -6
  8. package/components/Stepper/subcomponents/StepperButtons/StepperNextButton/index.d.ts +2 -1
  9. package/components/Stepper/subcomponents/StepperButtons/StepperNextButton/index.js +5 -3
  10. package/components/Stepper/subcomponents/StepperButtons/StepperPrevButton/index.d.ts +2 -1
  11. package/components/Stepper/subcomponents/StepperButtons/StepperPrevButton/index.js +5 -3
  12. package/components/Stepper/subcomponents/StepperButtons/StepperSubmitButton/index.d.ts +2 -1
  13. package/components/Stepper/subcomponents/StepperButtons/StepperSubmitButton/index.js +5 -3
  14. package/components/Stepper/subcomponents/StepperFooter/subcomponents/StepperFooterRightActions/index.js +17 -9
  15. package/components/Stepper/types.d.ts +7 -0
  16. package/components/areas/icons.js +1 -1
  17. package/components/hook-form/RHFAutocomplete/RHFAutocomplete.js +35 -3
  18. package/components/hook-form/RHFAutocomplete/types.d.ts +6 -1
  19. package/components/hook-form/RHFormContext/index.d.ts +1 -1
  20. package/components/hook-form/RHFormContext/index.js +29 -4
  21. package/components/index.d.ts +0 -1
  22. package/components/mui_extended/Autocomplete/Autocomplete.js +6 -12
  23. package/components/mui_extended/Autocomplete/Autocomplete.styles.js +5 -48
  24. package/components/mui_extended/Autocomplete/hooks/useEndAdornments.d.ts +0 -1
  25. package/components/mui_extended/Autocomplete/hooks/useEndAdornments.js +3 -4
  26. package/components/mui_extended/Autocomplete/hooks/useStartAdornments.js +4 -4
  27. package/components/mui_extended/Autocomplete/hooks/useValuesAndHandlers.js +4 -39
  28. package/components/mui_extended/Autocomplete/slots/AutocompleteEnum.d.ts +1 -3
  29. package/components/mui_extended/Autocomplete/slots/AutocompleteEnum.js +0 -2
  30. package/components/mui_extended/Autocomplete/slots/AutocompleteSlots.d.ts +0 -6
  31. package/components/mui_extended/Autocomplete/slots/AutocompleteSlots.js +1 -11
  32. package/components/mui_extended/Autocomplete/types.d.ts +1 -1
  33. package/components/mui_extended/Button/ButtonStyles.js +6 -3
  34. package/components/mui_extended/Popper/Popper.js +2 -9
  35. package/components/mui_extended/Popper/types.d.ts +0 -1
  36. package/components/mui_extended/Select/Select.js +10 -17
  37. package/components/mui_extended/Select/Select.styles.js +10 -17
  38. package/components/mui_extended/Select/types.d.ts +1 -1
  39. package/components/mui_extended/TextField/TextField.d.ts +1 -2
  40. package/components/mui_extended/TextField/TextField.js +4 -25
  41. package/components/mui_extended/TextField/TextField.styles.js +125 -132
  42. package/components/mui_extended/TextField/slots/TextFieldSlots.d.ts +9 -3
  43. package/components/mui_extended/TextField/slots/TextFieldSlots.js +1 -2
  44. package/components/mui_extended/Typography/Typography.js +1 -1
  45. package/components/mui_extended/Typography/typography.styles.js +1 -3
  46. package/package.json +2 -2
  47. package/test/mocks/dictionary-mock.d.ts +0 -433
@@ -24,8 +24,13 @@ const stepperStyles = {
24
24
  flexDirection: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? "column" : "row",
25
25
  gap: theme.vars.size.baseSpacings.sp8
26
26
  }),
27
+ /**
28
+ * Estilos para el contenido del paso dentro del Stepper.
29
+ */
27
30
  stepContent: ({ ownerState }) => ({
28
- display: ownerState?.isStepVisible ? "block" : "none"
31
+ height: "100%",
32
+ display: ownerState?.isStepVisible ? "flex" : "none",
33
+ flexDirection: "column"
29
34
  }),
30
35
  /**
31
36
  * Estilos para la sección que contiene los botones de acción del Stepper.
@@ -0,0 +1,9 @@
1
+ /**
2
+ * Hook que simula validación onChange de campos específicos del Stepper, manteniendo el formulario en modo onSubmit para preservar el rendimiento.
3
+ * @returns Objeto con funciones para manejar la validación dinámica
4
+ */
5
+ export declare function useDynamicValidation(): {
6
+ activateFieldsValidation: (fields: string[]) => void;
7
+ clearAllValidation: () => void;
8
+ activeFields: string[];
9
+ };
@@ -0,0 +1,57 @@
1
+ import { useState, useRef, useEffect, useCallback } from "react";
2
+ import { useFormContext, useWatch } from "react-hook-form";
3
+ function useDynamicValidation() {
4
+ const { trigger } = useFormContext();
5
+ const [activeFields, setActiveFields] = useState([]);
6
+ const watchValues = useWatch({
7
+ name: activeFields.length > 0 ? activeFields : ["__dummy__"]
8
+ });
9
+ const lastValuesRef = useRef({});
10
+ useEffect(() => {
11
+ if (activeFields.length === 0) {
12
+ return;
13
+ }
14
+ const currentValues = activeFields.length === 1 ? { [activeFields[0]]: watchValues } : activeFields.reduce((acc, field, index) => {
15
+ acc[field] = Array.isArray(watchValues) ? watchValues[index] : watchValues;
16
+ return acc;
17
+ }, {});
18
+ const changedFields = activeFields.filter((field) => {
19
+ const currentValue = currentValues[field];
20
+ const lastValue = lastValuesRef.current[field];
21
+ const hasChanged = JSON.stringify(currentValue) !== JSON.stringify(lastValue);
22
+ if (hasChanged) {
23
+ lastValuesRef.current[field] = currentValue;
24
+ }
25
+ return hasChanged;
26
+ });
27
+ if (changedFields.length > 0) {
28
+ const timeoutId = setTimeout(() => {
29
+ trigger(changedFields);
30
+ }, 100);
31
+ return () => clearTimeout(timeoutId);
32
+ }
33
+ }, [activeFields, trigger, watchValues]);
34
+ const activateFieldsValidation = useCallback((fields) => {
35
+ setActiveFields((prev) => {
36
+ const newFields = fields.filter((field) => !prev.includes(field));
37
+ return [...prev, ...newFields];
38
+ });
39
+ fields.forEach((field) => {
40
+ if (!lastValuesRef.current.hasOwnProperty(field)) {
41
+ lastValuesRef.current[field] = void 0;
42
+ }
43
+ });
44
+ }, []);
45
+ const clearAllValidation = useCallback(() => {
46
+ setActiveFields([]);
47
+ lastValuesRef.current = {};
48
+ }, []);
49
+ return {
50
+ activateFieldsValidation,
51
+ clearAllValidation,
52
+ activeFields
53
+ };
54
+ }
55
+ export {
56
+ useDynamicValidation as u
57
+ };
@@ -2,8 +2,10 @@ import { useCallback } from "react";
2
2
  import { u as useStepper } from "../useStepper/index.js";
3
3
  import { useFormContext } from "react-hook-form";
4
4
  import { shallow } from "zustand/shallow";
5
+ import { u as useDynamicValidation } from "../useDynamicValidation/index.js";
5
6
  function useStepperActions() {
6
7
  const { trigger, clearErrors, getValues, reset } = useFormContext();
8
+ const { activateFieldsValidation, clearAllValidation } = useDynamicValidation();
7
9
  const {
8
10
  nextStep,
9
11
  prevStep,
@@ -41,9 +43,22 @@ function useStepperActions() {
41
43
  if (fieldsToValidate.length === 0) {
42
44
  return true;
43
45
  }
44
- return await trigger(fieldsToValidate);
46
+ const result = await trigger(fieldsToValidate);
47
+ if (!result) {
48
+ activateFieldsValidation(fieldsToValidate);
49
+ }
50
+ return result;
45
51
  };
46
52
  const success = await nextStep(validateFn, formData);
53
+ if (success) {
54
+ const currentStepData = steps[currentStep - 1];
55
+ const fieldsJustValidated = currentStepData?.validationFields || [];
56
+ if (fieldsJustValidated.length > 0) {
57
+ setTimeout(() => {
58
+ clearAllValidation();
59
+ }, 100);
60
+ }
61
+ }
47
62
  if (success && futureFields.length > 0) {
48
63
  clearErrors(futureFields);
49
64
  setTimeout(() => {
@@ -62,13 +77,16 @@ function useStepperActions() {
62
77
  steps,
63
78
  currentStep,
64
79
  trigger,
65
- getValues
80
+ getValues,
81
+ activateFieldsValidation,
82
+ clearAllValidation
66
83
  ]);
67
84
  const cancelAction = useCallback(() => {
68
85
  reset();
69
86
  clearErrors();
87
+ clearAllValidation();
70
88
  resetStepper();
71
- }, [reset, clearErrors, resetStepper]);
89
+ }, [reset, clearErrors, clearAllValidation, resetStepper]);
72
90
  return { prevStepAction, nextStepAction, cancelAction };
73
91
  }
74
92
  export {
@@ -5,10 +5,12 @@ import { u as useStepper } from "../../hooks/useStepper/index.js";
5
5
  import { e as StepAreaStyled, f as StepStyled, g as StepNameStyled } from "../../slots/StepperSlot.js";
6
6
  import { I as Indicator } from "./subcomponents/Inidicator/index.js";
7
7
  import { shallow } from "zustand/shallow";
8
+ import { u as useDynamicValidation } from "../../hooks/useDynamicValidation/index.js";
8
9
  import { e as evaluateVisibilityStepCondition } from "../../helpers/evaluateVisibilityStepCondition/index.js";
9
10
  function StepArea() {
10
11
  const { trigger, clearErrors } = useFormContext();
11
12
  const formValues = useWatch();
13
+ const { activateFieldsValidation } = useDynamicValidation();
12
14
  const {
13
15
  currentStep,
14
16
  steps,
@@ -64,6 +66,7 @@ function StepArea() {
64
66
  if (!isValid) {
65
67
  setCurrentStep(stepOriginalIndex);
66
68
  setStepValidationStatus(stepOriginalIndex, false);
69
+ activateFieldsValidation(step.validationFields || []);
67
70
  return;
68
71
  }
69
72
  setStepValidationStatus(stepOriginalIndex, true);
@@ -76,6 +79,7 @@ function StepArea() {
76
79
  const isCurrentValid = await trigger(currentStepData.validationFields);
77
80
  if (!isCurrentValid) {
78
81
  setStepValidationStatus(currentStepOriginalIndex, false);
82
+ activateFieldsValidation(currentStepData.validationFields || []);
79
83
  return;
80
84
  }
81
85
  setStepValidationStatus(currentStepOriginalIndex, true);
@@ -1,4 +1,5 @@
1
+ import { StepperButtonProps } from '../../../types';
1
2
  /**
2
3
  * Botón modular para cancelar el proceso del Stepper
3
4
  */
4
- export declare function StepperCancelButton(): import("react/jsx-runtime").JSX.Element;
5
+ export declare function StepperCancelButton(props: StepperButtonProps): import("react/jsx-runtime").JSX.Element;
@@ -1,22 +1,55 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
+ import { useCallback } from "react";
3
+ import { useFormContext, useFormState } from "react-hook-form";
2
4
  import { u as useStepperActions } from "../../../hooks/useStepperActions/index.js";
3
- import { D as DICTIONARY } from "../../../dictionary.js";
5
+ import { D as DICTIONARY$1 } from "../../../dictionary.js";
6
+ import { D as DICTIONARY } from "../../../../CommonActions/dictionary.js";
4
7
  import { useModuleDictionary } from "@m4l/core";
8
+ import { u as useModal } from "../../../../../hooks/useModal/index.js";
9
+ import { u as useWindowToolsMF } from "../../../../WindowBase/hooks/useWindowToolsMF/index.js";
10
+ import { W as WindowConfirm } from "../../../../WindowConfirm/WindowConfirm.js";
5
11
  import { B as Button } from "../../../../mui_extended/Button/Button.js";
6
- function StepperCancelButton() {
12
+ function StepperCancelButton(props) {
13
+ const { label, ...rest } = props;
7
14
  const { getLabel } = useModuleDictionary();
8
15
  const { cancelAction } = useStepperActions();
9
- const handleCancel = () => {
16
+ const { openModal } = useModal();
17
+ const { close: closeWindow } = useWindowToolsMF();
18
+ const { control } = useFormContext();
19
+ const { isDirty } = useFormState({
20
+ control
21
+ });
22
+ const onConfirmQuit = useCallback(() => {
10
23
  cancelAction();
11
- };
24
+ closeWindow();
25
+ }, [cancelAction, closeWindow]);
26
+ const handleCancel = useCallback(() => {
27
+ if (isDirty) {
28
+ openModal({
29
+ window: /* @__PURE__ */ jsx(
30
+ WindowConfirm,
31
+ {
32
+ variant: "warning",
33
+ title: getLabel(DICTIONARY.CONFIRM_QUIT_TITLE),
34
+ msg: getLabel(DICTIONARY.CONFIRM_QUIT_MSG),
35
+ onClickIntro: onConfirmQuit
36
+ }
37
+ ),
38
+ variant: "warning"
39
+ });
40
+ } else {
41
+ onConfirmQuit();
42
+ }
43
+ }, [getLabel, isDirty, openModal, onConfirmQuit]);
12
44
  return /* @__PURE__ */ jsx(
13
45
  Button,
14
46
  {
15
47
  type: "button",
16
- label: getLabel(DICTIONARY.LABEL_CANCEL_BUTTON),
48
+ label: label || getLabel(DICTIONARY$1.LABEL_CANCEL_BUTTON),
17
49
  variant: "outlined",
18
50
  color: "default",
19
- onClick: handleCancel
51
+ onClick: handleCancel,
52
+ ...rest
20
53
  }
21
54
  );
22
55
  }
@@ -1,4 +1,5 @@
1
+ import { StepperButtonProps } from '../../../types';
1
2
  /**
2
3
  * Botón modular para avanzar al siguiente step del Stepper
3
4
  */
4
- export declare function StepperNextButton(): import("react/jsx-runtime").JSX.Element;
5
+ export declare function StepperNextButton(props: StepperButtonProps): import("react/jsx-runtime").JSX.Element;
@@ -6,7 +6,8 @@ import { D as DICTIONARY } from "../../../dictionary.js";
6
6
  import { useModuleDictionary, useEnvironment } from "@m4l/core";
7
7
  import { I as IconButton } from "../../../../mui_extended/IconButton/IconButton.js";
8
8
  import { B as Button } from "../../../../mui_extended/Button/Button.js";
9
- function StepperNextButton() {
9
+ function StepperNextButton(props) {
10
+ const { label, ...rest } = props;
10
11
  const { nextStepAction } = useStepperActions();
11
12
  const isMobile = useIsMobile();
12
13
  const { getLabel } = useModuleDictionary();
@@ -28,12 +29,13 @@ function StepperNextButton() {
28
29
  Button,
29
30
  {
30
31
  type: "button",
31
- label: getLabel(DICTIONARY.LABEL_NEXT_BUTTON),
32
+ label: label || getLabel(DICTIONARY.LABEL_NEXT_BUTTON),
32
33
  variant: "contained",
33
34
  color: "primary",
34
35
  onClick: handleNext,
35
36
  endIcon: `${host_static_assets}/${environment_assets}/${pathIcons.arrowRight}`,
36
- "data-testid": "stepper-next-button"
37
+ "data-testid": "stepper-next-button",
38
+ ...rest
37
39
  }
38
40
  );
39
41
  }
@@ -1,4 +1,5 @@
1
+ import { StepperButtonProps } from '../../../types';
1
2
  /**
2
3
  * Botón modular para ir al step anterior del Stepper
3
4
  */
4
- export declare function StepperPrevButton(): import("react/jsx-runtime").JSX.Element | null;
5
+ export declare function StepperPrevButton(props: StepperButtonProps): import("react/jsx-runtime").JSX.Element | null;
@@ -7,7 +7,8 @@ import { useIsMobile } from "@m4l/graphics";
7
7
  import { D as DICTIONARY } from "../../../dictionary.js";
8
8
  import { I as IconButton } from "../../../../mui_extended/IconButton/IconButton.js";
9
9
  import { B as Button } from "../../../../mui_extended/Button/Button.js";
10
- function StepperPrevButton() {
10
+ function StepperPrevButton(props) {
11
+ const { label, ...rest } = props;
11
12
  const { currentStep } = useStepper((state) => ({
12
13
  currentStep: state.currentStep
13
14
  }));
@@ -35,12 +36,13 @@ function StepperPrevButton() {
35
36
  Button,
36
37
  {
37
38
  type: "button",
38
- label: !isMobile ? getLabel(DICTIONARY.LABEL_PREV_BUTTON) : "",
39
+ label: label || getLabel(DICTIONARY.LABEL_PREV_BUTTON),
39
40
  variant: "outlined",
40
41
  color: "default",
41
42
  onClick: handlePrev,
42
43
  startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.arrowLeft}`,
43
- "data-testid": "stepper-prev-button"
44
+ "data-testid": "stepper-prev-button",
45
+ ...rest
44
46
  }
45
47
  );
46
48
  }
@@ -1,4 +1,5 @@
1
+ import { StepperButtonProps } from '../../../types';
1
2
  /**
2
3
  * Botón modular para finalizar el Stepper y ejecutar onFinalSubmit
3
4
  */
4
- export declare function StepperSubmitButton(): import("react/jsx-runtime").JSX.Element;
5
+ export declare function StepperSubmitButton(props: StepperButtonProps): import("react/jsx-runtime").JSX.Element;
@@ -2,16 +2,18 @@ import { jsx } from "react/jsx-runtime";
2
2
  import { D as DICTIONARY } from "../../../dictionary.js";
3
3
  import { useModuleDictionary } from "@m4l/core";
4
4
  import { B as Button } from "../../../../mui_extended/Button/Button.js";
5
- function StepperSubmitButton() {
5
+ function StepperSubmitButton(props) {
6
+ const { label, ...rest } = props;
6
7
  const { getLabel } = useModuleDictionary();
7
8
  return /* @__PURE__ */ jsx(
8
9
  Button,
9
10
  {
10
11
  type: "submit",
11
- label: getLabel(DICTIONARY.LABEL_SUBMIT_BUTTON),
12
+ label: label || getLabel(DICTIONARY.LABEL_SUBMIT_BUTTON),
12
13
  variant: "contained",
13
14
  color: "primary",
14
- "data-testid": "stepper-submit-button"
15
+ "data-testid": "stepper-submit-button",
16
+ ...rest
15
17
  }
16
18
  );
17
19
  }
@@ -2,18 +2,26 @@ import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import React, { useMemo } from "react";
3
3
  import { u as useIsLastVisibleValidStep } from "../../../../hooks/useIsLastVisibleValidStep/index.js";
4
4
  import { m as StepperFooterRightActionsStyled } from "../../../../slots/StepperSlot.js";
5
- import { S as StepperNextButton } from "../../../StepperButtons/StepperNextButton/index.js";
6
5
  import { S as StepperSubmitButton } from "../../../StepperButtons/StepperSubmitButton/index.js";
6
+ import { S as StepperNextButton } from "../../../StepperButtons/StepperNextButton/index.js";
7
7
  function StepperFooterRightActions(props) {
8
8
  const { children } = props;
9
9
  const isLastVisibleValidStep = useIsLastVisibleValidStep();
10
- const childrenWithoutNextButton = useMemo(() => {
11
- if (!isLastVisibleValidStep) {
12
- return children;
13
- }
10
+ const hasCustomSubmitButton = useMemo(() => {
11
+ return React.Children.toArray(children).some((child) => {
12
+ if (React.isValidElement(child)) {
13
+ return child.type === StepperSubmitButton;
14
+ }
15
+ return false;
16
+ });
17
+ }, [children]);
18
+ const filteredChildren = useMemo(() => {
14
19
  return React.Children.toArray(children).filter((child) => {
15
20
  if (React.isValidElement(child)) {
16
- if (child.type === StepperNextButton) {
21
+ if (!isLastVisibleValidStep && child.type === StepperSubmitButton) {
22
+ return false;
23
+ }
24
+ if (isLastVisibleValidStep && child.type === StepperNextButton) {
17
25
  return false;
18
26
  }
19
27
  }
@@ -21,10 +29,10 @@ function StepperFooterRightActions(props) {
21
29
  });
22
30
  }, [children, isLastVisibleValidStep]);
23
31
  const submitButton = useMemo(() => {
24
- return isLastVisibleValidStep ? /* @__PURE__ */ jsx(StepperSubmitButton, {}) : null;
25
- }, [isLastVisibleValidStep]);
32
+ return isLastVisibleValidStep && !hasCustomSubmitButton ? /* @__PURE__ */ jsx(StepperSubmitButton, {}) : null;
33
+ }, [isLastVisibleValidStep, hasCustomSubmitButton]);
26
34
  return /* @__PURE__ */ jsxs(StepperFooterRightActionsStyled, { children: [
27
- childrenWithoutNextButton,
35
+ filteredChildren,
28
36
  submitButton
29
37
  ] });
30
38
  }
@@ -5,6 +5,7 @@ import { ContentAreaSlots, ContentSlots, StepperFooterSlots, StepperSlots } from
5
5
  import { STEPPER_PREFIX_NAME } from './constants';
6
6
  import { M4LOverridesStyleRules } from '../../@types/augmentations';
7
7
  import { Step as StepComponent } from './subcomponents/StepperContent/subcomponents/Step';
8
+ import { ButtonProps } from '../mui_extended/Button';
8
9
  export type Orientation = 'horizontal' | 'vertical';
9
10
  export type IndicatorType = 'number' | 'dot';
10
11
  export type FormData = Record<string, string | number | boolean | null | undefined>;
@@ -145,6 +146,12 @@ export interface StepperFooterProps {
145
146
  export interface StepperFooterLeftActionsProps {
146
147
  children?: ReactNode;
147
148
  }
149
+ /**
150
+ * Props para los botones del Stepper que extienden las props de Button de mui_extended
151
+ */
152
+ export interface StepperButtonProps extends Omit<ButtonProps, 'label'> {
153
+ label?: string;
154
+ }
148
155
  /**
149
156
  * Props del StepperFooterRightActions
150
157
  */
@@ -1,6 +1,6 @@
1
1
  const ICONS = {
2
2
  MAXIMIZE: "window_expand.svg",
3
- NORMALIZE: "window_minimize.svg",
3
+ NORMALIZE: "window_normalize.svg",
4
4
  COLLAPSE: "window_collapse.svg",
5
5
  UNCOLLPASE: "window_uncollapse.svg",
6
6
  RESET_COOKIES: "reset_cookies.svg",
@@ -1,4 +1,7 @@
1
1
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
+ import { getPropertyByString } from "@m4l/core";
3
+ import { useIsMobile } from "@m4l/graphics";
4
+ import { useTheme } from "@mui/material";
2
5
  import { useId, useState, useCallback, useEffect } from "react";
3
6
  import { useFormContext, Controller } from "react-hook-form";
4
7
  import { A as AutocompleteRootStyled, L as LabelStyled } from "./slots/RHFAutocompleteSlots.js";
@@ -10,22 +13,28 @@ function RHFAutocomplete(props) {
10
13
  getOptionLabel,
11
14
  isOptionEqualToValue,
12
15
  label,
16
+ color,
13
17
  options,
14
18
  disabled,
15
19
  onOpen,
16
20
  onClose,
17
21
  loading,
22
+ variant,
18
23
  helperMessage,
19
24
  size,
20
25
  onChangeFilterParmsLocal,
21
26
  mandatory,
22
27
  mandatoryMessage,
23
28
  multiple,
29
+ imageScale = true,
30
+ imageRepeat,
24
31
  refresh
25
32
  // onChange: onChangeRHF,
26
33
  } = props;
27
34
  const htmlForId = useId();
35
+ const theme = useTheme();
28
36
  const [open, setOpen] = useState(false);
37
+ const isDesktop = !useIsMobile();
29
38
  const onCloseLocal = useCallback((event, reason) => {
30
39
  setOpen(false);
31
40
  if (onClose) {
@@ -50,11 +59,34 @@ function RHFAutocomplete(props) {
50
59
  },
51
60
  [getOptionLabel]
52
61
  );
62
+ const paletteColor = getPropertyByString(
63
+ theme.vars.palette,
64
+ disabled ? "default" : color || "default",
65
+ theme.vars.palette.default
66
+ );
53
67
  const {
54
- control
68
+ control,
69
+ formState: { errors }
55
70
  } = useFormContext();
71
+ const [currentVariant, setCurrentVariant] = useState(null);
72
+ useEffect(() => {
73
+ const hasError = errors[nameRHF];
74
+ if (hasError) {
75
+ setCurrentVariant("error");
76
+ } else if (variant) {
77
+ setCurrentVariant(variant);
78
+ } else {
79
+ setCurrentVariant(null);
80
+ }
81
+ }, [errors, nameRHF, variant, control]);
56
82
  const ownerState = {
57
- disabled
83
+ size: !isDesktop ? "medium" : size,
84
+ semantics: currentVariant,
85
+ disabled,
86
+ multiple: Boolean(multiple),
87
+ imageScale: Boolean(imageScale),
88
+ imageRepeat: Boolean(imageRepeat),
89
+ paletteColor
58
90
  };
59
91
  return /* @__PURE__ */ jsx(
60
92
  AutocompleteRootStyled,
@@ -115,7 +147,7 @@ function RHFAutocomplete(props) {
115
147
  htmlFor: htmlForId
116
148
  }
117
149
  ),
118
- error?.message ? /* @__PURE__ */ jsx(HelperError, { message: error?.message }) : null
150
+ currentVariant === "error" ? /* @__PURE__ */ jsx(HelperError, { message: error?.message }) : null
119
151
  ] });
120
152
  }
121
153
  }
@@ -1,4 +1,4 @@
1
- import { AutocompleteCloseReason, AutocompleteFreeSoloValueMapping, AutocompleteInputChangeReason, AutocompleteProps as MUIAutocompleteProps, Theme, PopperProps } from '@mui/material';
1
+ import { AutocompleteCloseReason, AutocompleteFreeSoloValueMapping, AutocompleteInputChangeReason, AutocompleteProps as MUIAutocompleteProps, Theme, PaletteColor, PopperProps } from '@mui/material';
2
2
  import { ComponentPalletColor, Sizes } from '@m4l/styles';
3
3
  import { TextFieldProps } from '../../mui_extended/TextField/types';
4
4
  import { RFHAUTOCOMPLETE_KEY_COMPONENT } from './constants';
@@ -52,6 +52,11 @@ export interface RHFAutocompleteProps<T = any, Multiple extends boolean | undefi
52
52
  */
53
53
  export interface RHFAutocompleteOwnerState extends Pick<RHFAutocompleteProps<any>, 'size' | 'disabled' | 'variant'> {
54
54
  disabled?: boolean;
55
+ semantics: RHFAutocompleteVariants | 'error' | null;
56
+ multiple: boolean;
57
+ imageScale?: boolean;
58
+ imageRepeat?: boolean;
59
+ paletteColor: PaletteColor;
55
60
  }
56
61
  /**
57
62
  * Defines the types of Slots available for the Autocomplete.
@@ -3,7 +3,7 @@ import { CustomFormArguments, FormProviderCustomProps, FormProviderProps } from
3
3
  /**
4
4
  * TODO: Documentar
5
5
  */
6
- export declare function useCustomForm({ validationSchema, values, statusLoad, mode }: CustomFormArguments): import('react-hook-form').UseFormReturn<FieldValues, any, FieldValues>;
6
+ export declare function useCustomForm({ validationSchema, values, statusLoad, mode, }: CustomFormArguments): import('react-hook-form').UseFormReturn<FieldValues, any, FieldValues>;
7
7
  /**
8
8
  * TODO: Documentar
9
9
  */
@@ -6,7 +6,12 @@ import { yupResolver } from "@hookform/resolvers/yup";
6
6
  import { F as FormProviderRoot } from "./styles.js";
7
7
  import { R as RHFormProviderUtilityClasses } from "./classes/index.js";
8
8
  const classes = RHFormProviderUtilityClasses();
9
- function useCustomForm({ validationSchema, values, statusLoad, mode }) {
9
+ function useCustomForm({
10
+ validationSchema,
11
+ values,
12
+ statusLoad,
13
+ mode
14
+ }) {
10
15
  const formMethods = useForm({
11
16
  resolver: yupResolver(validationSchema),
12
17
  defaultValues: values,
@@ -39,11 +44,31 @@ function useCustomForm({ validationSchema, values, statusLoad, mode }) {
39
44
  }
40
45
  function FormProviderCustom(props) {
41
46
  const { children, onSubmit, className, handleSubmit } = props;
42
- return /* @__PURE__ */ jsx(FormProvider, { ...props, children: /* @__PURE__ */ jsx(FormProviderRoot, { className: clsx(classes.root, className), onSubmit: handleSubmit(onSubmit), children }) });
47
+ return /* @__PURE__ */ jsx(FormProvider, { ...props, children: /* @__PURE__ */ jsx(
48
+ FormProviderRoot,
49
+ {
50
+ className: clsx(classes.root, className),
51
+ onSubmit: handleSubmit(onSubmit),
52
+ children
53
+ }
54
+ ) });
43
55
  }
44
56
  function RHFormProvider(props) {
45
- const { children, onSubmit, values, validationSchema, statusLoad = "ready", className, mode } = props;
46
- const formMethods = useCustomForm({ validationSchema, statusLoad, values, mode });
57
+ const {
58
+ children,
59
+ onSubmit,
60
+ values,
61
+ validationSchema,
62
+ statusLoad = "ready",
63
+ className,
64
+ mode
65
+ } = props;
66
+ const formMethods = useCustomForm({
67
+ validationSchema,
68
+ statusLoad,
69
+ values,
70
+ mode
71
+ });
47
72
  return /* @__PURE__ */ jsx(
48
73
  FormProviderCustom,
49
74
  {
@@ -6,7 +6,6 @@ export * from './areas';
6
6
  export * from './BaseModule';
7
7
  export * from './Card';
8
8
  export * from './Chip';
9
- export * from './Card';
10
9
  export * from './commercial';
11
10
  export * from './CommonActions/';
12
11
  export * from './ContainerFlow';
@@ -21,9 +21,7 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
21
21
  // Diferencia
22
22
  refresh,
23
23
  error = false,
24
- htmlFor,
25
- readOnly = false,
26
- placeholder
24
+ htmlFor
27
25
  } = props;
28
26
  const { getLabel } = useModuleDictionary();
29
27
  const isSkeleton = useModuleSkeleton();
@@ -49,9 +47,8 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
49
47
  variant,
50
48
  disabled,
51
49
  multiple: Boolean(multiple),
52
- error,
53
- readOnly
54
- }), [adjustedSize, disabled, error, multiple, variant, readOnly]);
50
+ error
51
+ }), [adjustedSize, disabled, error, multiple, variant]);
55
52
  const startAdornments = useStartAdornments({
56
53
  selectedValue,
57
54
  multiple,
@@ -69,8 +66,7 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
69
66
  handleRefresh,
70
67
  disabled,
71
68
  onOpenLocal,
72
- open,
73
- readOnly
69
+ open
74
70
  });
75
71
  if (isSkeleton) {
76
72
  return /* @__PURE__ */ jsx(
@@ -162,14 +158,12 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
162
158
  InputProps: {
163
159
  ...otherInputProps,
164
160
  startAdornment: startAdornments,
165
- endAdornment: endAdornments,
166
- readOnly
161
+ endAdornment: endAdornments
167
162
  },
168
163
  SelectProps: { native: true },
169
164
  size: adjustedSize,
170
165
  fullWidth: true,
171
- disabled,
172
- placeholder
166
+ disabled
173
167
  }
174
168
  );
175
169
  }