@m4l/components 0.2.14 → 0.2.16

package/components/PopupsProvider/index.c9400f03.js

@@ -0,0 +1,247 @@
+import React__default, { useContext, useRef, useEffect, createContext } from "react";
+import { createStore, useStore } from "zustand";
+import { shallow } from "zustand/shallow";
+import { useResponsiveDesktop, useFirstRender } from "@m4l/graphics";
+import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
+import { devtools } from "zustand/middleware";
+import { immer } from "zustand/middleware/immer";
+import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import { cloneDeep } from "lodash";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { styled } from "@mui/material/styles";
+import { D as DragResizeWindow, d as draggableWindowClasses } from "../DragResizeWindow/index.b5206081.js";
+import { useMap } from "react-leaflet";
+import { u as useSizeContainer } from "../../hooks/useSizeContainer/index.62b4e0c4.js";
+const COMPONENT_CLASS_NAME = "M4LPopupsProvider";
+const MAP_ZINDEX_OVER_MAP = 1100;
+const popupsClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
+  "root",
+  "windowRoot",
+  "headerContainer",
+  "windowContent"
+]);
+function getPopupsUtilityClass(slot) {
+  return generateUtilityClass(COMPONENT_CLASS_NAME, slot);
+}
+const popupsUtilityClasses = (_ownerState) => {
+  const slots = {
+    root: ["root"],
+    popupsContainer: ["popupsContainer"],
+    windowRoot: ["windowBaseRoot"],
+    headerContainer: ["headerContainer"],
+    windowContent: ["windowContent"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getPopupsUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const updateOwnerStateClasses = (state) => {
+  state.classes = popupsUtilityClasses(state.ownerState);
+};
+const createPopupsStore = (initProps) => {
+  const startProps = {
+    classes: popupsUtilityClasses(initProps.ownerState),
+    popupsIds: [],
+    hashPopups: {},
+    ...initProps
+  };
+  return createStore(
+    devtools(
+      immer((set, get) => ({
+        ...startProps,
+        popupsActions: {
+          init: (initialPopups) => {
+            set((state) => {
+              for (let index = 0; index < initialPopups.length; index++) {
+                state.hashPopups[initialPopups[index].popupId] = cloneDeep(
+                  initialPopups[index]
+                );
+                state.popupsIds.push(initialPopups[index].popupId);
+              }
+            });
+          },
+          setState: (status) => {
+            set((state) => {
+              state.ownerState.status = status;
+            });
+          },
+          addPopup: (popupProps) => {
+            if (get().hashPopups[popupProps.popupId]) {
+              throw new Error(`Poupup with id ${popupProps.popupId} already exists`);
+            }
+            set((state) => {
+              state.hashPopups[popupProps.popupId] = popupProps;
+              state.popupsIds.push(popupProps.popupId);
+            });
+          },
+          removePopup: (popupId) => {
+            if (!get().hashPopups[popupId]) {
+              return;
+            }
+            set((state) => {
+              state.popupsIds.splice(state.popupsIds.indexOf(popupId), 1);
+              delete state.hashPopups[popupId];
+            });
+          },
+          setHandlerGetLabel: (newHandler) => {
+            set((state) => {
+              state.getLabel = newHandler;
+            });
+          },
+          setExternalState: (newExternalState) => {
+            set((state) => {
+              state.ownerState = { ...state.ownerState, ...newExternalState };
+              updateOwnerStateClasses(state);
+            });
+          }
+        }
+      })),
+      { name: `Popups store` }
+    )
+  );
+};
+function usePopupsStore(selector, equalityFn) {
+  const context = useContext(PopupsContext);
+  if (!context)
+    throw new Error("usePopupsStore context must be use inside PopupsContext");
+  return useStore(context, selector, equalityFn);
+}
+const PopupWindowRoot = styled("div")`
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+
+    .${popupsClasses.headerContainer} {
+        position: relative;
+    }
+    .${popupsClasses.windowContent} {
+        padding: 12px;
+        position: relative;
+        flex-grow: 1;
+        overflow: hidden;
+    }
+
+`;
+const Popup = (props) => {
+  const {
+    popupId,
+    containerElement,
+    containerSize
+  } = props;
+  const popup = usePopupsStore((state) => state.hashPopups[popupId], shallow);
+  const {
+    draggable,
+    resizable,
+    defaultPosition,
+    bounds,
+    ...others
+  } = popup;
+  const nodeRef = useRef(null);
+  return /* @__PURE__ */ jsx(DragResizeWindow, {
+    className: popupsClasses.root,
+    onMouseDown: popup.onMouseDown,
+    containerElement,
+    containerSize,
+    bounds,
+    draggable,
+    resizeable: resizable,
+    defaultPosition,
+    ...others,
+    children: /* @__PURE__ */ jsxs(PopupWindowRoot, {
+      className: popupsClasses.windowRoot,
+      children: [/* @__PURE__ */ jsx("div", {
+        ref: nodeRef,
+        className: clsx(popupsClasses.headerContainer, draggableWindowClasses.draggableHandle),
+        children: /* @__PURE__ */ jsx("h3", {
+          children: popup.popupId
+        })
+      }), /* @__PURE__ */ jsx("div", {
+        className: popupsClasses.windowContent,
+        children: popup.functionComponent()
+      })]
+    })
+  });
+};
+const PopupsContainer = (_props) => {
+  const map = useMap();
+  const popupsIds = usePopupsStore((state) => state.popupsIds, shallow);
+  const [containerElement, setContainerElement] = React__default.useState();
+  const containerSize = useSizeContainer(containerElement);
+  useEffect(() => {
+    if (!map)
+      return;
+    setContainerElement(map.getContainer());
+  }, [map]);
+  if (!containerElement) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(React__default.Fragment, {
+    children: popupsIds.map((id) => {
+      return /* @__PURE__ */ jsx(Popup, {
+        popupId: id,
+        containerElement,
+        containerSize
+      }, id);
+    })
+  });
+};
+const PopupsContext = createContext(null);
+function PopupsProvider(props) {
+  const {
+    children,
+    initialPopups
+  } = props;
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const isDesktop = useResponsiveDesktop();
+  const isSkeleton = useModuleSkeleton();
+  const isFirstRender = useFirstRender([getLabel]);
+  const popupsStoreRef = useRef();
+  if (!popupsStoreRef.current) {
+    popupsStoreRef.current = createPopupsStore({
+      getLabel,
+      ownerState: {
+        status: "init",
+        isMobile: !isDesktop,
+        isSkeleton
+      }
+    });
+    popupsStoreRef.current?.getState().popupsActions.init(initialPopups || []);
+  }
+  const {
+    setHandlerGetLabel,
+    setExternalState
+  } = useStore(popupsStoreRef.current, (state) => state.popupsActions, shallow);
+  useEffect(() => {
+    if (!isFirstRender) {
+      setHandlerGetLabel(getLabel);
+    }
+  }, [getLabel]);
+  useEffect(() => {
+    if (isFirstRender) {
+      return;
+    }
+    setExternalState({
+      isMobile: !isDesktop,
+      isSkeleton
+    });
+  }, [isDesktop, isSkeleton]);
+  return /* @__PURE__ */ jsx(PopupsContext.Provider, {
+    value: popupsStoreRef.current,
+    children: /* @__PURE__ */ jsxs(React__default.Fragment, {
+      children: [children, /* @__PURE__ */ jsx(PopupsContainer, {})]
+    })
+  });
+}
+export {
+  MAP_ZINDEX_OVER_MAP as M,
+  PopupsProvider as P,
+  usePopupsStore as u
+};

package/components/PopupsProvider/index.d.ts

@@ -0,0 +1,2 @@
+export * from './contexts/PopupsContext';
+export { usePopupsStore } from './hooks/usePopupsStore';

package/components/PopupsProvider/subcomponents/Popup/index.d.ts

@@ -0,0 +1,8 @@
+import type { PopupProps } from './types';
+export declare type ResizeCorrectionRef = {
+    initialSize: {
+        width: number;
+        height: number;
+    };
+};
+export declare const Popup: (props: PopupProps) => import("react/jsx-runtime").JSX.Element;

package/components/PopupsProvider/subcomponents/Popup/types.d.ts

@@ -0,0 +1,16 @@
+import { ContainerSize } from "../../../../utils/types";
+export declare type ResizeReason = 'start' | 'resize' | 'stop';
+export interface PopupProps {
+    /**
+     * "popupId" Indetificador del popupId
+     */
+    popupId: string;
+    /**
+     * Referencia el contendedor donde van a estar los popups
+     */
+    containerElement: HTMLElement;
+    /**
+     * "containerSize" tamaño del contenedor padre
+     */
+    containerSize?: ContainerSize | undefined;
+}

package/components/PopupsProvider/subcomponents/PopupsContainer/index.d.ts

@@ -0,0 +1,2 @@
+import type { PopupContainerProps } from './types';
+export declare const PopupsContainer: (_props: PopupContainerProps) => import("react/jsx-runtime").JSX.Element | null;

package/components/PopupsProvider/subcomponents/PopupsContainer/types.d.ts

@@ -0,0 +1 @@
+export declare type PopupContainerProps = {};

package/components/PrintingSystem/{index.70234425.js → index.9dc25af9.js}

@@ -1,21 +1,20 @@
 import { generateUtilityClasses } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../utils/index.de903261.js";
+import { g as getComponentUtilityClass } from "../../utils/index.9ad3909a.js";
 import { styled, useTheme } from "@mui/material/styles";
 import clsx from "clsx";
-import { D as DividerNode } from "./subcomponents/DividerNode/index.91e65ff6.js";
-import { S as SectionNode } from "./subcomponents/SectionNode/index.25aeb4aa.js";
-import { T as TextBoxNode } from "./subcomponents/TextBoxNode/index.2b632722.js";
-import { H as HeaderNode } from "./subcomponents/HeaderNode/index.732d7c58.js";
-import { a as ImageNode, Q as QRImageNode } from "../Image/index.d684bdf2.js";
-import { B as BodyNode } from "./subcomponents/BodyNode/index.1dd418aa.js";
-import { F as FooterNode } from "./subcomponents/FooterNode/index.c2481749.js";
-import { P as PaperNode } from "./subcomponents/PaperNode/index.1a20a9d4.js";
-import { P as PropertyValueNode } from "./subcomponents/PropertyValueNode/index.8402e742.js";
-import { G as GridNode } from "./subcomponents/GridNode/index.758d94d1.js";
-import { C as ChartNode } from "./subcomponents/ChartNode/index.6aadd6b3.js";
-import { P as PagerNode, a as PageRender } from "../Page/index.890fbaac.js";
-import { useBase, evaluateWithContext } from "@m4l/core";
+import { D as DividerNode } from "./subcomponents/DividerNode/index.46c5eb9e.js";
+import { S as SectionNode } from "./subcomponents/SectionNode/index.c5588090.js";
+import { T as TextBoxNode } from "./subcomponents/TextBoxNode/index.7792384b.js";
+import { H as HeaderNode } from "./subcomponents/HeaderNode/index.9afcd686.js";
+import { a as ImageNode, Q as QRImageNode } from "../Image/index.8915f577.js";
+import { B as BodyNode } from "./subcomponents/BodyNode/index.6c1cf8f5.js";
+import { F as FooterNode } from "./subcomponents/FooterNode/index.18aa1ddd.js";
+import { P as PaperNode } from "./subcomponents/PaperNode/index.a3967d23.js";
+import { P as PropertyValueNode } from "./subcomponents/PropertyValueNode/index.e1c05641.js";
+import { G as GridNode } from "./subcomponents/GridNode/index.f4b4ffca.js";
+import { C as ChartNode } from "./subcomponents/ChartNode/index.fdb01c74.js";
+import { P as PagerNode, a as PageRender } from "../Page/index.f4aedd2d.js";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useRef, useImperativeHandle } from "react";
 const componentName = "M4LPrintingSystem";
@@ -105,9 +104,6 @@ const FactoryRender = (props) => {
     children,
     ...otherProps
   } = parent || {};
-  const {
-    sourceData
-  } = useBase();
   const strategiesComponents = {
     section: SectionNode,
     textBox: TextBoxNode,
@@ -133,7 +129,7 @@ const FactoryRender = (props) => {
       return /* @__PURE__ */ jsx(FactoryRender, {
         data: subComponent
       }, `${subComponent.key}-${Math.random().toString(36).substring(7)}`);
-    }) : null, typeof children === "string" ? evaluateWithContext(sourceData, children) : null]
+    }) : null, typeof children === "string" ? children : null]
   });
 };
 const PrintingSystem = forwardRef((props, ref) => {

package/components/PrintingSystem/subcomponents/BodyNode/{index.1dd418aa.js → index.6c1cf8f5.js}

@@ -1,5 +1,5 @@
 import { useBase } from "@m4l/core";
-import { c as classes, g as getSize } from "../../index.70234425.js";
+import { c as classes, g as getSize } from "../../index.9dc25af9.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 const BodyNode = (props) => {

package/components/PrintingSystem/subcomponents/ChartNode/{index.6aadd6b3.js → index.fdb01c74.js}

@@ -1,4 +1,4 @@
-import { c as classes } from "../../index.70234425.js";
+import { c as classes } from "../../index.9dc25af9.js";
 import clsx from "clsx";
 import { createRef, useEffect } from "react";
 import { Chart, registerables } from "chart.js";

package/components/PrintingSystem/subcomponents/DividerNode/{index.91e65ff6.js → index.46c5eb9e.js}

@@ -1,4 +1,4 @@
-import { c as classes } from "../../index.70234425.js";
+import { c as classes } from "../../index.9dc25af9.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 const DividerNode = (props) => {

package/components/PrintingSystem/subcomponents/FooterNode/{index.c2481749.js → index.18aa1ddd.js}

@@ -1,5 +1,5 @@
 import { useBase } from "@m4l/core";
-import { c as classes, g as getSize } from "../../index.70234425.js";
+import { c as classes, g as getSize } from "../../index.9dc25af9.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 const FooterNode = (props) => {

package/components/PrintingSystem/subcomponents/GridNode/{index.758d94d1.js → index.f4b4ffca.js}

@@ -1,5 +1,5 @@
 import { useBase, getPropertyByString, evaluateWithContext } from "@m4l/core";
-import { c as classes, g as getSize } from "../../index.70234425.js";
+import { c as classes, g as getSize } from "../../index.9dc25af9.js";
 import clsx from "clsx";
 import { jsxs, jsx } from "react/jsx-runtime";
 const GridNode = (props) => {
@@ -17,9 +17,13 @@ const GridNode = (props) => {
     sourceData
   } = useBase();
   const result = getPropertyByString(sourceData, typeof rows === "string" ? rowMaybeString[1] : "");
+  console.log("rows", rows);
+  console.log("result", result);
   const rowEval = Array.isArray(result) ? result : typeof result === "object" ? [{
     ...result
   }] : [];
+  console.log("rows", rows);
+  console.log("rowEval", rowEval);
   const rowsFormated = typeof rows === "string" ? rowEval : rows;
   if (dataColumns.length > 0) {
     return /* @__PURE__ */ jsxs("table", {
@@ -54,7 +58,7 @@ const GridNode = (props) => {
                   minWidth: getSize(dataColumns[id].width || "auto", unitSize),
                   justifyContent: cell.alignX ? cell.alignX : "center"
                 },
-                children: isNested ? getPropertyByString(row, dataColumns[id].nestedValue || "") : row[dataColumns[id].key]
+                children: isNested ? evaluateWithContext(row, dataColumns[id].nestedValue || "") : row[dataColumns[id].key]
               }, `td-${Math.random().toString(36).substring(7)}`);
             })
           }, `tr-${Math.random().toString(36).substring(7)}`);

