@m4l/components 0.2.13 → 0.2.15

package/@types/export.d.ts

@@ -83,7 +83,7 @@ declare module '@mui/material/styles' {
         M4LErrorLabel: HelperTextProps;
         M4LTypography: TypographyProps;
         M4LButton: ExtendButtonProps;
-        M4LLoadingButton: MuiLabLoadingButtonProps;
+        M4LoadingButton: MuiLabLoadingButtonProps;
         M4LNavLink: NavLinkProps;
         M4LSideBar: SideBarProps;
         M4LAppBar: AppBarProps;
@@ -118,7 +118,7 @@ declare module '@mui/material/styles' {
         // M4LErrorLabel: ErrorLabelClassesKey;
         // M4LTypography: TypographyClassesKey;
         // M4LButton: ButtonBaseClassKey;
-        // M4LLoadingButton: LoadingbuttonClassesKey;
+        // M4LoadingButton: LoadingbuttonClassesKey;
         // M4LNavLink: ButtonBaseClassKey;
         // M4LSideBar: SideBarClassesKey;
         // M4LAppBar: AppBarClassesKey;
@@ -167,6 +167,9 @@ declare module '@mui/material/styles' {
         M4LAreasAdmin?: {
             styleOverrides?: ComponentsOverrides<Theme>['M4LAreasAdmin'];
         };
+        M4LDragResizeWindow?: {
+            styleOverrides?: ComponentsOverrides<Theme>['M4LDragResizeWindow'];
+        };
         M4LDynamicFilter?: {
             styleOverrides?: ComponentsOverrides<Theme>['M4LDynamicFilter'];
         };
@@ -221,12 +224,6 @@ declare module '@mui/material/styles' {
         M4LRHFCheckbox?: {
             styleOverrides?: ComponentsOverrides<Theme>['M4LRHFCheckbox'];
         };
-        M4LRHFColorPicker?: {
-            styleOverrides?: ComponentsOverrides<Theme>['M4LRHFColorPicker'];
-        };
-        M4LRHFColorPickerPopoverRoot?: {
-            styleOverrides?: ComponentsOverrides<Theme>['M4LRHFColorPickerPopoverRoot'];
-        };
         M4LCheckBox?: {
             styleOverrides?: ComponentsOverrides<Theme>['M4LCheckBox'];
         };
@@ -248,8 +245,8 @@ declare module '@mui/material/styles' {
         M4LButton?: {
             styleOverrides?: ComponentsOverrides<Theme>['M4LButton'];
         };
-        M4LLoadingButton?: {
-            styleOverrides?: ComponentsOverrides<Theme>['M4LLoadingButton'];
+        M4LoadingButton?: {
+            styleOverrides?: ComponentsOverrides<Theme>['M4LoadingButton'];
         };
         M4LNavLink?: {
             styleOverrides?: ComponentsOverrides<Theme>['M4LNavLink'];
@@ -382,12 +379,6 @@ declare module '@mui/material/styles' {
         M4LMFLoader?: {
             styleOverrides?: ComponentsOverrides<Theme>['M4LMFLoader'];
         };
-        M4LToastContainer?: {
-            styleOverrides?: ComponentsOverrides<Theme>['M4LToastContainer'];
-        };
-        M4LPDFViewer?: {
-            styleOverrides?: ComponentsOverrides<Theme>['M4LPDFViewer'];
-        };
         
     }
 }

package/{commonjs.333e55c7.js → commonjs.565e6834.js}

@@ -2,11 +2,6 @@ import "react";
 import "prop-types";
 import "react-dom";
 import "clsx";
-import "lodash/isString";
-import "lodash/forOwn";
-import "lodash/isPlainObject";
-import "lodash/map";
-import "lodash/cloneDeep";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;

package/components/AccountPopover/index.d.ts

@@ -1,3 +1,2 @@
 export { AccountPopover } from './AccountPopover';
 export { getAccountPopoverDictionary } from './dictionary';
-export type { RightMenuData } from './types';

package/components/AccountPopover/{index.7060320a.js → index.da84c424.js}

@@ -1,30 +1,14 @@
 import { useEnvironment, useModuleDictionary, useNetwork } from "@m4l/core";
 import { useState, useEffect } from "react";
-import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
 import { generateUtilityClasses, generateUtilityClass, styled, useTheme, ButtonBase } from "@mui/material";
-import { I as Icon } from "../Icon/index.e215d0f0.js";
+import { unstable_composeClasses } from "@mui/base";
+import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import "../mui_extended/IconButton/index.5afe56b7.js";
-import clsx from "clsx";
-import "@m4l/graphics";
-import "../mui_extended/Accordion/index.3087f40e.js";
-import "../mui_extended/Typography/index.443590d6.js";
 import { A as Avatar } from "../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 { C as CircularProgress } from "../mui_extended/CircularProgress/index.ad569afd.js";
-import "../mui_extended/Badge/index.b09524fe.js";
-import "../Image/index.d684bdf2.js";
-import "@mui/lab";
-import "../mui_extended/MenuActions/index.cc54c35c.js";
-import { P as Popover } from "../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 { unstable_composeClasses } from "@mui/base";
+import { P as Popover } from "../mui_extended/Popover/index.b3eca6b1.js";
+import { I as Icon } from "../Icon/index.aa9949f0.js";
+import clsx from "clsx";
 const componentName = "M4LAccountPopover";
 generateUtilityClasses(componentName, [
   "root",
@@ -73,7 +57,9 @@ const useAccountPopoverUtilityClasses = () => {
     ...composedClasses
   };
 };
-const AcountPopOverRoot = styled("div")(({ theme }) => ({
+const AcountPopOverRoot = styled("div")(({
+  theme
+}) => ({
   ...theme.components?.M4LAccountPopover?.styleOverrides
 }));
 function MyAvatar(props) {
@@ -113,6 +99,7 @@ const MenuPopOver = (props) => {
     host_static_assets,
     environment_assets
   } = useEnvironment();
+  console.log("MenuPopOver", data);
   const {
     avatar_url,
     first_name,
@@ -134,6 +121,8 @@ const MenuPopOver = (props) => {
   const handleOpen = (event) => {
     setOpen(event.currentTarget);
   };
+  const dataIsArray = Array.isArray(data) && data.length > 0;
+  console.log("dataIsArray", dataIsArray);
   return /* @__PURE__ */ jsxs("div", {
     role: "presentation",
     className: classes.containerAvatarPopover,
@@ -292,6 +281,7 @@ const AccountPopover = (props) => {
     };
   }, [open]);
   const accountPopoverClasses = useAccountPopoverUtilityClasses();
+  console.log("user data", userData);
   return /* @__PURE__ */ jsx(AcountPopOverRoot, {
     className: clsx(accountPopoverClasses.root, className),
     ...process.env.NODE_ENV !== "production" ? {

package/components/AppBar/AppBar.d.ts

@@ -1,26 +1,2 @@
 import { AppBarProps } from './types';
-/**
- * Componente de la interfaz de usuario que se encuentra en la parte superior de una aplicación móvil o de escritorio. Por lo general, contiene elementos de navegación, como botones para ir hacia atrás o hacia adelante, un botón de menú para acceder a opciones adicionales y un campo de búsqueda. También puede mostrar información relevante, como el título de la página actual o el nombre del usuario conectado.
- *
- * @param {AppBarProps} props - Propiedades del componente.
- * @returns {JSX.Element} Elemento que se retorna.
- *
- * @example
- *
- * // Ejemplo de uso:
- *
- * <AppBar onToggleVisible={onToggleVisible}>
-    <AreasAdmin />
-    <div style={{display: 'flex', gap: '10px', alignItems: 'center'}}>
-        <LanguagePopover />
-        <AccountPopover
-            itemHandleClick={itemHandleClick}
-            handleLogOut={handleLogOut}
-            version={APP_VERSION}
-            userData={user}
-            settingsHandleOpen={handleOpen}
-        />
-    </div>
-    </AppBar>
- */
 export declare const AppBar: (props: AppBarProps) => import("react/jsx-runtime").JSX.Element;

package/components/AppBar/classes/index.d.ts

@@ -6,6 +6,4 @@ export declare const useAppBarUtilityClasses: () => {
     containerChilds: string;
     containerIconMenuToggle: string;
     iconMenuToggle: string;
-    containerLogo: string;
-    containerImageTypography: string;
 };

package/components/AppBar/classes/types.d.ts

@@ -4,8 +4,6 @@ export interface AppBarClassesType {
     containerChilds: string;
     containerIconMenuToggle: string;
     iconMenuToggle: string;
-    containerLogo: string;
-    containerImageTypography: string;
 }
 export declare type AppBarClassesKey = keyof AppBarClassesType;
 export declare type Classes = ReturnType<typeof useAppBarUtilityClasses>;

package/components/AppBar/{index.c8e7b25c.js → index.46f2db0a.js}

@@ -1,30 +1,11 @@
+import { styled } from "@mui/material/styles";
 import { useResponsiveDesktop } from "@m4l/graphics";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
 import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import { I as IconButton } from "../mui_extended/IconButton/index.5afe56b7.js";
-import "../mui_extended/Accordion/index.3087f40e.js";
-import "../Icon/index.e215d0f0.js";
-import "react";
-import "clsx";
-import { jsxs, jsx } from "react/jsx-runtime";
-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 { I as Image } from "../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 { styled } from "@mui/material/styles";
 import { unstable_composeClasses } from "@mui/base";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { I as IconButton } from "../mui_extended/IconButton/index.b705c196.js";
 const AppBarRoot = styled("header")(({
   theme
 }) => ({
@@ -39,9 +20,7 @@ generateUtilityClasses(componentName, [
   "root",
   "containerChilds",
   "containerIconMenuToggle",
-  "iconMenuToggle",
-  "containerLogo",
-  "containerImageTypography"
+  "iconMenuToggle"
 ]);
 function getAppBarClassesUtilityClass(slot) {
   return generateUtilityClass(componentName, slot);
@@ -51,9 +30,7 @@ const useAppBarUtilityClasses = () => {
     root: ["root"],
     containerChilds: ["containerChilds"],
     containerIconMenuToggle: ["containerIconMenuToggle"],
-    iconMenuToggle: ["iconMenuToggle"],
-    containerLogo: ["containerLogo"],
-    containerImageTypography: ["containerImageTypography"]
+    iconMenuToggle: ["iconMenuToggle"]
   };
   const composedClasses = unstable_composeClasses(slots, getAppBarClassesUtilityClass, {});
   return {
@@ -63,9 +40,7 @@ const useAppBarUtilityClasses = () => {
 const AppBar = (props) => {
   const {
     onToggleVisible,
-    children,
-    companyLogo,
-    companyName
+    children
   } = props;
   const isDesktop = useResponsiveDesktop();
   const {
@@ -81,20 +56,7 @@ const AppBar = (props) => {
     ...process.env.NODE_ENV !== "production" ? {
       [TEST_PROP_ID]: getNameDataTestId("root")
     } : {},
-    children: [companyLogo && isDesktop ? /* @__PURE__ */ jsx("div", {
-      className: classes.containerLogo,
-      children: /* @__PURE__ */ jsxs("div", {
-        className: classes.containerImageTypography,
-        children: [/* @__PURE__ */ jsx(Image, {
-          src: companyLogo,
-          alt: "logo"
-        }, "Logo"), /* @__PURE__ */ jsx(Typography, {
-          variant: "bodyDens",
-          skeletonWidth: "100px",
-          children: companyName
-        })]
-      })
-    }) : null, !isDesktop ? /* @__PURE__ */ jsx("div", {
+    children: [!isDesktop ? /* @__PURE__ */ jsx("div", {
       className: classes.containerIconMenuToggle,
       ...process.env.NODE_ENV !== "production" ? {
         [TEST_PROP_ID]: getNameDataTestId("containerIconMenuToggle")

package/components/AppBar/types.d.ts

@@ -5,20 +5,6 @@ export declare type RootStyleProps = {
     isSideBarVisible: boolean;
 };
 export interface AppBarProps {
-    /**
-    * Función que activa la visualización del menú de la aplicación en la vista móvil.
-    */
     onToggleVisible: VoidFunction;
-    /**
-    * Puede ser cualquier cosa, desde un solo elemento hasta un array de elementos. Los elementos secundarios pueden ser componentes de React, elementos HTML, o incluso otros tipos de datos, como cadenas o números.
-    */
     children: ReactNode;
-    /**
-    * companyLogo: Enlace de acceso para el recurso gráfico de logo.
-    */
-    companyLogo?: string;
-    /**
-    * companyName: Nombre de la compañía
-    */
-    companyName?: string;
 }

package/components/CommonActions/components/ActionCancel/{index.82313aef.js → index.06365996.js}

@@ -1,6 +1,6 @@
 import { useModuleDictionary } from "@m4l/core";
-import { B as Button } from "../../../mui_extended/Button/index.0f2552ed.js";
-import { u as useCommonActionsUtilityClasses } from "../Actions/index.93e9112b.js";
+import { B as Button } from "../../../mui_extended/Button/index.007f5a6e.js";
+import { u as useCommonActionsUtilityClasses } from "../Actions/index.8368ac0f.js";
 import { jsx } from "react/jsx-runtime";
 const ActionCancel = (props) => {
   const {

package/components/CommonActions/components/ActionFormCancel/index.2c1fff45.js

@@ -0,0 +1,70 @@
+import { useFormContext, useFormState } from "react-hook-form";
+import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
+import { Skeleton } from "@mui/material";
+import { B as Button } from "../../../mui_extended/Button/index.007f5a6e.js";
+import { useCallback, useEffect } from "react";
+import { u as useModal } from "../../../../hooks/useModal/index.acc61361.js";
+import { u as useCommonActionsUtilityClasses } from "../Actions/index.8368ac0f.js";
+import { jsx } from "react/jsx-runtime";
+import { u as useWindowToolsMF } from "../../../areas/hooks/useWindowToolsMF/index.b7afaf88.js";
+import { W as WindowConfirm } from "../../../modal/WindowConfirm.7a79bfa5.js";
+function ActionFormCancel() {
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const isSkeleton = useModuleSkeleton();
+  const {
+    openModal
+  } = useModal();
+  const {
+    close: closeWindow,
+    setFnQueryClose: setQueryClose
+  } = useWindowToolsMF();
+  const {
+    control
+  } = useFormContext();
+  const {
+    isDirty
+  } = useFormState({
+    control
+  });
+  const onConfirmQuit = useCallback(() => {
+    closeWindow();
+  }, []);
+  const onClickCancel = useCallback(() => {
+    if (isDirty) {
+      openModal({
+        window: /* @__PURE__ */ jsx(WindowConfirm, {
+          variant: "warning",
+          title: getLabel("common_actions.confirm_quit_title"),
+          msg: getLabel("common_actions.confirm_quit_msg"),
+          onClickIntro: onConfirmQuit
+        }),
+        variant: "warning"
+      });
+    } else {
+      onConfirmQuit();
+    }
+  }, [getLabel, isDirty, openModal]);
+  useEffect(() => {
+    setQueryClose(onClickCancel);
+  }, [onClickCancel]);
+  const classes = useCommonActionsUtilityClasses();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(Skeleton, {
+      variant: "text",
+      width: 57,
+      height: 30
+    });
+  }
+  return /* @__PURE__ */ jsx(Button, {
+    variant: "outlined",
+    color: "inherit",
+    onClick: onClickCancel,
+    className: classes.actionFormCancel,
+    children: getLabel("common_actions.cancel")
+  });
+}
+export {
+  ActionFormCancel as A
+};

package/components/CommonActions/components/ActionFormIntro/{index.29891df9.js → index.885f49af.js}

@@ -1,8 +1,8 @@
 import { useFormContext, useFormState } from "react-hook-form";
 import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { Skeleton } from "@mui/material";
-import { L as LoadingButton } from "../../../mui_extended/Button/index.0f2552ed.js";
-import { u as useCommonActionsUtilityClasses } from "../Actions/index.93e9112b.js";
+import { L as LoadingButton } from "../../../mui_extended/Button/index.007f5a6e.js";
+import { u as useCommonActionsUtilityClasses } from "../Actions/index.8368ac0f.js";
 import { jsx } from "react/jsx-runtime";
 function ActionFormIntro(props) {
   const {

package/components/CommonActions/components/ActionIntro/{index.c70ae272.js → index.b97cfeec.js}

@@ -1,7 +1,7 @@
 import { useModuleDictionary } from "@m4l/core";
-import { B as Button } from "../../../mui_extended/Button/index.0f2552ed.js";
+import { B as Button } from "../../../mui_extended/Button/index.007f5a6e.js";
 import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.86c553a9.js";
-import { u as useCommonActionsUtilityClasses } from "../Actions/index.93e9112b.js";
+import { u as useCommonActionsUtilityClasses } from "../Actions/index.8368ac0f.js";
 import { jsx } from "react/jsx-runtime";
 const ACTIONINTRO_TEST_ID = "m4lactions";
 const ActionIntro = (props) => {

package/components/CommonActions/components/Actions/index.8368ac0f.js

@@ -0,0 +1,74 @@
+import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.86c553a9.js";
+import { generateUtilityClasses } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import { g as getComponentUtilityClass } from "../../../../utils/index.9ad3909a.js";
+import { styled } from "@mui/material/styles";
+import { jsx } from "react/jsx-runtime";
+const componentName = "M4LCommonActions";
+generateUtilityClasses(componentName, [
+  "root",
+  "skeleton",
+  "actionCancel",
+  "actionFormCancel",
+  "actionFormIntro",
+  "actionIntro",
+  "wrapperActions"
+]);
+const useCommonActionsUtilityClasses = () => {
+  const slots = {
+    root: ["root"],
+    skeleton: ["skeleton"],
+    actionCancel: ["actionCancel"],
+    actionFormCancel: ["actionFormCancel"],
+    actionFormIntro: ["actionFormIntro"],
+    actionIntro: ["actionIntro"],
+    wrapperActions: ["wrapperActions"]
+  };
+  return unstable_composeClasses(slots, getComponentUtilityClass(componentName), {});
+};
+const WrapperStandarActions = styled("div")(({
+  theme
+}) => ({
+  paddingTop: theme.spacing(3),
+  display: "flex",
+  flexDirection: "row",
+  justifyContent: "flex-end",
+  "& > button": {
+    marginLeft: "10px"
+  },
+  ...theme.components?.M4LCommonActions?.styleOverrides
+}));
+const COMMONACTIONS_PREFIX = "M4LCommonActions";
+const getNameCommonActionsDataTestId = (KEY) => {
+  return `${COMMONACTIONS_PREFIX}-${KEY}`;
+};
+const Actions = (props) => {
+  const {
+    children
+  } = props;
+  const classes = useCommonActionsUtilityClasses();
+  return /* @__PURE__ */ jsx(WrapperStandarActions, {
+    className: classes.root,
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameCommonActionsDataTestId("root")
+    } : {},
+    children
+  });
+};
+function getCommonActionsDictionary() {
+  return ["common_actions"];
+}
+const defaultCommonActionsDictionary = {
+  common_actions: {
+    cancel: "Cancel",
+    intro: "Intro",
+    confirm_quit_title: "Confirm",
+    confirm_quit_msg: "Are your sure exit?"
+  }
+};
+export {
+  Actions as A,
+  defaultCommonActionsDictionary as d,
+  getCommonActionsDictionary as g,
+  useCommonActionsUtilityClasses as u
+};

package/components/DataGrid/assets/icons/datagrid.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 13H6C3.245 13 1 10.755 1 8C1 5.245 3.245 3 6 3H10C12.755 3 15 5.245 15 8C15 10.755 12.755 13 10 13ZM6 4C3.795 4 2 5.795 2 8C2 10.205 3.795 12 6 12H10C12.205 12 14 10.205 14 8C14 5.795 12.205 4 10 4H6Z" fill="#2F3737"/>
+<path d="M10 11C8.345 11 7 9.655 7 8C7 6.345 8.345 5 10 5C11.655 5 13 6.345 13 8C13 9.655 11.655 11 10 11ZM10 6C8.895 6 8 6.895 8 8C8 9.105 8.895 10 10 10C11.105 10 12 9.105 12 8C12 6.895 11.105 6 10 6Z" fill="#2F3737"/>
+</svg>

package/components/DataGrid/formatters/ColumnSetCheckFormatter/index.d.ts

@@ -0,0 +1,9 @@
+import { FormatterProps } from 'react-data-grid';
+import { ColumnSetCheckFormatterProps } from './types';
+import { RowKey } from '../../types';
+/**
+ * @description ColumnSetCheckFormatter: Es un formateador de columna booleano que permite la interacción directa
+ * acualizando un Set/Setter por medio de un hook generico el cual es invocado con el argumento field para ,
+ * sin la necesidad de entrar en edición como lo hace un editor
+ */
+export declare function ColumnSetCheckFormatter<Row, TKey extends RowKey = RowKey>(parameters: ColumnSetCheckFormatterProps<Row, TKey>): (props: FormatterProps<Row>) => import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/formatters/ColumnSetCheckFormatter/types.d.ts

@@ -0,0 +1,6 @@
+import { RowKey } from '../../types';
+export declare type ColumnSetCheckFormatterProps<Row, TKey extends RowKey = RowKey> = {
+    field: string;
+    rowKeyGetter: (row: Row) => TKey;
+    useHook: (field: string) => [ReadonlySet<TKey>, (newHas: ReadonlySet<TKey>) => void];
+};

package/components/DataGrid/formatters/columnPointsFormatter/{index.a19b7b90.js → index.5e645334.js}

@@ -1,4 +1,4 @@
-import { P as PointsFormatter } from "../../../formatters/PointsFormatter/index.5c94c5e8.js";
+import { P as PointsFormatter } from "../../../formatters/PointsFormatter/index.80a4e414.js";
 import { jsx } from "react/jsx-runtime";
 function columnPointsFormatter(props) {
   return (obProps) => {