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

package/components/mui_extended/Autocomplete/Autocomplete.styles.js

@@ -3,9 +3,13 @@ const autocompleteSyles = {
   /**
    * Styles for the root component.
    */
-  root: () => ({
+  root: ({ theme }) => ({
     width: "100%",
-    padding: 0
+    padding: 0,
+    "& .M4LImage-root": {
+      width: theme.vars.size.baseSpacings["sp3-5"],
+      height: theme.vars.size.baseSpacings["sp3-5"]
+    }
   }),
   /**
    * Styles for the icon button component.
@@ -81,7 +85,7 @@ const autocompleteSyles = {
         ...ownerState?.startAdornment ? {
           padding: `${sp1} ${sp7} ${sp1} ${sp5}!important`
         } : {
-          padding: `${sp1} ${sp7} ${sp1} 0px!important`
+          padding: `${sp1} ${sp7} ${sp1} ${sp1}!important`
         },
         gap: sp1,
         flexWrap: "wrap",

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

@@ -0,0 +1,6 @@
+import { Sizes } from '@m4l/styles';
+import { ResourceType } from '../types';
+/**
+ * Render adornment function similar to useStartAdornments
+ */
+export declare const renderAdornment: (propsResource: ResourceType, adjustedSize: Extract<Sizes, "small" | "medium">) => import("react/jsx-runtime").JSX.Element | null;

package/components/mui_extended/Autocomplete/RenderAdornment/RenderAdornment.js

@@ -0,0 +1,45 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { I as Image } from "../../../Image/Image.js";
+import { I as Icon } from "../../../Icon/Icon.js";
+const renderAdornment = (propsResource, adjustedSize) => {
+  const { resource, type } = propsResource;
+  if (!resource) {
+    return null;
+  }
+  if (React.isValidElement(resource)) {
+    try {
+      return React.cloneElement(resource, {
+        size: adjustedSize
+      });
+    } catch (error) {
+      console.warn("Error cloning React element:", error);
+      return null;
+    }
+  }
+  if (typeof resource === "string") {
+    if (type === "image") {
+      return /* @__PURE__ */ jsx(
+        Image,
+        {
+          src: resource,
+          width: 14,
+          height: 14
+        }
+      );
+    } else {
+      return /* @__PURE__ */ jsx(
+        Icon,
+        {
+          src: resource,
+          size: adjustedSize
+        }
+      );
+    }
+  }
+  console.warn("Invalid icon type provided to renderAdornment:", typeof resource);
+  return null;
+};
+export {
+  renderAdornment as r
+};

package/components/mui_extended/Autocomplete/hooks/useEndAdornments.js

@@ -40,7 +40,8 @@ function useEndAdornments(props) {
         onClick: (event) => !readOnly ? onOpenLocal(event) : void 0,
         disabled,
         size: adjustedSize,
-        rotationAngle: open ? 180 : 0
+        rotationAngle: open ? 180 : 0,
+        "aria-label": "toggle Autocomplete"
       }
     )
   ] });

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

@@ -1,25 +1,17 @@
-import { default as React } from 'react';
 import { AutocompleteOwnerState, AutocompleteProps } from '../types';
