@m4l/components 0.2.35 → 0.2.36

package/components/popups/PopupsViewer/index.813854e4.js

@@ -0,0 +1,171 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { TransitionGroup, CSSTransition } from "react-transition-group";
+import { shallow } from "zustand/shallow";
+import { useState, useRef } from "react";
+import clsx from "clsx";
+import { useEnvironment } from "@m4l/core";
+import { u as usePopupsStore } from "../PopupsProvider/index.8fb6232a.js";
+import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import { d as draggableWindowClasses, D as DragResizeWindow } from "../../DragResizeWindow/index.a9f25040.js";
+import { I as Icon } from "../../Icon/index.ee7b85c9.js";
+import { I as IconButton } from "../../mui_extended/IconButton/index.b0ee4965.js";
+import { u as useSizeContainer } from "../../../hooks/useSizeContainer/index.3c48670c.js";
+import { styled } from "@mui/material/styles";
+const COMPONENT_CLASS_NAME = "M4LPopupsViewer";
+const MAP_ZINDEX_OVER_MAP = 1100;
+const popupsClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
+  "containerRoot",
+  "popupRoot",
+  "popupHeaderContainer",
+  "popupHeaderTitle",
+  "popupHeaderSubTitle",
+  "popupContent",
+  "popupHidden",
+  "popupWithSubTitle"
+]);
+function getPopupsUtilityClass(slot) {
+  return generateUtilityClass(COMPONENT_CLASS_NAME, slot);
+}
+const popupsUtilityClasses = (_ownerState) => {
+  const slots = {
+    containerRoot: ["containerRoot"],
+    popupsContainer: ["popupsContainer"],
+    popupRoot: ["popupRoot"],
+    popupHeaderContainer: ["popupHeaderContainer"],
+    popupHeaderTitle: ["popupHeaderTitle"],
+    popupHeaderSubTitle: ["popupHeaderSubTitle"],
+    popupContent: ["popupContent"],
+    popupHidden: ["popupHidden"],
+    popupWithSubTitle: ["popupWithSubTitle"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getPopupsUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const POPUPS_ICONS = {
+  CLOSE: "close.svg"
+};
+const Header = (props) => {
+  const { popupId } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const popup = usePopupsStore((state) => state.hashPopups[popupId], shallow);
+  usePopupsStore((state) => state.popupsActions, shallow);
+  const { iconUrl } = popup || {};
+  const [, setInProp] = useState(false);
+  const onClose = () => {
+    setInProp((l) => !l);
+  };
+  if (!popup) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(popupsClasses.popupHeaderContainer, draggableWindowClasses.draggableHandle),
+      children: [
+        /* @__PURE__ */ jsx(Icon, { src: iconUrl, size: "small" }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: clsx(
+              popupsClasses.popupHeaderTitle,
+              popup.subTitle ? popupsClasses.popupWithSubTitle : null
+            ),
+            children: popup.title
+          }
+        ),
+        popup.subTitle && /* @__PURE__ */ jsx("span", { className: popupsClasses.popupHeaderSubTitle, children: popup.subTitle }),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            className: draggableWindowClasses.draggableCancel,
+            onClick: onClose,
+            "aria-label": "click",
+            src: `${host_static_assets}/${environment_assets}/frontend/commons/assets/icons/${POPUPS_ICONS.CLOSE}`
+          }
+        )
+      ]
+    }
+  );
+};
+const Popup = (props) => {
+  const { popupId, containerElement, containerSize } = props;
+  const popup = usePopupsStore((state) => state.hashPopups[popupId], shallow);
+  const { draggable = true, resizable = true, defaultPosition, bounds, ...others } = popup || {};
+  const nodeRef = useRef(null);
+  if (!popup) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    DragResizeWindow,
+    {
+      ref: nodeRef,
+      className: clsx(
+        popupsClasses.popupRoot,
+        popup.status === "hidden" && popupsClasses.popupHidden
+      ),
+      onMouseDown: popup?.onMouseDown,
+      containerElement,
+      containerSize,
+      bounds,
+      draggable,
+      resizeable: resizable,
+      defaultPosition,
+      ...others,
+      children: [
+        /* @__PURE__ */ jsx(Header, { popupId: popup.popupId }),
+        /* @__PURE__ */ jsx("div", { className: popupsClasses.popupContent, children: popup.functionComponent && popup.functionComponent({ ...popup.componentProps }) })
+      ]
+    }
+  );
+};
+const PopupsViewerRoot = styled("div")`
+  ${(props) => props.theme.components?.M4LPopupsViewer?.styleOverrides}
+`;
+const PopupsViewer = (props) => {
+  const { containerElement } = props;
+  const popupsIds = usePopupsStore(
+    (state) => state.popupsIds.filter((pId) => state.hashPopups[pId].status !== "closing"),
+    shallow
+  );
+  const { removePopup } = usePopupsStore((state) => state.popupsActions, shallow);
+  const containerSize = useSizeContainer(containerElement);
+  if (!containerElement) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(PopupsViewerRoot, { className: popupsClasses.containerRoot, children: /* @__PURE__ */ jsx(TransitionGroup, { children: popupsIds.map((id) => {
+    return /* @__PURE__ */ jsx(
+      CSSTransition,
+      {
+        in: true,
+        timeout: {
+          appear: 500,
+          enter: 300,
+          exit: 1300
+        },
+        unmountOnExit: true,
+        onExited: () => {
+          removePopup(id);
+        },
+        classNames: "popup-fade",
+        children: /* @__PURE__ */ jsx(
+          Popup,
+          {
+            popupId: id,
+            containerElement,
+            containerSize
+          },
+          id
+        )
+      },
+      id
+    );
+  }) }) });
+};
+export {
+  MAP_ZINDEX_OVER_MAP as M,
+  PopupsViewer as P,
+  popupsUtilityClasses as p
+};

