@m4l/components 9.3.43 → 9.4.0-JA-20251207-Beta.0

package/components/CheckableList/types.d.ts

@@ -0,0 +1,277 @@
+import { Theme } from '@mui/material/styles';
+import { Sizes } from '@m4l/styles';
+import { M4LOverridesStyleRules } from '../../@types/augmentations';
+import { CHECKABLE_LIST_KEY_COMPONENT } from './constants';
+import { CheckableListSlots } from './slots/slots';
+import { CheckableListRenderGroupParams } from './hooks/useCheckableListRender';
+import { HexColor } from '@m4l/graphics';
+/**
+ * Item individual de la lista chequeable
+ */
+export interface CheckableListItem {
+    /**
+     * Identificador único del item
+     */
+    id: string | number;
+    /**
+     * Texto que se muestra
+     */
+    label: string;
+    /**
+     * Valor adicional del item (opcional, para casos donde id no es suficiente)
+     */
+    value?: any;
+    /**
+     * Si está deshabilitado
+     */
+    disabled?: boolean;
+    /**
+     * Texto adicional/descripción
+     */
+    description?: string;
+    /**
+     * Icono opcional
+     */
+    icon?: React.ReactNode;
+    /**
+     * Datos adicionales
+     */
+    metadata?: Record<string, any>;
+    /**
+     * Altura específica del item para virtualización
+     */
+    rowHeight?: number;
+}
+/**
+ * Grupo de items chequeables
+ */
+export interface CheckableListGroup {
+    /**
+     * Identificador único del grupo
+     */
+    id: string | number;
+    /**
+     * Título del grupo
+     */
+    label: string;
+    /**
+     * Items del grupo
+     */
+    items: CheckableListItem[];
+    /**
+     * Si todo el grupo está deshabilitado
+     */
+    disabled?: boolean;
+    /**
+     * Estado inicial (expandido/colapsado)
+     */
+    collapsed?: boolean;
+    /**
+     * Descripción del grupo
+     */
+    description?: string;
+    /**
+     * Icono del grupo
+     */
+    icon?: React.ReactNode;
+    /**
+     * Datos adicionales del grupo
+     */
+    metadata?: Record<string, any>;
+    /**
+     * Color del grupo
+     */
+    color?: HexColor;
+    /**
+     * Si esta seleccionado el grupo o no
+     */
+    selected?: boolean;
+}
+/**
+ * Tipo interno para items en la lista virtualizada
+ */
+export interface VirtualizedItem {
+    type: 'item' | 'group';
+    data: CheckableListItem | CheckableListGroup;
+    index: number;
+    groupIndex?: number;
+}
+/**
+ * Propiedades del componente CheckableList
+ */
+export interface CheckableListRenderItemParams {
+    /**
+     * Item que se está renderizando
+     */
+    item: CheckableListItem;
+    /**
+     * Estado actual del checkbox
+     */
+    checked: boolean;
+    /**
+     * Índice del item dentro de la colección
+     */
+    index: number;
+    /**
+     * Si el item está deshabilitado (global o individual)
+     */
+    disabled: boolean;
+    /**
+     * Tamaño actual del componente
+     */
+    size: Extract<Sizes, 'small' | 'medium' | 'large'>;
+    /**
+     * Variante visual del componente
+     */
+    variant: 'standard' | 'outlined' | 'compact';
+}
+/**
+ * Propiedades del componente CheckableList
+ */
+export interface CheckableListProps {
+    /**
+     * Array de IDs seleccionados (controlado)
+     */
+    value?: (string | number)[];
+    /**
+     * Callback cuando cambian las selecciones
+     */
+    onChange?: (selectedIds: (string | number)[]) => void;
+    /**
+     * Items cuando NO está agrupado
+     */
+    items?: CheckableListItem[];
+    /**
+     * Grupos cuando SÍ está agrupado
+     */
+    groups?: CheckableListGroup[];
+    /**
+     * Permitir selección múltiple (default: true)
+     */
+    multiple?: boolean;
+    /**
+     * Mostrar botón "Seleccionar todo" (default: false)
+     */
+    selectAll?: boolean;
+    /**
+     * Hacer los grupos expandibles/colapsables (default: true)
+     */
+    groupable?: boolean;
+    /**
+     * Expandir todos los grupos al inicio (default: true)
+     */
+    expandAllGroups?: boolean;
+    /**
+     * Mostrar barra de búsqueda
+     */
+    searchable?: boolean;
+    /**
+     * Función personalizada de filtrado
+     */
+    filterFn?: (item: CheckableListItem, query: string) => boolean;
+    /**
+     * Tamaño del componente
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Variante del componente
+     */
+    variant?: 'standard' | 'outlined' | 'compact';
+    /**
+     * Altura genérica para cada item (virtualización)
+     */
+    itemRowHeight?: number;
+    /**
+     * Altura genérica para cada encabezado de grupo
+     */
+    groupRowHeight?: number;
+    /**
+     * Ancho del componente (requerido para virtualización)
+     */
+    width?: number | string;
+    /**
+     * Tamaño de los checkboxes
+     */
+    checkboxSize?: 'small' | 'medium';
+    /**
+     * Checkbox en el grupo (seleccionar todo el grupo)
+     */
+    showCheckboxOnGroup?: boolean;
+    /**
+     * Comportamiento del checkbox indeterminado
+     */
+    indeterminateBehavior?: 'select-all' | 'indicate-some';
+    /**
+     * Clase CSS personalizada
+     */
+    className?: string;
+    /**
+     * ID para testing
+     */
+    'data-testid'?: string;
+    /**
+     * Label para accesibilidad
+     */
+    ariaLabel?: string;
+    /**
+     * ID del elemento que describe el componente
+     */
+    ariaLabelledBy?: string;
+    /**
+     * Render personalizado de item
+     */
+    renderItem?: (params: CheckableListRenderItemParams) => React.ReactNode;
+    /**
+     * Render personalizado de grupo
+     */
+    renderGroup?: (params: CheckableListRenderGroupParams) => React.ReactNode;
+    /**
+     * Estado de carga
+     */
+    loading?: boolean;
+    /**
+     * Deshabilitar toda la lista
+     */
+    disabled?: boolean;
+}
+/**
+ * Estado del propietario del componente CheckableList
+ */
+export interface CheckableListOwnerState extends Record<string, unknown> {
+    /**
+     * Tamaño del componente
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Variante del componente
+     */
+    variant?: 'standard' | 'outlined' | 'compact';
+    /**
+     * Si está deshabilitado
+     */
+    disabled?: boolean;
+    /**
+     * Si está agrupado
+     */
+    grouped?: boolean;
+    /**
+     * Si tiene items seleccionados
+     */
+    hasSelected?: boolean;
+    /**
+     * Altura máxima del contenedor
+     */
+    maxHeight?: string | number;
+    /**
+     * Color del grupo
+     */
+    color?: HexColor;
+}
+/**
+ * Tipo de slots del componente CheckableList
+ */
+export type CheckableListSlotsType = keyof typeof CheckableListSlots;
+/**
+ * Estilos del componente CheckableList
+ */
+export type CheckableListStyles = M4LOverridesStyleRules<CheckableListSlotsType, typeof CHECKABLE_LIST_KEY_COMPONENT, Theme>;

