@m4l/components 7.1.2 → 7.1.3

package/components/DragResizeWindow/DragResizeWindow.js

@@ -5,13 +5,13 @@ 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 { Resizable } from "../extended/react-resizable/Resizable";
 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

package/components/GridLayout/subcomponents/GridItem/index.js

@@ -1,13 +1,13 @@
 import { jsx, Fragment } from "react/jsx-runtime";
 import React, { useRef, useEffect, useState, useCallback, useMemo } from "react";
 import { DraggableCore } from "react-draggable";
-import { Resizable } from "../../../extended/react-resizable";
 import { h as getH, p as perc, s as setTransform, j as setTopLeft } from "../../utils.js";
 import { c as calcXY, a as calcGridItemWHPx, b as calcGridColWidth, d as calcWH, e as clamp, f as calcGridItemPosition } from "../../calculateUtils.js";
 import clsx from "clsx";
 import { deepEqual } from "fast-equals";
 import { D as DEFAULT_COLS, c as DEFAULT_ROW_HEIGHT, e as DEFAULT_CONTAINER_WIDTH, f as DEFAULT_CONTAINER_HEIGHT, b as DEFAULT_MARGIN, a as DEFAULT_CONTAINER_PADDING, g as DEFAULT_TRANSFORM_SCALE, d as DEFAULT_COLAPSED_HEIGHT } from "../../constants.js";
 import { g as gridLayoutClasses } from "../../classes/index.js";
