@m4l/components 9.4.17 → 9.4.19

package/components/mui_extended/Autocomplete/slots/AutocompleteSlots.js

@@ -3,8 +3,8 @@ import { styled } from "@mui/material/styles";
 import { C as Chip } from "../../../Chip/Chip.js";
 import { I as Image } from "../../../Image/Image.js";
 import { a as autocompleteSyles } from "../Autocomplete.styles.js";
-import { A as AUTOCOMPLETE_KEY_COMPONENT } from "../constants.js";
-import { A as AutocompleteSlots } from "./AutocompleteEnum.js";
+import { a as AUTOCOMPLETE_KEY_COMPONENT } from "../constants.js";
+import { a as AutocompleteSlots } from "./AutocompleteEnum.js";
 import { S as Skeleton } from "../../Skeleton/Skeleton.js";
 import { T as TextField } from "../../TextField/TextField.js";
 import { P as Popper } from "../../Popper/Popper.js";
@@ -76,6 +76,10 @@ const ContainerWrapperStyled = styled("div", {
   name: AUTOCOMPLETE_KEY_COMPONENT,
   slot: AutocompleteSlots.containerWrapper
 })(autocompleteSyles?.containerWrapper);
+const WrapperEndAdornmentStyled = styled("div", {
+  name: AUTOCOMPLETE_KEY_COMPONENT,
+  slot: AutocompleteSlots.wrapperEndAdornment
+})(autocompleteSyles?.wrapperEndAdornment);
 export {
   AutocompleteRootStyled as A,
   CircularProgressStyled as C,
@@ -83,9 +87,10 @@ export {
   PopperComponentStyled as P,
   RenderInputStyled as R,
   SkeletonAutocompleteStyled as S,
-  WrapperStartAdornmentStyled as W,
+  WrapperEndAdornmentStyled as W,
   AdormentsStyled as a,
   ContainerMultipleValuesStyled as b,
   ContainerWrapperStyled as c,
-  ChipStyled as d
+  ChipStyled as d,
+  WrapperStartAdornmentStyled as e
 };

package/components/mui_extended/Autocomplete/subcomponents/renderOptions/index.js

@@ -40,12 +40,12 @@ const RenderOptionComponent = ({
       disabled: option.disabled,
       startIcon: processedStartAdornment,
       endIcon: processedEndAdornment
-    },
-    option.label
+    }
   );
 };
 const MemoizedRenderOptionComponent = memo(RenderOptionComponent);
 const renderOption = (optionProps, option, getOptionStartAdornment, getOptionEndAdornment) => {
+  const uniqueKey = optionProps.key || option?.id?.toString() || option.label;
   return /* @__PURE__ */ jsx(
     MemoizedRenderOptionComponent,
     {
@@ -53,7 +53,8 @@ const renderOption = (optionProps, option, getOptionStartAdornment, getOptionEnd
       option,
       getOptionStartAdornment,
       getOptionEndAdornment
-    }
+    },
+    uniqueKey
   );
 };
 export {

package/components/mui_extended/Autocomplete/types.d.ts

@@ -90,6 +90,10 @@ export interface AutocompleteProps<T, Multiple extends boolean | undefined> exte
      * Icono o adorno que se muestra al inicio del autocomplete.
      */
     startAdornment?: ReactElement;
+    /**
+     * Clase de css para el autocomplete.
+     */
+    className?: string;
 }
 export type ResourceType = {
     resource: ReactNode;
@@ -98,13 +102,16 @@ export type ResourceType = {
 /**
  * Represents the owner state of the Autocomplete component for styling purposes.
  */
-export interface AutocompleteOwnerState extends Pick<BaseAutocompleteProps, 'size' | 'variant'> {
+export type AutocompleteOwnerState = {
     error?: boolean;
     disabled?: boolean;
     multiple?: boolean;
     readOnly?: boolean;
     startAdornment?: boolean;
-}
+    hasChips?: boolean;
+    size: BaseAutocompleteProps['size'];
+    variant: BaseAutocompleteProps['variant'];
+};
 /**
  * Defines the types of Slots available for the Autocomplete.
  */

package/hocs/index.d.ts

@@ -1 +1,3 @@
 export { withToggle } from './withToggle';
+export { withRHFController } from './withRHFController';
+export type { BaseRHFProps, RHFControllerRenderProps, ComponentWithRHFControllerProps, WithRHFControllerProps, } from './withRHFController/types';

package/hocs/withRHFController/constants.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Constantes para el HOC withRHFController
+ */
+export declare const WITH_RHF_CONTROLLER_KEY = "withRHFController";
+/**
+ * Clases CSS para el HOC withRHFController
+ */
+export declare const WITH_RHF_CONTROLLER_CLASSES: Record<"root", string>;

package/hocs/withRHFController/constants.js

@@ -0,0 +1,8 @@
+import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
+import { W as WithRHFControllerSlots } from "./slots/WithRHFControllerEnum.js";
+const WITH_RHF_CONTROLLER_KEY = "withRHFController";
+const WITH_RHF_CONTROLLER_CLASSES = getComponentClasses(WITH_RHF_CONTROLLER_KEY, WithRHFControllerSlots);
+export {
+  WITH_RHF_CONTROLLER_CLASSES as W,
+  WITH_RHF_CONTROLLER_KEY as a
+};

package/hocs/withRHFController/index.d.ts

@@ -0,0 +1,37 @@
+import { default as React } from 'react';
+import { FieldValues } from 'react-hook-form';
+import { BaseRHFProps, ComponentWithRHFControllerProps } from './types';
+/**
+ * HOC que envuelve un componente con la funcionalidad de Controller de react-hook-form.
+ *
+ * Este HOC automatiza la integración con react-hook-form proporcionando:
+ * - Acceso automático al control del formulario mediante useFormContext
+ * - Wrapper con Controller que maneja el estado del campo
+ * - Props del field, fieldState y formState pasadas automáticamente al componente envuelto
+ * - Props estándar de RHF (value, onChange, onBlur, name, error) extraídas del field y fieldState para compatibilidad
+ * @template TComponentProps - Props del componente que será envuelto
+ * @template TFieldValues - Tipo de los valores del formulario
+ * @param Component - Componente a envolver
+ * @returns Componente envuelto con funcionalidad RHF
+ * @example
+ * ```tsx
+ * // Componente base sin RHF - puede usar field completo o props individuales
+ * const MyInput = ({ field, fieldState, value, onChange, ...props }) => (
+ *   <input {...field} {...props} />
+ * );
+ *
+ * // O usar props estándar de RHF directamente
+ * const MyTextField = ({ value, onChange, onBlur, error, ...props }) => (
+ *   <TextField value={value} onChange={onChange} onBlur={onBlur} error={error} {...props} />
+ * );
+ *
+ * // Componente envuelto con HOC
+ * const RHFMyInput = withRHFController(MyInput);
+ * const RHFMyTextField = withRHFController(MyTextField);
+ *
+ * // Uso en formulario
+ * <RHFMyInput name="email" label="Email" />
+ * <RHFMyTextField name="email" label="Email" />
+ * ```
+ */
+export declare function withRHFController<TComponentProps extends Record<string, any> = {}, TFieldValues extends FieldValues = FieldValues>(Component: React.ComponentType<ComponentWithRHFControllerProps<TComponentProps, TFieldValues>>): React.ForwardRefExoticComponent<React.PropsWithoutRef<TComponentProps & BaseRHFProps<TFieldValues>> & React.RefAttributes<any>>;

package/hocs/withRHFController/index.js

@@ -0,0 +1,95 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import { useFormContext, Controller } from "react-hook-form";
+import { W as WITH_RHF_CONTROLLER_CLASSES } from "./constants.js";
+import clsx from "clsx";
+import { R as RootStyled } from "./slots/WithRHFControllerSlots.js";
+import { L as Label } from "../../components/Label/Label.js";
+import { H as HelperError } from "../../components/HelperError/HelperError.js";
+function withRHFController(Component) {
+  const WrappedComponent = forwardRef((props, ref) => {
+    const {
+      name,
+      control: controlProp,
+      // Puede permitir que el componente se use fuera de un FormProvider
+      label,
+      mandatory,
+      mandatoryMessage,
+      helperMessage,
+      size = "medium",
+      disabled,
+      id,
+      htmlFor,
+      ...componentProps
+    } = props;
+    const hookId = useId();
+    const htmlForId = id || htmlFor || hookId;
+    const contextControl = useFormContext()?.control;
+    const control = controlProp || contextControl;
+    if (!control) {
+      console.warn(
+        `withRHFController: No se encontró un control de formulario para el campo "${name}". Asegúrate de que el componente esté dentro de un FormProvider o proporciona el control como prop.`
+      );
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      Controller,
+      {
+        name,
+        control,
+        render: ({ field, fieldState, formState }) => {
+          const { value, onChange, onBlur, name: fieldName } = field;
+          const isDisabled = disabled || formState.isSubmitting;
+          const controllerProps = {
+            ...componentProps,
+            // Props estándar de RHF (value, onChange, onBlur, name, error)
+            // Útiles para componentes que prefieren props individuales explícitas
+            value,
+            onChange,
+            onBlur,
+            name: fieldName,
+            error: !!fieldState.error,
+            // Props del HOC que también deben pasarse al componente (size, disabled, id)
+            size,
+            disabled: isDisabled,
+            id: htmlForId,
+            // Props del Controller (field completo, fieldState, formState)
+            field,
+            fieldState,
+            formState
+          };
+          return /* @__PURE__ */ jsxs(RootStyled, { ref, className: clsx(WITH_RHF_CONTROLLER_CLASSES.root), children: [
+            label && /* @__PURE__ */ jsx(
+              Label,
+              {
+                size,
+                label,
+                htmlFor: htmlForId,
+                mandatory,
+                mandatoryMessage,
+                helperMessage,
+                disabled: isDisabled,
+                error: !!fieldState.error
+              }
+            ),
+            /* @__PURE__ */ jsx(Component, { ...controllerProps, ref: field.ref, size, disabled: isDisabled }),
+            fieldState.error?.message && /* @__PURE__ */ jsx(
+              HelperError,
+              {
+                message: fieldState.error.message,
+                size,
+                htmlFor: htmlForId
+              }
+            )
+          ] });
+        }
+      }
+    );
+  });
+  const componentName = Component.displayName || Component.name || "Component";
+  WrappedComponent.displayName = `withRHFController(${componentName})`;
+  return WrappedComponent;
+}
+export {
+  withRHFController as w
+};

package/hocs/withRHFController/slots/WithRHFControllerEnum.d.ts

@@ -0,0 +1,3 @@
+export declare enum WithRHFControllerSlots {
+    root = "root"
+}

package/hocs/withRHFController/slots/WithRHFControllerEnum.js

@@ -0,0 +1,7 @@
+var WithRHFControllerSlots = /* @__PURE__ */ ((WithRHFControllerSlots2) => {
+  WithRHFControllerSlots2["root"] = "root";
+  return WithRHFControllerSlots2;
+})(WithRHFControllerSlots || {});
+export {
+  WithRHFControllerSlots as W
+};

package/hocs/withRHFController/slots/WithRHFControllerSlots.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Elemento div de react construido a través de styled,
+ * sirve para agrupar el contenido del HOC `withRHFController`
+ */
+export declare const RootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/hocs/withRHFController/slots/WithRHFControllerSlots.js

@@ -0,0 +1,11 @@
+import { styled } from "@mui/material/styles";
+import { a as WITH_RHF_CONTROLLER_KEY } from "../constants.js";
+import { W as WithRHFControllerSlots } from "./WithRHFControllerEnum.js";
+import { w as withRHFControllerStyles } from "../withRHFController.styles.js";
+const RootStyled = styled("div", {
+  name: WITH_RHF_CONTROLLER_KEY,
+  slot: WithRHFControllerSlots.root
+})(withRHFControllerStyles?.root);
+export {
+  RootStyled as R
+};

package/hocs/withRHFController/slots/index.d.ts

@@ -0,0 +1,2 @@
+export { WithRHFControllerSlots } from './WithRHFControllerEnum';
+export * from './WithRHFControllerSlots';

package/hocs/withRHFController/slots/index.js

@@ -0,0 +1 @@
+

package/hocs/withRHFController/types.d.ts

@@ -0,0 +1,70 @@
+import { Control, FieldPath, FieldValues, ControllerRenderProps, ControllerFieldState, FormState } from 'react-hook-form';
+import { Theme } from '@mui/material';
+import { M4LOverridesStyleRules } from '../../@types/augmentations';
+import { WithRHFControllerSlots } from './slots/WithRHFControllerEnum';
+import { WITH_RHF_CONTROLLER_KEY } from './constants';
+import { LabelPropsBase } from '../../components/Label/types';
+import { Sizes } from '@m4l/styles';
+/**
+ * Props que el componente envuelto recibirá del Controller de react-hook-form
+ */
+export interface RHFControllerRenderProps<TFieldValues extends FieldValues = FieldValues> {
+    /** Props del field del Controller */
+    field: ControllerRenderProps<TFieldValues, FieldPath<TFieldValues>>;
+    /** Estado del field (error, invalid, etc.) */
+    fieldState: ControllerFieldState;
+    /** Estado del formulario completo */
+    formState: FormState<TFieldValues>;
+}
+/**
+ * Props base que todos los componentes RHF deben tener
+ */
+export interface BaseRHFProps<TFieldValues extends FieldValues = FieldValues> extends LabelPropsBase {
+    /** Nombre del campo en el formulario */
+    name: FieldPath<TFieldValues>;
+    /** Control del formulario (opcional, se obtiene automáticamente de useFormContext si no se proporciona) */
+    control?: Control<TFieldValues>;
+    /** Tamaño del componente */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    /** Indica si el componente está deshabilitado */
+    disabled?: boolean;
+    /** Identificador único para el campo */
+    id?: string;
+}
+/**
+ * Props que el HOC añade al componente envuelto
+ */
+export interface WithRHFControllerProps<TFieldValues extends FieldValues = FieldValues> extends BaseRHFProps<TFieldValues> {
+    /** Props del render del Controller */
+    renderProps?: RHFControllerRenderProps<TFieldValues>;
+}
+/**
+ * Props adicionales que el HOC pasa al componente envuelto
+ */
+export interface WithRHFControllerAdditionalProps {
+    /** Valor del campo */
+    value?: any;
+    /** Función de cambio de valor */
+    onChange?: (...event: any[]) => void;
+    /** Función de blur (puede ser de diferentes tipos según el componente) */
+    onBlur?: (...args: any[]) => void;
+    /** Nombre del campo */
+    name?: string;
+    /** Indica si hay error */
+    error?: boolean;
+    /** Tamaño del componente */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    /** Indica si el componente está deshabilitado */
+    disabled?: boolean;
+    /** Identificador único para el campo */
+    id?: string;
+}
+/**
+ * Tipo para el componente que será envuelto por el HOC
+ */
+export type ComponentWithRHFControllerProps<TComponentProps extends Record<string, any> = {}, TFieldValues extends FieldValues = FieldValues> = TComponentProps & RHFControllerRenderProps<TFieldValues> & Partial<WithRHFControllerAdditionalProps>;
+/**
+ * Define los estilos del HOC `withRHFController`. Permite la personalización parcial
+ * de las reglas de estilo mediante `M4LOverridesStyleRules`.
+ */
+export type WithRHFControllerStyles = M4LOverridesStyleRules<WithRHFControllerSlots, typeof WITH_RHF_CONTROLLER_KEY, Theme>;

package/hocs/withRHFController/withRHFController.styles.d.ts

@@ -0,0 +1,5 @@
+import { WithRHFControllerStyles } from './types';
+/**
+ * Conjunto de estilos para el HOC `withRHFController`.
+ */
+export declare const withRHFControllerStyles: WithRHFControllerStyles;

package/hocs/withRHFController/withRHFController.styles.js

@@ -0,0 +1,14 @@
+const withRHFControllerStyles = {
+  /**
+   * Estilos para el contenedor principal del componente.
+   */
+  root: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings.sp1,
+    width: "100%"
+  })
+};
+export {
+  withRHFControllerStyles as w
+};

package/hocs/withRHFController/withRHFController.test.d.ts

@@ -0,0 +1 @@
+export {};