@m4l/components 7.2.0 → 7.2.2

package/components/DataGrid/utils/getDataGridRowsFromSet.js

@@ -0,0 +1,21 @@
+const getDataGridRowsFromSet = (set, rows, rowKeyGetter) => {
+  const rowsFinded = [];
+  if (set && set.size > 0) {
+    const iterator = set.entries();
+    for (let i = 0; i < set.size; i++) {
+      const entry = iterator.next().value;
+      if (!entry) {
+        continue;
+      }
+      const key = entry[1];
+      const row = rows.find((frow) => rowKeyGetter(frow) === key);
+      if (row) {
+        rowsFinded.push(row);
+      }
+    }
+  }
+  return rowsFinded;
+};
+export {
+  getDataGridRowsFromSet as g
+};

package/components/DragResizeWindow/DragResizeWindow.js

@@ -0,0 +1,167 @@
+import { jsx } from "react/jsx-runtime";
+import React, { forwardRef, useState, useRef, useCallback, useMemo } from "react";
+import { DraggableCore } from "react-draggable";
+import clsx from "clsx";
+import { d as dragResizeWindowClasses } from "./classes/index.js";
+import { D as DEFAULT_TRANSFORM_SCALE } from "./constants.js";
+import { s as setTransform } from "./utils.js";
+import { useForkRef } from "@mui/material";
+import { g as getInitialSize } from "./helpers/index.js";
+import { u as useDragOptions } from "./hooks/useDragOptions.js";
+import { u as useResizeOptions } from "./hooks/useResizeOptions.js";
+import { u as useDimensionEffects } from "./hooks/useDimensionEffects.js";
+import { R as RootStyled } from "./slots/DragResizeWindowSlots.js";
+import { R as Resizable } from "../extended/react-resizable/Resizable/Resizable.js";
+const DragResizeWindow = forwardRef((props, ref) => {
+  const {
+    //Comunes
+    style,
+    className,
+    children,
+    defaultPosition = { vertical: { top: 0, height: 100 }, horizontal: { left: 0, width: 100 } },
+    containerElement,
+    containerSize,
+    transformScale = DEFAULT_TRANSFORM_SCALE,
+    bounds = { left: 5, top: 5, right: -5, bottom: -5 },
+    minWindowWidth = 200,
+    minWindowHeight = 100,
+    //Draggable
+    draggableHandle = `.${dragResizeWindowClasses.draggableHandle}`,
+    draggableCancel = `.${dragResizeWindowClasses.draggableCancel}`,
+    draggable = true,
+    onDragStart,
+    onDrag,
+    onDragStop,
+    onMouseDown,
+    //ResizeAble
+    resizeable = true,
+    resizeHandles = ["se", "nw"],
+    resizeHandle,
+    onResizeStart,
+    onResize,
+    onResizeStop,
+    hidden,
+    //Otras
+    ...others
+  } = props;
+  const [currentState, setCurrentState] = useState(
+    getInitialSize(containerSize, defaultPosition)
+  );
+  const stateRef = useRef({
+    bounds,
+    data: void 0,
+    dragging: void 0,
+    containerSize: containerSize ? { ...containerSize } : void 0,
+    left: currentState.left,
+    top: currentState.top,
+    width: currentState.width,
+    height: currentState.height
+  });
+  const wrapperRef = useRef(null);
+  const handleAllRefs = useForkRef(wrapperRef, ref);
+  const { localOnDragStart, localOnDrag, localOnDragStop } = useDragOptions({
+    containerElement,
+    transformScale,
+    onDragStart,
+    onDrag,
+    onDragStop,
+    stateRef,
+    setCurrentState
+  });
+  const { localOnResize, localOnResizeStart, localOnResizeStop } = useResizeOptions({
+    onResizeStart,
+    onResize,
+    onResizeStop,
+    stateRef,
+    setCurrentState
+  });
+  useDimensionEffects({
+    containerElement,
+    containerSize,
+    setCurrentState,
+    stateRef,
+    minWindowWidth,
+    minWindowHeight,
+    wrapperRef,
+    currentState
+  });
+  const mixinResizable = useCallback(
+    (child, position) => {
+      const minConstraints = [minWindowWidth, minWindowHeight];
+      return /* @__PURE__ */ jsx(
+        Resizable,
+        {
+          draggableOpts: {
+            disabled: !resizeable
+          },
+          className: resizeable ? void 0 : "react-resizable-hide",
+          width: position.width,
+          height: position.height,
+          minConstraints,
+          onResizeStop: localOnResizeStop,
+          onResizeStart: localOnResizeStart,
+          onResize: localOnResize,
+          transformScale,
+          resizeHandles,
+          handle: resizeHandle,
+          children: child
+        }
+      );
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [resizeable, transformScale]
+  );
+  const mixinDraggable = useCallback(
+    (child) => {
+      return /* @__PURE__ */ jsx(
+        DraggableCore,
+        {
+          onStart: localOnDragStart,
+          onDrag: localOnDrag,
+          onStop: localOnDragStop,
+          handle: draggableHandle,
+          cancel: ".react-resizable-handle" + (draggableCancel ? "," + draggableCancel : ""),
+          scale: transformScale,
+          nodeRef: wrapperRef,
+          onMouseDown,
+          ...others,
+          children: child
+        }
+      );
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [wrapperRef, transformScale, draggableHandle, draggableCancel, localOnDragStart]
+  );
+  const classNameFinal = clsx(className, {
+    "react-draggable": draggable,
+    //Requerido para el componente Draggable
+    [dragResizeWindowClasses.hidden]: hidden
+    // dropping: Boolean(droppingPosition),
+  });
+  const styleFinal = {
+    ...style,
+    ...setTransform(currentState)
+  };
+  const memoChildren = useMemo(() => {
+    return children;
+  }, [children]);
+  const wrapperRoot = /* @__PURE__ */ jsx(
+    RootStyled,
+    {
+      ownerState: { hidden },
+      className: classNameFinal,
+      ref: handleAllRefs,
+      style: styleFinal,
+      role: "none",
+      children: memoChildren
+    }
+  );
+  if (!containerElement) {
+    return null;
+  }
+  const dragResizeWindow = mixinDraggable(mixinResizable(wrapperRoot, currentState));
+  return /* @__PURE__ */ jsx(React.Fragment, { children: dragResizeWindow });
+});
+export {
+  DragResizeWindow as D
+};

package/components/DragResizeWindow/DragResizeWindow.styles.js

@@ -0,0 +1,40 @@
+const CONTAINER_QUERY_NAME = "window_root";
+const dragResizeWindowStyles = {
+  /**
+   * TODO: Documentar
+   */
+  root: ({ theme, ownerState }) => ({
+    containerName: CONTAINER_QUERY_NAME,
+    containerType: "inline-size",
+    position: "absolute",
+    left: "0px",
+    top: "0px",
+    width: "0px",
+    height: "0px",
+    backgroundColor: theme.vars.palette.background.default,
+    prop2: 1,
+    ...ownerState?.hidden ? {
+      visibility: "hidden",
+      pointerEvents: "none"
+    } : {}
+  }),
+  /**
+   * TODO: Documentar
+   */
+  iconResizeFormatterRoot: () => ({
+    containerName: CONTAINER_QUERY_NAME,
+    containerType: "inline-size",
+    position: "absolute",
+    left: "0px",
+    top: "0px",
+    width: "0px",
+    height: "0px",
+    backgroundColor: "gray",
+    prop2: 1,
+    cursor: "default"
+    // zIndex: ownerState.baseZindex || 0,
+  })
+};
+export {
+  dragResizeWindowStyles as d
+};

package/components/DragResizeWindow/classes/index.js

@@ -0,0 +1,16 @@
+import { generateUtilityClasses } from "@mui/material";
+import { C as COMPONET_KEY_COMPONENT } from "../constants.js";
+const dragResizeWindowClasses = generateUtilityClasses(
+  COMPONET_KEY_COMPONENT,
+  [
+    /* elements */
+    "draggableHandle",
+    "draggableCancel",
+    // state
+    "dragging",
+    "hidden"
+  ]
+);
+export {
+  dragResizeWindowClasses as d
+};

package/components/DragResizeWindow/constants.js

@@ -0,0 +1,6 @@
+const COMPONET_KEY_COMPONENT = "M4LDragResizeWindow";
+const DEFAULT_TRANSFORM_SCALE = 1;
+export {
+  COMPONET_KEY_COMPONENT as C,
+  DEFAULT_TRANSFORM_SCALE as D
+};

package/components/DragResizeWindow/helpers/index.js

@@ -0,0 +1,39 @@
+const getInitialSize = (containerSize, defaultPosition) => {
+  let top;
+  let bottom;
+  let height;
+  let left;
+  let right;
+  let width;
+  if ("top" in defaultPosition.vertical) {
+    top = defaultPosition.vertical.top;
+  }
+  if ("bottom" in defaultPosition.vertical) {
+    bottom = defaultPosition.vertical.bottom;
+  }
+  if ("height" in defaultPosition.vertical) {
+    height = defaultPosition.vertical.height;
+  }
+  if ("left" in defaultPosition.horizontal) {
+    left = defaultPosition.horizontal.left;
+  }
+  if ("right" in defaultPosition.horizontal) {
+    right = defaultPosition.horizontal.right;
+  }
+  if ("width" in defaultPosition.horizontal) {
+    width = defaultPosition.horizontal.width;
+  }
+  const containerHeight = containerSize?.containerHeight || 200;
+  const containerWidth = containerSize?.containerWidth || 200;
+  return {
+    top: top ?? (bottom ? containerHeight - bottom - (height || 0) : 0),
+    height: height ?? containerHeight - (top || 0) - (bottom || 0),
+    // top: top || 0,
+    // height: height ?? containerHeight - (top || 0) - (bottom || 0),
+    left: left ?? (right ? containerWidth - right - (width || 0) : 0),
+    width: width ?? containerWidth - (left || 0) - (right || 0)
+  };
+};
+export {
+  getInitialSize as g
+};

package/components/DragResizeWindow/hooks/useDimensionEffects.js

@@ -0,0 +1,212 @@
+import { useCallback, useEffect } from "react";
+const useDimensionEffects = (props) => {
+  const {
+    containerElement,
+    containerSize,
+    bounds,
+    minWindowWidth,
+    minWindowHeight,
+    stateRef,
+    wrapperRef,
+    currentState,
+    setCurrentState
+  } = props;
+  const shringkingParentContainer = useCallback(
+    (newState, cState, containerDimension, divRoot, dimension) => {
+      const lDimension = dimension === "Width" ? "width" : "height";
+      const leftTop = dimension === "Width" ? "left" : "top";
+      const shrinkLeftTopAt = dimension === "Width" ? "shrinkLeftAt" : "shrinkTopAt";
+      const overflowDimensionAt = dimension === "Width" ? "overflowWidthAt" : "overflowHeightAt";
+      const boundsLefTop = dimension === "Width" ? bounds?.left || 0 : bounds?.top || 0;
+      const boundsRigthBottom = dimension === "Width" ? bounds?.right || 0 : bounds?.bottom || 0;
+      const minWindowDimension = dimension === "Width" ? minWindowWidth : minWindowHeight;
+      const minDimension = containerDimension - boundsLefTop + boundsRigthBottom > minWindowDimension ? containerDimension - boundsLefTop + boundsRigthBottom : minWindowDimension;
+      let maxDimensionElement = containerDimension - cState[leftTop] + boundsRigthBottom;
+      if (divRoot[`client${dimension}`] > maxDimensionElement) {
+        const shrinkedPixels = divRoot[`client${dimension}`] - maxDimensionElement;
+        if (shrinkedPixels < cState[leftTop] - boundsLefTop) {
+          newState[leftTop] = newState[leftTop] - shrinkedPixels;
+          newState[shrinkLeftTopAt] = newState[shrinkLeftTopAt] || cState[leftTop];
+        } else if (shrinkedPixels > cState[leftTop] - boundsLefTop) {
+          newState[leftTop] = boundsLefTop;
+          newState[shrinkLeftTopAt] = newState[shrinkLeftTopAt] || cState[leftTop];
+          maxDimensionElement = containerDimension - boundsLefTop + boundsRigthBottom;
+          if (divRoot[`client${dimension}`] > maxDimensionElement) {
+            newState[lDimension] = maxDimensionElement;
+            newState[overflowDimensionAt] = newState[overflowDimensionAt] || cState[lDimension];
+            if (newState[lDimension] < minDimension) {
+              newState[lDimension] = minDimension;
+            }
+          }
+        }
+      } else {
+        return;
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const expandingParentContainer = useCallback(
+    (newState, _currentState, containerDimension, _divRoot, dimension) => {
+      const lDimension = dimension === "Width" ? "width" : "height";
+      const leftTop = dimension === "Width" ? "left" : "top";
+      const shrinkLeftTopAt = dimension === "Width" ? "shrinkLeftAt" : "shrinkTopAt";
+      const overflowDimensionAt = dimension === "Width" ? "overflowWidthAt" : "overflowHeightAt";
+      const boundsLefTop = dimension === "Width" ? bounds?.left || 0 : bounds?.top || 0;
+      const boundsRigthBottom = dimension === "Width" ? bounds?.right || 0 : bounds?.bottom || 0;
+      const maxDimensionElement = containerDimension - boundsLefTop + boundsRigthBottom;
+      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] + boundsRigthBottom;
+        if (valShrinkLeftTopAt <= dimensionAvailable) {
+          newState[leftTop] = valShrinkLeftTopAt;
+          newState[shrinkLeftTopAt] = void 0;
+        } else {
+          newState[leftTop] = dimensionAvailable;
+        }
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const draggingOrResizingWindow = useCallback(
+    (newState, _currentState, containerDimension, divRoot, dimension) => {
+      const lDimension = dimension === "Width" ? "width" : "height";
+      const leftTop = dimension === "Width" ? "left" : "top";
+      const boundsLefTop = dimension === "Width" ? bounds?.left || 0 : bounds?.top || 0;
+      const boundsRigthBottom = dimension === "Width" ? bounds?.right || 0 : bounds?.bottom || 0;
+      const maxDimensionWithoutBounds = containerDimension - boundsLefTop + boundsRigthBottom;
+      let rightBottomBoundary = containerDimension - newState[lDimension] + boundsRigthBottom;
+      if (newState[lDimension] !== divRoot[`client${dimension}`]) ;
+      if (newState.resizing && stateRef.current.initialPostion) {
+        if (!newState.resizing.handle.includes("w")) {
+          if (newState[leftTop] + newState[lDimension] > containerDimension + boundsRigthBottom) {
+            newState[lDimension] = containerDimension - newState[leftTop] + boundsRigthBottom;
+          }
+        } else {
+          if (newState[leftTop] < boundsLefTop) {
+            newState[leftTop] = boundsLefTop;
+          } else {
+            const dif = newState[lDimension] - stateRef.current.initialPostion[lDimension];
+            if (dif > 0) {
+              if (newState[leftTop] - dif >= boundsLefTop) {
+                newState[lDimension] = stateRef.current.initialPostion[lDimension] + dif;
+                newState[leftTop] = newState[leftTop] - dif;
+                if (newState[leftTop] + newState[lDimension] > maxDimensionWithoutBounds) ;
+              } else {
+                newState[leftTop] = boundsLefTop;
+                newState[lDimension] = stateRef.current.initialPostion[lDimension];
+              }
+            } else if (dif < 0) {
+              newState[leftTop] = newState[leftTop] - dif;
+              newState[lDimension] = stateRef.current.initialPostion[lDimension] + dif;
+            }
+          }
+        }
+      }
+      if (newState[lDimension] > maxDimensionWithoutBounds) {
+        newState[lDimension] = maxDimensionWithoutBounds;
+      }
+      if (newState[leftTop] < boundsLefTop) {
+        newState[leftTop] = boundsLefTop;
+      }
+      rightBottomBoundary = containerDimension + boundsRigthBottom;
+      if (newState[leftTop] > rightBottomBoundary) {
+        newState[leftTop] = rightBottomBoundary;
+      }
+      if (!newState.resizing && newState[leftTop] + newState[lDimension] > containerDimension + boundsRigthBottom) {
+        const outWidthHeight = newState[leftTop] + newState[lDimension] - (containerDimension + boundsRigthBottom);
+        if (newState[leftTop] - boundsLefTop > outWidthHeight) {
+          newState[leftTop] = newState[leftTop] - outWidthHeight;
+        }
+      }
+      if (newState.resizing && stateRef.current.initialPostion) {
+        stateRef.current.initialPostion[lDimension] = newState[lDimension];
+        stateRef.current.initialPostion[leftTop] = newState[leftTop];
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  useEffect(() => {
+    if (!containerElement) {
+      return;
+    }
+    if (stateRef.current.containerSize === void 0 && containerSize) {
+      stateRef.current.containerSize = containerSize;
+    }
+    if (!(containerSize && wrapperRef?.current && stateRef.current.containerSize)) {
+      return;
+    }
+    if (currentState?.dragging) {
+      return;
+    }
+    const newState = { ...currentState };
+    const handleDimension = (dimension) => {
+      if (stateRef.current?.containerSize && wrapperRef.current) {
+        const containerSizeKey = `container${dimension}`;
+        const containerSizeValue = containerSize[containerSizeKey];
+        const previousContainerSizeValue = stateRef.current.containerSize[containerSizeKey];
+        if (containerSizeValue > previousContainerSizeValue) {
+          expandingParentContainer(
+            newState,
+            currentState,
+            containerSizeValue,
+            wrapperRef.current,
+            dimension
+          );
+        } else if (containerSizeValue < previousContainerSizeValue) {
+          shringkingParentContainer(
+            newState,
+            currentState,
+            containerSizeValue,
+            wrapperRef.current,
+            dimension
+          );
+        } else {
+          draggingOrResizingWindow(
+            newState,
+            currentState,
+            containerSizeValue,
+            wrapperRef.current,
+            dimension
+          );
+        }
+      }
+    };
+    handleDimension("Width");
+    handleDimension("Height");
+    stateRef.current.containerSize = { ...containerSize };
+    if (newState.left !== currentState.left || newState.top !== currentState.top || newState.width !== currentState.width || newState.height !== currentState.height || newState.shrinkLeftAt !== currentState.shrinkLeftAt || newState.shrinkTopAt !== currentState.shrinkTopAt || newState.overflowWidthAt !== currentState.overflowWidthAt || newState.overflowHeightAt !== currentState.overflowHeightAt) {
+      setCurrentState(newState);
+    }
+    if (!newState.resizing) {
+      stateRef.current.left = newState.left;
+      stateRef.current.top = newState.top;
+      stateRef.current.height = newState.height;
+      stateRef.current.width = newState.width;
+    }
+  }, [
+    containerElement,
+    currentState,
+    wrapperRef.current,
+    bounds?.left,
+    bounds?.top,
+    bounds?.right,
+    bounds?.bottom,
+    containerSize?.containerWidth,
+    containerSize?.containerHeight
+  ]);
+};
+export {
+  useDimensionEffects as u
+};

package/components/DragResizeWindow/hooks/useDragOptions.js

@@ -0,0 +1,88 @@
+import { useCallback } from "react";
+const useDragOptions = (props) => {
+  const {
+    containerElement,
+    onDragStart,
+    onDrag,
+    onDragStop,
+    transformScale,
+    stateRef,
+    setCurrentState
+  } = props;
+  const localOnDragStart = useCallback(
+    (e, draggableData) => {
+      const { node } = draggableData;
+      const newPosition = { top: 0, left: 0 };
+      if (!containerElement) {
+        return;
+      }
+      const parentRect = containerElement.getBoundingClientRect();
+      const clientRect = node.getBoundingClientRect();
+      const cLeft = clientRect.left / transformScale;
+      const pLeft = parentRect.left / transformScale;
+      const cTop = clientRect.top / transformScale;
+      const pTop = parentRect.top / transformScale;
+      newPosition.left = cLeft - pLeft + containerElement.scrollLeft;
+      newPosition.top = cTop - pTop + containerElement.scrollTop;
+      if (onDragStart) {
+        if (onDragStart(e, draggableData) === false) {
+          return false;
+        }
+      }
+      stateRef.current.dragging = newPosition;
+      setCurrentState((prev) => ({
+        ...prev,
+        ...newPosition,
+        shrinkLeftAt: void 0,
+        //Cancelar los flags de memoria de encogimiento del contenedor padre
+        shrinkTopAt: void 0,
+        //Cancelar los flags de memoria de encogimiento del contenedor padre
+        overflowWidthAt: void 0,
+        //Cancelar los flags de memoria de encogimiento del contenedor padre
+        overflowHeightAt: void 0,
+        //Cancelar los flags de memoria de encogimiento del contenedor padre
+        dragging: newPosition
+      }));
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [containerElement, onDragStart, transformScale]
+  );
+  const localOnDrag = useCallback((e, draggableData) => {
+    const { deltaX, deltaY } = draggableData;
+    if (!stateRef.current.dragging) {
+      return;
+    }
+    if (onDrag) {
+      if (onDrag(e, draggableData) === false) {
+        return false;
+      }
+    }
+    const top = stateRef.current.dragging.top + deltaY;
+    const left = stateRef.current.dragging.left + deltaX;
+    const newPosition = { top, left };
+    stateRef.current.dragging = newPosition;
+    setCurrentState((prev) => ({ ...prev, ...newPosition, dragging: newPosition }));
+  }, []);
+  const localOnDragStop = useCallback(
+    (e, draggableData) => {
+      if (!stateRef.current.dragging) {
+        return;
+      }
+      const { left, top } = stateRef.current.dragging;
+      if (onDragStop) {
+        if (onDragStop(e, draggableData) === false) {
+          return false;
+        }
+      }
+      const newPosition = { top, left };
+      stateRef.current.dragging = void 0;
+      setCurrentState((prev) => ({ ...prev, ...newPosition, dragging: void 0 }));
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [onDragStop]
+  );
+  return { localOnDragStart, localOnDrag, localOnDragStop };
+};
+export {
+  useDragOptions as u
+};

package/components/DragResizeWindow/hooks/useResizeOptions.js

@@ -0,0 +1,62 @@
+import { useCallback } from "react";
+const useResizeOptions = (props) => {
+  const { onResizeStart, onResize, onResizeStop, stateRef, setCurrentState } = props;
+  const onResizeHandler = useCallback(
+    (e, data, handlerName) => {
+      const { size, handle } = data;
+      const handler = props[handlerName];
+      if (handler) {
+        handler(e, data);
+      }
+      if (handlerName === "onResizeStart") {
+        stateRef.current.initialPostion = {
+          left: stateRef.current.left,
+          top: stateRef.current.top,
+          width: stateRef.current.width,
+          height: stateRef.current.height
+        };
+      }
+      const resizing = handlerName === "onResizeStop" ? void 0 : { ...size, handle };
+      setCurrentState((prev) => ({
+        ...prev,
+        ...size,
+        ...handlerName === "onResizeStart" ? {
+          shrinkLeftAt: void 0,
+          //Cancelar los flags de memoria de encogimiento del contenedor padre
+          shrinkTopAt: void 0,
+          //Cancelar los flags de memoria de encogimiento del contenedor padre
+          overflowWidthAt: void 0,
+          //Cancelar los flags de memoria de encogimiento del contenedor padre
+          overflowHeightAt: void 0
+          //Cancelar los flags de memoria de encogimiento del contenedor padre
+        } : {},
+        resizing
+      }));
+      stateRef.current.resizing = resizing;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [onResizeStart, onResize, onResizeStop]
+  );
+  const localOnResizeStart = useCallback(
+    (e, callbackData) => {
+      onResizeHandler(e, callbackData, "onResizeStart");
+    },
+    [onResizeHandler]
+  );
+  const localOnResize = useCallback(
+    (e, callbackData) => {
+      onResizeHandler(e, callbackData, "onResize");
+    },
+    [onResizeHandler]
+  );
+  const localOnResizeStop = useCallback(
+    (e, callbackData) => {
+      onResizeHandler(e, callbackData, "onResizeStop");
+    },
+    [onResizeHandler]
+  );
+  return { localOnResize, localOnResizeStart, localOnResizeStop };
+};
+export {
+  useResizeOptions as u
+};

package/components/DragResizeWindow/index.js

@@ -0,0 +1 @@
+

package/components/DragResizeWindow/slots/DragResizeWindowSlots.js

@@ -0,0 +1,14 @@
+import { styled } from "@mui/material/styles";
+import { C as COMPONET_KEY_COMPONENT } from "../constants.js";
+import { d as dragResizeWindowStyles } from "../DragResizeWindow.styles.js";
+import { D as DragResizeWindowSlots } from "./slots.js";
+const RootStyled = styled("div", { name: COMPONET_KEY_COMPONENT, slot: DragResizeWindowSlots.root })(
+  dragResizeWindowStyles?.root
+);
+styled("div", {
+  name: COMPONET_KEY_COMPONENT,
+  slot: DragResizeWindowSlots.iconResizeFormatterRoot
+})(dragResizeWindowStyles?.iconResizeFormatterRoot);
+export {
+  RootStyled as R
+};

package/components/DragResizeWindow/slots/slots.js

@@ -0,0 +1,8 @@
+var DragResizeWindowSlots = /* @__PURE__ */ ((DragResizeWindowSlots2) => {
+  DragResizeWindowSlots2["root"] = "root";
+  DragResizeWindowSlots2["iconResizeFormatterRoot"] = "iconResizeFormatterRoot";
+  return DragResizeWindowSlots2;
+})(DragResizeWindowSlots || {});
+export {
+  DragResizeWindowSlots as D
+};