package/components/PrintingSystem/subcomponents/HeaderNode/{index.732d7c58.js → index.9afcd686.js}

@@ -1,5 +1,5 @@
 import { useBase } from "@m4l/core";
-import { c as classes, g as getSize } from "../../index.70234425.js";
+import { c as classes, g as getSize } from "../../index.9dc25af9.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 const HeaderNode = (props) => {

package/components/PrintingSystem/subcomponents/PaperNode/{index.1a20a9d4.js → index.a3967d23.js}

@@ -1,5 +1,5 @@
 import { useBase, evaluateWithContext } from "@m4l/core";
-import { c as classes } from "../../index.70234425.js";
+import { c as classes } from "../../index.9dc25af9.js";
 import clsx from "clsx";
 import { jsxs, jsx } from "react/jsx-runtime";
 const PaperNode = (props) => {

package/components/PrintingSystem/subcomponents/PropertyValueNode/{index.8402e742.js → index.e1c05641.js}

@@ -1,5 +1,5 @@
 import { useBase, evaluateWithContext } from "@m4l/core";
-import { c as classes, g as getSize } from "../../index.70234425.js";
+import { c as classes, g as getSize } from "../../index.9dc25af9.js";
 import clsx from "clsx";
 import { jsxs, jsx } from "react/jsx-runtime";
 const PropertyValueNode = (props) => {
@@ -7,16 +7,18 @@ const PropertyValueNode = (props) => {
     style = {},
     className = "",
     property,
-    children,
+    value,
     direction,
     propertyWidth = "auto"
   } = props;
+  console.log();
   const {
     unitSize,
     mainColor,
     sourceData
   } = useBase();
   const propertyFormated = evaluateWithContext(sourceData, property);
+  const valueFormated = evaluateWithContext(sourceData, value);
   return /* @__PURE__ */ jsxs("div", {
     className: clsx(classes.propertyValueNodeRoot, direction === "column" ? classes.propertyValueNodeHorizontal : classes.propertyValueNodeVertical, className),
     style: {
@@ -32,7 +34,7 @@ const PropertyValueNode = (props) => {
       children: propertyFormated
     }), /* @__PURE__ */ jsx("div", {
       className: classes.propertyValueNodeContent,
-      children
+      children: valueFormated
     })]
   });
 };

