@m4l/components 0.1.50 → 0.1.52

package/components/areas/components/Window/{index.ac629c20.js → index.e34225ae.js}

@@ -1,38 +1,79 @@
 import React__default, { useMemo, useState, useRef, useCallback, useEffect } from "react";
-import { a as useAreaStore } from "../../hooks/useArea/index.868089ed.js";
+import { I as Icon } from "../../../Icon/index.f6e8d810.js";
+import { m } from "framer-motion";
+import { Skeleton, Typography, styled as styled$1, Dialog, Paper } from "@mui/material";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { styled } from "@mui/material/styles";
-import { W as WindowToolsMFProvider, a as WindowMFProvider } from "../../contexts/index.ea2185f5.js";
+import "react-router-dom";
+import "../../../animate/LoadingScreen/index.1d0c4307.js";
+import "../../../animate/PropagateLoader/index.be5b02c3.js";
+import "../index.6d863764.js";
+import "../AreasAdmin/index.dbab59f1.js";
+import { useEnvironment, useModuleSkeleton, useModuleDictionary, useNetwork, useHostTools, axiosOperation } from "@m4l/core";
+import { I as IconButton } from "../../../mui_extended/IconButton/index.1318a283.js";
+import "zustand";
+import "../../contexts/AreasContext/index.7406c20f.js";
 import { shallow } from "zustand/shallow";
+import "../AreasContainer/index.f3f921b9.js";
+import "react-grid-layout/css/styles.css";
+import "../../../../react-resizable.bb58c8fc.js";
+import { W as WindowToolsMFProvider, a as WindowMFProvider } from "../../contexts/index.e80d8f0f.js";
 import { D as DynamicMFParmsProvider } from "../../contexts/DynamicMFParmsContext/index.c19cb8cc.js";
-import "../../../../contexts/ModalContext/index.6a6bf90d.js";
 import "react-hook-form";
-import "@hookform/resolvers/yup";
-import "../../../../contexts/RHFormContext/index.828b60ad.js";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { a as useWindow, b as useWindowStore } from "../../hooks/index.98cf18fc.js";
-import { useEnvironment, useModuleSkeleton, useModuleDictionary, useNetwork, useHostTools, axiosOperation } from "@m4l/core";
-import { Skeleton, Typography, styled as styled$1 } from "@mui/material";
-import { useResponsiveDesktop, useHostTheme, useFormatter, useLocales, useFirstRender } from "@m4l/graphics";
-import { I as IconButton } from "../../../mui_extended/IconButton/index.1318a283.js";
-import { I as Icon } from "../../../Icon/index.f6e8d810.js";
+import "../../../hook-form/RHFAutocomplete/index.74add0d0.js";
+import { I as Image } from "../../../Image/index.aa24e982.js";
+import debounce from "lodash/debounce";
+import "../../../hook-form/RHFCheckbox/index.ca94a050.js";
 import "../../../mui_extended/Accordion/index.1d513477.js";
 import "../../../mui_extended/Avatar/index.fe06afd7.js";
-import "react-router-dom";
+import "@mui/material/Button";
 import { B as Button } from "../../../mui_extended/Button/index.8406ed5b.js";
-import { I as Image } from "../../../Image/index.aa24e982.js";
 import "@mui/lab";
-import { M as MenuActions } from "../../../mui_extended/MenuActions/index.1261168c.js";
 import "../../../mui_extended/Popover/index.58c49cc0.js";
+import { M as MenuActions } from "../../../mui_extended/MenuActions/index.1261168c.js";
 import "../../../mui_extended/Pager/index.984aac44.js";
 import "../../../mui_extended/Tab/index.e0653a0a.js";
 import "../../../mui_extended/Typography/index.be3a279a.js";
