@m4l/components 9.3.1 → 9.3.3

package/@types/types.d.ts

@@ -145,10 +145,10 @@ import { ChipStatusFormatterSlotsType } from '../components/formatters/ChipStatu
 import { RHFUploadImageOwnerState, RHFUploadImageSlotsType } from '../components/hook-form/RHFUpload/RHFUploadImage/types';
 import { PrintingSystemOwnerState, PrintingSystemSlotsType } from '../components/PrintingSystem/types';
 import { ScrollBarOwnerState, ScrollBarSlotsType } from '../components/ScrollBar/types';
-
 import { SplitLayoutOwnerState } from '../components/extended/React-resizable-panels/types';
 import { ObjectLogsOwnerState, ObjectLogsSlotsType } from '../components/ObjectLogs/types';
 import { LanguagePopoverOwnerState, LanguagePopoverSlotsType } from '../components/LanguagePopover/types';
+import { CardOwnerState, CardSlotsType } from '../components/Card/types';
 import { ContainerFlowOwnerState, ContainerFlowSlotsType } from '../components/ContainerFlow/types';
 declare module '@mui/material/styles' {
   // Define the slots in the theme
@@ -229,6 +229,7 @@ declare module '@mui/material/styles' {
     M4LSplitLayout: SplitLayoutOwnerState;
     M4LObjectLogs: ObjectLogsSlotsType;
     M4LLanguagePopover: LanguagePopoverSlotsType;
+    M4LCard: CardSlotsType;
     M4LContainerFlow: ContainerFlowSlotsType;
   }
   interface ComponentsPropsList {
@@ -309,6 +310,7 @@ declare module '@mui/material/styles' {
     M4LSplitLayout: Partial<SplitLayoutOwnerState>;
     M4LObjectLogs: Partial<ObjectLogsOwnerState>;
     M4LLanguagePopover: Partial<LanguagePopoverOwnerState>;
+    M4LCard: Partial<CardOwnerState>;
     M4LContainerFlow: Partial<ContainerFlowOwnerState>;
   }
   interface Components {
@@ -702,6 +704,11 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LLanguagePopover'];
       variants?: ComponentsVariants['M4LLanguagePopover'];
     };
+    M4LCard?: {
+      defaultProps?: ComponentsPropsList['M4LCard'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LCard'];
+      variants?: ComponentsVariants['M4LCard'];
+    };
     M4LContainerFlow?: {
       defaultProps?: ComponentsPropsList['M4LContainerFlow'];
       styleOverrides?: ComponentsOverrides<Theme>['M4LContainerFlow'];

package/components/Card/Card.d.ts

@@ -0,0 +1,7 @@
+import { CardProps } from './types';
+/**
+ * Componente de tarjeta.
+ * @param props - Propiedades del componente.
+ * @returns Componente de tarjeta.
+ */
+export declare const Card: (props: CardProps) => import("react/jsx-runtime").JSX.Element;

package/components/Card/Card.styles.d.ts

@@ -0,0 +1,2 @@
+import { CardStyles } from './types';
+export declare const cardStyles: CardStyles;

package/components/Card/constants.d.ts

@@ -0,0 +1,7 @@
+export declare const CARD_KEY = "M4LCard";
+export declare const CARD_CLASSES: Record<string, string>;
+export declare const CARD_SIZES: {
+    compact: number;
+    standard: number;
+    comfortable: number;
+};

package/components/Card/helpers/getSizeSpacing.d.ts

@@ -0,0 +1,7 @@
+import { CardProps } from '../types';
+/**
+ * Obtiene el tamaño del gap de la tarjeta.
+ * @param gap - El gap de la tarjeta.
+ * @returns El tamaño del gap de la tarjeta.
+ */
+export declare const getSizeSpacing: (gap: CardProps["gap"] | number | undefined | null) => number;

package/components/Card/helpers/getSizeSpacing.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/Card/index.d.ts

@@ -0,0 +1 @@
+export { Card } from './Card';

package/components/Card/slots/CardEnum.d.ts

@@ -0,0 +1,3 @@
+export declare enum CardSlots {
+    root = "root"
+}

package/components/Card/slots/CardSlots.d.ts

@@ -0,0 +1,3 @@
+export declare const CardRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').CardOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/components/Card/test/Card.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/Card/types.d.ts

@@ -0,0 +1,59 @@
+import { Theme } from '@mui/material';
+import { M4LOverridesStyleRules } from '../../@types/augmentations';
+import { CARD_KEY } from './constants';
+import { CardSlots } from './slots/CardEnum';
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Contenido de la tarjeta.
+     */
+    children: React.ReactNode;
+    /**
+     * Variante de la tarjeta.
+     */
+    variant?: 'text' | 'outlined';
+    /**
+     * Espacio entre los elementos de la tarjeta.
+     */
+    gap?: number | 'compact' | 'standard' | 'comfortable';
+    /**
+     * Espacio entre los elementos de la tarjeta.
+     */
+    padding?: number | 'compact' | 'standard' | 'comfortable';
+    /**
+     * Dirección de la tarjeta.
+     */
+    direction?: 'row' | 'column';
+    /**
+     * Altura de la tarjeta.
+     */
+    height?: number | 'auto';
+    /**
+     * Clase de la tarjeta.
+     */
+    className?: string;
+    /**
+     * Estilo de la tarjeta.
+     */
+    justifyContent?: React.CSSProperties['justifyContent'];
+    /**
+     * Estilo de la tarjeta.
+     */
+    alignItems?: React.CSSProperties['alignItems'];
+    /**
+     * Estilo de la tarjeta.
+     */
+    selected?: boolean;
+}
+export type CardSlotsType = keyof typeof CardSlots;
+export type CardOwnerState = {
+    variant: CardProps['variant'];
+    gap: CardProps['gap'];
+    height: CardProps['height'];
+    padding: CardProps['padding'];
+    direction: CardProps['direction'];
+    onClick: boolean;
+    justifyContent: CardProps['justifyContent'];
+    alignItems: CardProps['alignItems'];
+    selected: CardProps['selected'];
+};
+export type CardStyles = M4LOverridesStyleRules<CardSlotsType, typeof CARD_KEY, Theme>;

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/hooks/useHeaderActions.d.ts

@@ -5,7 +5,7 @@ import { UseHeaderActionsParams } from '../types';
  *
  * Retorna las acciones del header de una ventana. Izquierda, derecha y dentro del menu.
  */
-export declare const useHeaderActions: ({ windowId, areaId, }: UseHeaderActionsParams) => {
+export declare const useHeaderActions: ({ windowId, areaId, emergeType, }: UseHeaderActionsParams) => {
     leftActions: WindowBaseAction[];
     insideActions: WindowBaseAction[];
     rightActions: WindowBaseAction[];

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

@@ -7,7 +7,8 @@ import { g as getLeftActions, a as getInsideMenuActions } from "../../../../../.
 import { u as useRightActions } from "./useRightActions.js";
 const useHeaderActions = ({
   windowId,
-  areaId
+  areaId,
+  emergeType
 }) => {
   const { host_static_assets, environment_assets } = useEnvironment();
   const { getLabel } = useModuleDictionary();
@@ -45,7 +46,8 @@ const useHeaderActions = ({
   }, [windowId, isMobile, moduleActions, urlPrefix, saveModuleCookies, resetModuleCookies, windowOptions, getLabel]);
   const rightActions = useRightActions({
     windowId,
-    areaId
+    areaId,
+    emergeType
   });
   return {
     leftActions,

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/hooks/useRightActions.d.ts

@@ -3,4 +3,4 @@ import { UseHeaderActionsParams } from '../types';
 /**
  * Hook useRightActions, retorna las acciones de maximizar y minimizar una ventana, colapsar y expandir una ventana
  */
-export declare const useRightActions: ({ windowId, areaId, }: UseHeaderActionsParams) => WindowBaseAction[];
+export declare const useRightActions: ({ windowId, areaId, emergeType, }: UseHeaderActionsParams) => WindowBaseAction[];

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

@@ -6,7 +6,8 @@ import { I as ICONS } from "../../../../../../../icons.js";
 import { g as getAreasDictionary, A as AREAS_DICCTIONARY } from "../../../../../../../dictionary.js";
 const useRightActions = ({
   windowId,
-  areaId
+  areaId,
+  emergeType
 }) => {
   const { host_static_assets, environment_assets } = useEnvironment();
   const { getLabel } = useModuleDictionary();
@@ -29,54 +30,56 @@ const useRightActions = ({
   const { maximizeLayout, normalizeLayouts, colapseLayoutItem, unColapseLayoutItem } = useAreasStore((state) => state.areaActions);
   const rightActions = useMemo(() => {
     const actions = [];
-    actions.push({
-      place: "right",
-      key: "collapseToggle",
-      iconUrl: !collapsed ? `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.COLLAPSE}` : `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.UNCOLLPASE}`,
-      label: !collapsed ? getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_collapse_window)) : getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_uncollapse_window)),
-      tooltipProps: {
-        placement: "bottom-end"
-      },
-      /**
-       * Acción de collapse/expand.
-       */
-      onClick: () => {
-        if (areaId) {
-          if (collapsed) {
-            unColapseLayoutItem(areaId, windowId);
-          } else {
-            colapseLayoutItem(areaId, windowId);
+    if (emergeType === "layout") {
+      actions.push({
+        place: "right",
+        key: "collapseToggle",
+        iconUrl: !collapsed ? `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.COLLAPSE}` : `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.UNCOLLPASE}`,
+        label: !collapsed ? getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_collapse_window)) : getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_uncollapse_window)),
+        tooltipProps: {
+          placement: "bottom-end"
+        },
+        /**
+         * Acción de collapse/expand.
+         */
+        onClick: () => {
+          if (areaId) {
+            if (collapsed) {
+              unColapseLayoutItem(areaId, windowId);
+            } else {
+              colapseLayoutItem(areaId, windowId);
+            }
           }
-        }
-      },
-      disabled: !(maximizedId === void 0),
-      color: "warning",
-      className: "collapse-toggle window-actions"
-    });
-    actions.push({
-      place: "right",
-      key: "maximize",
-      iconUrl: maximizedId ? `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.NORMALIZE}` : `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.MAXIMIZE}`,
-      label: maximizedId ? getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_minimize_window)) : getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_maximize_window)),
-      tooltipProps: {
-        placement: "bottom-end"
-      },
-      /**
-       * Acción de maximize/normalize.
-       */
-      onClick: () => {
-        if (areaId) {
-          if (maximizedId) {
-            normalizeLayouts(areaId);
-          } else {
-            maximizeLayout(areaId, windowId);
+        },
+        disabled: !(maximizedId === void 0),
+        color: "warning",
+        className: "collapse-toggle window-actions"
+      });
+      actions.push({
+        place: "right",
+        key: "maximize",
+        iconUrl: maximizedId ? `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.NORMALIZE}` : `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.MAXIMIZE}`,
+        label: maximizedId ? getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_minimize_window)) : getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_maximize_window)),
+        tooltipProps: {
+          placement: "bottom-end"
+        },
+        /**
+         * Acción de maximize/normalize.
+         */
+        onClick: () => {
+          if (areaId) {
+            if (maximizedId) {
+              normalizeLayouts(areaId);
+            } else {
+              maximizeLayout(areaId, windowId);
+            }
           }
-        }
-      },
-      disabled: false,
-      color: "info",
-      className: "expand-toggle window-actions"
-    });
+        },
+        disabled: false,
+        color: "info",
+        className: "expand-toggle window-actions"
+      });
+    }
     return actions;
   }, [
     collapsed,

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

@@ -75,7 +75,8 @@ const useWindow = (windowId, areaId) => {
   }, [status, loadCookiesFromApi, windowId]);
   const { leftActions, insideActions: menuActions, rightActions } = useHeaderActions({
     windowId,
-    areaId
+    areaId,
+    emergeType
   });
   const memoizedActions = useMemo(() => {
     return [...leftActions, ...menuActions, ...rightActions];

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/types.d.ts

@@ -1,5 +1,5 @@
 import { WindowBaseAction } from '../../../../../../../../../src/components/WindowBase/types';
-import { AreaWindowBaseProps } from '../../../../../../types';
+import { AreaWindowBaseProps, EmergeType } from '../../../../../../types';
 export interface WindowProps extends Pick<AreaWindowBaseProps, 'windowId' | 'areaId'> {
     /**
      * Acciones que se mostrarán en el header
@@ -9,4 +9,8 @@ export interface WindowProps extends Pick<AreaWindowBaseProps, 'windowId' | 'are
 export interface UseHeaderActionsParams {
     windowId: string;
     areaId?: string;
+    /**
+     * emergeType: 'popup' | 'modal'
+     */
+    emergeType: EmergeType;
 }

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/WindowModal/WindowModal.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import React from "react";
+import React, { useCallback } from "react";
 import { u as useAreasStore } from "../../../../../../hooks/useAreas/index.js";
 import { W as Window } from "../Window/Window.js";
 import { useIsMobile } from "@m4l/graphics";
@@ -23,25 +23,30 @@ const AreaWindowModal = (props) => {
   );
   const isMobile = useIsMobile();
   const [containerRef, setContainerRef] = useStateRef(null);
-  const leftPosition = Math.max(0, window.innerWidth / 2 - (width ?? 100) / 2);
-  const topPosition = Math.max(0, window.innerHeight / 2 - (height ?? 100) / 2);
-  const DraggableComponent = () => {
+  const DraggableComponent = useCallback(() => {
+    if (!containerRef) {
+      return null;
+    }
     return /* @__PURE__ */ jsx(
       DragResizeWindowRND,
       {
         containerElement: containerRef ?? void 0,
+        containerSize: {
+          containerWidth: containerRef.clientWidth,
+          containerHeight: containerRef.clientHeight
+        },
         minWindowWidth,
         minWindowHeight,
         bounds: { left: 0, top: 0, right: 0, bottom: 0 },
         resizeHandles: ["se", "nw", "sw", "ne", "n", "e", "s", "w"],
         defaultPosition: {
-          vertical: { top: topPosition, height },
-          horizontal: { left: leftPosition, width }
+          vertical: { height },
+          horizontal: { width }
         },
         children: /* @__PURE__ */ jsx(Window, { windowId, areaId: void 0 })
       }
     );
-  };
+  }, [containerRef, windowId, minWindowWidth, minWindowHeight, height, width]);
   return /* @__PURE__ */ jsx(
     WrapperWindowModalWithRef,
     {

package/components/formatters/ChipStatusFormatter/ChipStatusFormatter.js

@@ -12,6 +12,8 @@ const ChipStatusFormatter = (props) => {
     statusesColors,
     Component = React.Fragment,
     fallbackColor = "default",
+    fallbackVariant = "contained",
+    fallbackOpacity = true,
     size = "medium",
     dataTestid
   } = props;
@@ -19,7 +21,11 @@ const ChipStatusFormatter = (props) => {
   if (!status) {
     return null;
   }
-  const statusObject = statusesColors[status ? status : fallbackColor];
+  const statusObject = statusesColors[status] || {
+    color: fallbackColor,
+    variant: fallbackVariant,
+    opacity: fallbackOpacity
+  };
   const { color, variant, opacity = true } = statusObject;
   const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
   return /* @__PURE__ */ jsx(Component, { children: /* @__PURE__ */ jsx(

package/components/formatters/ChipStatusFormatter/types.d.ts

@@ -26,7 +26,15 @@ export interface ChipStatusFormatterProps {
     /**
      * Color por defecto
      */
-    fallbackColor?: Extract<ChipColorOptions, 'default'>;
+    fallbackColor?: ChipColorOptions;
+    /**
+     * fallback variant
+     */
+    fallbackVariant?: ChipVariants;
+    /**
+     * fallback opacity
+     */
+    fallbackOpacity?: boolean;
     /**
      * Componente personalizado
      */

package/components/mui_extended/Accordion/Accordion.js

@@ -23,7 +23,7 @@ const Accordion = forwardRef((props, ref) => {
   } = props;
   const { currentSize } = useComponentSize(size);
   const classRoot = getComponentSlotRoot(ACCORDION_KEY);
-  const [expandedState, setExpandedState] = useState(expanded ?? true);
+  const [expandedState, setExpandedState] = useState(expanded ?? accordionProps?.defaultExpanded ?? true);
   const handleToggle = () => {
     setExpandedState((prev) => !prev);
   };

package/mockServiceWorker.js

@@ -8,7 +8,7 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.8.2'
+const PACKAGE_VERSION = '2.7.0'
 const INTEGRITY_CHECKSUM = '00729d72e3b82faf54ca8b9621dbb96f'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.3.1",
+  "version": "9.3.3",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {

package/storybook/components/Areas/AreasViewer/subcomponents/Launcher/PopupButton.d.ts

@@ -4,7 +4,7 @@ interface PopupButtonProps {
     iconUrl: string;
     dynamicParams: Record<string, any>;
     /** Si se pasa este id, se intentará reemplazar el popup existente */
-    windowType?: 'simple_popup' | 'microfrontend_userd_add_edit_popup' | 'microfrontend_users_list_layout';
+    windowType?: 'simple_popup' | 'microfrontend_userd_add_edit_popup' | 'microfrontend_users_list_layout' | 'microfrontend_userd_add_edit_modal';
     replaceMeId?: string;
     onClick?: () => void;
     /** Callback para notificar que se ha generado un id, en caso de no recibir uno por props */

package/storybook/components/Card/Card.stories.d.ts

@@ -0,0 +1,45 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Card } from '../../../src/components/Card';
+declare const meta: Meta<typeof Card>;
+type Story = StoryObj<typeof Card>;
+/**
+ * Base story for `Card` with variant outlined.
+ */
+export declare const H001_Variant_Outlined: Story;
+/**
+ * Base story for `Card` with variant text.
+ */
+export declare const H002_Variant_Text: Story;
+/**
+ * Base story for `Card` with variant outlined and hover.
+ */
+export declare const H003_Variant_Outlined_Hover: Story;
+/**
+ * Base story for `Card` with variant outlined and selected.
+ */
+export declare const H004_Variant_Outlined_Selected: Story;
+/**
+ * Base story for `Card` with variant outlined and active.
+ */
+export declare const H005_Variant_Outlined_Active: Story;
+/**
+ * Base story for `Card` with variant outlined and focus visible.
+ */
+export declare const H006_Variant_Outlined_Focus_Visible: Story;
+/**
+ * Base story for `Card` with variant text and hover.
+ */
+export declare const H007_Variant_Text_Hover: Story;
+/**
+ * Base story for `Card` with variant text and hover.
+ */
+export declare const H008_Variant_Text_Selected: Story;
+/**
+ * Base story for `Card` with variant text and active.
+ */
+export declare const H009_Variant_Text_Active: Story;
+/**
+ * Base story for `Card` with variant text and focus visible.
+ */
+export declare const H010_Variant_Text_Focus_Visible: Story;
+export default meta;

package/storybook/components/Card/subcomponents/ContentCard.d.ts

@@ -0,0 +1,8 @@
+import { CardProps } from '../../../../src/components/Card/types';
+/**
+ * Componente que se renderiza en el contenido de la tarjeta
+ * @returns {React.ReactElement}
+ */
+export declare const ContentCard: ({ gap }: {
+    gap?: CardProps["gap"];
+}) => import("react/jsx-runtime").JSX.Element;

package/storybook/components/Card/subcomponents/constants.d.ts

@@ -0,0 +1,9 @@
+export declare const ICONS: {
+    STATUS: string;
+    LOCATION: string;
+    TIME: string;
+    SPEED: string;
+    ACTION: string;
+    INFORMATION: string;
+    MENU: string;
+};