@m4l/components 9.3.19 → 9.3.21-JAEBeta.0

package/components/WindowBase/WindowBase.styles.js

@@ -16,7 +16,7 @@ const windowBaseStyles = {
       overflow: "hidden",
       ...ownerState?.variant === "outlined" && {
         ...ownerState?.selected ? {
-          ...ownerState?.type === "layout" ? {
+          ...ownerState?.emergeType === "layout" ? {
             background: `linear-gradient(to bottom, 
             ${theme.vars.palette.primary.opacityGradient1}, 
             ${theme.vars.palette.primary.opacityGradient2})`,
@@ -31,26 +31,26 @@ const windowBaseStyles = {
             boxShadow: `inset 0px 0px 0 1px ${theme.vars.palette?.border.main}`
           }
         } : {
-          boxShadow: ownerState?.type === "layout" ? `inset 0px 0px 0 1px ${theme.vars.palette?.border.secondary}` : "unset"
+          boxShadow: ownerState?.emergeType === "layout" ? `inset 0px 0px 0 1px ${theme.vars.palette?.border.secondary}` : "unset"
         }
       },
-      ...ownerState?.type === "popup" && {
+      ...ownerState?.emergeType === "popup" && {
         "&&&": {
           boxShadow: theme.vars.customShadows.z1,
           border: `1px solid ${theme.vars.palette?.border.secondary}`,
-          borderRadius: theme.vars.size.borderRadius.r1,
+          borderRadius: theme.vars.size.borderRadius.r3,
           ...ownerState?.selected && {
             boxShadow: theme.vars.customShadows.z4,
-            border: `1px solid ${theme.vars.palette?.border.main}`
+            border: `1px solid ${theme.vars.palette?.primary.activeOpacity}`
           }
         }
       },
-      ...ownerState?.type === "layout" && {
+      ...ownerState?.emergeType === "layout" && {
         ...ownerState?.selected && !ownerState?.maximized ? {
           boxShadow: theme.vars.customShadows.primary
         } : {}
       },
-      ...ownerState?.type === "modal" && {
+      ...ownerState?.emergeType === "modal" && {
         boxShadow: `${theme.vars.customShadows.z3}!important`
       }
     }
@@ -59,8 +59,8 @@ const windowBaseStyles = {
   /**
    * Styles for the content of the window base component.
    */
-  contentWindowBase: ({ theme, ownerState }) => ({
-    padding: ownerState?.type === "layout" ? theme.vars.size.baseSpacings.sp5 : theme.vars.size.baseSpacings.sp4,
+  contentWindowBase: ({ ownerState, theme }) => ({
+    padding: ownerState?.emergeType === "layout" ? theme.vars.size.baseSpacings.sp5 : theme.vars.size.baseSpacings.sp4,
     overflow: "auto",
     width: "100%",
     height: "100%",
@@ -69,6 +69,17 @@ const windowBaseStyles = {
       display: "none"
     }
   }),
+  /**
+   * Window  component content Styles by emergeType
+   */
+  windowContainerComponent: () => ({
+    //Mover el estilado para adentro
+    position: "relative",
+    display: "flex",
+    width: "100%",
+    height: "100%",
+    overflow: "visible"
+  }),
   /**
    * Styles for the header of the window base component.
    */
@@ -76,14 +87,19 @@ const windowBaseStyles = {
     return {
       width: "100%",
       display: "flex",
-      padding: ownerState?.type === "popup" || ownerState?.type === "modal" ? theme.vars.size.baseSpacings["sp0-5"] : theme.vars.size.baseSpacings.sp1,
+      padding: theme.vars.size.baseSpacings.sp1,
+      borderBottom: "1px solid #ffffff00",
+      ...(ownerState?.emergeType === "popup" || ownerState?.emergeType === "modal") && {
+        padding: `${theme.vars.size.baseSpacings["sp2-5"]} ${theme.vars.size.baseSpacings.sp2} 0 ${theme.vars.size.baseSpacings.sp2}`,
+        borderBottom: `unset`
+      },
       alignItems: "center",
       justifyContent: "space-between",
       flexShrink: 0,
       alignSelf: "stretch",
       cursor: ownerState?.draggable ? "all-scroll" : "default",
       position: "relative",
-      ...ownerState?.type === "layout" || ownerState?.type === "modal" ? getSizeStyles(
+      ...ownerState?.emergeType === "layout" || ownerState?.emergeType === "modal" ? getSizeStyles(
         theme,
         ownerState?.size,
         "container",
@@ -101,8 +117,7 @@ const windowBaseStyles = {
           })
         )
       },
-      borderBottom: "1px solid #ffffff00",
-      ...ownerState?.selected && ownerState?.type === "layout" && ownerState?.variant === "outlined" && !ownerState?.maximized ? {
+      ...ownerState?.selected && ownerState?.emergeType === "layout" && ownerState?.variant === "outlined" && !ownerState?.maximized ? {
         background: `linear-gradient(to right, ${theme.vars.palette.primary.opacity}, #ffffff00);`,
         "&::before": {
           content: '""',
@@ -114,8 +129,7 @@ const windowBaseStyles = {
           background: `linear-gradient(to left, ${theme.vars.palette.primary.opacityGradient2}, #ffffff00);`
         }
       } : {
-        background: "transparent",
-        borderBottom: `1px solid ${theme.vars.palette.border.disabled}`
+        background: "transparent"
       }
     };
   },
@@ -138,7 +152,7 @@ const windowBaseStyles = {
    */
   headerTitleWindowBase: ({ theme, ownerState }) => ({
     minWidth: "30px",
-    ...ownerState?.selected && ownerState?.type !== "modal" ? {
+    ...ownerState?.selected && ownerState?.emergeType !== "modal" ? {
       color: `${theme.vars.palette["primary"].semanticText} !important`
     } : {
       color: `${theme.vars.palette.text.secondary} !important`
@@ -180,7 +194,7 @@ const windowBaseStyles = {
   headerSubTitleWindowBase: ({ theme, ownerState }) => ({
     width: "auto !important",
     height: "auto !important",
-    ...ownerState?.selected && ownerState?.type !== "modal" ? {
+    ...ownerState?.selected && ownerState?.emergeType !== "modal" ? {
       color: `${theme.vars.palette["primary"].semanticText} !important`
     } : {
       color: `${theme.vars.palette.text.secondary} !important`
@@ -196,7 +210,7 @@ const windowBaseStyles = {
    */
   headerIconWindowBase: ({ theme, ownerState }) => ({
     "& .M4LIcon-icon": {
-      ...ownerState?.selected && ownerState?.type !== "modal" ? {
+      ...ownerState?.selected && ownerState?.emergeType !== "modal" ? {
         backgroundColor: `${theme.vars.palette["primary"].semanticText} !important`
       } : {
         backgroundColor: `${theme.vars.palette.text.secondary} !important`
@@ -228,7 +242,7 @@ const windowBaseStyles = {
       ),
       marginLeft: theme.vars.size.baseSpacings.sp1,
       marginRight: theme.vars.size.baseSpacings.sp1,
-      marginBottom: ownerState?.type === "layout" ? "auto" : "unset"
+      marginBottom: ownerState?.emergeType === "layout" ? "auto" : "unset"
     },
     '& .window-actions[class*="M4LIconButton-styledMUIIconButton"]': {
       ...getSizeStyles(
@@ -242,7 +256,7 @@ const windowBaseStyles = {
       ),
       marginLeft: theme.vars.size.baseSpacings.sp1,
       marginRight: theme.vars.size.baseSpacings.sp1,
-      marginBottom: ownerState?.type === "layout" ? "auto!important" : "unset!important",
+      marginBottom: ownerState?.emergeType === "layout" ? "auto!important" : "unset!important",
       "&.collapse-toggle": {
         ...ownerState?.maximized && {
           display: "none"
@@ -304,7 +318,7 @@ const windowBaseStyles = {
    */
   pointIcon: ({ theme, ownerState }) => ({
     "& .M4LIcon-icon": {
-      ...ownerState?.selected && ownerState?.type !== "modal" && ownerState?.variant === "outlined" ? {
+      ...ownerState?.selected && ownerState?.emergeType !== "modal" && ownerState?.variant === "outlined" ? {
         backgroundColor: `${theme.vars.palette["primary"].semanticText} !important`
       } : {
         backgroundColor: `${theme.vars.palette.text.secondary} !important`
@@ -320,7 +334,7 @@ const windowBaseStyles = {
    * Styles for the menu actions of the window base component.
    */
   menuActionsWindowBase: ({ theme, ownerState }) => ({
-    ...ownerState?.type === "layout" ? {
+    ...ownerState?.emergeType === "layout" ? {
       ...getSizeStyles(
         theme,
         ownerState?.size,
@@ -363,15 +377,6 @@ const windowBaseStyles = {
       maxWidth: "100%"
     }
   }),
-  /**
-   * Window component content Styles
-   */
-  windowContainerComponent: () => ({
-    display: "flex",
-    width: "100%",
-    height: "100%",
-    overflow: "auto"
-  }),
   /**
    * Styles for the toast container of the window base component.
    */

package/components/WindowBase/constants.d.ts

@@ -1,2 +1,2 @@
 export declare const WINDOW_BASE_KEY_COMPONENT = "M4LWindowBase";
-export declare const WINDOW_BASE_CLASSES: Record<string, string>;
+export declare const windowBaseClasses: Record<string, string>;

package/components/WindowBase/constants.js

@@ -1,8 +1,8 @@
 import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
 import { W as WindowBaseSlots } from "./slots/WindowBaseEnum.js";
 const WINDOW_BASE_KEY_COMPONENT = "M4LWindowBase";
-const WINDOW_BASE_CLASSES = getComponentClasses(WINDOW_BASE_KEY_COMPONENT, WindowBaseSlots);
+const windowBaseClasses = getComponentClasses(WINDOW_BASE_KEY_COMPONENT, WindowBaseSlots);
 export {
   WINDOW_BASE_KEY_COMPONENT as W,
-  WINDOW_BASE_CLASSES as a
+  windowBaseClasses as w
 };

package/components/WindowBase/index.d.ts

@@ -5,3 +5,4 @@ export * from './contexts/WindowToolsMFContext';
 export * from './contexts/DynamicMFParmsContext';
 export type { WindowToolsMFContextProps } from './contexts/WindowToolsMFContext/types';
 export type { ModuleAction, GroupActionMenuItem, ModuleActionGroup } from './types';
+export type { JSX_REACT_NODE } from './types';

package/components/WindowBase/subcomponents/Component/index.js

@@ -4,8 +4,8 @@ import { a as WindowContainerComponentStyled } from "../../slots/WindowBaseSlots
 import { a as WindowToolsMFProvider } from "../../contexts/WindowToolsMFContext/WindowToolsMFContext.js";
 import { a as DynamicMFParmsProvider } from "../../contexts/DynamicMFParmsContext/DynamicMFParmsContext.js";
 const WindowBaseComponent = (props) => {
-  const { component, dynamicMFStore, windowTools, componentProps } = props;
-  return /* @__PURE__ */ jsx(WindowToolsMFProvider, { ...windowTools, children: /* @__PURE__ */ jsx(DynamicMFParmsProvider, { store: dynamicMFStore, children: /* @__PURE__ */ jsx(WindowContainerComponentStyled, { ownerState: {}, children: typeof component === "function" ? component(componentProps) : component }) }) });
+  const { component, dynamicMFStore, windowTools, componentProps, emergeType } = props;
+  return /* @__PURE__ */ jsx(WindowToolsMFProvider, { ...windowTools, children: /* @__PURE__ */ jsx(DynamicMFParmsProvider, { store: dynamicMFStore, children: /* @__PURE__ */ jsx(WindowContainerComponentStyled, { ownerState: { emergeType }, children: typeof component === "function" ? component(componentProps) : component }) }) });
 };
 React.memo(WindowBaseComponent);
 export {

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

@@ -1,7 +1,9 @@
 import { WindowToolsMF } from '../../contexts';
 import { DynamicMFStore } from '../../contexts/DynamicMFParmsContext/store';
 import { JSX_REACT_NODE } from '../../../WindowBase/types';
+import { EmergeType } from '../../../areas/types';
 export interface ComponentProps {
+    emergeType: EmergeType;
     windowTools: WindowToolsMF;
     dynamicMFStore: DynamicMFStore;
     component: JSX_REACT_NODE;

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,4 @@
+import { EmergeType } from '../../../areas/types';
 import { MFBaseProps } from '../../../MFLoader/types';
 import { WindowToolsMF } from '../../contexts';
 import { DynamicMFStore } from '../../contexts/DynamicMFParmsContext/store';
@@ -5,4 +6,5 @@ export interface MicroFrontendProps extends MFBaseProps {
     moduleId: string;
     windowTools: WindowToolsMF;
     dynamicMFStore: DynamicMFStore;
+    emergeType: EmergeType;
 }

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/subcomponents/Area/subcomponents/Window/Window.js

@@ -67,7 +67,7 @@ const Window = (props) => {
       selected,
       maximized: !!maximizedId,
       onMouseDown: onTouch,
-      type: emergeType,
+      emergeType,
       collapsed,
       ...process.env.NODE_ENV !== "production" ? {
         [TEST_PROP_ID]: getNameDataTestId(
@@ -79,6 +79,7 @@ const Window = (props) => {
       children: status === "loaded" ? winType === "microfrontend" ? /* @__PURE__ */ jsx(
         MemonizedWindowBaseMicroFrontend,
         {
+          emergeType,
           moduleId,
           dynamicMFStore,
           windowTools,
@@ -87,6 +88,7 @@ const Window = (props) => {
       ) : /* @__PURE__ */ jsx(
         WindowBaseComponent,
         {
+          emergeType,
           dynamicMFStore,
           windowTools,
           component

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

@@ -5,7 +5,22 @@ import { u as useHeaderActions } from "./useHeaderActions.js";
 import { u as usePopupsStore } from "../../../../../../../../popups/components/PopupsProvider/hooks/usePopupsStore.js";
 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 [
@@ -66,7 +81,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") {

package/components/areas/contexts/AreasContext/store.js

@@ -441,8 +441,8 @@ const createAreasStore = (initProps, storeDevtoolsEnabled = false) => {
                   bounds: {
                     left: MARGIN_GRIDLAYOUT,
                     top: MARGIN_GRIDLAYOUT,
-                    right: -MARGIN_GRIDLAYOUT,
-                    bottom: -MARGIN_GRIDLAYOUT
+                    right: -10,
+                    bottom: -10
                   }
                 });
               }

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.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";
@@ -21,7 +23,8 @@ function RHFAutocomplete(props) {
     mandatory,
     mandatoryMessage,
     multiple,
-    refresh
+    refresh,
+    className
     // onChange: onChangeRHF,
   } = props;
   const htmlForId = useId();
@@ -59,6 +62,7 @@ function RHFAutocomplete(props) {
   return /* @__PURE__ */ jsx(
     AutocompleteRootStyled,
     {
+      className: clsx(className, rhfAutocompleteClasses.autocompleteRoot),
       ownerState: { ...ownerState },
       size,
       children: /* @__PURE__ */ jsx(

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<string, 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
 };