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

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

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { useState, useMemo, useEffect, useCallback } from "react";
 import { useModuleDictionary } from "@m4l/core";
 import { M as MenuItem } from "../../../../../mui_extended/MenuItem/MenuItem.js";
-import { M as MenuListStyled, r as HeaderRenderClickStyled } from "../../../../slots/DataGridSlot.js";
+import { M as MenuListStyled, K as HeaderRenderClickStyled } from "../../../../slots/DataGridSlot.js";
 import { M as MenuDivider } from "../../../../../mui_extended/MenuDivider/MenuDivider.js";
 import { P as Popover } from "../../../../../mui_extended/Popover/Popover.js";
 import { D as DICTIONARY } from "../../../../dictionary.js";

package/components/DataGrid/subcomponents/editors/TextEditor/index.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { s as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
+import { O as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
 function autoFocusAndSelect(input) {
   input?.focus();
   input?.select();

package/components/DataGrid/tests/components/CardDetails.test.d.ts

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

package/components/DataGrid/tests/components/CardHeader.test.d.ts

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

package/components/DataGrid/tests/components/CardRow.test.d.ts

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

package/components/DataGrid/tests/components/Cards.test.d.ts

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

package/components/DataGrid/tests/components/CheckboxCellAdapter.test.d.ts

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

package/components/DataGrid/tests/components/ColumnsConfigCards.test.d.ts

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

package/components/DataGrid/tests/components/IntersectCard.test.d.ts

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

package/components/DataGrid/tests/components/ViewMode.test.d.ts

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

package/components/DataGrid/tests/helpers/types.d.ts

@@ -25,6 +25,7 @@ export interface SeedProps {
     withEditors?: boolean;
     aligns?: Record<string, ColumnAlign>;
     names?: Record<string, string>;
+    visibleColumns?: string[];
 }
 export type GetColumnsProps = Omit<SeedProps, 'quantity'>;
 export type ColumnType = 'string' | 'number' | 'boolean' | 'date' | 'custom';

package/components/DataGrid/tests/helpers/useCardsViewConfig.d.ts

@@ -0,0 +1,24 @@
+import { CardsViewConfig } from '../../types';
+interface UseCardsViewConfigProps {
+    /**
+     * Si es true, retorna cardsViewConfig con columnsConfig básica
+     */
+    withBasicConfig?: boolean;
+    /**
+     * Si es true, retorna cardsViewConfig con customRender
+     */
+    withCustomRender?: boolean;
+    /**
+     * Si es true, retorna cardsViewConfig solo con enabled=true (para demostrar error)
+     */
+    withEnabledOnly?: boolean;
+    /**
+     * Si es true, retorna cardsViewConfig con columnKey inválido (para demostrar error)
+     */
+    withInvalidColumnKey?: boolean;
+}
+/**
+ * Hook helper que genera configuraciones de cardsViewConfig para testing
+ */
+export declare const useCardsViewConfigHelper: <TRow = any>(props?: UseCardsViewConfigProps) => CardsViewConfig<TRow> | undefined;
+export {};

package/components/DataGrid/tests/helpers/useCustomCardExample.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Hook helper que retorna un ejemplo de renderizado custom de cards
+ */
+export declare const useCustomCardExample: () => {
+    renderContent: (row: any) => import("react/jsx-runtime").JSX.Element;
+    minHeight: number;
+};

package/components/DataGrid/tests/hooks/useCardContent.test.d.ts

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

package/components/DataGrid/tests/hooks/useModalDetail.test.d.ts

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

package/components/DataGrid/tests/hooks/useModalSettingsCards.test.d.ts

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

package/components/DataGrid/tests/hooks/useProcessedColumns.test.d.ts

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

package/components/DataGrid/types.d.ts

@@ -5,7 +5,7 @@ import { MenuAction } from '../MenuActions/types';
 import { ActionsSlots, ColumnIconFormatterSlots, ColumnsConfigSlots, ControlNavigateSlots, DataGridSlots, RowsCountSlots, TableSlots, TextEditorSlots } from './slots/DataGridEnum';
 import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { DATAGRID_PREFIX_NAME } from './constants';
-import { IGridConfig } from './contexts/DataGridContext/types';
+import { IGridConfigExtended, ViewMode } from './contexts/DataGridContext/types';
 import { Sizes } from '@m4l/styles';
 import { PagerProps } from '../Pager';
 import { SettingsProps } from './subcomponents/HeaderActions/subcomponents/Settings/types';
@@ -61,10 +61,10 @@ export interface ColumnConfig {
     position?: number;
     frozen?: Maybe<boolean>;
 }
-type KeyUserColumns = keyof IGridConfig;
+type KeyUserColumns = keyof IGridConfigExtended;
 export interface ChangeUserColumn<T extends KeyUserColumns = KeyUserColumns> {
     reason: T;
-    userConfig: IGridConfig[T];
+    userConfig: IGridConfigExtended[T];
 }
 export type OnChangeUserColumns = (props: ChangeUserColumn) => void;
 export type SortApplied = {
@@ -139,7 +139,7 @@ export interface GridProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> exte
     /**
      * Propiedad opcional que recibe la configuración de las columnas
      */
-    defaultUserColumns?: IGridConfig;
+    defaultUserColumns?: IGridConfigExtended;
     /**
      * Propiedad que recibe la función que se ejecuta cuando se cambian
      * las configuraciones de las columnas.
@@ -150,6 +150,15 @@ export interface GridProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> exte
      * @default 'medium'
      */
     size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Modo por defecto de visualización
+     */
+    defaultViewMode?: ViewMode;
+    /**
+     * Configuración de la vista de "cards"
+     * Incluye habilitación, configuración de columnas y renderizado personalizado
+     */
+    cardsViewConfig?: CardsViewConfig<TRow>;
 }
 export declare const DATAGRID_TEST_ID = "m4ldatagrid";
 export declare const PREFIX_TEST_ATTRIBUTE = "data-testid";
@@ -170,6 +179,79 @@ export interface ActionsProps {
     leftActions?: React.ReactNode;
     rightActions?: React.ReactNode;
 }
-export type DataGridOwnerState<TRow, TSummaryRow, TKey extends RowKey = RowKey> = Pick<DataGridProps<TRow, TSummaryRow, TKey>, 'visibleCustomHeader'>;
+/**
+ * Props para el hook useModalDetail
+ */
+export interface UseModalDetailProps<TRow> {
+    row: TRow;
+    columns: readonly Column<TRow, any>[];
+    viewMode: ViewMode;
+    onRowsChange?: Maybe<(rows: TRow[], data: RowsChangeData<TRow, any>) => void>;
+}
+/**
+ * Configuración de una columna específica en vista "cards"
+ */
+export interface CardColumnConfig {
+    /**
+     * Key de la columna (debe coincidir con la key de la columna)
+     */
+    columnKey: string;
+    /**
+     * Si se debe mostrar el título/label de esta columna en la card (Solo si no existe una config previa)
+     */
+    showTitle: boolean;
+}
+/**
+ * Cards con columnsConfig
+ */
+export interface CardsViewConfigWithColumns {
+    columnsConfig: CardColumnConfig[];
+    customRender?: never;
+}
+/**
+ * Cards con customRender
+ */
+export interface CardsViewConfigWithCustomRender<TRow> {
+    columnsConfig?: never;
+    customRender: {
+        renderContent: (row: TRow) => React.ReactNode;
+        minHeight: number;
+    };
+}
+/**
+ * Configuración para la vista de "cards"
+ *
+ * IMPORTANTE:
+ * Es OBLIGATORIO configurar al menos 1 columna cuando customRender=undefined
+ * Se ignora completamente si customRender está definido
+ * @throws Error si customRender=undefined y array está vacío
+ */
+export type CardsViewConfig<TRow> = CardsViewConfigWithColumns | CardsViewConfigWithCustomRender<TRow>;
+/**
+ * Opciones para el procesamiento de columnas
+ */
+export interface ProcessedColumnsOptions {
+    /**
+     * Si es true, aplica el filtro de visibilidad configurado por el usuario.
+     * Si es false, muestra TODAS las columnas.
+     * @default true
+     */
+    applyVisibilityFilter?: boolean;
+}
+/**
+ * Props para el hook useCardContent
+ */
+export interface CardContentProps<TRow> {
+    row: TRow;
+    columns: readonly Column<TRow, any>[];
+    originalColumns: readonly Column<TRow, any>[];
+    onRowsChange?: Maybe<(rows: TRow[], data: RowsChangeData<TRow, any>) => void>;
+}
+export type DataGridOwnerState<TRow, TSummaryRow, TKey extends RowKey = RowKey> = Pick<DataGridProps<TRow, TSummaryRow, TKey>, 'visibleCustomHeader'> & {
+    viewMode?: ViewMode;
+    isActive?: boolean;
+    hasActions?: boolean;
+    hasCheckedRows?: boolean;
+};
 export type DataGridSlotsType = DataGridSlots | TextEditorSlots | ActionsSlots | RowsCountSlots | ColumnsConfigSlots | TableSlots | ControlNavigateSlots | ColumnIconFormatterSlots;
 export type DataGridStyles = OverridesStyleRules<DataGridSlotsType, typeof DATAGRID_PREFIX_NAME, Theme>;

package/components/DragResizeWindowRND/DragResizeWindowRND.js

@@ -44,7 +44,7 @@ const DragResizeWindowRND = forwardRef((props, ref) => {
     ...others
   } = props;
   const [currentState, setCurrentState] = useState(
-    () => getInitialSize(containerSize, defaultPosition, containerElement, allowHeightResizeContainer, allowWidthResizeContainer)
+    () => getInitialSize(containerSize, bounds, defaultPosition, containerElement, allowHeightResizeContainer, allowWidthResizeContainer)
   );
   const minConstraints = useMemo(() => [minWidth, minHeight], [minWidth, minHeight]);
   const stateRef = useRef({
@@ -56,7 +56,9 @@ const DragResizeWindowRND = forwardRef((props, ref) => {
     y: currentState.y,
     width: currentState.width,
     height: currentState.height,
-    minConstraints
+    minConstraints,
+    magnetizeRight: currentState.magnetizeRight,
+    magnetizeBottom: currentState.magnetizeBottom
   });
   if (containerSize && (stateRef.current.containerSize?.containerWidth !== containerSize.containerWidth || stateRef.current.containerSize?.containerHeight !== containerSize.containerHeight)) {
     stateRef.current.containerSize = { ...containerSize };
@@ -165,6 +167,7 @@ const DragResizeWindowRND = forwardRef((props, ref) => {
   if (!containerElement) {
     return null;
   }
+  const marginResize = `5px`;
   return /* @__PURE__ */ jsx(
     RndStyled,
     {
@@ -186,15 +189,16 @@ const DragResizeWindowRND = forwardRef((props, ref) => {
       className: classNameFinal,
       enableUserSelectHack: true,
       resizeHandleStyles: {
+        zIndex: 1,
         //Se debe mover lo handler de resize para queden dentro de la ventana, o genería un scroll innecesario.
-        bottom: { bottom: "0px" },
-        right: { right: "0px" },
-        top: { top: "0px" },
-        left: { left: "0px" },
-        bottomRight: { bottom: "0px", right: "0px", height: "10px", width: "10px" },
-        bottomLeft: { bottom: "0px", left: "0px", height: "10px", width: "10px" },
-        topRight: { top: "0px", right: "0px", height: "10px", width: "10px" },
-        topLeft: { top: "0px", left: "0px", height: "10px", width: "10px" }
+        bottom: { bottom: "0px", zIndex: 1, height: marginResize },
+        right: { right: "0px", zIndex: 1, width: marginResize },
+        top: { top: "0px", zIndex: 1, height: marginResize },
+        left: { left: "0px", zIndex: 1, width: marginResize },
+        bottomRight: { bottom: "0px", right: "0px", zIndex: 1 },
+        bottomLeft: { bottom: "0px", left: "0px", zIndex: 1 },
+        topRight: { top: "0px", right: "0px", zIndex: 1 },
+        topLeft: { top: "0px", left: "0px", zIndex: 1 }
       },
       resizeHandleClasses: {
         left: "resize-handle-left",

package/components/DragResizeWindowRND/helpers/expandingParentContainer.d.ts

@@ -9,4 +9,4 @@ import { CurrentState, DraggableWindowBounds } from '../types';
  *    se borran los flags que indican que hay que recuperar el ancho y alto, o el left y top.
  *    (shrinkLeftTopAt, overflowDimensionAt)
  */
-export declare const expandingParentContainer: (newState: CurrentState, containerDimension: number, dimension: "Width" | "Height", bounds?: DraggableWindowBounds) => void;
+export declare const expandingParentContainer: (newState: CurrentState, containerDimension: number, dimension: "Width" | "Height", value: number, bounds?: DraggableWindowBounds) => void;

package/components/DragResizeWindowRND/helpers/expandingParentContainer.js

@@ -1,29 +1,34 @@
-const expandingParentContainer = (newState, containerDimension, dimension, bounds) => {
+const expandingParentContainer = (newState, containerDimension, dimension, value, bounds) => {
   const lDimension = dimension === "Width" ? "width" : "height";
   const leftTop = dimension === "Width" ? "x" : "y";
   const shrinkLeftTopAt = dimension === "Width" ? "shrinkLeftAt" : "shrinkTopAt";
   const overflowDimensionAt = dimension === "Width" ? "overflowWidthAt" : "overflowHeightAt";
-  const boundsLefTop = dimension === "Width" ? 0 : 0;
-  const initialPosition = dimension === "Width" ? 0 : 0;
+  const boundsLefTop = dimension === "Width" ? bounds?.left || 0 : bounds?.top || 0;
+  const initialPosition = dimension === "Width" ? bounds?.right || 0 : bounds?.bottom || 0;
   const maxDimensionElement = containerDimension - boundsLefTop + initialPosition;
-  const valOverflowDimensionAt = newState[overflowDimensionAt];
-  if (valOverflowDimensionAt) {
-    if (valOverflowDimensionAt > maxDimensionElement) {
-      newState[lDimension] = maxDimensionElement;
-    } else {
-      newState[lDimension] = valOverflowDimensionAt;
-      newState[overflowDimensionAt] = void 0;
+  const magnetize = dimension === "Width" ? newState.magnetizeRight : newState.magnetizeBottom;
+  if (!magnetize) {
+    const valOverflowDimensionAt = newState[overflowDimensionAt];
+    if (valOverflowDimensionAt) {
+      if (valOverflowDimensionAt > maxDimensionElement) {
+        newState[lDimension] = maxDimensionElement;
+      } else {
+        newState[lDimension] = valOverflowDimensionAt;
+        newState[overflowDimensionAt] = void 0;
+      }
     }
-  }
-  const valShrinkLeftTopAt = newState[shrinkLeftTopAt];
-  if (valShrinkLeftTopAt && !newState[overflowDimensionAt]) {
-    const dimensionAvailable = containerDimension - boundsLefTop - newState[lDimension] + initialPosition;
-    if (valShrinkLeftTopAt <= dimensionAvailable) {
-      newState[leftTop] = valShrinkLeftTopAt;
-      newState[shrinkLeftTopAt] = void 0;
-    } else {
-      newState[leftTop] = dimensionAvailable;
+    const valShrinkLeftTopAt = newState[shrinkLeftTopAt];
+    if (valShrinkLeftTopAt && !newState[overflowDimensionAt]) {
+      const dimensionAvailable = containerDimension - boundsLefTop - newState[lDimension] + initialPosition;
+      if (valShrinkLeftTopAt <= dimensionAvailable) {
+        newState[leftTop] = valShrinkLeftTopAt;
+        newState[shrinkLeftTopAt] = void 0;
+      } else {
+        newState[leftTop] = dimensionAvailable;
+      }
     }
+  } else {
+    newState[leftTop] = newState[leftTop] + value;
   }
 };
 export {

package/components/DragResizeWindowRND/helpers/getInitialSize.d.ts

@@ -1,5 +1,5 @@
 import { ContainerSize } from '../../../utils/types';
-import { CurrentState, DefaultPosition } from '../types';
+import { CurrentState, DraggableWindowBounds, RNDDefaultPosition } from '../types';
 /**
  * Calculates the initial size and position of an element based on the provided container size
  * and default position values.
@@ -9,7 +9,7 @@ import { CurrentState, DefaultPosition } from '../types';
  * are provided instead of `top` and `left`, the function calculates the starting position based
  * on the container dimensions, ensuring that the element is correctly positioned.
  * @param {ContainerSize | undefined} containerSize - Object containing `containerHeight` and `containerWidth`. Defaults to 200 for both if not provided.
- * @param {DefaultPosition} defaultPosition - Object defining the default vertical and horizontal positions (`top`, `bottom`, `height`, `left`, `right`, `width`).
+ * @param {RNDDefaultPosition} defaultPosition - Object defining the default vertical and horizontal positions (`top`, `bottom`, `height`, `left`, `right`, `width`).
  * @returns {CurrentState} - The initial size and position of the element with `top`, `left`, `width`, and `height` properties.
  */
-export declare const getInitialSize: (containerSize: ContainerSize | undefined, defaultPosition: DefaultPosition, containerElement: HTMLElement | undefined, allowHeightResizeContainer: boolean, allowWidthResizeContainer: boolean) => CurrentState;
+export declare const getInitialSize: (containerSize: ContainerSize | undefined, bounds: DraggableWindowBounds | undefined, defaultPosition: RNDDefaultPosition, containerElement: HTMLElement | undefined, allowHeightResizeContainer: boolean, allowWidthResizeContainer: boolean) => CurrentState;

package/components/DragResizeWindowRND/helpers/getInitialSize.js

@@ -1,11 +1,18 @@
-const getInitialSize = (containerSize, defaultPosition, containerElement, allowHeightResizeContainer, allowWidthResizeContainer) => {
+const getInitialSize = (containerSize, bounds, defaultPosition, containerElement, allowHeightResizeContainer, allowWidthResizeContainer) => {
   let top;
   let bottom;
   let height;
   let left;
   let right;
   let width;
-  const LIMIT_PX = 20;
+  let magnetizeBottom = false;
+  let magnetizeRight = false;
+  if ("magnetize" in defaultPosition.vertical) {
+    magnetizeBottom = defaultPosition.vertical.magnetize || false;
+  }
+  if ("magnetize" in defaultPosition.horizontal) {
+    magnetizeRight = defaultPosition.horizontal.magnetize || false;
+  }
   const containerHeight = containerSize?.containerHeight || 200;
   const containerWidth = containerSize?.containerWidth || 200;
   const scrollTop = containerElement?.scrollTop || 0;
@@ -49,25 +56,21 @@ const getInitialSize = (containerSize, defaultPosition, containerElement, allowH
     y: Math.round(top ?? (bottom !== void 0 ? containerHeight + bottom - (height || 0) : 0)),
     height: Math.round(height ?? containerHeight - (top || 0) - (bottom || 0)),
     x: Math.round(left ?? (right !== void 0 ? containerWidth + right - (width || 0) : 0)),
-    width: Math.round(width ?? containerWidth - (left || 0) - (right || 0))
+    width: Math.round(width ?? containerWidth - (left || 0) - (right || 0)),
+    magnetizeBottom,
+    magnetizeRight
   };
   if (!allowHeightResizeContainer) {
-    const boundTop = 0 + LIMIT_PX;
-    const boundBottom = Math.max(containerHeight - LIMIT_PX - (height || 0), LIMIT_PX);
+    const boundTop = bounds?.top || 0;
+    const boundBottom = bounds?.bottom || 0;
     initialSize.y = Math.max(initialSize.y, boundTop);
-    initialSize.height = Math.min(initialSize.height, containerHeight - LIMIT_PX);
-    if (initialSize.y > boundBottom) {
-      initialSize.y = boundBottom;
-    }
+    initialSize.height = Math.min(initialSize.height, containerHeight - boundTop + boundBottom);
   }
   if (!allowWidthResizeContainer) {
-    const boundLeft = 0 + LIMIT_PX;
-    const boundRight = Math.max(containerWidth - LIMIT_PX - (width || 0), LIMIT_PX);
+    const boundLeft = bounds?.left || 0;
+    const boundRight = bounds?.right || 0;
     initialSize.x = Math.max(initialSize.x, boundLeft);
-    initialSize.width = Math.min(initialSize.width, containerWidth - LIMIT_PX);
-    if (initialSize.x > boundRight) {
-      initialSize.x = boundRight;
-    }
+    initialSize.width = Math.min(initialSize.width, containerWidth - boundLeft + boundRight);
   }
   return initialSize;
 };

package/components/DragResizeWindowRND/helpers/shrinkingParentContainer.d.ts

@@ -3,4 +3,4 @@ import { CurrentState, DraggableWindowBounds } from '../types';
  * "shrinkingParentContainer": Encargada de manejar la contracción de la ventana padre
  * 1. Si el ancho o alto de la ventana cuando se va compactando toca
  */
-export declare const shrinkingParentContainer: (newState: CurrentState, cState: CurrentState, containerDimension: number, divRoot: HTMLElement, dimension: "Width" | "Height", allowResizeContainer: boolean | undefined, minWindowWidth: number, minWindowHeight: number, bounds?: DraggableWindowBounds) => void;
+export declare const shrinkingParentContainer: (newState: CurrentState, cState: CurrentState, containerDimension: number, divRoot: HTMLElement, dimension: "Width" | "Height", allowResizeContainer: boolean | undefined, minWindowWidth: number, minWindowHeight: number, value: number, bounds?: DraggableWindowBounds) => void;

package/components/DragResizeWindowRND/helpers/shrinkingParentContainer.js

@@ -1,21 +1,26 @@
-const shrinkingParentContainer = (newState, cState, containerDimension, divRoot, dimension, allowResizeContainer = false, minWindowWidth, minWindowHeight, bounds) => {
+const shrinkingParentContainer = (newState, cState, containerDimension, divRoot, dimension, allowResizeContainer = false, minWindowWidth, minWindowHeight, value, bounds) => {
   const lDimension = dimension === "Width" ? "width" : "height";
-  const xOrY = dimension === "Width" ? "x" : "y";
+  const leftTop = dimension === "Width" ? "x" : "y";
   const shrinkLeftTopAt = dimension === "Width" ? "shrinkLeftAt" : "shrinkTopAt";
   const overflowDimensionAt = dimension === "Width" ? "overflowWidthAt" : "overflowHeightAt";
   const boundsLefTop = dimension === "Width" ? bounds?.left || 0 : bounds?.top || 0;
   const boundsRightBottom = dimension === "Width" ? bounds?.right || 0 : bounds?.bottom || 0;
   const minWindowDimension = dimension === "Width" ? minWindowWidth : minWindowHeight;
   const minDimension = containerDimension - boundsLefTop + boundsRightBottom > minWindowDimension ? containerDimension - boundsLefTop + boundsRightBottom : minWindowDimension;
-  let maxDimensionElement = containerDimension - cState[xOrY] + boundsRightBottom;
+  const magnetize = dimension === "Width" ? newState.magnetizeRight : newState.magnetizeBottom;
+  let maxDimensionElement = containerDimension - cState[leftTop] + boundsRightBottom;
   if (divRoot[`client${dimension}`] > maxDimensionElement && !allowResizeContainer) {
     const shrunkenPixels = divRoot[`client${dimension}`] - maxDimensionElement;
-    if (shrunkenPixels < cState[xOrY] - boundsLefTop) {
-      newState[xOrY] = newState[xOrY] - shrunkenPixels;
-      newState[shrinkLeftTopAt] = newState[shrinkLeftTopAt] || cState[xOrY];
-    } else if (shrunkenPixels > cState[xOrY] - boundsLefTop) {
-      newState[xOrY] = boundsLefTop;
-      newState[shrinkLeftTopAt] = newState[shrinkLeftTopAt] || cState[xOrY];
+    if (shrunkenPixels < cState[leftTop] - boundsLefTop) {
+      if (!magnetize) {
+        newState[leftTop] = newState[leftTop] - shrunkenPixels;
+        newState[shrinkLeftTopAt] = newState[shrinkLeftTopAt] || cState[leftTop];
+      } else {
+        newState[leftTop] = newState[leftTop] + value;
+      }
+    } else if (shrunkenPixels > cState[leftTop] - boundsLefTop) {
+      newState[leftTop] = boundsLefTop;
+      newState[shrinkLeftTopAt] = newState[shrinkLeftTopAt] || cState[leftTop];
       maxDimensionElement = containerDimension - boundsLefTop + boundsRightBottom;
       if (divRoot[`client${dimension}`] > maxDimensionElement) {
         newState[lDimension] = maxDimensionElement;
@@ -26,6 +31,9 @@ const shrinkingParentContainer = (newState, cState, containerDimension, divRoot,
       }
     }
   } else {
+    if (magnetize) {
+      newState[leftTop] = newState[leftTop] + value;
+    }
     return;
   }
 };

package/components/DragResizeWindowRND/hooks/useRNDDimensionEffects.js

@@ -47,7 +47,9 @@ const useRNDDimensionEffects = (props) => {
           expandingParentContainer(
             newState,
             containerSizeValue,
-            dimension
+            dimension,
+            containerSizeValue - previousContainerSizeValue,
+            bounds
           );
         } else if (containerSizeValue < previousContainerSizeValue) {
           shrinkingParentContainer(
@@ -59,6 +61,7 @@ const useRNDDimensionEffects = (props) => {
             allowResizeContainer,
             minWindowWidth,
             minWindowHeight,
+            containerSizeValue - previousContainerSizeValue,
             bounds
           );
         }

package/components/DragResizeWindowRND/index.d.ts

@@ -1,3 +1,4 @@
 export { DragResizeWindowRND } from './DragResizeWindowRND';
 export { dragResizeWindowRNDClasses } from './classes/index';
 export { WINDOW_SIZES } from './constants';
+export type { RNDDefaultPosition } from './types';

package/components/DragResizeWindowRND/types.d.ts

@@ -78,6 +78,14 @@ export interface CurrentState extends Position {
      * "minConstraints" Indica los límites mínimos de la ventana
      */
     minConstraints?: [number, number];
+    /**
+     * "magnetizeBottom" Indica si se debe magnetizar la ventana a la top ante un resize, conserve el mismo top
+     */
+    magnetizeBottom?: boolean;
+    /**
+     * "magnetizeRight" Indica si se debe magnetizar la ventana a la derecha ante un resize, conserve el mismo rigth
+     */
+    magnetizeRight?: boolean;
 }
 /**
  * Representa una posición parcial, solo incluye las propiedades left y top.
@@ -122,7 +130,7 @@ export type DraggableWindowRefProps = {
 /**
  * Tipo que representa las posiciones predeterminadas (vertical y horizontal) de la ventana.
  */
-export interface DefaultPosition {
+export interface RNDDefaultPosition {
     vertical: {
         top: number;
         bottom: number;
@@ -134,6 +142,7 @@ export interface DefaultPosition {
     } | {
         bottom: number;
         height: number;
+        magnetize?: boolean;
     } | {
         percent: number;
     };
@@ -146,6 +155,7 @@ export interface DefaultPosition {
     } | {
         right: number;
         width: number;
+        magnetize?: boolean;
     } | {
         percent: number;
     } | {
@@ -177,7 +187,7 @@ export interface DragResizeWindowPropsRND extends Partial<Omit<RndProps, 'handle
      * defaultPosition permite definir la posición inicial de la ventana
      * TODO: Debe también recibir anchorEl y anchorPosition y calcular la posición en base a este
      */
-    defaultPosition?: DefaultPosition;
+    defaultPosition?: RNDDefaultPosition;
     /**
      * "bounds" permite definir los limites de movimiento de la ventana
      */

package/components/DynamicFilter/DynamicFilter.js

@@ -4,11 +4,12 @@ import { forwardRef } from "react";
 import { D as DynamicFilterProvider } from "./store/DynamicFilterContext.js";
 import { D as DynamicFilterBase } from "./subcomponents/DynamicFilterBase/DynamicFilterBase.js";
 const DynamicFilter = forwardRef((props, ref) => {
+  const { className, ...others } = props;
   const hasPresentFlags = useFlagsPresent([CommonFlags.FLAG_DICTIONARY_LOADED]);
   if (!hasPresentFlags) {
     return null;
   }
-  return /* @__PURE__ */ jsx(DynamicFilterProvider, { ...props, ref, children: /* @__PURE__ */ jsx(DynamicFilterBase, {}) });
+  return /* @__PURE__ */ jsx(DynamicFilterProvider, { ...others, ref, children: /* @__PURE__ */ jsx(DynamicFilterBase, { className }) });
 });
 export {
   DynamicFilter as D

package/components/DynamicFilter/helpers/formatToInitialFilters.js

@@ -30,9 +30,9 @@ function formatToInitialFilters(appliedFilters) {
     return {
       name: af.field.name,
       operator: af.operator,
-      ...operand1 ? { operand1 } : {},
-      ...operand2 ? { operand2 } : {},
-      ...operandArray ? { operandArray } : {}
+      ...operand1 !== void 0 ? { operand1 } : {},
+      ...operand2 !== void 0 ? { operand2 } : {},
+      ...operandArray !== void 0 ? { operandArray } : {}
     };
   });
 }

package/components/DynamicFilter/helpers/frontEndHelpers.d.ts

@@ -1,10 +1,10 @@
-import { RawFilterFieldApply } from '../types';
+import { FilterField, RawFilterFieldApply } from '../types';
 type ObjectData = Record<any, any>;
 /**
  * Función que verifica si el objectData cumple con todos los filtros de DynamicFilter
  * Para usar en el frontEnd, y no atraves de la API
  */
-export declare const getIsIfInDynamicFilter: (objectData: ObjectData, groupedFields: Record<string, RawFilterFieldApply[]>) => boolean;
+export declare const getIsIfInDynamicFilter: (filterFields: Array<FilterField>, objectData: ObjectData, groupedFields: Record<string, RawFilterFieldApply[]>) => boolean;
 /**
  * getFilterGroupFieldsByName agrupa los campos por nombre, para procesarlos en una OR
  */