package/components/CommonActions/components/ActionFormCancel/ActionFormCancel.js

@@ -13,7 +13,7 @@ function ActionFormCancel(props) {
   const {
     className,
     onClose,
-    linkToCloseWindow,
+    linkToCloseWindow = false,
     "data-testid": dataTestId
   } = props;
   const { getLabel } = useModuleDictionary();

package/components/DataGrid/Datagrid.styles.js

@@ -385,8 +385,8 @@ const dataGridStyles = {
         ),
         lineHeight: "var(--rdg-row-height)!important",
         '&[aria-selected="true"]': {
-          outline: `2px solid var(--rdg-selection-color)`,
-          outlineOffset: "-2px"
+          // outline: `2px solid var(--rdg-selection-color)`,
+          // outlineOffset: '-2px',
         },
         "& .checkbox-checked": {
           "& path:first-of-type": {
@@ -431,7 +431,7 @@ const dataGridStyles = {
           borderColor: `${theme.vars.palette?.border.disabled} !important`,
           ...theme.colorSchemes.finalTheme.typography.body
         },
-        "&:has(> .M4LRadioButton-root)": {
+        "&:has(> .M4LRadio-root)": {
           overflow: "visible",
           paddingInline: 0
         },
@@ -534,12 +534,12 @@ const dataGridStyles = {
         //Se utiliza directamente el valor porque no está tokenizado
       },
       "&&& [aria-selected=true]": {
-        backgroundColor: theme.vars.palette.primary?.toneOpacity,
-        color: theme.vars.palette.text.primary,
+        // backgroundColor: theme.vars.palette.primary?.toneOpacity,
+        // color: theme.vars.palette.text.primary,
         //cambia el color del contorno de cada celda selecionada
-        outline: theme.vars.size.borderStroke.container,
-        outlineOffset: "-1px",
-        outlineColor: theme.vars.palette.border.main
+        // outline: theme.vars.size.borderStroke.container,
+        // outlineOffset: '-1px',
+        // outlineColor: theme.vars.palette.border.main,
       },
       // Alineaciones
       "& .rdg-cell.rdg-cell-align-left": {

package/components/DataGrid/subcomponents/CheckboxCellAdapter/index.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { forwardRef, useContext } from "react";
 import { SelectCellFormatter } from "react-data-grid";
 import { C as CheckboxFormatter } from "../Table/subcomponents/CheckboxFormatter.js";
-import { R as RadioButtonFormatter } from "../Table/subcomponents/RadioButtonFormatter.js";
+import { R as RadioFormatter } from "../Table/subcomponents/RadioFormatter.js";
 import { a as DataGridContext } from "../../contexts/DataGridContext/index.js";
 import { l as CheckboxCellWrapperStyled } from "../../slots/DataGridSlot.js";
 const CheckboxCellAdapter = forwardRef(function CheckboxCellAdapter2(props, ref) {
@@ -20,7 +20,7 @@ const CheckboxCellAdapter = forwardRef(function CheckboxCellAdapter2(props, ref)
     const handleClick = (e) => {
       e.stopPropagation();
     };
-    const FormatterComponent = checkedRowsMultiple === false ? RadioButtonFormatter : CheckboxFormatter;
+    const FormatterComponent = checkedRowsMultiple === false ? RadioFormatter : CheckboxFormatter;
     return /* @__PURE__ */ jsx(CheckboxCellWrapperStyled, { onClick: handleClick, children: /* @__PURE__ */ jsx(
       FormatterComponent,
       {

package/components/DataGrid/subcomponents/Table/subcomponents/RadioFormatter.d.ts

@@ -0,0 +1,6 @@
+import { RenderCheckboxProps } from 'react-data-grid';
+/**
+ * Componente visual del Radio que se renderiza dentro de cada celda del DataGrid.
+ * ¿Para que sirve? Es un wrapper alrededor del componente Radio del MUI que adapta las props de react-data-grid
+ */
+export declare const RadioFormatter: import('react').ForwardRefExoticComponent<RenderCheckboxProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/DataGrid/subcomponents/Table/subcomponents/RadioFormatter.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { R as Radio } from "../../../../mui_extended/Radio/Radio.js";
+const RadioFormatter = forwardRef(function RadioFormatter2({ onChange, checked, ...props }, _ref) {
+  function handleChange(e) {
+    onChange(e.target.checked, e.nativeEvent.shiftKey);
+  }
+  return /* @__PURE__ */ jsx(Radio, { checked, onChange: handleChange, ...props });
+});
+export {
+  RadioFormatter as R
+};

package/components/DataGrid/subcomponents/Table/subcomponents/RadioSelectColumn.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
 import { d as DATAGRID_SELECT_COLUMN_KEY } from "../../../constants.js";
-import { R as RadioButtonFormatter } from "./RadioButtonFormatter.js";
+import { R as RadioFormatter } from "./RadioFormatter.js";
 function RadioSelectGroupFormatter(_props) {
   return null;
 }
@@ -15,7 +15,7 @@ function RadioSelectFormatter(props) {
     }
   };
   return /* @__PURE__ */ jsx(
-    RadioButtonFormatter,
+    RadioFormatter,
     {
       checked: checkedRows?.has(rowKeyGetter(props.row)) || false,
       tabIndex: props.tabIndex,

package/components/DynamicFilter/store/DynamicFilterContext.js

@@ -17,6 +17,7 @@ const DynamicFilterProvider = forwardRef((props, ref) => {
     fields,
     initialAppliedFilters = [],
     onChangeFilters,
+    onDirty,
     dataTestId = "",
     size,
     children,
@@ -110,6 +111,11 @@ const DynamicFilterProvider = forwardRef((props, ref) => {
     (state) => state.countOnChangeFiltersApplied,
     shallow
   );
+  const isDirty = useStore(
+    dynamicFilterStoreRef.current,
+    (state) => state.ownerState.isDirty,
+    shallow
+  );
   useEffect(() => {
     if (countOnChangeFiltersApplied === 0) {
       return;
@@ -134,6 +140,11 @@ const DynamicFilterProvider = forwardRef((props, ref) => {
       return;
     }
   }, []);
+  useEffect(() => {
+    if (onDirty && isDirty) {
+      onDirty();
+    }
+  }, [isDirty, onDirty]);
   useEffect(() => {
     if (dynamicFilterStoreRef.current?.getState().size !== currentSize) {
       dynamicFilterStoreRef.current?.getState().actions.setSize(currentSize);

package/components/DynamicFilter/store/DynamicFilterStore.js

@@ -88,6 +88,9 @@ const createDynamicFilterStore = (initProps, storeDevtoolsEnabled = false) => {
             set((state) => {
               const indexToRemoved = state.appliedFilters.findIndex((f) => id === f.id && !f.fixed);
               if (indexToRemoved > -1) {
+                if (!state.automatic) {
+                  state.ownerState.isDirty = true;
+                }
                 state.appliedFilters.splice(indexToRemoved, 1);
                 state.ownerState.isEmpty = state.appliedFilters.length === 0;
                 updateAutomatic(state);
@@ -143,6 +146,9 @@ const createDynamicFilterStore = (initProps, storeDevtoolsEnabled = false) => {
               state.popoverFilterData = void 0;
               state.ownerState.inEdition = false;
               state.ownerState.isDirty = false;
+              if (!state.automatic) {
+                state.ownerState.isDirty = true;
+              }
               updateAutomatic(state);
             });
           },
@@ -189,6 +195,9 @@ const createDynamicFilterStore = (initProps, storeDevtoolsEnabled = false) => {
               if (index > -1) {
                 state.appliedFilters[index] = editFilter;
               }
+              if (!state.automatic) {
+                state.ownerState.isDirty = true;
+              }
               updateAutomatic(state);
             });
           },

package/components/DynamicFilter/subcomponents/DynamicFilterBase/useDynamicFilterBase.d.ts

@@ -4,6 +4,6 @@
 export default function useDynamicFilterBase(): {
     ownerState: import('../../types').OwnerState;
     dataTestId: string | undefined;
-    size: "small" | "medium" | undefined;
+    size: import('@m4l/styles').Sizes | undefined;
     visibleRefresh: boolean | undefined;
 };

package/components/DynamicFilter/types.d.ts

@@ -307,6 +307,10 @@ export interface DynamicFilterProps {
      *  Handler que se dispara cuando el filtro cambia en automatico, o cuando es manual y se presion el boton de filtrar
      */
     onChangeFilters?: OnChangeFilters;
+    /**
+     * Handler cuando se marca como dirty
+     */
+    onDirty?: () => void;
     /**
      *  Key único necesario para las pruebas del componente.
      */

package/components/DynamicSort/store/DynamicSortStore.js

@@ -106,6 +106,9 @@ const createDynamicSortStore = (initProps, storeDevtoolsEnabled = false) => {
                 (f) => id === f.id && !f.fixed
               );
               if (index_to_remove > -1) {
+                if (!state.automatic) {
+                  state.ownerState.isDirty = true;
+                }
                 state.appliedSorts.splice(index_to_remove, 1);
                 updateAutomatic(state);
                 if (state.appliedSorts.length === 0) {
@@ -172,6 +175,9 @@ const createDynamicSortStore = (initProps, storeDevtoolsEnabled = false) => {
           clearSorts: () => {
             set((state) => {
               state.ownerState.isDirty = false;
+              if (!state.automatic) {
+                state.ownerState.isDirty = true;
+              }
               state.appliedSorts = state.appliedSorts.filter((f) => f.fixed);
               updateAvailableFields(state);
             });

package/components/DynamicSort/subcomponents/DynamicSortBase/useDynamicSortBase.d.ts

@@ -4,6 +4,6 @@
 export default function useDynamicSortBase(): {
     ownerState: import('../../types').OwnerState;
     dataTestId: string | undefined;
-    size: "small" | "medium";
+    size: import('@m4l/styles').Sizes;
     visibleRefresh: boolean | undefined;
 };

package/components/DynamicSort/types.d.ts

@@ -135,6 +135,10 @@ export interface DynamicSortProps {
      * Handler que se dispara cuando el filtro cambia en automatico, o cuando es manual y se presion el boton de filtrar
      */
     onChangeSorts?: OnChangeSorts;
+    /**
+     * Handler cuando se marca como dirty
+     */
+    onDirty?: () => void;
     /**
      * Key único para necesario para las pruebas del componente.
      */

package/components/MFIsolationApp/slots/MFIsolationAppSlots.d.ts

@@ -1,2 +1,2 @@
-export declare const WrapperAppBarContentChildrenStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Stack').StackProps, keyof import('../../mui_extended/Stack').StackProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;
-export declare const WrapperContentChildrenStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Stack').StackProps, keyof import('../../mui_extended/Stack').StackProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;
+export declare const WrapperAppBarContentChildrenStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../mui_extended/Stack').StackProps, "ref"> & import('react').RefAttributes<HTMLDivElement>, "children" | "title" | "component" | "zIndex" | "id" | "divider" | "border" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontSize" | "textTransform" | "fontFamily" | "typography" | "direction" | "spacing" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "content" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "top" | "translate" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "className" | "style" | "classes" | "sx" | "p" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "dataTestId" | keyof import('react').RefAttributes<HTMLDivElement> | "useFlexGap"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;
+export declare const WrapperContentChildrenStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../mui_extended/Stack').StackProps, "ref"> & import('react').RefAttributes<HTMLDivElement>, "children" | "title" | "component" | "zIndex" | "id" | "divider" | "border" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontSize" | "textTransform" | "fontFamily" | "typography" | "direction" | "spacing" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "content" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "top" | "translate" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "className" | "style" | "classes" | "sx" | "p" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "dataTestId" | keyof import('react').RefAttributes<HTMLDivElement> | "useFlexGap"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;

package/components/ObjectLogs/slots/ObjectLogsSlots.d.ts

@@ -10,7 +10,7 @@ export declare const GridWrapperStyled: import('@emotion/styled').StyledComponen
 export declare const WindowBaseStyled: import('@emotion/styled').StyledComponent<Pick<import('../../WindowBase/types').WindowBaseProps, keyof import('../../WindowBase/types').WindowBaseProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').ObjectLogsOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;
-export declare const StackStyled: import('@emotion/styled').StyledComponent<Pick<import('../..').StackProps, keyof import('../..').StackProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+export declare const StackStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../..').StackProps, "ref"> & import('react').RefAttributes<HTMLDivElement>, "children" | "title" | "component" | "zIndex" | "id" | "divider" | "border" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontSize" | "textTransform" | "fontFamily" | "typography" | "direction" | "spacing" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "content" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "top" | "translate" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "className" | "style" | "classes" | "sx" | "p" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "dataTestId" | keyof import('react').RefAttributes<HTMLDivElement> | "useFlexGap"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').ObjectLogsOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;
 export declare const DetailDialogComponent: import('@emotion/styled').StyledComponent<Pick<import('../types').DetailDialogProps, keyof import('../types').DetailDialogProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {

package/components/Stepper/Stepper.styles.js

@@ -21,8 +21,12 @@ const stepperStyles = {
     flex: 1,
     height: "100%",
     overflow: "hidden",
-    flexDirection: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? "column" : "row",
-    gap: theme.vars.size.baseSpacings.sp8
+    gap: theme.vars.size.baseSpacings.sp6,
+    ...ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? {
+      flexDirection: "column"
+    } : {
+      flexDirection: "row"
+    }
   }),
   /**
    * Estilos para el contenido del paso dentro del Stepper.
@@ -55,12 +59,13 @@ const stepperStyles = {
     flex: 1,
     display: "flex",
     flexDirection: "column",
-    gap: theme.vars.size.baseSpacings.sp6,
     overflowY: "auto",
     ...ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? {
-      borderTop: "1px solid",
-      paddingTop: theme.vars.size.baseSpacings.sp8
+      // borderTop: '1px solid',
+      gap: theme.vars.size.baseSpacings.sp4
+      // paddingTop: theme.vars.size.baseSpacings.sp8,
     } : {
+      gap: theme.vars.size.baseSpacings.sp6,
       borderLeft: "1px solid",
       paddingLeft: theme.vars.size.baseSpacings.sp8
     },
@@ -107,7 +112,7 @@ const stepperStyles = {
    */
   stepName: ({ theme, ownerState }) => ({
     ...ownerState?.orientation === "horizontal" && {
-      height: theme.generalSettings.isMobile ? theme.vars.size.mobile.medium.action : theme.vars.size.desktop.large.action
+      height: theme.generalSettings.isMobile ? theme.vars.size.mobile.medium.action : theme.vars.size.desktop.medium.action
     },
     ...(ownerState?.orientation === "vertical" || theme.generalSettings.isMobile) && {
       maxWidth: "120px",
@@ -203,8 +208,8 @@ const stepperStyles = {
     position: "sticky",
     top: 0,
     backgroundColor: theme.vars.palette.background.default,
-    zIndex: 10,
-    paddingBottom: theme.vars.size.baseSpacings.sp2
+    zIndex: 10
+    // paddingBottom: theme.vars.size.baseSpacings.sp2,
   }),
   /**
    * Estilos para el cuerpo del área de contenido del Stepper