+import { R as Resizable } from "../../../extended/react-resizable/Resizable/Resizable.js";
 function GridItem(props) {
   const {
     layoutItemRender: ComponentItemRender,

package/components/areas/components/AreasViewer/styles.js

@@ -1,4 +1,4 @@
-import "react-resizable/css/styles.css";
+/* empty css                             */
 import { styled } from "@mui/material/styles";
 import { a as areasViewerClasses } from "./classes/index.js";
 const AreasViewerRoot = styled("div")`

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/WindowModal/index.js

@@ -6,7 +6,7 @@ import { W as WrapperWindowModal } from "./styles.js";
 import Draggable from "react-draggable";
 import { useResponsiveDesktop } from "@m4l/graphics";
 import { a as areasViewerClasses } from "../../../../classes/index.js";
-import { ResizableBox } from "../../../../../../../extended/react-resizable";
+import { R as ResizableBox } from "../../../../../../../extended/react-resizable/ResizableBox/ResizableBox.js";
 const WindowModal = (props) => {
   const { windowId } = props;
   const { onClose } = useAreasStore((state) => state.hashWindowsModals[windowId]);

package/components/extended/react-resizable/Resizable/Resizable.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { R as RootStyled } from "./slots/ResizableSlots.js";
+const Resizable = (props) => {
+  return /* @__PURE__ */ jsx(RootStyled, { ...props });
+};
+export {
+  Resizable as R
+};

package/components/extended/react-resizable/Resizable/constants.js

@@ -0,0 +1,4 @@
+const COMPONET_KEY_COMPONENT = "M4LResizable";
+export {
+  COMPONET_KEY_COMPONENT as C
+};

package/components/extended/react-resizable/Resizable/index.d.ts

@@ -1,2 +1 @@
 export { Resizable } from './Resizable';
-export {};

package/components/extended/react-resizable/Resizable/index.js

@@ -0,0 +1 @@
+

package/components/extended/react-resizable/Resizable/slots/ResizableSlots.js

@@ -0,0 +1,11 @@
+import { styled } from "@mui/material/styles";
+import { C as COMPONET_KEY_COMPONENT } from "../constants.js";
+import { r as resizableBoxStyles } from "../../ResizableBox/ResizeableBox.styles.js";
+import { R as ResizableSlots } from "./slots.js";
+import { Resizable } from "react-resizable";
+const RootStyled = styled(Resizable, { name: COMPONET_KEY_COMPONENT, slot: ResizableSlots.root })(
+  resizableBoxStyles?.root
+);
+export {
+  RootStyled as R
+};

package/components/extended/react-resizable/Resizable/slots/slots.js

@@ -0,0 +1,7 @@
+var ResizableSlots = /* @__PURE__ */ ((ResizableSlots2) => {
+  ResizableSlots2["root"] = "root";
+  return ResizableSlots2;
+})(ResizableSlots || {});
+export {
+  ResizableSlots as R
+};

package/components/extended/react-resizable/ResizableBox/ResizableBox.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { R as RootStyled } from "./slots/ResizableBoxSlots.js";
+function ResizableBox(props) {
+  const {
+    children,
+    width = 600,
+    height = 400,
+    maxHeigth,
+    onResize,
+    maxWidth,
+    resizeHandles = ["se", "nw"],
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx(
+    RootStyled,
+    {
+      width,
+      height,
+      onResize,
+      maxConstraints: maxHeigth && maxWidth ? [maxWidth, maxHeigth] : void 0,
+      resizeHandles,
+      ...other,
+      children
+    }
+  );
+}
+export {
+  ResizableBox as R
+};

package/components/extended/react-resizable/ResizableBox/ResizeableBox.styles.js

@@ -0,0 +1,13 @@
+import { g as getReactResizableStyles } from "../helpers.js";
+const resizableBoxStyles = {
+  /**
+   * TODO: Documentar
+   */
+  root: ({ theme }) => ({
+    ...getReactResizableStyles(theme),
+    position: "absolute"
+  })
+};
+export {
+  resizableBoxStyles as r
+};

package/components/extended/react-resizable/ResizableBox/constants.js

@@ -0,0 +1,4 @@
+const COMPONET_KEY_COMPONENT = "M4LResizableBox";
+export {
+  COMPONET_KEY_COMPONENT as C
+};

package/components/extended/react-resizable/ResizableBox/index.d.ts

@@ -1,2 +1 @@
 export { ResizableBox } from './ResizableBox';
-export {};

package/components/extended/react-resizable/ResizableBox/index.js

@@ -0,0 +1 @@
+

package/components/extended/react-resizable/ResizableBox/slots/ResizableBoxSlots.js

@@ -0,0 +1,11 @@
+import { styled } from "@mui/material/styles";
+import { C as COMPONET_KEY_COMPONENT } from "../constants.js";
+import { r as resizableBoxStyles } from "../ResizeableBox.styles.js";
+import { R as ResizableBoxSlots } from "./slots.js";
+import { ResizableBox } from "react-resizable";
+const RootStyled = styled(ResizableBox, { name: COMPONET_KEY_COMPONENT, slot: ResizableBoxSlots.root })(
+  resizableBoxStyles?.root
+);
+export {
+  RootStyled as R
+};

package/components/extended/react-resizable/ResizableBox/slots/slots.js

@@ -0,0 +1,7 @@
+var ResizableBoxSlots = /* @__PURE__ */ ((ResizableBoxSlots2) => {
+  ResizableBoxSlots2["root"] = "root";
+  return ResizableBoxSlots2;
+})(ResizableBoxSlots || {});
+export {
+  ResizableBoxSlots as R
+};

package/components/extended/react-resizable/helpers.js

@@ -0,0 +1,91 @@
+const borderWith = 2;
+const getReactResizableStyles = (theme) => ({
+  position: "absolute",
+  // left: '0px',
+  // top: '0px',
+  // width: '0px',
+  // height: '0px',
+  backgroundColor: "red",
+  cursor: "default",
+  prop2: 12222,
+  "&.react-resizable": {
+    position: "relative"
+  },
+  "& .react-resizable-handle": {
+    position: "absolute",
+    width: "8px",
+    height: "8px",
+    boxSizing: "border-box",
+    border: "red",
+    padding: "0 3px 3px 0",
+    margin: "0px",
+    //Nueva con respecto al css
+    borderBottomRightRadius: "15%"
+  },
+  // Si no tiene habilitado el resize, se ocultan los handlers
+  "& .react-resizable-handle.react-resizable-hide": {
+    display: "none"
+  },
+  "& .react-resizable-handle-sw, .react-resizable-handle-se, .react-resizable-handle-nw, .react-resizable-handle-ne": {
+    borderRight: `${borderWith}px solid ${theme.vars.palette.text.disabled}`,
+    borderBottom: `2px solid ${theme.vars.palette.text.disabled}`
+  },
+  "& .react-resizable-handle-sw": {
+    bottom: "0",
+    left: "0",
+    cursor: "sw-resize",
+    transform: "rotate(90deg)",
+    position: "absolute"
+    //Nueva con respecto al css
+  },
+  "& .react-resizable-handle-se": {
+    bottom: "0",
+    right: "0",
+    cursor: "se-resize"
+  },
+  "& .react-resizable-handle-nw": {
+    top: "0",
+    left: "0",
+    cursor: "nw-resize",
+    transform: "rotate(180deg)"
+  },
+  "& .react-resizable-handle-ne": {
+    top: "0",
+    right: "0",
+    cursor: "ne-resize",
+    transform: "rotate(270deg)"
+  },
+  "& .react-resizable-handle-w, .react-resizable-handle-e": {
+    top: "50%",
+    marginTop: "-10px",
+    cursor: "ew-resize"
+  },
+  "& .react-resizable-handle-w": {
+    left: "0",
+    borderLeft: `${borderWith}px solid ${theme.vars.palette.text.disabled}`
+    // transform: 'rotate(135deg)',
+  },
+  "& .react-resizable-handle-e": {
+    right: "0",
+    borderRight: `${borderWith}px solid ${theme.vars.palette.text.disabled}`
+    // transform: 'rotate(315deg) ',
+  },
+  "& .react-resizable-handle-n,.react-resizable-handle-s": {
+    left: "50%",
+    marginLeft: "-10px",
+    cursor: "ns-resize"
+  },
+  "& .react-resizable-handle-n": {
+    top: "0",
+    // transform: 'rotate(225deg)',
+    borderTop: `${borderWith}px solid ${theme.vars.palette.text.disabled}`
+  },
+  "& .react-resizable-handle-s": {
+    bottom: "0",
+    // transform: 'rotate(45deg)',
+    borderBottom: `${borderWith}px solid ${theme.vars.palette.text.disabled}`
+  }
+});
+export {
+  getReactResizableStyles as g
+};

package/components/extended/react-resizable/index.js

@@ -0,0 +1 @@
+

package/components/index.js

@@ -1 +1 @@
-import "./extended/react-resizable";
+

package/components/modal/ModalDialog/index.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { useTheme, Dialog, Paper } from "@mui/material";
 import Draggable from "react-draggable";
 import { u as useModal } from "../../../hooks/useModal/index.js";
-import { ResizableBox } from "../../extended/react-resizable/ResizableBox/ResizableBox";
+import { R as ResizableBox } from "../../extended/react-resizable/ResizableBox/ResizableBox.js";
 import { useIsMobile } from "@m4l/graphics";
 import { m as modalUtilityClasses } from "../classes/index.js";
 import { useState, useEffect } from "react";

package/index.js

@@ -120,6 +120,8 @@ import { P as P8 } from "./components/PDFViewer/PDFViewer.js";
 import { P as P9 } from "./components/Period/Period.js";
 import { H as H2 } from "./components/HelmetPage/index.js";
 import { P as P10 } from "./components/PropertyValue/PropertyValue.js";
+import { R as R15 } from "./components/extended/react-resizable/Resizable/Resizable.js";
+import { R as R16 } from "./components/extended/react-resizable/ResizableBox/ResizableBox.js";
 import { S as S2 } from "./components/ScrollBar/index.js";
 import { S as S3 } from "./components/SplitLayout/SplitLayout.js";
 import { T as T2 } from "./components/ToastContainer/ToastContainer.js";
@@ -165,14 +167,13 @@ import { a as a11, T as T9 } from "./components/mui_extended/TabContext/index.js
 import { T as T10 } from "./components/mui_extended/Typography/Typography.js";
 import { T as T11 } from "./components/mui_extended/ToggleButton/ToggleButton.js";
 import { T as T12 } from "./components/mui_extended/ToggleIconButton/ToggleIconButton.js";
-export * from "./components/extended/react-resizable";
 import { a as a12, D as D6, M as M12 } from "./components/areas/contexts/DynamicMFParmsContext/index.js";
-import { F, R as R15, u as u9 } from "./components/hook-form/RHFormContext/index.js";
+import { F, R as R17, u as u9 } from "./components/hook-form/RHFormContext/index.js";
 import { g as g27 } from "./components/hook-form/RHFormContext/dictionary.js";
 import { u as u10 } from "./contexts/AppearanceComponentContext/useAppearanceComponentStore.js";
 import { A as A16 } from "./contexts/AppearanceComponentContext/AppearanceComponentContext.js";
 import { a as a13, M as M13 } from "./contexts/ModalContext/index.js";
-import { a as a14, R as R16 } from "./contexts/RealTimeContext/RealTimeContext.js";
+import { a as a14, R as R18 } from "./contexts/RealTimeContext/RealTimeContext.js";
 import { u as u11 } from "./hooks/useFormAddEdit/index.js";
 import { u as u12 } from "./hooks/useModal/index.js";
 import { u as u13 } from "./hooks/useTab/index.js";
@@ -295,9 +296,11 @@ export {
   R11 as RHFTextField,
   R12 as RHFTextFieldPassword,
   R13 as RHFUploadImage,
-  R15 as RHFormProvider,
+  R17 as RHFormProvider,
   a14 as RealTimeContext,
-  R16 as RealTimeProvider,
+  R18 as RealTimeProvider,
+  R15 as Resizable,
+  R16 as ResizableBox,
   R14 as Responsive,
   S2 as ScrollBar,
   S as ScrollToTop,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "7.1.2",
+  "version": "7.1.3",
   "license": "UNLICENSED",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"
@@ -26,18 +26,24 @@
     "leaflet.markercluster": "^1.5.3",
     "nprogress": "^0.2.0",
     "qrcode.react": "^3.1.0",
+    "qs": "^6.0.0",
+    "react": "^18.0.0",
     "react-chartjs-2": "^5.2.0",
     "react-color": "^2.19.3",
     "react-data-grid": "7.0.0-beta.13",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.0.0",
+    "react-draggable": "^4.4.5",
     "react-dropzone": "^14.2.2",
     "react-helmet-async": "^1.3.0",
     "react-hook-form": "^7.33.1",
+    "react-intersection-observer": "^9.4.0",
     "react-leaflet": "^4.2.1",
+    "react-resizable": "^3.0.4",
     "react-router-dom": "6.3.0",
     "react-spinners": "^0.13.8",
+    "react-splitter-layout": "^4.0.0",
     "react-toastify": "10.0.5",
     "react-transition-group": "^4.4.5",
     "simplebar-react": "3.2.6",

package/style.css

@@ -0,0 +1,65 @@
+.react-resizable {
+  position: relative;
+}
+.react-resizable-handle {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  background-repeat: no-repeat;
+  background-origin: content-box;
+  box-sizing: border-box;
+  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
+  background-position: bottom right;
+  padding: 0 3px 3px 0;
+}
+.react-resizable-handle-sw {
+  bottom: 0;
+  left: 0;
+  cursor: sw-resize;
+  transform: rotate(90deg);
+}
+.react-resizable-handle-se {
+  bottom: 0;
+  right: 0;
+  cursor: se-resize;
+}
+.react-resizable-handle-nw {
+  top: 0;
+  left: 0;
+  cursor: nw-resize;
+  transform: rotate(180deg);
+}
+.react-resizable-handle-ne {
+  top: 0;
+  right: 0;
+  cursor: ne-resize;
+  transform: rotate(270deg);
+}
+.react-resizable-handle-w,
+.react-resizable-handle-e {
+  top: 50%;
+  margin-top: -10px;
+  cursor: ew-resize;
+}
+.react-resizable-handle-w {
+  left: 0;
+  transform: rotate(135deg);
+}
+.react-resizable-handle-e {
+  right: 0;
+  transform: rotate(315deg);
+}
+.react-resizable-handle-n,
+.react-resizable-handle-s {
+  left: 50%;
+  margin-left: -10px;
+  cursor: ns-resize;
+}
+.react-resizable-handle-n {
+  top: 0;
+  transform: rotate(225deg);
+}
+.react-resizable-handle-s {
+  bottom: 0;
+  transform: rotate(45deg);
+}