package/components/PrintingSystem/subcomponents/SectionNode/{index.25aeb4aa.js → index.c5588090.js}

@@ -1,5 +1,5 @@
 import { useBase } from "@m4l/core";
-import { c as classes, g as getSize } from "../../index.70234425.js";
+import { c as classes, g as getSize } from "../../index.9dc25af9.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 const SectionNode = (props) => {

package/components/PrintingSystem/subcomponents/TextBoxNode/{index.2b632722.js → index.7792384b.js}

@@ -1,5 +1,5 @@
 import { useBase, evaluateWithContext } from "@m4l/core";
-import { c as classes } from "../../index.70234425.js";
+import { c as classes } from "../../index.9dc25af9.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 const TextBoxNode = (props) => {

package/components/PrintingSystem/types.d.ts

@@ -163,10 +163,10 @@ export interface PropertyValue extends Omit<BaseNode, 'children'> {
     type: 'propertyValue';
     property: string;
     propertyWidth?: number | string;
-    children: string | NodePrintPropertyValue[];
+    value: string;
     direction: Direction;
+    children?: string;
 }
-export declare type NodePrintPropertyValue = SectionNode | TextBoxNode | ImageNode | FooterNode | PaperNode | DividerNode | GridNode | ChartNode | PagerNode | QRImageNode;
 /**
  * DividerNode: Componente que aporta una división gráfica.
  */