-import debounce from "lodash/debounce";
-import "@mui/material/Button";
+import "../../../ErrorLabel/index.78553a1e.js";
+import "@mui/x-date-pickers";
+import "../../../hook-form/RHFDateTime/index.7f1cbd85.js";
+import { useResponsiveDesktop, useHostTheme, useFormatter, useLocales, useFirstRender } from "@m4l/graphics";
+import "../../../hook-form/RHFTextField/index.bef7eced.js";
+import "../../../hook-form/RHFPeriod/index.5d2a2071.js";
+import "../../../Period/index.85fe764a.js";
+import "../../../CommonActions/components/Actions/index.f0a3167b.js";
+import "../../../../contexts/ModalContext/index.3d92d9f9.js";
+import { c as cjs } from "../../../../react-draggable.0eef011c.js";
+import "../../../ModalDialog/index.5a307e29.js";
+import { R as ResizeableWindow } from "../../../Resizeable/index.8a442a8b.js";
+import "../../../modal/WindowConfirm.cbc7720c.js";
+import "../../../modal/WindowBase.b5e29758.js";
+import "lodash/isString";
+import "react-dropzone";
+import "../../../hook-form/RHFUpload/index.7fdff30f.js";
+import "../../../DataGrid/index.85390177.js";
+import "react-dnd";
+import "react-dnd-html5-backend";
+import "../../../ScrollBar/index.39eeb2de.js";
+import "../../../DynamicFilter/index.cddd7472.js";
+import "clsx";
+import "simplebar/dist/simplebar.min.css";
+import "@hookform/resolvers/yup";
+import "../../../../contexts/RHFormContext/index.828b60ad.js";
+import "yup";
+import "../../../LanguagePopover/index.5047b444.js";
+import "../../../NoItemSelected/index.9636ec8a.js";
+import "../../../ObjectLogs/index.1315af37.js";
+import "../../../../react-json-view.57125fcf.js";
+import "../../../PaperForm/index.0114aa9b.js";
+import "../../../Page/index.4237c241.js";
+import "../../../PropertyValue/index.dfcfe1ba.js";
+import "../../../../react-splitter-layout.8b1655c8.js";
+import "../../../SplitLayout/index.5a8355d8.js";
+import { a as useAreaStore } from "../../hooks/useArea/index.7bdbbb79.js";
+import { a as useWindow, b as useWindowStore } from "../../hooks/index.0fd57f88.js";
 import { L as LinearProgress } from "../../../mui_extended/LinearProgress/index.c92b9ba9.js";
-import { m } from "framer-motion";
 import { v as varBounce } from "../../../animate/variants/bounce.784aaaaa.js";
