@m4l/components 0.2.35 → 1.0.0

package/components/popups/PopupsViewer/index.ba354267.js

@@ -0,0 +1,166 @@
+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.18669fb4.js";
+import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import { ay as COMPONENT_CLASS_NAME } from "../../areas/constants.5387d83e.js";
+import { P as POPUPS_ICONS } from "../../areas/icons.504ec098.js";
+import { d as draggableWindowClasses, D as DragResizeWindow } from "../../DragResizeWindow/index.46b380e1.js";
+import { I as Icon, a as IconButton } from "../../Icon/index.d5fed418.js";
+import { u as useSizeContainer } from "../../../hooks/useSizeContainer/index.3c48670c.js";
+import { styled } from "@mui/material/styles";
+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 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 {
+  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.cf02e6bd.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.ea9189c3.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.dc955a09.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
-}) => ({
+import { az as componentName } from "../../components/areas/constants.5387d83e.js";
+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,19 +60,15 @@ 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"];
+    }
+  ) });
 }
 export {
-  RHFormProvider as R,
-  getFormComponentsDictionary as g
+  RHFormProvider as R
 };

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.f156a2cd.js

@@ -0,0 +1,86 @@
+import { jsx } from "react/jsx-runtime";
+import { useNetwork, useFlagsStore, useModuleDictionary } from "@m4l/core";
+import { useState, useEffect } from "react";
+import { u as useModal } from "../useModal/index.ef54bcf2.js";
+import { W as WindowConfirm } from "../../components/modal/WindowConfirm.e35da619.js";
+function useFormAddEdit(props) {
+  const {
+    initialValues,
+    objectId,
+    endPoint,
+    formatDataEnpoint,
+    queryParamas,
+    isRemote = true,
+    omitCallEnpoint = false
+  } = props;
+  const { openModal } = useModal();
+  const [formValues, setFormValues] = useState(initialValues);
+  const [statusLoad, setStatusLoad] = useState(
+    objectId === void 0 ? "new" : "edit"
+  );
+  const { networkOperation } = useNetwork();
+  const addFlag = useFlagsStore((state) => state.flagsActions.addFlag);
+  const { getLabel } = useModuleDictionary();
+  const setRefresh = () => {
+    if (statusLoad === "ready") {
+      setStatusLoad("edit");
+    }
+  };
+  useEffect(() => {
+    let mounted = true;
+    if (statusLoad === "edit") {
+      if (omitCallEnpoint) {
+        addFlag("form_loaded");
+        setStatusLoad("ready");
+        return;
+      }
+      networkOperation({
+        method: "GET",
+        endPoint: queryParamas ? `${endPoint}/${objectId}?${queryParamas}` : `${endPoint}/${objectId}`,
+        isRemote
+      }).then(
+        (response) => {
+          if (mounted) {
+            if (formatDataEnpoint) {
+              setFormValues(formatDataEnpoint(response));
+            } else {
+              setFormValues(response.data);
+            }
+            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");
+        }
+      );
+    } else if (statusLoad === "new" || statusLoad === "reload_values_provider") {
+      addFlag("form_loaded");
+      setStatusLoad("ready");
+    }
+    return () => {
+      mounted = false;
+    };
+  }, [statusLoad]);
+  useEffect(() => {
+    if (statusLoad === "ready" && objectId !== void 0) {
+      setStatusLoad("edit");
+    }
+  }, [objectId]);
+  return { formValues, statusLoad, setRefresh };
+}
+export {
+  useFormAddEdit as u
+};

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.ef54bcf2.js

@@ -0,0 +1,66 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useModuleDictionary, useEnvironment } from "@m4l/core";
+import { useIsMobile } from "@m4l/graphics";
+import { useContext, useRef, useCallback } from "react";
+import { t as useDataGrid, v as DataGridRoot, w as ColumnsConfig, d as Actions, e as ActionCancel, f as ActionIntro } from "../../vendor.a1ce6777.js";
+import { M as ModalContext } from "../../contexts/ModalContext/index.cf02e6bd.js";
+import { W as WindowBase } from "../../components/modal/WindowBase.a3ac7adc.js";
+function useModal() {
+  const context = useContext(ModalContext);
+  if (!context)
+    throw new Error("useModal context must be use inside ModalContext");
+  return context;
+}
+const useModalSettings = () => {
+  const { openModal, closeModal } = useModal();
+  const { columnsConfig, onChangeColumnsConfig } = useDataGrid();
+  const { getLabel } = useModuleDictionary();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const isMobile = useIsMobile();
+  const { classes } = useDataGrid();
+  const ref = useRef(null);
+  const onCloseSettings = useCallback(() => {
+    closeModal();
+  }, [closeModal]);
+  const onClickIntro = useCallback(() => {
+    if (ref.current?.onClickIntro) {
+      ref.current.onClickIntro();
+    }
+  }, []);
+  const onClickSettings = () => {
+    openModal({
+      initialWidth: 500,
+      initialHeigth: 680,
+      fullScreen: isMobile,
+      window: /* @__PURE__ */ jsxs(
+        WindowBase,
+        {
+          title: getLabel("data_grid.settings_title"),
+          urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/configuration.svg`,
+          children: [
+            /* @__PURE__ */ jsx(DataGridRoot, { className: classes.root, children: /* @__PURE__ */ jsx("div", { className: classes.tableContaniner, style: { inset: "0" }, children: /* @__PURE__ */ jsx("div", { className: classes.wrapperDataGridCss, children: /* @__PURE__ */ jsx(
+              ColumnsConfig,
+              {
+                ref,
+                columnsConfig,
+                onChangeColumnsConfig,
+                onCloseSettings,
+                classes
+              }
+            ) }) }) }),
+            /* @__PURE__ */ jsxs(Actions, { children: [
+              /* @__PURE__ */ jsx(ActionCancel, { onClick: closeModal }),
+              /* @__PURE__ */ jsx(ActionIntro, { onClick: onClickIntro })
+            ] })
+          ]
+        }
+      )
+    });
+  };
+  return onClickSettings;
+};
+const useModalSettings$1 = useModalSettings;
+export {
+  useModalSettings$1 as a,
+  useModal as u
+};

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.bce8b99e.js}

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

package/index.d.ts

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