@m4l/components 9.3.19-BE101025-beta.2 → 9.3.19-BE241025-beta.1

package/components/WindowBase/subcomponents/Header/HeaderWindowBase.js

@@ -8,7 +8,7 @@ import { deepEqual } from "fast-equals";
 import { useFormatter } from "@m4l/graphics";
 import { u as useButtonActions } from "./useButtonActions.js";
 import { H as HeaderWindowComponentStyled, c as HeaderContentStyled, I as IconWindowStyled, d as ContainerTitleSubtitleStyled, e as TitleWindowStyled, P as PointIconStyled, S as SubtitleWindowStyled, f as IconsWrapperStyled, g as ContainerLeftActionsStyled, M as MenuActionsWindowsStyled } from "../../slots/WindowBaseSlots.js";
-import { a as WINDOW_BASE_CLASSES } from "../../constants.js";
+import { w as windowBaseClasses } from "../../constants.js";
 import clsx from "clsx";
 const HeaderWindowBase = (props) => {
   const {
@@ -24,7 +24,7 @@ const HeaderWindowBase = (props) => {
     variant,
     actions = [],
     collapsed,
-    type,
+    emergeType,
     draggable
   } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
@@ -103,17 +103,17 @@ const HeaderWindowBase = (props) => {
     maximized,
     variant,
     size,
-    type,
+    emergeType,
     collapsed,
     draggable
   };
   const IconButtonLeftActions = useButtonActions(leftActions);
   const IconButtonRightActions = useButtonActions(rightActions);
-  return /* @__PURE__ */ jsxs(HeaderWindowComponentStyled, { className: clsx(draggable && dragResizeWindowRNDClasses.draggableHandle, WINDOW_BASE_CLASSES.headerWindowComponent), ownerState, children: [
-    /* @__PURE__ */ jsxs(HeaderContentStyled, { ownerState, children: [
+  return /* @__PURE__ */ jsxs(HeaderWindowComponentStyled, { className: clsx(draggable && dragResizeWindowRNDClasses.draggableHandle, windowBaseClasses.headerWindowComponent), ownerState, children: [
+    /* @__PURE__ */ jsxs(HeaderContentStyled, { ownerState, className: windowBaseClasses.headerContentWindowBase, children: [
       iconUrl && /* @__PURE__ */ jsx(IconWindowStyled, { size, ownerState, src: iconUrl, "aria-label": "main icon" }),
       /* @__PURE__ */ jsxs(ContainerTitleSubtitleStyled, { size, ownerState, children: [
-        /* @__PURE__ */ jsx(TitleWindowStyled, { variant: type === "popup" || type === "modal" ? "body" : "captionDens", size, skeletonWidth: 100, ownerState, children: title }),
+        /* @__PURE__ */ jsx(TitleWindowStyled, { variant: emergeType === "popup" || emergeType === "modal" ? "body" : "captionDens", size, skeletonWidth: 100, ownerState, children: title }),
         subTitle && /* @__PURE__ */ jsx(
           PointIconStyled,
           {
@@ -122,7 +122,7 @@ const HeaderWindowBase = (props) => {
             ownerState
           }
         ),
-        subTitle && /* @__PURE__ */ jsx(SubtitleWindowStyled, { variant: type === "popup" || type === "modal" ? "body" : "captionDens", size, skeletonWidth: 100, ownerState, children: subTitle })
+        subTitle && /* @__PURE__ */ jsx(SubtitleWindowStyled, { variant: emergeType === "popup" || emergeType === "modal" ? "body" : "captionDens", size, skeletonWidth: 100, ownerState, children: subTitle })
       ] })
     ] }),
     /* @__PURE__ */ jsxs(

package/components/WindowBase/subcomponents/Header/types.d.ts

@@ -32,7 +32,7 @@ import { WindowBaseAction, WindowBaseProps } from '../../types';
  * - `selected` modifies the visual appearance to indicate the selected state.
  * @see WindowBaseProps - General properties for the window base.
  */
-export type HeaderProps = Pick<WindowBaseProps, 'title' | 'subTitle' | 'iconUrl' | 'onClose' | 'version' | 'selected' | 'variant' | 'type' | 'buildTime' | 'maximized' | 'draggable'> & {
+export type HeaderProps = Pick<WindowBaseProps, 'title' | 'subTitle' | 'iconUrl' | 'onClose' | 'version' | 'selected' | 'variant' | 'emergeType' | 'buildTime' | 'maximized' | 'draggable'> & {
     actions?: WindowBaseAction[];
 };
 /**

package/components/WindowBase/subcomponents/MicroFrontend/types.d.ts

@@ -1,3 +1,5 @@
+import { AuthUserType } from '@m4l/core';
+import { EmergeType } from '../../../areas/types';
 import { MFBaseProps } from '../../../MFLoader/types';
 import { WindowToolsMF } from '../../contexts';
 import { DynamicMFStore } from '../../contexts/DynamicMFParmsContext/store';
@@ -5,4 +7,6 @@ export interface MicroFrontendProps extends MFBaseProps {
     moduleId: string;
     windowTools: WindowToolsMF;
     dynamicMFStore: DynamicMFStore;
+    emergeType: EmergeType;
+    loggedUser: AuthUserType;
 }

package/components/WindowBase/types.d.ts

@@ -189,7 +189,7 @@ export interface WindowBaseProps {
      * - `'window'`: A window.
      * Default is `'window'` if not specified.
      */
-    type?: EmergeType;
+    emergeType?: EmergeType;
     /**
      * Indicates if the window is draggable.
      */
@@ -210,13 +210,13 @@ export type WindowBaseType = keyof typeof WindowBaseSlots;
  * windowBaseVariant (optional) - Visual variant of the component (`'outlined'` or `'text'`).
  * windowBaseSize (optional) - Size of the component (`'small'` or `'medium'`).
  */
-export type WindowBaseOwnerState = Pick<WindowBaseProps, 'size'> & {
+export type WindowBaseOwnerState = {
     selected?: WindowBaseProps['selected'];
     collapsed?: WindowBaseProps['collapsed'];
     maximized?: WindowBaseProps['maximized'];
     variant?: WindowBaseProps['variant'];
     size?: WindowBaseProps['size'];
-    type?: WindowBaseProps['type'];
+    emergeType?: WindowBaseProps['emergeType'];
     draggable?: WindowBaseProps['draggable'];
 };
 /**

package/components/WindowConfirm/WindowConfirm.js

@@ -56,7 +56,7 @@ const WindowConfirm = (props) => {
     info: `${host_static_assets}/${environment_assets}/frontend/components/window_confirm/assets/icons/Info.svg`
   };
   const iconUrl = iconMap[variant] || iconMap.warning;
-  return /* @__PURE__ */ jsx(AppearanceComponentProvider, { defaultSize: currentSize, children: /* @__PURE__ */ jsx(WindowBase, { iconUrl, variant: "outlined", title: getLabel("modal_dialog.label_window_confirm"), onClose: () => closeModal(), type: "modal", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(AppearanceComponentProvider, { defaultSize: currentSize, children: /* @__PURE__ */ jsx(WindowBase, { iconUrl, variant: "outlined", title: getLabel("modal_dialog.label_window_confirm"), onClose: () => closeModal(), emergeType: "modal", children: /* @__PURE__ */ jsx(
     WindowConfirmRootStyled,
     {
       className: clsx(getComponentSlotRoot(WINDOW_CONFIRM_KEY_COMPONENT)),

package/components/areas/components/AreasViewer/AreasViewer.styles.js

@@ -33,7 +33,7 @@ const areasViewerStyles = {
     flexDirection: "row",
     inset: 0,
     overflow: "hidden",
-    justifyContent: "top",
+    justifyContent: "flex-start",
     alignItems: "flex-start",
     visibility: "hidden",
     ...ownerState?.selected && {

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/Window.js

@@ -30,7 +30,8 @@ const Window = (props) => {
     dynamicMFStore,
     windowTools,
     onTouch,
-    memoizedActions
+    memoizedActions,
+    loggedUser
   } = useWindow(windowId, areaId);
   const maximizedId = useAreasStore(
     (state) => areaId ? state.hashAreas[areaId]?.maximizedId : void 0,
@@ -67,7 +68,7 @@ const Window = (props) => {
       selected,
       maximized: !!maximizedId,
       onMouseDown: onTouch,
-      type: emergeType,
+      emergeType,
       collapsed,
       ...process.env.NODE_ENV !== "production" ? {
         [TEST_PROP_ID]: getNameDataTestId(
@@ -79,14 +80,17 @@ const Window = (props) => {
       children: status === "loaded" ? winType === "microfrontend" ? /* @__PURE__ */ jsx(
         MemonizedWindowBaseMicroFrontend,
         {
+          emergeType,
           moduleId,
           dynamicMFStore,
           windowTools,
+          loggedUser,
           ...mfProps
         }
       ) : /* @__PURE__ */ jsx(
         WindowBaseComponent,
         {
+          emergeType,
           dynamicMFStore,
           windowTools,
           component

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/hooks/useWindow.d.ts

@@ -31,4 +31,5 @@ export declare const useWindow: (windowId: string, areaId?: string) => {
     windowTools: WindowToolsMF;
     onTouch: () => void;
     memoizedActions: import('../../../../../../../../WindowBase/types').WindowBaseAction[];
+    loggedUser: import('@m4l/core').Maybe<import('@m4l/core').UserAuth>;
 };

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/hooks/useWindow.js

@@ -3,9 +3,25 @@ import { shallow } from "zustand/shallow";
 import { u as useAreasStore } from "../../../../../../../hooks/useAreas/index.js";
 import { u as useHeaderActions } from "./useHeaderActions.js";
 import { u as usePopupsStore } from "../../../../../../../../popups/components/PopupsProvider/hooks/usePopupsStore.js";
+import { useAuth } from "@m4l/core";
 import { c as createToaster } from "../../../../../../../../ToastContainer/helpers/toaster.js";
 const useWindow = (windowId, areaId) => {
-  const [emergeType, moduleId, winType, title, subTitle, editionInfo, iconUrl, version, buildTime, moduleCount, selected, loading, status, dynamicMFStore] = useAreasStore((state) => {
+  const [
+    emergeType,
+    moduleId,
+    winType,
+    title,
+    subTitle,
+    editionInfo,
+    iconUrl,
+    version,
+    buildTime,
+    moduleCount,
+    selected,
+    loading,
+    status,
+    dynamicMFStore
+  ] = useAreasStore((state) => {
     const window = state.hashWindows[windowId];
     const selected2 = areaId ? state.hashAreas[areaId]?.currentLayoutId === windowId : false;
     return [
@@ -26,6 +42,7 @@ const useWindow = (windowId, areaId) => {
     ];
   }, shallow);
   const mfProps = useAreasStore((state) => state.hashWindows[windowId]?.mfProps, shallow);
+  const { user: loggedUser } = useAuth();
   const component = useAreasStore(
     (state) => state.hashWindows[windowId]?.component,
     shallow
@@ -66,7 +83,7 @@ const useWindow = (windowId, areaId) => {
         throw new Error("show not implemented");
       }
     }),
-    [windowId, version, setActions, getCookie, getCookies, setCookie, close, startProgress, stopProgress, setFnQueryClose, setWindowTitle]
+    [windowId, setActions, getCookie, getCookies, setCookie, close, startProgress, stopProgress, setFnQueryClose, setWindowTitle]
   );
   useEffect(() => {
     if (status === "init") {
@@ -100,7 +117,8 @@ const useWindow = (windowId, areaId) => {
     dynamicMFStore,
     windowTools,
     onTouch,
-    memoizedActions
+    memoizedActions,
+    loggedUser
   };
 };
 export {

package/components/areas/index.d.ts

@@ -1,5 +1,5 @@
 export * from './components';
 export * from './contexts';
 export * from './hooks';
-export type { CookieType } from './types';
+export type { CookieType, EmergeType } from './types';
 export * from './dictionary';

package/components/areas/types.d.ts

@@ -148,7 +148,7 @@ export type AreaLayoutStateProps = AreaLayoutProps & WindowState;
 export type EmmitNewLayoutProps = Omit<AreaLayoutMFProps, 'windowId' | 'onClose' | 'areaId'> | Omit<AreaLayoutComponentProps, 'windowId' | 'onClose' | 'areaId'> & {
     winType: string;
     emergeType: string;
-    layoutProps: any;
+    layoutProps: Omit<LayoutItem, 'i'>;
     moduleId: string;
     dynamicParams: Record<string, any>;
     iconUrl: string;

package/components/formatters/DistanceToNowFormatter/DistanceToNowFormatter.js

@@ -1,46 +1,15 @@
 import { jsx } from "react/jsx-runtime";
-import React, { useMemo, useState, useCallback } from "react";
+import React from "react";
 import clsx from "clsx";
-import { useModuleDictionary } from "@m4l/core";
 import { R as RootStyled } from "./slots/DistanceToNowFormatterSlots.js";
-import { u as useInterval } from "../../../hooks/useInterval/index.js";
-import { D as DTNF_DICCTIONARY } from "./dictionary.js";
 import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { C as COMPONET_KEY_COMPONENT } from "./constants.js";
 import { D as DistanceToNowFormatterSlots } from "./slots/slots.js";
-import { f as formatDistanceToNow } from "../../../utils/formatDistanceToNow/formatDistanteToNow.js";
+import { u as useDistanceToNowFormatter } from "./hooks/useDistanceToNowFormatter.js";
 import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
 function DistanceToNowFormatter(props) {
   const { presentationTime = "present", date, dataTestId, delay, className, Component = RootStyled, componentProps } = props;
-  const { getLabel } = useModuleDictionary();
-  const dictionary = useMemo(() => {
-    const ret = {
-      label_sentence_past_seconds: getLabel(DTNF_DICCTIONARY.LABEL_SENTENCE_PAST_SECONDS),
-      label_sentence_past_others: getLabel(DTNF_DICCTIONARY.LABEL_SENTENCE_PAST_OTHERS),
-      label_sentence_present_seconds: getLabel(DTNF_DICCTIONARY.LABEL_SENTENCE_PRESENT_SECONDS),
-      label_sentence_present_others: getLabel(DTNF_DICCTIONARY.LABEL_SENTENCE_PRESENT_OTHERS),
-      label_sentence_future_seconds: getLabel(DTNF_DICCTIONARY.LABEL_SENTENCE_FUTURE_SECONDS),
-      label_sentence_future_others: getLabel(DTNF_DICCTIONARY.LABEL_SENTENCE_FUTURE_OTHERS),
-      label_unit_time_second: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_SECOND),
-      label_unit_time_seconds: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_SECONDS),
-      label_unit_time_minute: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_MINUTE),
-      label_unit_time_minutes: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_MINUTES),
-      label_unit_time_hour: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_HOUR),
-      label_unit_time_hours: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_HOURS),
-      label_unit_time_day: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_DAY),
-      label_unit_time_days: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_DAYS),
-      label_unit_time_month: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_MONTH),
-      label_unit_time_months: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_MONTHS),
-      label_unit_time_year: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_YEAR),
-      label_unit_time_years: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_YEARS)
-    };
-    return ret;
-  }, [getLabel]);
-  const [time, setTime] = useState(formatDistanceToNow(presentationTime, date, dictionary));
-  const updateTime = useCallback(() => {
-    setTime(formatDistanceToNow(presentationTime, date, dictionary));
-  }, [date, dictionary, presentationTime]);
-  useInterval(updateTime, delay);
+  const { time } = useDistanceToNowFormatter({ presentationTime, date, delay });
   if (Component === React.Fragment) {
     return time;
   }

package/components/formatters/DistanceToNowFormatter/dictionary.d.ts

@@ -19,4 +19,12 @@ export declare const DTNF_DICCTIONARY: {
     readonly LABEL_UNIT_TIME_MONTHS: "distance_to_now_formmater.label_unit_time_months";
     readonly LABEL_UNIT_TIME_YEAR: "distance_to_now_formmater.label_unit_time_year";
     readonly LABEL_UNIT_TIME_YEARS: "distance_to_now_formmater.label_unit_time_years";
+    readonly LABEL_UNIT_TIME_SECONDS_SHORT: "distance_to_now_formmater.label_unit_time_seconds_short";
+    readonly LABEL_UNIT_TIME_MINUTES_SHORT: "distance_to_now_formmater.label_unit_time_minutes_short";
+    readonly LABEL_UNIT_TIME_HOURS_SHORT: "distance_to_now_formmater.label_unit_time_hours_short";
+    readonly LABEL_UNIT_TIME_DAYS_SHORT: "distance_to_now_formmater.label_unit_time_days_short";
+    readonly LABEL_UNIT_TIME_MONTHS_SHORT: "distance_to_now_formmater.label_unit_time_months_short";
+    readonly LABEL_UNIT_TIME_YEARS_SHORT: "distance_to_now_formmater.label_unit_time_years_short";
+    readonly LABEL_SEPARATOR_TIME: "distance_to_now_formmater.label_separator_time";
+    readonly LABEL_SEPARATOR_DATE: "distance_to_now_formmater.label_separator_date";
 };

package/components/formatters/DistanceToNowFormatter/hooks/useDistanceToNowFormatter.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { DistanceToNowFormatterProps } from '../types';
+import { FormatDistanceToNowReturn } from '../../../../utils/formatDistanceToNow/types';
+/**
+ * "useDistanceToNowFormatter" que se encarga de retornar el tiempo transcurrido desde una fecha hasta la fecha actual.
+ * Actualizando cada delay configurable a través de props
+ * Tiene 3 tipos de presentaciones:
+ * En tiempo pasado
+ * En tiempo presente
+ * En tiempo futuro
+ *
+ */
+export declare function useDistanceToNowFormatter<T extends React.ElementType>(props: DistanceToNowFormatterProps<T>): FormatDistanceToNowReturn;

package/components/formatters/DistanceToNowFormatter/hooks/useDistanceToNowFormatter.js

@@ -0,0 +1,65 @@
+import { useMemo, useState, useRef, useCallback, useEffect } from "react";
+import { useModuleDictionary } from "@m4l/core";
+import { u as useInterval } from "../../../../hooks/useInterval/index.js";
+import { D as DTNF_DICCTIONARY } from "../dictionary.js";
+import { f as formatDistanceToNow } from "../../../../utils/formatDistanceToNow/formatDistanteToNow.js";
+function useDistanceToNowFormatter(props) {
+  const { presentationTime = "present", date, delay } = props;
+  const { getLabel } = useModuleDictionary();
+  const dictionary = useMemo(() => {
+    const ret = {
+      label_sentence_past_seconds: getLabel(DTNF_DICCTIONARY.LABEL_SENTENCE_PAST_SECONDS),
+      label_sentence_past_others: getLabel(DTNF_DICCTIONARY.LABEL_SENTENCE_PAST_OTHERS),
+      label_sentence_present_seconds: getLabel(DTNF_DICCTIONARY.LABEL_SENTENCE_PRESENT_SECONDS),
+      label_sentence_present_others: getLabel(DTNF_DICCTIONARY.LABEL_SENTENCE_PRESENT_OTHERS),
+      label_sentence_future_seconds: getLabel(DTNF_DICCTIONARY.LABEL_SENTENCE_FUTURE_SECONDS),
+      label_sentence_future_others: getLabel(DTNF_DICCTIONARY.LABEL_SENTENCE_FUTURE_OTHERS),
+      label_unit_time_second: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_SECOND),
+      label_unit_time_seconds: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_SECONDS),
+      label_unit_time_minute: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_MINUTE),
+      label_unit_time_minutes: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_MINUTES),
+      label_unit_time_hour: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_HOUR),
+      label_unit_time_hours: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_HOURS),
+      label_unit_time_day: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_DAY),
+      label_unit_time_days: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_DAYS),
+      label_unit_time_month: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_MONTH),
+      label_unit_time_months: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_MONTHS),
+      label_unit_time_year: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_YEAR),
+      label_unit_time_years: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_YEARS),
+      label_unit_time_seconds_short: "ss",
+      // getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_SECONDS_SHORT),
+      label_unit_time_minutes_short: "mm",
+      // getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_MINUTES_SHORT),
+      label_unit_time_hours_short: "hh",
+      // getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_HOURS_SHORT),
+      label_unit_time_days_short: "DD",
+      // getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_DAYS_SHORT),
+      label_unit_time_months_short: "MM",
+      // getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_MONTHS_SHORT),
+      label_unit_time_years_short: "YY",
+      // getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_YEARS_SHORT),
+      label_separator_time: ":",
+      // getLabel(DTNF_DICCTIONARY.LABEL_SEPARATOR_TIME),
+      label_separator_date: "-"
+      // getLabel(DTNF_DICCTIONARY.LABEL_SEPARATOR_DATE),
+    };
+    return ret;
+  }, [getLabel]);
+  const [time, setTime] = useState(formatDistanceToNow(presentationTime, new Date(date), dictionary));
+  const refTime = useRef({ ...time });
+  const updateTime = useCallback(() => {
+    const newTime = formatDistanceToNow(presentationTime, new Date(date), dictionary);
+    if (refTime.current.value !== newTime.value || refTime.current.unit !== newTime.unit) {
+      refTime.current = newTime;
+      setTime(newTime);
+    }
+  }, [date, dictionary, presentationTime]);
+  useEffect(() => {
+    updateTime();
+  }, [updateTime]);
+  useInterval(updateTime, delay);
+  return time;
+}
+export {
+  useDistanceToNowFormatter as u
+};

package/components/formatters/DistanceToNowFormatter/index.d.ts

@@ -1,2 +1,3 @@
 export * from './DistanceToNowFormatter';
+export * from './hooks/useDistanceToNowFormatter';
 export { getDistanceToNowFormatterComponentsDictionary } from './dictionary';

package/components/formatters/DistanceToNowFormatter/types.d.ts

@@ -11,7 +11,10 @@ export type DistanceToNowFormatterProps<T extends React.ElementType = typeof Roo
      */
     componentProps?: React.ComponentPropsWithoutRef<T>;
     presentationTime: PresentationTimeType;
-    date: Date;
+    /**
+     * Se maneja en string, para evitar re-renderizaciones innecesarias debido a que Date es un objeto y se crea un nuevo objeto cada vez que se pasa como prop.
+     */
+    date: string;
     delay?: number;
     dataTestId?: string;
     className?: string;

package/components/hook-form/RHFAutocomplete/RHFAutocomplete.d.ts

@@ -4,4 +4,4 @@ import { RHFAutocompleteProps } from './types';
  * @param props - The properties for the RHFAutocomplete component.
  * @returns The RHFAutocomplete component.
  */
-export declare function RHFAutocomplete<T>(props: RHFAutocompleteProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function RHFAutocomplete<T, Multiple extends boolean | undefined = undefined, DisableClearable extends boolean | undefined = undefined, FreeSolo extends boolean | undefined = undefined>(props: RHFAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>): import("react/jsx-runtime").JSX.Element;

package/components/hook-form/RHFAutocomplete/RHFAutocomplete.js

@@ -1,6 +1,8 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useId, useState, useCallback, useEffect } from "react";
 import { useFormContext, Controller } from "react-hook-form";
+import { r as rhfAutocompleteClasses } from "./constants.js";
+import clsx from "clsx";
 import { A as AutocompleteRootStyled, L as LabelStyled } from "./slots/RHFAutocompleteSlots.js";
 import { A as Autocomplete } from "../../mui_extended/Autocomplete/Autocomplete.js";
 import { H as HelperError } from "../../HelperError/HelperError.js";
@@ -23,8 +25,9 @@ function RHFAutocomplete(props) {
     multiple,
     refresh,
     startAdornment,
-    getOptionalStartAdornment,
-    getOptionalEndAdornment
+    getOptionStartAdornment,
+    getOptionEndAdornment,
+    className
     // onChange: onChangeRHF,
   } = props;
   const htmlForId = useId();
@@ -62,6 +65,7 @@ function RHFAutocomplete(props) {
   return /* @__PURE__ */ jsx(
     AutocompleteRootStyled,
     {
+      className: clsx(className, rhfAutocompleteClasses.autocompleteRoot),
       ownerState: { ...ownerState },
       size,
       children: /* @__PURE__ */ jsx(
@@ -117,8 +121,8 @@ function RHFAutocomplete(props) {
                   value,
                   htmlFor: htmlForId,
                   startAdornment,
-                  getOptionalStartAdornment: getOptionalStartAdornment ? (option) => getOptionalStartAdornment(option) : () => null,
-                  getOptionalEndAdornment: getOptionalEndAdornment ? (option) => getOptionalEndAdornment(option) : () => null
+                  getOptionStartAdornment,
+                  getOptionEndAdornment
                 }
               ),
               error?.message ? /* @__PURE__ */ jsx(HelperError, { message: error?.message }) : null

package/components/hook-form/RHFAutocomplete/constants.d.ts

@@ -7,3 +7,4 @@
  */
 export declare const RFHAUTOCOMPLETE_KEY_COMPONENT = "RHFM4LAutocomplete";
 export declare const RFHAUTOCOMPLETE_CLASS_NAME_SPECIFY = "RHFM4LclasssAutocompleCssSpecificity";
+export declare const rhfAutocompleteClasses: Record<"label" | "autocompleteRoot", string>;

package/components/hook-form/RHFAutocomplete/constants.js

@@ -1,4 +1,8 @@
+import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
+import { R as RFHAutocompleteSlots } from "./slots/RHFAutocompleteEnum.js";
 const RFHAUTOCOMPLETE_KEY_COMPONENT = "RHFM4LAutocomplete";
+const rhfAutocompleteClasses = getComponentClasses(RFHAUTOCOMPLETE_KEY_COMPONENT, RFHAutocompleteSlots);
 export {
-  RFHAUTOCOMPLETE_KEY_COMPONENT as R
+  RFHAUTOCOMPLETE_KEY_COMPONENT as R,
+  rhfAutocompleteClasses as r
 };

package/components/hook-form/RHFAutocomplete/types.d.ts

@@ -54,11 +54,11 @@ export interface RHFAutocompleteProps<T = any, Multiple extends boolean | undefi
     /**
      * Icono o adorno inicial que se muestra en cada opción del autocomplete.
      */
-    getOptionalEndAdornment?: AutocompleteProps<T, Multiple>['getOptionalEndAdornment'];
+    getOptionEndAdornment?: AutocompleteProps<T, Multiple>['getOptionEndAdornment'];
     /**
      * Icono o adorno final que se muestra en cada opción del autocomplete.
      */
-    getOptionalStartAdornment?: AutocompleteProps<T, Multiple>['getOptionalStartAdornment'];
+    getOptionStartAdornment?: AutocompleteProps<T, Multiple>['getOptionStartAdornment'];
 }
 /**
  * Represents the owner state of the Autocomplete component for styling purposes.

package/components/hook-form/RHFAutocompleteAsync/RHFAutocompleteAsync.js

@@ -24,8 +24,9 @@ function RHFAutocompleteAsync(props) {
     skeletonWidth,
     responseToCamelCase,
     startAdornment,
-    getOptionalStartAdornment,
-    getOptionalEndAdornment
+    getOptionStartAdornment,
+    getOptionEndAdornment,
+    className
   } = props;
   const [state, dispatch] = useReducer(
     RHFAutocompleteAsyncReducer(onChangeFilterParms),
@@ -77,6 +78,7 @@ function RHFAutocompleteAsync(props) {
   return /* @__PURE__ */ jsx(
     RHFAutocomplete,
     {
+      className,
       name,
       loading: state.loading,
       label,
@@ -92,8 +94,8 @@ function RHFAutocompleteAsync(props) {
       onClose: onCloseLocal,
       skeletonWidth,
       startAdornment,
-      getOptionalStartAdornment,
-      getOptionalEndAdornment
+      getOptionStartAdornment,
+      getOptionEndAdornment
     }
   );
 }

package/components/hook-form/RHFAutocompleteAsync/slots/RHFAutocompleteSlotsAsync.d.ts

@@ -1 +1 @@
-export declare const RHFAutocompleteAsyncRootStyled: import('@emotion/styled').StyledComponent<Pick<import('../../RHFAutocomplete/types').RHFAutocompleteProps<unknown, undefined, undefined, undefined>, keyof import('../../RHFAutocomplete/types').RHFAutocompleteProps<unknown, undefined, undefined, undefined>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, {}, {}>;
+export declare const RHFAutocompleteAsyncRootStyled: import('@emotion/styled').StyledComponent<Pick<import('../../RHFAutocomplete/types').RHFAutocompleteProps<unknown, boolean | undefined, boolean | undefined, boolean | undefined>, keyof import('../../RHFAutocomplete/types').RHFAutocompleteProps<unknown, boolean | undefined, boolean | undefined, boolean | undefined>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, {}, {}>;

package/components/hook-form/RHFAutocompleteAsync/types.d.ts

@@ -41,6 +41,10 @@ export interface RHFAutocompleteAsyncProps<T extends any = unknown> extends Omit
      * Whether the autocomplete is multiple
      */
     multiple?: boolean;
+    /**
+     * Class name for the autocomplete
+     */
+    className?: string;
 }
 /**
  * Defines the types of Slots available for the Autocomplete.

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

@@ -1,9 +1,5 @@
+import { Ref } from 'react';
 import { AutocompleteProps } from './types';
-/**
- * Autocomplete refactorizado con slots M4L.
- * Tener en cuenta que cuando es multiple y se abre el dropdown, y el value no está dentro de lasl  opciones.
- * MUI va a genera el siguiente warning (Y es normal que suceda, no es necesario darle solución):
- *     MUI: The value provided to Autocomplete is invalid.
- *     None of the options match with `{"y":y,"x":"xxx"}`. etc.
- */
-export declare const Autocomplete: import('react').ForwardRefExoticComponent<AutocompleteProps<unknown, boolean | undefined> & import('react').RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
+export declare const Autocomplete: <T, Multiple extends boolean | undefined = undefined>(props: AutocompleteProps<T, Multiple> & {
+    ref?: Ref<HTMLInputElement | HTMLTextAreaElement>;
+}) => JSX.Element;

package/components/mui_extended/Autocomplete/Autocomplete.js

@@ -8,7 +8,7 @@ import { u as useEndAdornments } from "./hooks/useEndAdornments.js";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
 import { S as SkeletonAutocompleteStyled, A as AutocompleteRootStyled, R as RenderInputStyled, P as PopperComponentStyled } from "./slots/AutocompleteSlots.js";
 import { T as Typography } from "../Typography/Typography.js";
-const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
+function AutocompleteComponent(props, ref) {
   const {
     options,
     disabled,
@@ -17,16 +17,14 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
     size = "medium",
     onChangeFilterParmsLocal,
     multiple,
-    getOptionUrlImage,
-    // Diferencia
     refresh,
     error = false,
     htmlFor,
     readOnly = false,
     placeholder,
     startAdornment,
-    getOptionalStartAdornment,
-    getOptionalEndAdornment
+    getOptionStartAdornment,
+    getOptionEndAdornment
   } = props;
   const { getLabel } = useModuleDictionary();
   const isSkeleton = useModuleSkeleton();
@@ -47,6 +45,7 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
     checkKeyDown,
     scrollPositionOptionsRef
   } = useValuesAndHandlers(props);
+  const hasStartAdornment = !!startAdornment;
   const ownerState = useMemo(() => ({
     size: adjustedSize,
     variant,
@@ -54,8 +53,8 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
     multiple: Boolean(multiple),
     error,
     readOnly,
-    startAdornment: !!startAdornment
-  }), [adjustedSize, disabled, error, multiple, variant, readOnly, startAdornment]);
+    startAdornment: hasStartAdornment
+  }), [adjustedSize, disabled, error, multiple, variant, readOnly, hasStartAdornment]);
   const startAdornments = useStartAdornments({
     selectedValue,
     multiple,
@@ -65,8 +64,8 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
     handleDelete,
     disabled,
     startAdornment,
-    getOptionalStartAdornment,
-    getOptionalEndAdornment
+    getOptionStartAdornment,
+    getOptionEndAdornment
   });
   const endAdornments = useEndAdornments({
     loading,
@@ -133,7 +132,7 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
           selected: isSelected,
           disabled,
           size
-        });
+        }, getOptionStartAdornment, getOptionEndAdornment);
       },
       ListboxProps: {
         //Esto para no perder el scroll de la lista de opciones, cuando es multiple, ya que MUI no lo guarda
@@ -182,7 +181,8 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
       }
     }
   );
-});
+}
+const Autocomplete = forwardRef(AutocompleteComponent);
 export {
   Autocomplete as A
 };