package/components/PropertyValue/{index.45482ca3.js → index.d61c943c.js}

@@ -4,28 +4,11 @@ import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 import clsx from "clsx";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
-import { g as getNameDataTestId } from "../../vendor.f0742647.js";
+import { g as getNameDataTestId } from "../../test/getNameDataTestId.14875ec7.js";
 import { useState } from "react";
-import "@m4l/core";
-import { I as Icon } from "../Icon/index.e215d0f0.js";
 import { jsxs, jsx } from "react/jsx-runtime";
-import "../mui_extended/IconButton/index.5afe56b7.js";
-import "../mui_extended/Accordion/index.3087f40e.js";
-import { T as Typography } from "../mui_extended/Typography/index.443590d6.js";
-import "../mui_extended/Avatar/index.75e6ed57.js";
-import "react-router-dom";
-import "@mui/material/Button";
-import "../mui_extended/Button/index.0f2552ed.js";
-import "../mui_extended/CheckBox.38abccd8.js";
-import "../mui_extended/Badge/index.b09524fe.js";
-import "../Image/index.d684bdf2.js";
-import "@mui/lab";
-import "../mui_extended/MenuActions/index.cc54c35c.js";
-import "../mui_extended/Popover/index.9f35d0eb.js";
-import "../mui_extended/Stack/index.0e53197c.js";
-import "../mui_extended/Tab/index.ae9ea641.js";
-import "../mui_extended/Pager/index.5fbbefe2.js";
-import "../mui_extended/Tooltip/index.5a795dcd.js";
+import { I as Icon } from "../Icon/index.282c5b58.js";
+import { T as Typography } from "../mui_extended/Typography/index.379dd374.js";
 const PropertyValueRoot = styled("div")(({
   theme
 }) => ({
@@ -107,6 +90,7 @@ function PropertyValue(props) {
   };
   const handlerKeyUp = (event) => {
     if (event.key === "Tab") {
+      console.log("handlerKeyDown condition ok");
       setIsTabSelected(true);
     }
   };

package/components/Resizeable/{index.6478d7d8.js → index.18c86aff.js}

@@ -1,5 +1,5 @@
 import { styled } from "@mui/material/styles";
-import { a as ResizableBox } from "../../react-resizable.ee028152.js";
+import { a as ResizableBox } from "../../react-resizable.f2c58a4c.js";
 import { jsx } from "react/jsx-runtime";
 const WrapperResizeable = styled(ResizableBox)(({
   theme
@@ -60,8 +60,7 @@ const WrapperResizeable = styled(ResizableBox)(({
     position: "absolute",
     "& .M4LImage-img": {
       opacity: "0.5",
-      filter: "invert(0.4) hue-rotate(20deg) saturate(1000%)",
-      "-webkit-user-drag": "none"
+      filter: "invert(0.4) hue-rotate(20deg) saturate(1000%)"
     }
   },
   "& .M4LImage-root.custom-handle.custom-handle-nw": {
@@ -71,8 +70,7 @@ const WrapperResizeable = styled(ResizableBox)(({
     transform: "rotate(180deg)",
     "& .M4LImage-img": {
       opacity: "0.5",
-      filter: "invert(0.4) hue-rotate(20deg) saturate(1000%)",
-      "-webkit-user-drag": "none"
+      filter: "invert(0.4) hue-rotate(20deg) saturate(1000%)"
     }
   },
   "& .react-resizable-handle-ne": {
@@ -114,12 +112,14 @@ function ResizeableWindow(props) {
     width = 600,
     height = 400,
     maxHeigth,
+    onResize,
     maxWidth,
     ...other
   } = props;
   return /* @__PURE__ */ jsx(WrapperResizeable, {
     width,
     height,
+    onResize,
     maxConstraints: maxHeigth && maxWidth ? [maxWidth, maxHeigth] : void 0,
     resizeHandles: ["se", "nw"],
     ...other,

package/components/ResizeableWindow/types.d.ts

@@ -1,11 +1,9 @@
-import { ReactNode } from 'react';
-import { ResizableBoxProps } from 'react-resizable';
+/// <reference types="react" />
+import { ResizableBoxProps, ResizeCallbackData } from 'react-resizable';
 declare type InternalResizeableProps = {
-    children: ReactNode;
-    width?: number;
-    height?: number;
     maxWidth?: number;
     maxHeigth?: number;
+    onResize?: (e: React.SyntheticEvent, data: ResizeCallbackData) => void;
 };
 export declare type ResizeableProps = InternalResizeableProps & Partial<ResizableBoxProps>;
 export {};