-export type UseAdornmentsProps<T> = {
+export type UseAdornmentsProps<T, Multiple extends boolean | undefined = undefined> = {
     selectedValue: T | T[] | null;
     multiple?: boolean;
-    loading?: boolean;
     adjustedSize: 'small' | 'medium';
     getOptionLabelLocal: (option: T) => string;
-    getOptionalStartAdornment?: (option: T) => React.ReactNode;
-    getOptionalEndAdornment?: (option: T) => React.ReactNode;
+    getOptionStartAdornment?: AutocompleteProps<T, Multiple>['getOptionStartAdornment'];
+    getOptionEndAdornment?: AutocompleteProps<T, Multiple>['getOptionEndAdornment'];
     ownerState: AutocompleteOwnerState;
     handleDelete: (option: T) => void;
-    getOptionUrlImage?: (option: T) => string;
-    selectedOption?: T;
-    getOptionUrlImageLocal: (option: T) => string;
-    refresh?: () => void;
-    handleRefresh: () => void;
     disabled?: boolean;
-    onOpenLocal: (event: React.MouseEvent<HTMLButtonElement>) => void;
     startAdornment?: AutocompleteProps<unknown, true>['startAdornment'];
 };
 /**
  * Hook para el componente Autocomplete local
  */
-export declare function useStartAdornments<T>(props: UseAdornmentsProps<T>): import("react/jsx-runtime").JSX.Element | null;
+export declare function useStartAdornments<T, Multiple extends boolean | undefined = undefined>(props: UseAdornmentsProps<T, Multiple>): import("react/jsx-runtime").JSX.Element | null;

package/components/mui_extended/Autocomplete/hooks/useStartAdornments.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React, { useMemo } from "react";
+import { r as renderAdornment } from "../RenderAdornment/RenderAdornment.js";
 import { b as ContainerMultipleValuesStyled, c as ContainerWrapperStyled, d as ChipStyled, W as WrapperStartAdornmentStyled } from "../slots/AutocompleteSlots.js";
 function useStartAdornments(props) {
   const {
@@ -11,30 +12,68 @@ function useStartAdornments(props) {
     handleDelete,
     disabled,
     startAdornment,
-    getOptionalStartAdornment,
-    getOptionalEndAdornment
+    getOptionStartAdornment,
+    getOptionEndAdornment
   } = props;
-  const startAdornmentClone = startAdornment ? React.cloneElement(startAdornment, {
-    size: adjustedSize
-  }) : null;
+  const startAdornmentClone = useMemo(() => {
+    if (!startAdornment) {
+      return null;
+    }
+    try {
+      return React.cloneElement(startAdornment, {
+        size: adjustedSize
+      });
+    } catch (error) {
+      console.warn("Error cloning startAdornment:", error);
+      return null;
+    }
+  }, [startAdornment, adjustedSize]);
+  const memoizedIcons = useMemo(() => {
+    if (!Array.isArray(selectedValue) || !multiple || selectedValue.length === 0) {
+      return null;
+    }
+    const iconMap = /* @__PURE__ */ new Map();
+    selectedValue.forEach((option) => {
+      const optionKey = getOptionLabelLocal(option);
+      const startAdornmentResource = getOptionStartAdornment?.(option);
+      const endAdornmentResource = getOptionEndAdornment?.(option);
+      if (startAdornmentResource) {
+        iconMap.set(`${optionKey}-start`, renderAdornment(startAdornmentResource, adjustedSize));
+      }
+      if (endAdornmentResource) {
+        iconMap.set(`${optionKey}-end`, renderAdornment(endAdornmentResource, adjustedSize));
+      }
+    });
+    return iconMap;
+  }, [
+    selectedValue,
+    multiple,
+    getOptionLabelLocal,
+    getOptionStartAdornment,
+    getOptionEndAdornment,
+    adjustedSize
+  ]);
   const internalAdornments = useMemo(() => {
     if (!(Array.isArray(selectedValue) && multiple)) {
       return null;
     }
-    return /* @__PURE__ */ jsx(ContainerMultipleValuesStyled, { children: /* @__PURE__ */ jsx(ContainerWrapperStyled, { children: selectedValue.map((option, index) => /* @__PURE__ */ jsx(
-      ChipStyled,
-      {
-        size: adjustedSize,
-        label: getOptionLabelLocal(option),
-        opacity: true,
-        onDeleted: () => handleDelete(option),
-        disabledDeleteButton: disabled,
-        ownerState: { ...ownerState },
-        startIcon: getOptionalStartAdornment?.(option),
-        endIcon: getOptionalEndAdornment?.(option)
-      },
-      `${option}-${index}`
-    )) }) });
+    return /* @__PURE__ */ jsx(ContainerMultipleValuesStyled, { role: "list", "aria-label": "Selected options", children: /* @__PURE__ */ jsx(ContainerWrapperStyled, { children: selectedValue.map((option, index) => {
+      const optionKey = getOptionLabelLocal(option);
+      return /* @__PURE__ */ jsx(
+        ChipStyled,
+        {
+          size: adjustedSize,
+          label: optionKey,
+          opacity: true,
+          onDeleted: () => handleDelete(option),
+          disabledDeleteButton: disabled,
+          ownerState: { ...ownerState },
+          startIcon: memoizedIcons?.get(`${optionKey}-start`),
+          endIcon: memoizedIcons?.get(`${optionKey}-end`)
+        },
+        `${optionKey}-${index}`
+      );
+    }) }) });
   }, [
     selectedValue,
     multiple,
@@ -43,16 +82,26 @@ function useStartAdornments(props) {
     handleDelete,
     disabled,
     ownerState,
-    getOptionalStartAdornment,
-    getOptionalEndAdornment
+    memoizedIcons
   ]);
   if (startAdornmentClone && internalAdornments) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(WrapperStartAdornmentStyled, { children: startAdornmentClone }),
+      /* @__PURE__ */ jsx(WrapperStartAdornmentStyled, { role: "img", "aria-hidden": "true", children: startAdornmentClone }),
       internalAdornments
     ] });
   }
