@m4l/components 9.3.20 → 9.3.21-JAEBeta.0

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

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

@@ -22,7 +22,8 @@ function RHFAutocompleteAsync(props) {
     multiple,
     disabled,
     skeletonWidth,
-    responseToCamelCase
+    responseToCamelCase,
+    className
   } = props;
   const [state, dispatch] = useReducer(
     RHFAutocompleteAsyncReducer(onChangeFilterParms),
@@ -74,6 +75,7 @@ function RHFAutocompleteAsync(props) {
   return /* @__PURE__ */ jsx(
     RHFAutocomplete,
     {
+      className,
       name,
       loading: state.loading,
       label,

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/hook-form/RHFormContext/index.d.ts

@@ -3,7 +3,7 @@ import { CustomFormArguments, FormProviderCustomProps, FormProviderProps } from
 /**
  * TODO: Documentar
  */
-export declare function useCustomForm({ validationSchema, values, statusLoad, mode, }: CustomFormArguments): import('react-hook-form').UseFormReturn<FieldValues, any, FieldValues>;
+export declare function useCustomForm({ validationSchema, values, statusLoad, mode, }: CustomFormArguments): import('react-hook-form').UseFormReturn<FieldValues, any, undefined>;
 /**
  * TODO: Documentar
  */

package/components/mui_extended/ToggleIconButton/ToggleIconButton.js

@@ -14,20 +14,24 @@ const ToggleAbleIconButton = ({
   variant = "text",
   color,
   badgeProps,
+  disabled,
+  className,
   ...props
 }) => {
   const ownerState = {
     isToggled,
-    variant
+    variant,
+    disabled
   };
   return /* @__PURE__ */ jsx(
     ToggleIconButtonRootStyled,
     {
       ...props,
       variant,
+      disabled,
       color,
       badgeProps,
-      className: clsx(getComponentSlotRoot(TOGGLE_ICON_BUTTON_KEY_COMPONENT), TOGGLE_ICON_BUTTON_CLASS_NAME_SPECIFY),
+      className: clsx(className, getComponentSlotRoot(TOGGLE_ICON_BUTTON_KEY_COMPONENT), TOGGLE_ICON_BUTTON_CLASS_NAME_SPECIFY),
       ...getPropDataTestId(TOGGLE_ICON_BUTTON_KEY_COMPONENT, ToggleIconButtonSlots.toggleIconButtonRoot, dataTestId),
       role: "toggle-iconButton",
       ownerState,

package/components/mui_extended/ToggleIconButton/ToggleIconButton.styles.js

@@ -24,6 +24,15 @@ const toggleIconButtonStyles = {
         },
         "&:focus-visible": {
           backgroundColor: theme.vars.palette.primary.enabledOpacity
+        },
+        ...ownerState?.disabled && {
+          backgroundColor: theme.vars.palette.default.opacity,
+          "& .M4LIcon-root .M4LIcon-icon": {
+            backgroundColor: `${theme.vars.palette.text.disabled} !important`
+          },
+          ...ownerState?.variant === "outline" && {
+            backgroundColor: theme.vars.palette.border.disabled
+          }
         }
       }
     }

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

@@ -22,6 +22,7 @@ export interface ToggleIconButtonProps extends Omit<IconButtonProps, 'onClick' |
  * Estado del propietario del componente ToggleIconButton.
  */
 export interface ToggleIconButtonOwnerState extends Record<string, unknown> {
+    disabled?: boolean;
     /** Indica si el valor es verdadero o falso. */
     isToggled?: boolean;
     /** Valor de la variante del componente. */

package/components/mui_extended/index.d.ts

@@ -23,7 +23,7 @@ export * from './Tabs';
 export * from './TabContent';
 export * from './TabContext';
 export { getPagerComponentsDictionary } from '../Pager/dicctionary';
-export * from './Typography/Typography';
+export * from './Typography';
 export * from './ToggleButton';
 export * from './ToggleIconButton';
 export * from './NavLink';

package/components/popups/components/PopupsProvider/hooks/usePopups.d.ts

@@ -17,7 +17,7 @@ export declare const usePopups: (popupId: string) => {
     iconUrl: string;
     selected: boolean;
     mfProps: import('../../../../MFLoader/types').MFBaseProps | undefined;
-    component: import('../../../../WindowBase/types').JSX_REACT_NODE;
+    component: import('../../../../WindowBase').JSX_REACT_NODE;
     loading: boolean | undefined;
     status: import('../../PopupsViewer/types').PopupStatus;
     version: string | undefined;
@@ -32,7 +32,7 @@ export declare const usePopups: (popupId: string) => {
     variant: import('../contexts/PopupsContext/types').PopupVariantType;
     draggable: boolean;
     resizable: boolean;
-    defaultPosition: import('../../../../DragResizeWindowRND/types').DefaultPosition | undefined;
+    defaultPosition: import('../../../..').RNDDefaultPosition | undefined;
     bounds: import('../../../../DragResizeWindowRND/types').DraggableWindowBounds | undefined;
     onMouseDown: ((e: MouseEvent) => void) | undefined;
     allowHeightResizeContainer: boolean | undefined;

package/components/popups/components/PopupsProvider/hooks/usePopups.js

@@ -89,7 +89,6 @@ const usePopups = (popupId) => {
     }),
     [
       popupId,
-      version,
       buildTime,
       setActions,
       //getCookie,

package/components/popups/components/PopupsViewer/PopupsViewer.js

@@ -7,7 +7,7 @@ import { u as useSizeContainer } from "../../../../hooks/useSizeContainer/index.
 import { R as RootStyled } from "./slots/popupsViewerSlots.js";
 import { useRef, createRef, useEffect, memo } from "react";
 const PopupsViewer = (props) => {
-  const { groupId = "global", onResizeStart, onResizeStop, onDragStart, onDragStop, containerElement } = props;
+  const { groupId = "global", onResizeStart, onResizeStop, onDragStart, onDragStop, containerElement, className } = props;
   const popupsIds = usePopupsStore(
     (state) => state.popupsIds.filter((pId) => groupId === state.hashPopups[pId].groupId && state.hashPopups[pId].status !== "closing"),
     shallow
@@ -29,7 +29,7 @@ const PopupsViewer = (props) => {
   if (!containerElement || !containerSize) {
     return null;
   }
-  return /* @__PURE__ */ jsx(RootStyled, { ownerState: { baseZindex }, children: /* @__PURE__ */ jsx(TransitionGroup, { children: popupsIds.map((id) => {
+  return /* @__PURE__ */ jsx(RootStyled, { ownerState: { baseZindex }, className, children: /* @__PURE__ */ jsx(TransitionGroup, { children: popupsIds.map((id) => {
     return /* @__PURE__ */ jsx(
       CSSTransition,
       {

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

@@ -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,6 +129,7 @@ const Popup = forwardRef((props, ref) => {
           children: winType === "microfrontend" ? /* @__PURE__ */ jsx(
             MemonizedWindowBaseMicroFrontend,
             {
+              emergeType: "popup",
               moduleId,
               dynamicMFStore,
               windowTools,
@@ -137,6 +138,7 @@ const Popup = forwardRef((props, ref) => {
           ) : /* @__PURE__ */ jsx(
             WindowBaseComponent,
             {
+              emergeType: "popup",
               dynamicMFStore,
               windowTools,
               component

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

@@ -5,6 +5,7 @@ import { PopupStoreProps, PopupsProviderStoreState } from '../PopupsProvider/con
 import { M4LOverridesStyleRules } from '../../../../@types/augmentations';
 export type PopupViewerSlotsType = keyof typeof PopupViewerSlots;
 export type PopupsViewerProps = {
+    className?: string;
     containerElement?: HTMLElement;
     groupId?: string;
     onResizeStart?: () => void;

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.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) {
+  const ref = useCallback((nodeElement) => {
+    if (nodeElement && nodeRef.current !== nodeElement) {
       nodeRef.current = nodeElement;
       setRefState(nodeElement);
     }
-  };
+  }, []);
   return [refState, ref];
 }
 export {