package/components/popups/components/PopupsProvider/contexts/PopupsContext/types.d.ts

@@ -15,19 +15,19 @@ export interface PopupStoreProps extends Pick<DraggableWindowProps, 'bounds' | '
     status: PopupStatus;
     /**
      * "iconUrl" Icono de la ventan
-    */
+     */
     iconUrl: string;
     /**
      * "title" Titulo de la ventan
-    */
+     */
     title: string;
     /**
      * "subTitle" Subtitulo de la ventan
-    */
+     */
     subTitle?: string;
     /**
      * "editionInfo" Mensaje que muestra el registro que se está editando.
-    */
+     */
     editionInfo?: string;
     /**
      * draggable Indica si el popup es arrastrable, default true

package/components/popups/components/PopupsViewer/classes/types.d.ts

@@ -1,4 +1,4 @@
-import { popupsUtilityClasses } from ".";
+import { popupsUtilityClasses } from '.';
 export interface PopupsClasses {
     containerRoot: string;
     popupRoot: string;

package/components/popups/components/PopupsViewer/styled.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const PopupsViewerRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/popups/components/PopupsViewer/subcomponents/Popup/types.d.ts

@@ -1,4 +1,4 @@
-import { ContainerSize } from "../../../../../../utils/types";
+import { ContainerSize } from '../../../../../../utils/types';
 export declare type ResizeReason = 'start' | 'resize' | 'stop';
 export interface PopupProps {
     /**

package/contexts/ModalContext/{index.2368bb19.js → index.45c275cd.js}

@@ -1,17 +1,13 @@
-import { createContext, useState } from "react";
-import { M as ModalDialog } from "../../components/ModalDialog/index.78c9650a.js";
 import { jsxs, jsx } from "react/jsx-runtime";
+import { createContext, useState } from "react";
+import { M as ModalDialog } from "../../components/ModalDialog/index.42349189.js";
 const ModalContext = createContext(null);
-function ModalProvider({
-  children
-}) {
+function ModalProvider({ children }) {
   const [modalOptions, setModalOptions] = useState({
     open: false,
     fullScreen: false
   });
-  console.log("modalOptions", modalOptions);
   const openModal = (modalOpenProps) => {
-    console.log("Value modal props", modalOpenProps);
     setModalOptions({
       open: true,
       initialWidth: 300,
@@ -20,19 +16,22 @@ function ModalProvider({
     });
   };
   const closeModal = () => {
-    setModalOptions((last) => ({
-      ...last,
-      open: false
-    }));
+    setModalOptions((last) => ({ ...last, open: false }));
   };
-  return /* @__PURE__ */ jsxs(ModalContext.Provider, {
-    value: {
-      ...modalOptions,
-      openModal,
-      closeModal
-    },
-    children: [children, /* @__PURE__ */ jsx(ModalDialog, {})]
-  });
+  return /* @__PURE__ */ jsxs(
+    ModalContext.Provider,
+    {
+      value: {
+        ...modalOptions,
+        openModal,
+        closeModal
+      },
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ModalDialog, {})
+      ]
+    }
+  );
 }
 export {
   ModalContext as M,

package/contexts/RHFormContext/classes/types.d.ts

@@ -1,4 +1,4 @@
-import { RHFormProviderUtilityClasses } from ".";
+import { RHFormProviderUtilityClasses } from '.';
 export interface RHFormProivderClassesType {
     root: string;
 }

package/contexts/RHFormContext/{index.7b2a8723.js → index.bf3a2812.js}

@@ -1,19 +1,20 @@
+import { jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
 import clsx from "clsx";
 import { useForm, FormProvider } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { styled, generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { jsx } from "react/jsx-runtime";
-const FormProviderRoot = styled("form")(({
-  theme
-}) => ({
+const FormProviderRoot = styled("form")(({ theme }) => ({
   ...theme.components?.M4LRHFormProvider?.styleOverrides
 }));
 const componentName = "M4LRHFormProvider";
-generateUtilityClasses(componentName, [
-  "root"
-]);
+generateUtilityClasses(
+  componentName,
+  [
+    "root"
+  ]
+);
 function getRHFormProviderUtilityClass(slot) {
   return generateUtilityClass(componentName, slot);
 }
@@ -31,14 +32,7 @@ const RHFormProviderUtilityClasses = () => {
 };
 const classes = RHFormProviderUtilityClasses();
 function RHFormProvider(props) {
-  const {
-    children,
-    onSubmit,
-    values,
-    validationSchema,
-    statusLoad = "ready",
-    className
-  } = props;
+  const { children, onSubmit, values, validationSchema, statusLoad = "ready", className } = props;
   const methods = useForm({
     resolver: yupResolver(validationSchema),
     defaultValues: values
@@ -66,14 +60,14 @@ function RHFormProvider(props) {
       });
     }
   }, [statusLoad]);
-  return /* @__PURE__ */ jsx(FormProvider, {
-    ...methods,
-    children: /* @__PURE__ */ jsx(FormProviderRoot, {
+  return /* @__PURE__ */ jsx(FormProvider, { ...methods, children: /* @__PURE__ */ jsx(
+    FormProviderRoot,
+    {
       className: clsx(classes.root, className),
       onSubmit: methods.handleSubmit(onSubmit),
       children
-    })
-  });
+    }
+  ) });
 }
 function getFormComponentsDictionary() {
   return ["form_provider"];

package/contexts/RHFormContext/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const FormProviderRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, {}>;

package/hocs/index.d.ts

@@ -0,0 +1 @@
+export { withToggle } from './withToggle';

package/hocs/withToggle/{index.50aec5e4.js → index.548aeace.js}

@@ -1,20 +1,12 @@
-import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
 function withToggle(Component) {
   return (props) => {
-    const {
-      isToggled: propIsToggled,
-      onToggle: propOnToggle,
-      ...rest
-    } = props;
+    const { isToggled: propIsToggled, onToggle: propOnToggle, ...rest } = props;
     const [internalIsToggled, setInternalIsToggled] = useState(props.defaultIsPressed || false);
     const isToggled = propIsToggled !== void 0 ? propIsToggled : internalIsToggled;
     const onToggle = propOnToggle !== void 0 ? propOnToggle : () => setInternalIsToggled((prev) => !prev);
-    return /* @__PURE__ */ jsx(Component, {
-      ...rest,
-      onToggle,
-      isToggled
-    });
+    return /* @__PURE__ */ jsx(Component, { ...rest, onToggle, isToggled });
   };
 }
 export {

package/hooks/useFormAddEdit/{index.000ce60b.js → index.9b27ca02.js}

@@ -1,8 +1,8 @@
+import { jsx } from "react/jsx-runtime";
 import { useNetwork, useFlags, useModuleDictionary } from "@m4l/core";
 import { useState, useEffect } from "react";
-import { u as useModal } from "../useModal/index.f73d7e42.js";
-import { jsx } from "react/jsx-runtime";
-import { W as WindowConfirm } from "../../components/modal/WindowConfirm.ee6de236.js";
+import { u as useModal } from "../useModal/index.30674bb7.js";
+import { W as WindowConfirm } from "../../components/modal/WindowConfirm.48140481.js";
 function useFormAddEdit(props) {
   const {
     initialValues,
@@ -13,20 +13,14 @@ function useFormAddEdit(props) {
     isRemote = true,
     omitCallEnpoint = false
   } = props;
-  const {
-    openModal
-  } = useModal();
+  const { openModal } = useModal();
   const [formValues, setFormValues] = useState(initialValues);
-  const [statusLoad, setStatusLoad] = useState(objectId === void 0 ? "new" : "edit");
-  const {
-    networkOperation
-  } = useNetwork();
-  const {
-    addFlag
-  } = useFlags();
-  const {
-    getLabel
-  } = useModuleDictionary();
+  const [statusLoad, setStatusLoad] = useState(
+    objectId === void 0 ? "new" : "edit"
+  );
+  const { networkOperation } = useNetwork();
+  const { addFlag } = useFlags();
+  const { getLabel } = useModuleDictionary();
   const setRefresh = () => {
     if (statusLoad === "ready") {
       setStatusLoad("edit");
@@ -44,28 +38,34 @@ function useFormAddEdit(props) {
         method: "GET",
         endPoint: queryParamas ? `${endPoint}/${objectId}?${queryParamas}` : `${endPoint}/${objectId}`,
         isRemote
-      }).then((response) => {
-        if (mounted) {
-          if (formatDataEnpoint) {
-            setFormValues(formatDataEnpoint(response));
-          } else {
-            setFormValues(response.data);
+      }).then(
+        (response) => {
+          if (mounted) {
+            if (formatDataEnpoint) {
+              setFormValues(formatDataEnpoint(response));
+            } else {
+              setFormValues(response.data);
+            }
+            setStatusLoad("reload_values_provider");
           }
-          setStatusLoad("reload_values_provider");
+        },
+        () => {
+          setStatusLoad("error");
+          openModal({
+            window: /* @__PURE__ */ jsx(
+              WindowConfirm,
+              {
+                variant: "delete",
+                title: getLabel("form_add_edit.label_error_title"),
+                msg: getLabel("form_add_edit.error_authorization_message"),
+                onClickIntro: () => close()
+              }
+            ),
+            variant: "delete"
+          });
+          addFlag("form_loaded");
         }
-      }, () => {
-        setStatusLoad("error");
-        openModal({
-          window: /* @__PURE__ */ jsx(WindowConfirm, {
-            variant: "delete",
-            title: getLabel("form_add_edit.label_error_title"),
-            msg: getLabel("form_add_edit.error_authorization_message"),
-            onClickIntro: () => close()
-          }),
-          variant: "delete"
-        });
-        addFlag("form_loaded");
-      });
+      );
     } else if (statusLoad === "new" || statusLoad === "reload_values_provider") {
       addFlag("form_loaded");
       setStatusLoad("ready");
@@ -79,11 +79,7 @@ function useFormAddEdit(props) {
       setStatusLoad("edit");
     }
   }, [objectId]);
-  return {
-    formValues,
-    statusLoad,
-    setRefresh
-  };
+  return { formValues, statusLoad, setRefresh };
 }
 const getformAddEditDictionary = () => {
   return "form_add_edit";

package/hooks/useFormFocus/index.d.ts

@@ -1,7 +1,7 @@
-import { FormFocusHookReturnType } from "./types";
+import { FormFocusHookReturnType } from './types';
 /**
  * useFormFocus: Custom hook creado para facilitar el manejo de estado de interacción de usuario para los
  * componentes de formulario. Aporta los estados Focus, TabSelected y
  *
-*/
+ */
 export declare const useFormFocus: <ElmentType extends HTMLElement>() => FormFocusHookReturnType<ElmentType>;

package/hooks/useFormFocus/types.d.ts

@@ -1,4 +1,4 @@
-import { KeyboardEvent } from "react";
+import { KeyboardEvent } from 'react';
 export interface FormFocusHookReturnType<ElementType extends HTMLElement> {
     isFocus: boolean;
     isTabSelected: boolean;

package/hooks/useModal/{index.f73d7e42.js → index.30674bb7.js}

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { M as ModalContext } from "../../contexts/ModalContext/index.2368bb19.js";
+import { M as ModalContext } from "../../contexts/ModalContext/index.45c275cd.js";
 function useModal() {
   const context = useContext(ModalContext);
   if (!context)

package/hooks/useSizeContainer/{index.62b4e0c4.js → index.3c48670c.js}

@@ -12,7 +12,7 @@ function useSizeContainer(containerElement) {
       trailing: true
     });
     const resizeObserver = new ResizeObserver((entries) => {
-      for (let entry of entries) {
+      for (const entry of entries) {
         throttleResize({
           containerWidth: entry.contentRect.width,
           containerHeight: entry.contentRect.height

package/hooks/useTab/{index.976d5e1e.js → index.f7973779.js}

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { d as TabContext } from "../../components/mui_extended/Tab/index.9214d9cc.js";
+import { d as TabContext } from "../../components/mui_extended/Tab/index.c5ad86e2.js";
 const useTab = () => {
   const context = useContext(TabContext);
   if (context === null) {

package/index.d.ts

@@ -1,5 +1,6 @@
 export * from './components';
 export * from './contexts';
 export * from './hooks';
-export { Logo } from './assets/Logo';
 export * from './@types/export.d';
+export * from './@types/types.d';
+export { Logo } from './assets/Logo';