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

package/components/popups/components/PopupsViewer/subcomponents/Popup/Popup.js

@@ -11,7 +11,7 @@ import { M as MemonizedWindowBaseMicroFrontend } from "../../../../../WindowBase
 import { W as WindowBaseComponent } from "../../../../../WindowBase/subcomponents/Component/index.js";
 import { W as WindowBase } from "../../../../../WindowBase/WindowBase.js";
 const Popup = forwardRef((props, ref) => {
-  const { popupId, containerElement, containerSize, style, onResizeStart, onResizeStop, onDragStart, onDragStop } = props;
+  const { popupId, containerElement, containerSize, style, onResizeStart, onResizeStop, onDragStart, onDragStop, loggedUser } = props;
   const popup = usePopupsStore((state) => state.hashPopups[popupId], shallow);
   const { bringPopupOnFront } = usePopupsStore((state) => state.popupsActions, shallow);
   const { close } = usePopupsStore((state) => state.popupActions, shallow);
@@ -118,7 +118,7 @@ const Popup = forwardRef((props, ref) => {
           isLoading: loading,
           windowId: popupId,
           selected,
-          type: "popup",
+          emergeType: "popup",
           variant: "outlined",
           ...process.env.NODE_ENV !== "production" ? {
             [TEST_PROP_ID]: getNameDataTestId(
@@ -129,14 +129,17 @@ const Popup = forwardRef((props, ref) => {
           children: winType === "microfrontend" ? /* @__PURE__ */ jsx(
             MemonizedWindowBaseMicroFrontend,
             {
+              emergeType: "popup",
               moduleId,
               dynamicMFStore,
               windowTools,
+              loggedUser,
               ...mfProps ?? { debugPort: 0, prefix: "" }
             }
           ) : /* @__PURE__ */ jsx(
             WindowBaseComponent,
             {
+              emergeType: "popup",
               dynamicMFStore,
               windowTools,
               component

package/components/popups/components/PopupsViewer/subcomponents/Popup/types.d.ts

@@ -1,5 +1,6 @@
 import { CSSProperties } from 'react';
 import { ContainerSize } from '../../../../../../utils/types';
+import { AuthUserType } from '@m4l/core';
 export type ResizeReason = 'start' | 'resize' | 'stop';
 export interface PopupProps {
     /**
@@ -34,4 +35,8 @@ export interface PopupProps {
      * "onDragStop" Función que se ejecuta cuando se termina de arrastrar el popup
      */
     onDragStop?: () => void;
+    /**
+     * "loggedUser" Usuario logueado
+     */
+    loggedUser?: AuthUserType;
 }

package/components/popups/components/PopupsViewer/types.d.ts

@@ -3,14 +3,17 @@ import { PopupViewerSlots } from './slots/slots';
 import { POPUPS_VIEWER_KEY_COMPONENT } from './constants';
 import { PopupStoreProps, PopupsProviderStoreState } from '../PopupsProvider/contexts/PopupsContext/types';
 import { M4LOverridesStyleRules } from '../../../../@types/augmentations';
+import { AuthUserType } from '@m4l/core';
 export type PopupViewerSlotsType = keyof typeof PopupViewerSlots;
 export type PopupsViewerProps = {
+    className?: string;
     containerElement?: HTMLElement;
     groupId?: string;
     onResizeStart?: () => void;
     onResizeStop?: () => void;
     onDragStart?: () => void;
     onDragStop?: () => void;
+    loggedUser?: AuthUserType;
 };
 export type PopupStatus = 'init' | 'closing' | 'hidden';
 export interface PopupOwnerState extends Pick<PopupStoreProps, 'status' | 'subTitle' | 'editionInfo' | 'zIndex' | 'variant'> {

package/hooks/index.d.ts

@@ -12,3 +12,4 @@ export * from './useDynamicFilterAndSort';
 export * from './useDataGridPersistence';
 export * from './usePopoverContainer';
 export * from './useIsVisible';
+export * from './useSizeContainer';

package/hooks/useSizeContainer/index.d.ts

@@ -1,8 +1,9 @@
 import { ContainerSize } from '../../utils/types';
+import { UseSizeContainerOptions } from './types';
 /**
  * useSizeContainer: hook encargado de obtener el tamaño de un elemento contenedor
  * TODO: Usar throttle para evitar llamadas innecesarias
  * @param containerElement
  * @returns un objeto con el ancho y alto del contenedor
  */
-export declare function useSizeContainer(containerElement?: HTMLElement | undefined | null): ContainerSize | undefined;
+export declare function useSizeContainer(containerElement?: HTMLElement | undefined | null, options?: UseSizeContainerOptions): ContainerSize | undefined;

package/hooks/useSizeContainer/index.js

@@ -1,35 +1,44 @@
 import { useState, useEffect } from "react";
 import { T as THROTTLE_RESIZE_TIMEOUT } from "./contants.js";
 import throttle from "lodash-es/throttle";
-function useSizeContainer(containerElement) {
-  const [currentState, setCurrentState] = useState();
+function useSizeContainer(containerElement, options) {
+  const { throttleTime = THROTTLE_RESIZE_TIMEOUT, excludePadding = false, leading = false, trailing = true } = options || {};
+  const [currentState, setCurrentState] = useState(void 0);
   useEffect(() => {
     if (!containerElement) {
       return;
     }
-    const throttleResize = throttle(setCurrentState, THROTTLE_RESIZE_TIMEOUT, {
-      leading: false,
-      // No enviar el primer evento de resizing
-      trailing: true
+    const setter = (size) => {
+      setCurrentState(size);
+    };
+    const throttleResize = throttle(setter, throttleTime, {
+      leading,
+      // Evento de resizing (Por defecto false)
+      trailing
       // Incluir siempre el ultimo evento en la cola, para que no quede se quedee a la mitad de resizing
     });
     const resizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
+      if (excludePadding) {
         throttleResize({
-          containerWidth: Math.round(entry.contentRect.width),
-          containerHeight: Math.round(entry.contentRect.height)
+          containerWidth: Math.round(containerElement.clientWidth),
+          containerHeight: Math.round(containerElement.clientHeight)
         });
+      } else {
+        for (const entry of entries) {
+          throttleResize({
+            containerWidth: Math.round(entry.contentRect.width),
+            containerHeight: Math.round(entry.contentRect.height)
+          });
+        }
       }
     });
-    if (containerElement) {
-      resizeObserver.observe(containerElement);
-    }
+    resizeObserver.observe(containerElement);
     return () => {
       if (containerElement) {
         resizeObserver.unobserve(containerElement);
       }
     };
-  }, [containerElement]);
+  }, [containerElement, excludePadding, leading, throttleTime, trailing]);
   return currentState;
 }
 export {

package/hooks/useSizeContainer/types.d.ts

@@ -0,0 +1,6 @@
+export type UseSizeContainerOptions = {
+    leading?: boolean;
+    trailing?: boolean;
+    throttleTime?: number;
+    excludePadding?: boolean;
+};

package/hooks/useStateRef/index.d.ts

@@ -5,4 +5,4 @@
  * @param initialValue
  * @returns
  */
-export declare function useStateRef<T>(initialValue: T | null): [T | null, (node: T | null) => void];
+export declare function useStateRef<T extends HTMLElement | null>(initialValue: T | null): [T | null, (node: T | null) => void];

package/hooks/useStateRef/index.js

@@ -1,13 +1,13 @@
-import { useState, useRef } from "react";
+import { useState, useRef, useCallback } from "react";
 function useStateRef(initialValue) {
   const [refState, setRefState] = useState(initialValue);
   const nodeRef = useRef(null);
-  const ref = (nodeElement) => {
-    if (nodeRef.current !== nodeElement) {
-      nodeRef.current = nodeElement;
-      setRefState(nodeElement);
+  const ref = useCallback((current) => {
+    if (current && nodeRef.current !== current) {
+      nodeRef.current = current;
+      setRefState(current);
     }
-  };
+  }, []);
   return [refState, ref];
 }
 export {

package/index.js

@@ -122,6 +122,7 @@ import { P as P5, g as g16 } from "./components/formatters/PriceFormatter/PriceF
 import { C as C18 } from "./components/formatters/ChipStatusFormatter/ChipStatusFormatter.js";
 import { g as g17 } from "./components/formatters/DistanceToNowFormatter/dictionary.js";
 import { D as D9 } from "./components/formatters/DistanceToNowFormatter/DistanceToNowFormatter.js";
+import { u as u13 } from "./components/formatters/DistanceToNowFormatter/hooks/useDistanceToNowFormatter.js";
 import { g as g18 } from "./components/formatters/dictionary.js";
 import { F as F2 } from "./components/FormContainer/FormContainer.js";
 import { G } from "./components/GridLayout/GridLayout.js";
@@ -176,7 +177,7 @@ import { g as g27 } from "./components/ObjectLogs/dictionary.js";
 import { O } from "./components/ObjectLogs/ObjectLogs.js";
 import { P as P7 } from "./components/PaperForm/PaperForm.js";
 import { P as P8 } from "./components/PDFViewer/PDFViewer.js";
-import { u as u13 } from "./components/popups/components/PopupsProvider/hooks/usePopupsStore.js";
+import { u as u14 } from "./components/popups/components/PopupsProvider/hooks/usePopupsStore.js";
 import { a as a10, P as P9 } from "./components/popups/components/PopupsProvider/contexts/PopupsContext/PopupsContext.js";
 import { P as P10 } from "./components/popups/components/PopupsViewer/PopupsViewer.js";
 import { P as P11 } from "./components/PrintingSystem/PrintingSystem.js";
@@ -186,8 +187,8 @@ import { S as S9 } from "./components/SideBar/SideBar.js";
 import { T as T17 } from "./components/ToastContainer/ToastContainer.js";
 import { T as T18 } from "./components/ToastContainer/subcomponents/ToastMessage/ToastMessage.js";
 import { W as W2 } from "./components/WindowBase/WindowBase.js";
-import { u as u14 } from "./components/WindowBase/hooks/useWindowToolsMF/index.js";
-import { u as u15, a as a11 } from "./components/WindowBase/hooks/useDynamicMFParameters/index.js";
+import { u as u15 } from "./components/WindowBase/hooks/useWindowToolsMF/index.js";
+import { u as u16, a as a11 } from "./components/WindowBase/hooks/useDynamicMFParameters/index.js";
 import { M as M7, W as W3, a as a12 } from "./components/WindowBase/contexts/WindowToolsMFContext/WindowToolsMFContext.js";
 import { c as c3 } from "./components/WindowBase/contexts/DynamicMFParmsContext/store.js";
 import { D as D10, a as a13, M as M8 } from "./components/WindowBase/contexts/DynamicMFParmsContext/DynamicMFParmsContext.js";
@@ -196,7 +197,7 @@ import { a as a14, g as g28 } from "./components/ModalDialog/dictionary.js";
 import { M as M9 } from "./components/ModalDialog/ModalDialog.js";
 import { S as S10 } from "./components/SettingsLayout/SettingsLayout.js";
 import { P as P13 } from "./components/Pager/Pager.js";
-import { u as u16 } from "./components/Stepper/hooks/useStepper/index.js";
+import { u as u17 } from "./components/Stepper/hooks/useStepper/index.js";
 import { S as S11 } from "./components/Stepper/Stepper.js";
 import { S as S12 } from "./components/Stepper/subcomponents/StepperContent/index.js";
 import { S as S13 } from "./components/Stepper/subcomponents/StepperContent/subcomponents/Step/index.js";
@@ -209,26 +210,27 @@ import { S as S19 } from "./components/Stepper/subcomponents/StepperButtons/Step
 import { S as S20 } from "./components/Stepper/subcomponents/StepperButtons/StepperSubmitButton/index.js";
 import { e as e3 } from "./components/Stepper/helpers/evaluateVisibilityStepCondition/index.js";
 import { g as g29 } from "./components/Stepper/dictionary.js";
-import { F as F3, R as R23, u as u17 } from "./components/hook-form/RHFormContext/index.js";
+import { F as F3, R as R23, u as u18 } from "./components/hook-form/RHFormContext/index.js";
 import { g as g30 } from "./components/hook-form/RHFormContext/dictionary.js";
-import { u as u18 } from "./contexts/AppearanceComponentContext/useAppearanceComponentStore.js";
+import { u as u19 } from "./contexts/AppearanceComponentContext/useAppearanceComponentStore.js";
 import { A as A16 } from "./contexts/AppearanceComponentContext/AppearanceComponentContext.js";
 import { a as a15, M as M10 } from "./contexts/ModalContext/index.js";
-import { u as u19 } from "./hooks/useFormAddEdit/index.js";
-import { u as u20 } from "./hooks/useModal/index.js";
-import { u as u21 } from "./hooks/useTab/index.js";
+import { u as u20 } from "./hooks/useFormAddEdit/index.js";
+import { u as u21 } from "./hooks/useModal/index.js";
+import { u as u22 } from "./hooks/useTab/index.js";
 import { g as g31 } from "./hooks/useFormAddEdit/dictionary.js";
-import { u as u22 } from "./hooks/useFormFocus/index.js";
-import { u as u23 } from "./hooks/useInterval/index.js";
-import { u as u24 } from "./hooks/useComponentSize/useComponentSize.js";
-import { u as u25 } from "./hooks/useFormReadyForUpdate/index.js";
-import { u as u26 } from "./hooks/useStateRef/index.js";
+import { u as u23 } from "./hooks/useFormFocus/index.js";
+import { u as u24 } from "./hooks/useInterval/index.js";
+import { u as u25 } from "./hooks/useComponentSize/useComponentSize.js";
+import { u as u26 } from "./hooks/useFormReadyForUpdate/index.js";
+import { u as u27 } from "./hooks/useStateRef/index.js";
 import { S as S21 } from "./hooks/useSvgColor/constants.js";
-import { u as u27 } from "./hooks/useSvgColor/useSvgColor.js";
-import { u as u28 } from "./hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js";
-import { u as u29 } from "./hooks/useDataGridPersistence/useDataGridPersistence.js";
-import { u as u30 } from "./hooks/usePopoverContainer/usePopoverContainer.js";
-import { u as u31 } from "./hooks/useIsVisible/useIsVisible.js";
+import { u as u28 } from "./hooks/useSvgColor/useSvgColor.js";
+import { u as u29 } from "./hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js";
+import { u as u30 } from "./hooks/useDataGridPersistence/useDataGridPersistence.js";
+import { u as u31 } from "./hooks/usePopoverContainer/usePopoverContainer.js";
+import { u as u32 } from "./hooks/useIsVisible/useIsVisible.js";
+import { u as u33 } from "./hooks/useSizeContainer/index.js";
 import { c as c4 } from "./utils/capitalizeFirstLetter.js";
 import { i as i2 } from "./utils/isValidDate.js";
 import { g as g32 } from "./utils/getComponentUtilityClass.js";
@@ -241,6 +243,7 @@ import { g as g37, a as a17 } from "./utils/getComponentSlotRoot.js";
 import { f } from "./utils/formatDistanceToNow/formatDistanteToNow.js";
 import { g as g38 } from "./utils/getValidDate.js";
 import { g as g39 } from "./utils/getNullGuard.js";
+import { c as c5, d as d4 } from "./utils/deepShallow.js";
 import { g as g40 } from "./helpers/getStepsAndValidationSchema/getStepsAndValidationSchema.js";
 export {
   A7 as AREAS_DICCTIONARY,
@@ -430,8 +433,10 @@ export {
   e2 as addLayoutItemToBreakPoints,
   c4 as capitalizeFirstLetter,
   d3 as cloneLayouts,
+  c5 as createCustomDeepShallow,
   c3 as createDynamicMFStore,
   c as createToaster,
+  d4 as deepShallow,
   d as defaultCommonActionsDictionary,
   d2 as dragResizeWindowRNDClasses,
   e3 as evaluateVisibilityStepCondition,
@@ -488,7 +493,7 @@ export {
   r as rhfPeriodStyles,
   t as toggleButtonStyles,
   t2 as toggleIconButtonStyles,
-  u18 as useAppearanceComponentStore,
+  u19 as useAppearanceComponentStore,
   u as useAreasStore,
   u2 as useColumnBoolean,
   u11 as useColumnChipStatus,
@@ -500,26 +505,28 @@ export {
   u8 as useColumnPrice,
   u9 as useColumnSetCheck,
   u10 as useColumnUncertanity,
-  u24 as useComponentSize,
-  u17 as useCustomForm,
-  u29 as useDataGridPersistence,
-  u28 as useDynamicFilterAndSort,
-  u15 as useDynamicMFParameters,
+  u25 as useComponentSize,
+  u18 as useCustomForm,
+  u30 as useDataGridPersistence,
+  u13 as useDistanceToNowFormatter,
+  u29 as useDynamicFilterAndSort,
+  u16 as useDynamicMFParameters,
   a11 as useDynamicMFParametersStore,
-  u19 as useFormAddEdit,
-  u22 as useFormFocus,
-  u25 as useFormReadyForUpdate,
+  u20 as useFormAddEdit,
+  u23 as useFormFocus,
+  u26 as useFormReadyForUpdate,
   u12 as useFormatPeriod,
-  u23 as useInterval,
-  u31 as useIsVisible,
-  u20 as useModal,
-  u30 as usePopoverContainer,
-  u13 as usePopupsStore,
-  u26 as useStateRef,
-  u16 as useStepper,
-  u27 as useSvgColor,
-  u21 as useTab,
-  u14 as useWindowToolsMF,
+  u24 as useInterval,
+  u32 as useIsVisible,
+  u21 as useModal,
+  u31 as usePopoverContainer,
+  u14 as usePopupsStore,
+  u33 as useSizeContainer,
+  u27 as useStateRef,
+  u17 as useStepper,
+  u28 as useSvgColor,
+  u22 as useTab,
+  u15 as useWindowToolsMF,
   v2 as varBounce,
   v3 as varContainer,
   v as varFade,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.3.19-BE101025-beta.2",
+  "version": "9.3.19-BE171025-beta.1",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {
@@ -11,8 +11,8 @@
     "@googlemaps/js-api-loader": "^1.16.6",
     "@hookform/resolvers": "2.9.11",
     "@m4l/core": "^2.0.0",
-    "@m4l/graphics": "7.1.5-BE093025-beta.1",
-    "@m4l/styles": "7.1.34-BE093025-beta.1",
+    "@m4l/graphics": "7.2.0-BE171025-beta.1",
+    "@m4l/styles": "7.1.34-BE171025-beta.1",
     "@mui/lab": "5.0.0-alpha.173",
     "@mui/material": "5.16.7",
     "@mui/x-date-pickers": "6.20.2",
@@ -43,7 +43,6 @@
     "react-helmet-async": "^2.0.5",
     "react-hook-form": "^7.33.1",
     "react-intersection-observer": "^9.4.0",
-    "react-leaflet": "^4.2.1",
     "react-resizable": "^3.0.4",
     "react-resizable-panels": "^2.1.8",
     "react-rnd": "^10.5.2",

package/utils/deepShallow.d.ts

@@ -0,0 +1,17 @@
+type DeepShallowOptions = {
+    maxDepth?: number;
+    ignoreTypes?: Array<string>;
+    compareArrays?: boolean;
+    compareObjects?: boolean;
+    customComparers?: Record<string, (a: any, b: any) => boolean>;
+    log?: boolean;
+};
+/**
+ * Comparador con profundidad
+ */
+export declare const deepShallow: <T>(objA: T, objB: T, depth?: number, options?: DeepShallowOptions) => boolean;
+/**
+ * Crea una función de comparación profunda con opciones personalizadas
+ */
+export declare const createCustomDeepShallow: <T>(options?: DeepShallowOptions) => (objA: T, objB: T, depth?: number) => boolean;
+export {};

package/utils/deepShallow.js

@@ -0,0 +1,76 @@
+const deepShallow = (objA, objB, depth = 0, options) => {
+  const {
+    maxDepth = 10,
+    ignoreTypes = ["function"],
+    compareArrays = true,
+    compareObjects = true,
+    customComparers = {},
+    log = false
+  } = options || {};
+  if (log && process.env.NODE_ENV === "development" && depth === 0) {
+    console.log("deepShallow**", objA, objB, depth);
+  }
+  if (depth >= maxDepth) {
+    return Object.is(objA, objB);
+  }
+  if (objA === objB) {
+    return true;
+  }
+  if (objA == null || objB == null) {
+    return objA === objB;
+  }
+  if (typeof objA !== "object" || typeof objB !== "object") {
+    return objA === objB;
+  }
+  if (Array.isArray(objA) && Array.isArray(objB)) {
+    if (!compareArrays) {
+      return Object.is(objA, objB);
+    }
+    if (objA.length !== objB.length) {
+      return false;
+    }
+    for (let i = 0; i < objA.length; i++) {
+      if (!deepShallow(objA[i], objB[i], depth + 1, options)) {
+        return false;
+      }
+    }
+    return true;
+  }
+  if (Array.isArray(objA) || Array.isArray(objB)) {
+    return false;
+  }
+  if (!compareObjects) {
+    return Object.is(objA, objB);
+  }
+  const keysA = Object.keys(objA);
+  const keysB = Object.keys(objB);
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+  for (let i = 0; i < keysA.length; i++) {
+    const key = keysA[i];
+    const valueA = objA[key];
+    const valueB = objB[key];
+    if (ignoreTypes.includes(typeof valueA)) {
+      continue;
+    }
+    const valueType = typeof valueA;
+    if (customComparers[valueType]) {
+      if (!customComparers[valueType](valueA, valueB)) {
+        return false;
+      }
+      continue;
+    }
+    if (!deepShallow(valueA, valueB, depth + 1, options)) {
+      return false;
+    }
+  }
+  return true;
+};
+const createCustomDeepShallow = (options) => {
+  return (objA, objB, depth = 0) => deepShallow(objA, objB, depth, options);
+};
+export {
+  createCustomDeepShallow as c,
+  deepShallow as d
+};

package/utils/formatDistanceToNow/formatDistanteToNow.d.ts

@@ -1,5 +1,5 @@
-import { PresentationTimeType, FormatDistanteToNowDictionary } from './types';
+import { PresentationTimeType, FormatDistanteToNowDictionary, FormatDistanceToNowReturn } from './types';
 /**
  * TODO: Documentar
  */
-export declare const formatDistanceToNow: (type: PresentationTimeType, date: Date, dictionary: FormatDistanteToNowDictionary) => string;
+export declare const formatDistanceToNow: (type: PresentationTimeType, date: Date, dictionary: FormatDistanteToNowDictionary) => FormatDistanceToNowReturn;

package/utils/formatDistanceToNow/formatDistanteToNow.js

@@ -9,7 +9,7 @@ const replaceValues = (label, ...values) => {
 };
 const formatDistanceToNow = (type, date, dictionary) => {
   if (!(date instanceof Date)) {
-    return "No date";
+    return { time: "No date", value: "", unit: "" };
   }
   const now = /* @__PURE__ */ new Date();
   const diff = now.getTime() - date.getTime();
@@ -19,6 +19,8 @@ const formatDistanceToNow = (type, date, dictionary) => {
   const days = Math.floor(hours / 24);
   const months = Math.floor(days / 30);
   const years = Math.floor(months / 12);
+  let value;
+  let unit;
   let timeElaped = "";
   const unitYears = years > 1 ? dictionary.label_unit_time_years : dictionary.label_unit_time_year;
   const unitMonths = months % 12 > 1 ? dictionary.label_unit_time_months : dictionary.label_unit_time_month;
@@ -32,6 +34,8 @@ const formatDistanceToNow = (type, date, dictionary) => {
   } else if (type === "future") {
     label = dictionary.label_sentence_future_others;
   }
+  const separatorTime = ":";
+  const separatorDate = "-";
   if (seconds < 60) {
     if (type === "past") {
       timeElaped = replaceValues(dictionary.label_sentence_past_seconds, seconds + "", unitSeconds);
@@ -48,34 +52,46 @@ const formatDistanceToNow = (type, date, dictionary) => {
         unitSeconds
       );
     }
+    value = seconds.toString().padStart(2, "0") + "";
+    unit = dictionary.label_unit_time_seconds_short;
   } else if (minutes < 60) {
     timeElaped = replaceValues(label, `${minutes}`, unitMinutes);
+    value = minutes.toString().padStart(2, "0") + ":" + (seconds % 60).toString().padStart(2, "0");
+    unit = dictionary.label_unit_time_minutes_short + dictionary.label_separator_time + dictionary.label_unit_time_seconds_short;
   } else if (hours < 24) {
     if (minutes % 60 > 0) {
       timeElaped = replaceValues(label, `${hours} ${unitHours} ${minutes % 60} ${unitMinutes}`, "");
     } else {
       timeElaped = replaceValues(label, `${hours} ${unitHours}`, "");
     }
+    value = hours.toString().padStart(2, "0") + ":" + (minutes % 60).toString().padStart(2, "0");
+    unit = dictionary.label_unit_time_hours_short + separatorTime + dictionary.label_unit_time_minutes_short;
   } else if (days < 30) {
     if (hours % 24 > 0) {
       timeElaped = replaceValues(label, `${days} ${unitDays} ${hours % 24} ${unitHours}`, "");
     } else {
       timeElaped = replaceValues(label, `${days} ${unitDays}`, "");
     }
+    value = days.toString().padStart(2, "0") + " " + (hours % 24).toString().padStart(2, "0");
+    unit = dictionary.label_unit_time_days_short + " " + dictionary.label_unit_time_hours_short;
   } else if (months < 12) {
     if (days % 30 > 0) {
       timeElaped = replaceValues(label, `${months} ${unitMonths} ${days % 30} ${unitDays}`, "");
     } else {
       timeElaped = replaceValues(label, `${months} ${unitMonths}`, "");
     }
+    value = months.toString().padStart(2, "0") + separatorDate + (days % 30).toString().padStart(2, "0");
+    unit = dictionary.label_unit_time_months_short + separatorDate + dictionary.label_unit_time_days_short;
   } else {
     if (months % 12 > 0) {
       timeElaped = replaceValues(label, `${years} ${unitYears} ${months % 12} ${unitMonths}`, "");
     } else {
       timeElaped = replaceValues(label, `${years} ${unitYears}`, "");
     }
+    value = years.toString().padStart(2, "0") + separatorDate + (months % 12).toString().padStart(2, "0");
+    unit = dictionary.label_unit_time_years_short + separatorDate + dictionary.label_unit_time_months_short;
   }
-  return timeElaped;
+  return { time: timeElaped, value, unit };
 };
 export {
   formatDistanceToNow as f

package/utils/formatDistanceToNow/types.d.ts

@@ -13,9 +13,22 @@ export type FormatDistanteToNowDictionary = {
     label_unit_time_month: string;
     label_unit_time_year: string;
     label_unit_time_seconds: string;
+    label_unit_time_seconds_short: string;
     label_unit_time_minutes: string;
+    label_unit_time_minutes_short: string;
     label_unit_time_hours: string;
+    label_unit_time_hours_short: string;
     label_unit_time_days: string;
+    label_unit_time_days_short: string;
     label_unit_time_months: string;
+    label_unit_time_months_short: string;
     label_unit_time_years: string;
+    label_unit_time_years_short: string;
+    label_separator_time: string;
+    label_separator_date: string;
+};
+export type FormatDistanceToNowReturn = {
+    time: string;
+    value: string;
+    unit: string;
 };

package/utils/index.d.ts

@@ -11,3 +11,4 @@ export { getSizeStyles } from './getSizeStyles';
 export * from './formatDistanceToNow';
 export * from './getValidDate';
 export * from './getNullGuard';
+export * from './deepShallow';