-  return startAdornment ? /* @__PURE__ */ jsx(WrapperStartAdornmentStyled, { children: startAdornmentClone }) : internalAdornments;
+  if (startAdornmentClone) {
+    return /* @__PURE__ */ jsx(WrapperStartAdornmentStyled, { role: "img", "aria-hidden": "true", children: startAdornmentClone });
+  }
+  if (!getOptionLabelLocal) {
+    console.error("useStartAdornments: getOptionLabelLocal is required");
+    return null;
+  }
+  if (!handleDelete) {
+    console.error("useStartAdornments: handleDelete is required");
+    return null;
+  }
+  return internalAdornments;
 }
 export {
   useStartAdornments as u

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

@@ -8,7 +8,6 @@ export declare function useValuesAndHandlers<T, Multiple extends boolean | undef
     open: boolean;
     inputValue: string;
     selectedValue: T | T[] | null;
-    selectedOption: T | undefined;
     isOptionEqualToValueLocal: (option: unknown, val: unknown) => boolean;
     handleDelete: (optionToDelete: T) => void;
     handleRefresh: () => void;
@@ -17,7 +16,6 @@ export declare function useValuesAndHandlers<T, Multiple extends boolean | undef
     onCloseLocal: (event: React.SyntheticEvent, reason: AutocompleteCloseReason) => void;
     onOpenLocal: (event: React.SyntheticEvent) => void;
     getOptionLabelLocal: (option: unknown) => string;
-    getOptionUrlImageLocal: (option: T | null) => string;
     checkKeyDown: (e: KeyboardEvent<HTMLDivElement>) => void;
     scrollPositionOptionsRef: import('react').MutableRefObject<number>;
 };

package/components/mui_extended/Autocomplete/hooks/useValuesAndHandlers.js

@@ -9,8 +9,6 @@ function useValuesAndHandlers(props) {
     onClose,
     onChangeFilterParmsLocal,
     multiple,
-    getOptionUrlImage,
-    // Diferencia
     refresh,
     onChange,
     value,
@@ -115,12 +113,6 @@ function useValuesAndHandlers(props) {
     },
     [getOptionLabel]
   );
-  const getOptionUrlImageLocal = useCallback((option) => {
-    if (option === void 0 || option === null || getOptionUrlImage === void 0) {
-      return "";
-    }
-    return getOptionUrlImage(option);
-  }, [getOptionUrlImage]);
   const [inputValue, setInputValue] = useState("");
   useEffect(() => {
     if (readOnly && value !== null && value !== void 0 && !multiple) {
@@ -161,14 +153,10 @@ function useValuesAndHandlers(props) {
       }
     }
   };
-  const selectedOption = options.find((option) => {
-    return isOptionEqualToValueLocal(option, selectedValue);
-  });
   return {
     open,
     inputValue,
     selectedValue,
-    selectedOption,
     isOptionEqualToValueLocal,
     handleDelete,
     handleRefresh,
@@ -177,7 +165,6 @@ function useValuesAndHandlers(props) {
     onCloseLocal,
     onOpenLocal,
     getOptionLabelLocal,
-    getOptionUrlImageLocal,
     checkKeyDown,
     scrollPositionOptionsRef
   };

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

@@ -1,22 +1,9 @@
-import { HTMLAttributes, ReactNode } from 'react';
-import { Sizes } from '@m4l/styles';
-/**
- * Higher-order function to generate a render option function for Autocomplete.
- * It supports rendering options with `startAd` and `endIcon`.
- * @param color - The color for the MenuItem.
- */
-type OptionType<T> = T & {
-    label: string;
-    selected?: boolean;
-    disabled?: boolean;
-    startAdornment?: ReactNode;
-    endAdornment?: ReactNode;
-    size: Extract<Sizes, 'small' | 'medium'>;
-};
+import { HTMLAttributes } from 'react';
+import { ResourceType } from '../types';
+import { RenderOptionType } from './types';
 /**
  * Render option for Autocomplete.
  */
 export declare const renderOption: <T>(optionProps: HTMLAttributes<HTMLLIElement> & {
     key: string;
-}, option: OptionType<T>) => import("react/jsx-runtime").JSX.Element;
-export {};
+}, option: RenderOptionType<T>, getOptionStartAdornment?: (option: T) => ResourceType | undefined, getOptionEndAdornment?: (option: T) => ResourceType | undefined) => import("react/jsx-runtime").JSX.Element;

package/components/mui_extended/Autocomplete/renderOptions/index.js

@@ -1,9 +1,35 @@
 import { jsx } from "react/jsx-runtime";
-import { memo } from "react";
+import { memo, useMemo } from "react";
+import { r as renderAdornment } from "../RenderAdornment/RenderAdornment.js";
 import { M as MenuItem } from "../../MenuItem/MenuItem.js";
 const MemoizedMenuItem = memo(MenuItem);