-import "../../../animate/LoadingScreen/index.1d0c4307.js";
-import "../../../animate/PropagateLoader/index.be5b02c3.js";
 const WrapperWindow = styled("div", {
   shouldForwardProp: (props) => props !== "selected"
 })(({ theme, selected }) => ({
@@ -42,9 +83,9 @@ const WrapperWindow = styled("div", {
   width: "100%",
   overflow: "hidden",
   border: "1px solid gray",
-  borderTop: selected ? "1px solid red" : "1px solid black",
+  borderTop: selected ? "1px solid red" : "1px solid gray",
   backgroundColor: theme.palette.background.paper,
-  padding: theme.spacing(3),
+  padding: theme.spacing(0),
   "&.m4l_selected": {
     borderTop: "1px solid green"
   }
@@ -264,7 +305,14 @@ function getMainActions(isDesktop, moduleActions) {
 }
 function Header() {
   const [url_icon, title, moduleActions, onClose, container_id] = useWindowStore((state) => [state.url_icon, state.title, state.moduleActions, state.onClose, state.windowId], shallow);
-  const saveModuleCookies = useWindowStore((state) => state.internalActions.saveModuleCookies);
+  const {
+    saveModuleCookies
+  } = useWindowStore((state) => state.internalActions);
+  const maximizedId = useAreaStore((state) => state.singleId);
+  const {
+    maximizeLayout,
+    normalizeLayouts
+  } = useAreaStore((state) => state.actions, shallow);
   const {
     host_static_assets,
     environment_assets
@@ -278,6 +326,13 @@ function Header() {
   const onCloseLocal = () => {
     onClose && onClose(container_id);
   };
+  const maxNormalize = () => {
+    if (maximizedId) {
+      normalizeLayouts();
+    } else {
+      maximizeLayout(container_id);
+    }
+  };
   if (isSkeleton) {
     return /* @__PURE__ */ jsx(SKTModuleHeader, {});
   }
@@ -330,6 +385,10 @@ function Header() {
       onClick: onCloseLocal,
       "aria-label": "click",
       src: `${host_static_assets}/${environment_assets}/frontend/components/window/assets/icons/close.svg`
+    }), isDesktop && /* @__PURE__ */ jsx(Button, {
+      onClick: maxNormalize,
+      "aria-label": "click",
+      children: maximizedId ? "Norm" : "Max"
     }), /* @__PURE__ */ jsx(Button, {
       onClick: saveModuleCookies,
       "aria-label": "click",
@@ -582,7 +641,6 @@ function MFLoader(props) {
       cleanUp(dsScript);
     };
   }, [divScript]);
-  console.log("Render micro frontend", divScript.divContainerId, final_host);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx("div", {
       id: divScript.divContainerId
@@ -614,12 +672,11 @@ const InnerForHooks = (props) => {
   const {
     winType
   } = props;
-  const areaStatus = useAreaStore((state) => state.status);
-  if (areaStatus !== "loaded")
+  const status = useWindowStore((state) => state.status);
+  if (status !== "loaded") {
     return null;
-  console.log("Render InnerForHooks", props.windowId);
-  return /* @__PURE__ */ jsxs(WindowMFProvider, {
-    ...props,
+  }
+  return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx(Header, {}), /* @__PURE__ */ jsx(WrapperContent, {
       children: winType === "microfrontend" ? /* @__PURE__ */ jsx(MicroFrontend, {
         ...props.mfProps
@@ -629,7 +686,7 @@ const InnerForHooks = (props) => {
     })]
   });
 };
-const MemonizedInnerForHooks = React__default.memo(InnerForHooks);
+React__default.memo(InnerForHooks);
 const Window = (props) => {
   const {
     emergeType
@@ -640,27 +697,157 @@ const Window = (props) => {
     selectWindowLayout
   } = useAreaStore((state) => state.actions);
   const onTouch = () => {
-    console.log("onTouch", props.windowId);
     if (!selected) {
       if (emergeType === "popup") {
         selectWindowPopUp(props.windowId);
-      } else {
+      } else if (emergeType === "layout") {
         selectWindowLayout(props.windowId);
       }
     }
   };
-  console.log("Render Window", props.windowId, selected);
   return /* @__PURE__ */ jsx(WrapperWindow, {
     id: "WrapperWindow",
     selected,
     onMouseDown: onTouch,
-    children: /* @__PURE__ */ jsx(MemonizedInnerForHooks, {
-      ...props
+    children: /* @__PURE__ */ jsx(WindowMFProvider, {
+      ...props,
+      children: /* @__PURE__ */ jsx(InnerForHooks, {
+        ...props
+      })
     })
   });
 };
 const MemonizedWindow = React__default.memo(Window);
+const Container = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  height: "100%",
+  overflow: "hidden",
+  padding: theme.spacing(3)
+}));
+const WrapperWindowModal = styled(Dialog)(() => ({
+  height: "100%",
+  "&.m4l_selected": {
+    borderTop: "1px solid green"
+  }
+}));
+const DragabblePaperComponent = (props) => {
+  return /* @__PURE__ */ jsx(cjs.exports, {
+    handle: ".m4l_draggable_handle",
+    cancel: '[class*="MuiDialogContent-root"]',
+    children: /* @__PURE__ */ jsx(Paper, {
+      sx: {
+        maxHeight: "unset",
+        maxWidth: "unset"
+      },
+      ...props
+    })
+  });
+};
+function PaperComponent(props) {
+  return /* @__PURE__ */ jsx(Paper, {
+    sx: {
+      maxHeight: "unset",
+      maxWidth: "unset",
+      height: "100%"
+    },
+    ...props
+  });
+}
+const WindowModal = (props) => {
+  const {
+    closeWindowModal
+  } = useAreaStore((state) => state.actions);
+  const isDesktop = useResponsiveDesktop();
+  const onClose = () => {
+    closeWindowModal();
+  };
+  const contentComnponent = /* @__PURE__ */ jsx(Container, {
+    id: "Container",
+    children: /* @__PURE__ */ jsx(Window, {
+      ...props,
+      onClose
+    })
+  });
+  return /* @__PURE__ */ jsxs(WrapperWindowModal, {
+    open: true,
+    "aria-labelledby": "child-modal-title",
+    "aria-describedby": "child-modal-description",
+    PaperComponent: isDesktop ? DragabblePaperComponent : PaperComponent,
+    maxWidth: false,
+    fullWidth: !isDesktop,
+    fullScreen: false,
+    disableEnforceFocus: true,
+    children: [isDesktop && /* @__PURE__ */ jsx(
+      ResizeableWindow,
+      {
+        children: contentComnponent
+      }
+    ), !isDesktop && contentComnponent]
+  });
+};
+const MemonizedWindowModal = React__default.memo(WindowModal);
+const WrapperWindowsPanel = styled("div", {
+  shouldForwardProp: (props) => props !== "isDesktop"
+})(({
+  isDesktop
+}) => ({
+  display: "flex",
+  flexDirection: isDesktop ? "column" : "row",
+  height: isDesktop ? "40px" : "unset",
+  maxWidth: isDesktop ? "40px" : "unset",
+  flexGrow: "1",
+  position: "relative"
+}));
+const WrapperWindowPanel = styled("div", {
+  shouldForwardProp: (props) => props !== "selected"
+})(({
+  selected
+}) => ({
+  flexDirection: "column",
+  flexGrow: "1",
+  position: "relative",
+  width: "40px",
+  height: "40px",
+  border: selected ? "1px solid red" : "1px solid black"
+}));
+const WindowsPanel = () => {
+  const status = useAreaStore((state) => state.status);
+  const mode = useAreaStore((state) => state.viewMode);
+  const singleId = useAreaStore((state) => state.singleId);
+  const gridLayouts = useAreaStore((state) => state.gridLayouts, shallow);
+  const hashWindowsLayouts = useAreaStore((state) => state.hashWindowsLayouts, shallow);
+  const {
+    maximizeLayout
+  } = useAreaStore((state) => state.actions);
+  const isDesktop = useAreaStore((state) => state.isDesktop);
+  const onTouched = (layoutId) => {
+    maximizeLayout(layoutId);
+  };
+  if (status === "loaded") {
+    if (mode !== "single" || gridLayouts.length < 2) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(WrapperWindowsPanel, {
+      isDesktop,
+      children: gridLayouts.map((l) => {
+        return /* @__PURE__ */ jsx(WrapperWindowPanel, {
+          onClick: () => onTouched(l.i),
+          selected: singleId === l.i,
+          children: /* @__PURE__ */ jsx(Icon, {
+            src: hashWindowsLayouts[l.i].url_icon,
+            size: "32px"
+          })
+        }, l.i);
+      })
+    });
+  } else {
+    return null;
+  }
+};
 export {
   MemonizedWindow as M,
-  Window as W
+  Window as W,
+  MemonizedWindowModal as a,
+  WindowsPanel as b
 };

package/components/areas/components/WindowModal/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ModalProps } from '../Area/types';
+export declare const WindowModal: (props: ModalProps) => JSX.Element;
+export declare const MemonizedWindowModal: React.MemoExoticComponent<(props: ModalProps) => JSX.Element>;

package/components/areas/components/WindowPopUp/{index.ba674a09.js → index.90eb0348.js}

@@ -7,17 +7,17 @@ import "@mui/material/styles";
 import "react-router-dom";
 import "../../../animate/LoadingScreen/index.1d0c4307.js";
 import "../../../animate/PropagateLoader/index.be5b02c3.js";
-import "../index.3c88ce04.js";
-import "../AreasAdmin/index.c6ccc79c.js";
+import "../index.6d863764.js";
+import "../AreasAdmin/index.dbab59f1.js";
 import "@m4l/core";
 import "../../../mui_extended/IconButton/index.1318a283.js";
 import "zustand";
-import "../../contexts/AreasContext/index.cbfa4a53.js";
+import "../../contexts/AreasContext/index.7406c20f.js";
 import "zustand/shallow";
-import "../AreasContainer/index.a4393459.js";
+import "../AreasContainer/index.f3f921b9.js";
 import "react-grid-layout/css/styles.css";
 import "../../../../react-resizable.bb58c8fc.js";
-import "../../contexts/index.ea2185f5.js";
+import "../../contexts/index.e80d8f0f.js";
 import "../../contexts/DynamicMFParmsContext/index.c19cb8cc.js";
 import "react-hook-form";
 import "../../../hook-form/RHFAutocomplete/index.74add0d0.js";
@@ -38,42 +38,41 @@ import "../../../ErrorLabel/index.78553a1e.js";
 import "@mui/x-date-pickers";
 import "../../../hook-form/RHFDateTime/index.7f1cbd85.js";
 import "@m4l/graphics";
-import "../../../hook-form/RHFTextField/index.57f138f7.js";
-import "../../../hook-form/RHFPeriod/index.72f32f9b.js";
-import "../../../Period/index.514252d6.js";
-import "../../../CommonActions/components/Actions/index.274f0ce8.js";
-import "../../../../contexts/ModalContext/index.6a6bf90d.js";
+import "../../../hook-form/RHFTextField/index.bef7eced.js";
+import "../../../hook-form/RHFPeriod/index.5d2a2071.js";
+import "../../../Period/index.85fe764a.js";
+import "../../../CommonActions/components/Actions/index.f0a3167b.js";
+import "../../../../contexts/ModalContext/index.3d92d9f9.js";
 import "../../../../react-draggable.0eef011c.js";
-import "../../../ModalDialog/index.1e2f7995.js";
+import "../../../ModalDialog/index.5a307e29.js";
 import { R as ResizeableWindow } from "../../../Resizeable/index.8a442a8b.js";
-import "../../../modal/WindowConfirm.d5026cb4.js";
-import "../../../modal/WindowBase.9f5db87e.js";
+import "../../../modal/WindowConfirm.cbc7720c.js";
+import "../../../modal/WindowBase.b5e29758.js";
 import "lodash/isString";
 import "react-dropzone";
 import "../../../hook-form/RHFUpload/index.7fdff30f.js";
-import "../../../DataGrid/index.01df4f26.js";
+import "../../../DataGrid/index.85390177.js";
 import "react-dnd";
 import "react-dnd-html5-backend";
 import "../../../ScrollBar/index.39eeb2de.js";
-import "../../../DynamicFilter/index.c1022a6f.js";
+import "../../../DynamicFilter/index.cddd7472.js";
 import "clsx";
 import "simplebar/dist/simplebar.min.css";
 import "@hookform/resolvers/yup";
 import "../../../../contexts/RHFormContext/index.828b60ad.js";
 import "yup";
 import { DraggableWindow } from "../../../../index.js";
-import "@mui/base";
 import "../../../LanguagePopover/index.5047b444.js";
 import "../../../NoItemSelected/index.9636ec8a.js";
-import "../../../ObjectLogs/index.820d75ac.js";
+import "../../../ObjectLogs/index.1315af37.js";
 import "../../../../react-json-view.57125fcf.js";
 import "../../../PaperForm/index.0114aa9b.js";
 import "../../../Page/index.4237c241.js";
 import "../../../PropertyValue/index.dfcfe1ba.js";
 import "../../../../react-splitter-layout.8b1655c8.js";
 import "../../../SplitLayout/index.5a8355d8.js";
-import { a as useAreaStore } from "../../hooks/useArea/index.868089ed.js";
-import { W as Window } from "../Window/index.ac629c20.js";
+import { a as useAreaStore } from "../../hooks/useArea/index.7bdbbb79.js";
+import { W as Window } from "../Window/index.e34225ae.js";
 const WindowPopUp = (props) => {
   const {
     windowProps,

package/components/areas/components/WindowsPanel/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const WindowsPanel: () => JSX.Element | null;

package/components/areas/components/index.6d863764.js

@@ -0,0 +1,77 @@
+import { A as AreaProvider } from "../contexts/AreaContext/index.f25f7180.js";
+import { styled } from "@mui/material/styles";
+import { G as GridLayout } from "./GridLayout/index.9953146d.js";
+import { a as useAreaStore } from "../hooks/useArea/index.7bdbbb79.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { b as WindowsPanel } from "./Window/index.e34225ae.js";
+import { useResponsiveDesktop } from "@m4l/graphics";
+import "./AreasAdmin/index.dbab59f1.js";
+import "react";
+import "@m4l/core";
+import "@mui/material";
+import "../../Icon/index.f6e8d810.js";
+import "../../mui_extended/IconButton/index.1318a283.js";
+import "zustand";
+import "../contexts/AreasContext/index.7406c20f.js";
+import "zustand/shallow";
+import "./AreasContainer/index.f3f921b9.js";
+import "react-grid-layout/css/styles.css";
+import "../../../react-resizable.bb58c8fc.js";
+const WrapperArea = styled("div", {
+  shouldForwardProp: (props) => props !== "isDesktop"
+})(({
+  isDesktop
+}) => ({
+  flexDirection: isDesktop ? "row" : "column-reverse",
+  flexGrow: "1",
+  position: "absolute",
+  height: "100%",
+  width: "100%",
+  overflow: "hiden",
+  justifyContent: "top",
+  alignItems: "flex-start",
+  visibility: "hidden",
+  display: "none",
+  hola: "juan",
+  "&.active": {
+    display: "flex",
+    visibility: "visible"
+  },
+  "& .M4L_GridLayout": {
+    minWidth: "100%",
+    minHeight: "100%",
+    juan: 1
+  },
+  "& .selected": {
+    borderTop: "1px solid green"
+  }
+}));
+const InnerForHooks = () => {
+  const status = useAreaStore((state) => state.status);
+  if (status === "loaded") {
+    return /* @__PURE__ */ jsx(GridLayout, {});
+  } else {
+    return /* @__PURE__ */ jsx("div", {
+      children: "Loading.. Intentar si falla."
+    });
+  }
+};
+const Area = (props) => {
+  const {
+    id,
+    active
+  } = props;
+  const isDesktop = useResponsiveDesktop();
+  return /* @__PURE__ */ jsx(WrapperArea, {
+    className: `M4L_Area_wrapper_${id} ${active ? "active" : ""}`,
+    isDesktop: !!isDesktop,
+    children: /* @__PURE__ */ jsxs(AreaProvider, {
+      ...props,
+      children: [/* @__PURE__ */ jsx(InnerForHooks, {}), /* @__PURE__ */ jsx(WindowsPanel, {})]
+    })
+  });
+};
+Area.displayName = "Area";
+export {
+  Area as A
+};

package/components/areas/contexts/AreaContext/helper.d.ts

@@ -1,10 +1,37 @@
 import { WritableDraft } from 'immer/dist/internal';
+import { Layouts } from 'react-grid-layout';
 import { HashWindowsByLayouts } from '../../components/Area/types';
 import { AreaStateWithActions } from './store';
+import { WinLayout } from './types';
+export declare const ROW_HEIGTH_GRIDLAYOUT = 100;
+export declare const CONTAINER_PADDING_GRIDLAYOUT = 3;
 export declare const DEBOUCED_SAVE_TIME = 500;
 export declare const COOKIE_BREAKPOINT_LAYOUTS = "layoutPros";
 export declare const COOKIE_WINDOWS = "windows";
+export declare const NORMALIZED_BREAKPOINTS: {
+    lg: number;
+    md: number;
+    sm: number;
+    xs: number;
+    xxs: number;
+};
+export declare const NORMALIZED_COLS: {
+    lg: number;
+    md: number;
+    sm: number;
+    xs: number;
+    xxs: number;
+};
+export declare const MAXIMIZED_COLS: {
+    lg: number;
+    md: number;
+    sm: number;
+    xs: number;
+    xxs: number;
+};
 export declare const getParmsFromValue: (key: string, data: []) => any;
+export declare function setAddBreakPoints(state: WritableDraft<AreaStateWithActions>, newLayout: WinLayout): Layouts;
+export declare function setBreakPointsMaximized(state: WritableDraft<AreaStateWithActions>, layoutId?: string): Layouts;
 export declare function getDataFromResponse(data: any, state: WritableDraft<AreaStateWithActions>): {
     newBreakPointsLayouts: any;
     newGridLayouts: any[];

package/components/areas/contexts/AreaContext/index.d.ts

@@ -1,6 +1,20 @@
 import React from 'react';
-import { AreaContextProps, AreaProviderProps, AreaProviderRef } from './types';
-declare const AreaContext: React.Context<AreaContextProps | null>;
-declare const AreaProvider: React.ForwardRefExoticComponent<Omit<AreaProviderProps, "ref"> & React.RefAttributes<AreaProviderRef>>;
-declare const MemonizedAreaProvider: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<AreaProviderProps, "ref"> & React.RefAttributes<AreaProviderRef>>>;
+import { AreaProviderProps } from './types';
+declare const AreaContext: React.Context<(Omit<Omit<import("zustand").StoreApi<import("./store").AreaStateWithActions>, "setState"> & {
+    setState<A extends string | {
+        type: unknown;
+    }>(partial: import("./store").AreaStateWithActions | Partial<import("./store").AreaStateWithActions> | ((state: import("./store").AreaStateWithActions) => import("./store").AreaStateWithActions | Partial<import("./store").AreaStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
+}, "setState"> & {
+    setState(nextStateOrUpdater: import("./store").AreaStateWithActions | Partial<import("./store").AreaStateWithActions> | ((state: import("immer/dist/internal").WritableDraft<import("./store").AreaStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
+        type: unknown;
+    } | undefined): void;
+}) | null>;
+declare const AreaProvider: {
+    (props: AreaProviderProps): JSX.Element;
+    displayName: string;
+};
+declare const MemonizedAreaProvider: React.MemoExoticComponent<{
+    (props: AreaProviderProps): JSX.Element;
+    displayName: string;
+}>;
 export { AreaProvider, AreaContext, MemonizedAreaProvider };