@m4l/components 9.3.19-BE101025-beta.1 → 9.3.19-BE171025-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.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";
@@ -24,7 +26,8 @@ function RHFAutocomplete(props) {
     refresh,
     startAdornment,
     getOptionalStartAdornment,
-    getOptionalEndAdornment
+    getOptionalEndAdornment,
+    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(

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/RHFAutocompleteAsync/RHFAutocompleteAsync.js

@@ -25,7 +25,8 @@ function RHFAutocompleteAsync(props) {
     responseToCamelCase,
     startAdornment,
     getOptionalStartAdornment,
-    getOptionalEndAdornment
+    getOptionalEndAdornment,
+    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,

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/Button/ButtonStyles.js

@@ -6,7 +6,7 @@ const buttonStyles = {
    */
   buttonRoot: ({ theme, ownerState }) => {
     const selectionEffect = {
-      boxShadow: `inset 0px 0px 0px 1px ${theme.vars.palette.border.main}`
+      boxShadow: `inset 0px 0px 0px 1px ${theme.vars.palette.primary.focusVisible}`
     };
     return {
       // Configuración general
@@ -38,11 +38,21 @@ const buttonStyles = {
         boxShadow: "unset",
         // Color del texto
         [`&&& .${BUTTON_CLASSES.textButton}`]: {
-          color: ownerState?.paletteColor?.contrastText
+          ...ownerState?.color === "default" && {
+            color: theme.vars.palette.text.primary
+          },
+          ...ownerState?.color !== "default" && {
+            color: ownerState?.paletteColor?.contrastText
+          }
         },
         // Color de los adornos laterales
         "&&& .M4LIcon-icon": {
-          backgroundColor: ownerState?.paletteColor?.contrastText
+          ...ownerState?.color === "default" && {
+            backgroundColor: theme.vars.palette.text.primary
+          },
+          ...ownerState?.color !== "default" && {
+            backgroundColor: ownerState?.paletteColor?.contrastText
+          }
         },
         // Estado Hover
         "&:hover": {
@@ -51,12 +61,12 @@ const buttonStyles = {
         },
         // Estado Active
         "&:active": {
-          backgroundColor: ownerState?.paletteColor?.activeOpacity,
+          backgroundColor: ownerState?.paletteColor?.active,
           boxShadow: "unset"
         },
         // Estado focus visible
         "&:focus-visible": {
-          backgroundColor: ownerState?.paletteColor?.activeOpacity,
+          backgroundColor: ownerState?.paletteColor?.active,
           ...selectionEffect
         }
       },

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, loggedUser } = 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,
       {
@@ -57,7 +57,8 @@ const PopupsViewer = (props) => {
             "data-testid": "popup",
             popupId: id,
             containerElement,
-            containerSize
+            containerSize,
+            loggedUser
           },
           id
         )