-const renderOption = (optionProps, option) => {
+const RenderOptionComponent = ({
+  optionProps,
+  option,
+  getOptionStartAdornment,
+  getOptionEndAdornment
+}) => {
   const { className, key, ...otherOptionProps } = optionProps;
+  const processedStartAdornment = useMemo(() => {
+    if (!getOptionStartAdornment) {
+      return null;
+    }
+    const startAdornment = getOptionStartAdornment(option);
+    if (!startAdornment) {
+      return null;
+    }
+    return renderAdornment(startAdornment, option.size);
+  }, [getOptionStartAdornment, option]);
+  const processedEndAdornment = useMemo(() => {
+    if (!getOptionEndAdornment) {
+      return null;
+    }
+    const endAdornment = getOptionEndAdornment(option);
+    if (!endAdornment) {
+      return null;
+    }
+    return renderAdornment(endAdornment, option.size);
+  }, [getOptionEndAdornment, option]);
   return /* @__PURE__ */ jsx(
     MemoizedMenuItem,
     {
@@ -12,13 +38,24 @@ const renderOption = (optionProps, option) => {
       color: "default",
       label: option.label,
       disabled: option.disabled,
-      startIcon: option.startAdornment,
-      endIcon: option.endAdornment,
-      size: option.size
+      startIcon: processedStartAdornment,
+      endIcon: processedEndAdornment
     },
     option.label
   );
 };
+const MemoizedRenderOptionComponent = memo(RenderOptionComponent);
+const renderOption = (optionProps, option, getOptionStartAdornment, getOptionEndAdornment) => {
+  return /* @__PURE__ */ jsx(
+    MemoizedRenderOptionComponent,
+    {
+      optionProps,
+      option,
+      getOptionStartAdornment,
+      getOptionEndAdornment
+    }
+  );
+};
 export {
   renderOption as r
 };

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

@@ -0,0 +1,7 @@
+import { Sizes } from '@m4l/styles';
+export type RenderOptionType<T> = {
+    label: string;
+    selected?: boolean;
+    disabled?: boolean;
+    size: Extract<Sizes, 'small' | 'medium'>;
+} & T;

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

@@ -1,6 +1,6 @@
 import { AutocompleteChangeReason, AutocompleteFreeSoloValueMapping, AutocompleteInputChangeReason, AutocompleteProps as MUIAutocompleteProps, Theme } from '@mui/material';
 import { Sizes } from '@m4l/styles';
-import { ChangeEvent, ReactElement } from 'react';
+import { ChangeEvent, ReactElement, ReactNode } from 'react';
 import { TextFieldProps } from '../TextField/types';
 import { AUTOCOMPLETE_KEY_COMPONENT } from './constants';
 import { AutocompleteSlots } from './slots';
@@ -21,6 +21,7 @@ export interface BaseAutocompleteProps {
      */
     dataTestid?: string;
 }
+export type AdornmentType = ReactElement | string;
 /**
  * Props for the unified Autocomplete component.
  * Supports both single and multiple selection, and two types: `text` and `image`.
@@ -47,17 +48,18 @@ export interface AutocompleteProps<T, Multiple extends boolean | undefined> exte
      */
     value: T | T[] | null | undefined;
     /**
+     *
      * Function to get the label for a given option.
      */
     getOptionLabel: (option: T | AutocompleteFreeSoloValueMapping<false>) => string;
     /**
      * Function to get the start adornment for a given option.
      */
-    getOptionalStartAdornment: (option: T) => React.ReactNode;
+    getOptionStartAdornment?: (option: T) => ResourceType;
     /**
      * Function to get the end adornment for a given option.
      */
-    getOptionalEndAdornment: (option: T) => React.ReactNode;
+    getOptionEndAdornment?: (option: T) => ResourceType;
     /**
      * Function to compare if an option matches the selected value.
      */
@@ -72,6 +74,7 @@ export interface AutocompleteProps<T, Multiple extends boolean | undefined> exte
     onChangeFilterParmsLocal?: (newValue: string, reason: AutocompleteInputChangeReason) => void;
     /**
      * Function to get the image URL for a given option (only for `type: 'image'`).
+     * @deprecated Use getOptionStartAdornment or getOptionEndAdornment instead.
      */
     getOptionUrlImage?: (option: T) => string;
     /**
@@ -88,6 +91,10 @@ export interface AutocompleteProps<T, Multiple extends boolean | undefined> exte
      */
     startAdornment?: ReactElement;
 }
+export type ResourceType = {
+    resource: ReactNode;
+    type?: 'icon' | 'image';
+};
 /**
  * Represents the owner state of the Autocomplete component for styling purposes.
  */

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
         )