@m4l/components 9.2.45 → 9.2.47

package/components/DragResizeWindowRND/DragResizeWindowRND.js

@@ -44,7 +44,7 @@ const DragResizeWindowRND = forwardRef((props, ref) => {
     ...others
   } = props;
   const [currentState, setCurrentState] = useState(
-    () => getInitialSize(containerSize, defaultPosition, containerElement)
+    () => getInitialSize(containerSize, defaultPosition, containerElement, allowHeightResizeContainer, allowWidthResizeContainer)
   );
   const minConstraints = useMemo(() => [minWidth, minHeight], [minWidth, minHeight]);
   const stateRef = useRef({

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

@@ -12,4 +12,4 @@ import { CurrentState, DefaultPosition } from '../types';
  * @param {DefaultPosition} 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) => CurrentState;
+export declare const getInitialSize: (containerSize: ContainerSize | undefined, defaultPosition: DefaultPosition, containerElement: HTMLElement | undefined, allowHeightResizeContainer: boolean, allowWidthResizeContainer: boolean) => CurrentState;

package/components/DragResizeWindowRND/helpers/getInitialSize.js

@@ -1,10 +1,11 @@
-const getInitialSize = (containerSize, defaultPosition, containerElement) => {
+const getInitialSize = (containerSize, defaultPosition, containerElement, allowHeightResizeContainer, allowWidthResizeContainer) => {
   let top;
   let bottom;
   let height;
   let left;
   let right;
   let width;
+  const LIMIT_PX = 20;
   const containerHeight = containerSize?.containerHeight || 200;
   const containerWidth = containerSize?.containerWidth || 200;
   const scrollTop = containerElement?.scrollTop || 0;
@@ -26,13 +27,13 @@ const getInitialSize = (containerSize, defaultPosition, containerElement) => {
   }
   if ("width" in defaultPosition.horizontal) {
     width = defaultPosition.horizontal.width;
-    if (!("left" in defaultPosition.horizontal)) {
+    if (!("left" in defaultPosition.horizontal) && !("right" in defaultPosition.horizontal)) {
       left = scrollLeft + (containerWidth - width) / 2;
     }
   }
   if ("height" in defaultPosition.vertical) {
     height = defaultPosition.vertical.height;
-    if (!("top" in defaultPosition.vertical)) {
+    if (!("top" in defaultPosition.vertical) && !("bottom" in defaultPosition.vertical)) {
       top = scrollTop + (containerHeight - height) / 2;
     }
   }
@@ -44,12 +45,31 @@ const getInitialSize = (containerSize, defaultPosition, containerElement) => {
     width = containerWidth * defaultPosition.horizontal.percent;
     left = (containerWidth - width) / 2;
   }
-  return {
-    y: Math.round(top ?? (bottom ? containerHeight - bottom - (height || 0) : 0)),
+  const initialSize = {
+    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 ? containerWidth - right - (width || 0) : 0)),
+    x: Math.round(left ?? (right !== void 0 ? containerWidth + right - (width || 0) : 0)),
     width: Math.round(width ?? containerWidth - (left || 0) - (right || 0))
   };
+  if (!allowHeightResizeContainer) {
+    const boundTop = 0 + LIMIT_PX;
+    const boundBottom = Math.max(containerHeight - LIMIT_PX - (height || 0), LIMIT_PX);
+    initialSize.y = Math.max(initialSize.y, boundTop);
+    initialSize.height = Math.min(initialSize.height, containerHeight - LIMIT_PX);
+    if (initialSize.y > boundBottom) {
+      initialSize.y = boundBottom;
+    }
+  }
+  if (!allowWidthResizeContainer) {
+    const boundLeft = 0 + LIMIT_PX;
+    const boundRight = Math.max(containerWidth - LIMIT_PX - (width || 0), LIMIT_PX);
+    initialSize.x = Math.max(initialSize.x, boundLeft);
+    initialSize.width = Math.min(initialSize.width, containerWidth - LIMIT_PX);
+    if (initialSize.x > boundRight) {
+      initialSize.x = boundRight;
+    }
+  }
+  return initialSize;
 };
 export {
   getInitialSize as g

package/components/DragResizeWindowRND/hooks/useRNDDragOptions.js

@@ -18,6 +18,7 @@ const useDragOptions = (props) => {
       if (!containerElement) {
         return;
       }
+      e.stopPropagation();
       if (onDragStart) {
         if (onDragStart(e, draggableData) === false) {
           return false;
@@ -53,6 +54,7 @@ const useDragOptions = (props) => {
   );
   const localOnDrag = useCallback((e, draggableData) => {
     const { x, y, deltaX, deltaY } = draggableData;
+    e.stopPropagation();
     if (!stateRef.current.dragging) {
       return;
     }

package/components/DynamicFilter/constants.d.ts

@@ -1,7 +1,6 @@
 import { BooleanOperator, DateTimeOperator, FilterField, NumberOperator, SelectOperator, StringOperator } from './types';
 export declare const DYNAMIC_FILTER_KEY_COMPONENT = "M4LDynamicFilter";
 export declare const DYNAMIC_FILTER_SOTORE_ID = "M4LDynamicFilterStore";
-export declare const DYNAMIC_FILTER_POPOVER_CONTAINER_ID = "M4LDynamicFilterPopoverContainer";
 export declare const ALL_FIELD: FilterField;
 export declare const STRING_OPERATORS: Array<StringOperator>;
 export declare const NUMBER_OPERATORS: Array<NumberOperator>;

package/components/DynamicFilter/constants.js

@@ -1,6 +1,5 @@
 const DYNAMIC_FILTER_KEY_COMPONENT = "M4LDynamicFilter";
 const DYNAMIC_FILTER_SOTORE_ID = "M4LDynamicFilterStore";
-const DYNAMIC_FILTER_POPOVER_CONTAINER_ID = "M4LDynamicFilterPopoverContainer";
 const ALL_FIELD = {
   name: "all",
   dictionaryId: "dynamic_filter.all_fields",
@@ -30,6 +29,5 @@ export {
   SELECT_OPERATORS as S,
   DYNAMIC_FILTER_SOTORE_ID as a,
   DATE_TIME_OPERATORS as b,
-  STRING_OPERATORS as c,
-  DYNAMIC_FILTER_POPOVER_CONTAINER_ID as d
+  STRING_OPERATORS as c
 };

package/components/DynamicFilter/subcomponents/PopoverMenuFields/PopoverMenuFields.js

@@ -1,28 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import { M as MenuItem } from "../../../mui_extended/MenuItem/MenuItem.js";
 import { u as usePopoverMenuFields } from "./usePopoverMenuFields.js";
-import { useRef, useEffect } from "react";
-import { d as DYNAMIC_FILTER_POPOVER_CONTAINER_ID } from "../../constants.js";
 import { u as useDynamicFilterBase } from "../DynamicFilterBase/useDynamicFilterBase.js";
+import { u as usePopoverContainer } from "../../../../hooks/usePopoverContainer/usePopoverContainer.js";
 import { l as PopoverMenuStyled } from "../../slots/dynamicFilterSlots.js";
 function PopoverMenuFields(props) {
   const { fields, selectFieldIndex } = props;
   const { elementRef, handleOpenPopUpClickItem, handleClosePopover, getItemLabel, isOpenPopoverMenuFields } = usePopoverMenuFields();
   const anchorEl = elementRef?.current;
-  const popoverContainerRef = useRef(null);
-  useEffect(() => {
-    if (!popoverContainerRef.current) {
-      const container = document.createElement("div");
-      container.id = DYNAMIC_FILTER_POPOVER_CONTAINER_ID;
-      document.body.appendChild(container);
-      popoverContainerRef.current = container;
-    }
-    return () => {
-      if (popoverContainerRef.current) {
-        document.body.removeChild(popoverContainerRef.current);
-      }
-    };
-  }, []);
+  const popoverContainerRef = usePopoverContainer();
   const { size } = useDynamicFilterBase();
   return /* @__PURE__ */ jsx(
     PopoverMenuStyled,

package/components/DynamicSort/constants.d.ts

@@ -1,7 +1,6 @@
 import { SortOperator } from './types';
 export declare const DYNAMIC_SORT_KEY_COMPONENT = "M4LDynamicSort";
 export declare const DYNAMIC_SORT_STORE_ID = "M4LDynamicSortStore";
-export declare const DYNAMIC_SORT_POPOVER_CONTAINER_ID = "M4LDynamicSortPopoverContainer";
 export declare const ASSETS_URL = "frontend/components/Dynamic_sort/assets/icons";
 export declare const ASSETS: {
     readonly refresh: "restart.svg";

package/components/DynamicSort/constants.js

@@ -1,6 +1,5 @@
 const DYNAMIC_SORT_KEY_COMPONENT = "M4LDynamicSort";
 const DYNAMIC_SORT_STORE_ID = "M4LDynamicSortStore";
-const DYNAMIC_SORT_POPOVER_CONTAINER_ID = "M4LDynamicSortPopoverContainer";
 const ASSETS_URL = "frontend/components/Dynamic_sort/assets/icons";
 const ASSETS = {
   refresh: "restart.svg",
@@ -14,6 +13,5 @@ export {
   DYNAMIC_SORT_KEY_COMPONENT as D,
   OPERATORS as O,
   DYNAMIC_SORT_STORE_ID as a,
-  ASSETS as b,
-  DYNAMIC_SORT_POPOVER_CONTAINER_ID as c
+  ASSETS as b
 };

package/components/DynamicSort/subcomponents/PopoverMenuFields/PopoverMenuFields.js

@@ -1,30 +1,16 @@
 import { jsx } from "react/jsx-runtime";
 import { u as useDynamicSortBase } from "../DynamicSortBase/useDynamicSortBase.js";
 import { u as usePopoverMenuFields } from "./usePopoverMenuFields.js";
-import { useRef, useEffect } from "react";
-import { c as DYNAMIC_SORT_POPOVER_CONTAINER_ID } from "../../constants.js";
 import { M as MenuItem } from "../../../mui_extended/MenuItem/MenuItem.js";
 import { I as Icon } from "../../../Icon/Icon.js";
 import { P as PopoverMenuStyled } from "../../slots/DynamicSortSlots.js";
+import { u as usePopoverContainer } from "../../../../hooks/usePopoverContainer/usePopoverContainer.js";
 function PopoverMenuFields(props) {
   const { fields, selectFieldIndex } = props;
   const { elementRef, handleOpenPopUpClickItem, handleClosePopover, getItemLabel, isOpenPopoverMenuFields } = usePopoverMenuFields();
   const { size } = useDynamicSortBase();
   const anchorEl = elementRef?.current;
-  const popoverContainerRef = useRef(null);
-  useEffect(() => {
-    if (!popoverContainerRef.current) {
-      const container = document.createElement("div");
-      container.id = DYNAMIC_SORT_POPOVER_CONTAINER_ID;
-      document.body.appendChild(container);
-      popoverContainerRef.current = container;
-    }
-    return () => {
-      if (popoverContainerRef.current) {
-        document.body.removeChild(popoverContainerRef.current);
-      }
-    };
-  }, []);
+  const popoverContainerRef = usePopoverContainer();
   return /* @__PURE__ */ jsx(
     PopoverMenuStyled,
     {

package/components/ModalDialog/ModalDialog.js

@@ -3,26 +3,28 @@ import { u as useModal } from "../../hooks/useModal/index.js";
 import { useIsMobile } from "@m4l/graphics";
 import { u as useStateRef } from "../../hooks/useStateRef/index.js";
 import { Paper } from "@mui/material";
+import { u as useSizeContainer } from "../../hooks/useSizeContainer/index.js";
 import { D as DialogRootStyled, P as PaperModalDialogStyled } from "./slots/ModalDialogSlots.js";
 import { D as DragResizeWindowRND } from "../DragResizeWindowRND/DragResizeWindowRND.js";
 const DraggablePaperComponent = (ref, dialogProperties) => {
   return (props) => {
-    const { initialWidth, initialHeight, maxWidth, maxHeight } = dialogProperties;
-    if (!ref) {
-      return props.children;
+    const containerSize = useSizeContainer(ref);
+    const { initialWidth, initialHeight = 100, maxWidth, maxHeight } = dialogProperties;
+    if (!ref || !containerSize) {
+      return null;
     }
-    const topPosition = Math.max(0, window.innerHeight / 2 - (initialHeight ?? 100) / 2);
     const leftPosition = Math.max(0, window.innerWidth / 2 - (initialWidth ?? 100) / 2);
     return /* @__PURE__ */ jsx(
       DragResizeWindowRND,
       {
         containerElement: ref,
+        containerSize,
         minWindowWidth: maxWidth,
         minWindowHeight: maxHeight,
         bounds: { left: 0, top: 0, right: 0, bottom: 0 },
         resizeHandles: ["se", "nw", "sw", "ne", "n", "e", "s", "w"],
         defaultPosition: {
-          vertical: { top: topPosition, height: initialHeight ?? 100 },
+          vertical: { height: initialHeight },
           horizontal: { left: leftPosition, width: initialWidth ?? 100 }
         },
         children: /* @__PURE__ */ jsx(PaperModalDialogStyled, { ...props, children: props.children })

package/hooks/index.d.ts

@@ -10,3 +10,4 @@ export { useFormReadyForUpdate } from './useFormReadyForUpdate';
 export { useStateRef } from './useStateRef';
 export * from './useDynamicFilterAndSort';
 export * from './useDataGridPersistence';
+export * from './usePopoverContainer';

package/hooks/usePopoverContainer/constants.d.ts

@@ -0,0 +1 @@
+export declare const POPOVER_CONTAINER_ID = "M4LPopoverContainer";

package/hooks/usePopoverContainer/constants.js

@@ -0,0 +1,4 @@
+const POPOVER_CONTAINER_ID = "M4LPopoverContainer";
+export {
+  POPOVER_CONTAINER_ID as P
+};

package/hooks/usePopoverContainer/index.d.ts

@@ -0,0 +1,2 @@
+export { usePopoverContainer } from './usePopoverContainer';
+export * from './usePopoverContainer';

package/hooks/usePopoverContainer/index.js

@@ -0,0 +1 @@
+

package/hooks/usePopoverContainer/usePopoverContainer.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Hook para manejar un contenedor global para popovers. cuando se requiere que siga teniendo foco el anchorElement
+ * Este hook garantiza que solo exista un contenedor con el ID especificado,
+ * incluso si el hook se usa en múltiples componentes.
+ * @param containerId ID único para el contenedor
+ * @returns Referencia al contenedor del popover
+ */
+export declare function usePopoverContainer(containerId?: string): import('react').MutableRefObject<HTMLDivElement | null>;

package/hooks/usePopoverContainer/usePopoverContainer.js

@@ -0,0 +1,20 @@
+import { useRef, useEffect } from "react";
+import { P as POPOVER_CONTAINER_ID } from "./constants.js";
+function usePopoverContainer(containerId = POPOVER_CONTAINER_ID) {
+  const containerRef = useRef(null);
+  useEffect(() => {
+    let container = document.getElementById(containerId);
+    if (!container) {
+      container = document.createElement("div");
+      container.id = containerId;
+      document.body.appendChild(container);
+    }
+    containerRef.current = container;
+    return () => {
+    };
+  }, [containerId]);
+  return containerRef;
+}
+export {
+  usePopoverContainer as u
+};

package/hooks/useSizeWindow/index.d.ts

@@ -2,5 +2,6 @@
  * Hook that returns the height of the navigator window
  */
 export declare const useSizeWindow: () => {
-    windowHeight: number;
+    height: number;
+    width: number;
 };

package/index.js

@@ -202,6 +202,7 @@ import { a as a15 } from "./hooks/useSvgColor/constants.js";
 import { u as u27 } from "./hooks/useSvgColor/useSvgColor.js";
 import { u as u28 } from "./hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js";
 import { u as u29 } from "./hooks/useDataGridPersistence/useDataGridPersistence.js";
+import { u as u30 } from "./hooks/usePopoverContainer/usePopoverContainer.js";
 import { c as c4 } from "./utils/capitalizeFirstLetter.js";
 import { i as i2 } from "./utils/isValidDate.js";
 import { g as g29 } from "./utils/getComponentUtilityClass.js";
@@ -455,6 +456,7 @@ export {
   u13 as useFormatPeriod,
   u23 as useInterval,
   u20 as useModal,
+  u30 as usePopoverContainer,
   u14 as usePopupsStore,
   u as useSetWindowsTitle,
   u26 as useStateRef,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.45",
+  "version": "9.2.47",
   "license": "UNLICENSED",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0  --no-warn-ignored"

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

@@ -5,4 +5,6 @@ type Story = StoryObj<typeof DragResizeWindowRND>;
 export declare const Default: Story;
 export declare const AllowHeightResizeContainer: Story;
 export declare const Hidden: Story;
+export declare const WithTopLeftNegative: Story;
+export declare const WithBottomRightPositive: Story;
 export default meta;