@m4l/components 4.1.9 → 5.0.0

package/components/mui_extended/Pager/subcomponents/CustomTablePagination/{index-BtlSMy53.js → index-WL2e9lVO.js}

@@ -1,11 +1,11 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useTheme, Select, InputBase, MenuItem } from "@mui/material";
-import { P as PagerActions } from "../PagerActions/index-EKhHcjnO.js";
+import { P as PagerActions } from "../PagerActions/index-bGCq3CMS.js";
 import { useResponsiveContainerStore } from "@m4l/graphics";
 import { shallow } from "zustand/shallow";
 import { useEnvironment } from "@m4l/core";
-import { T as Typography } from "../../../Typography/Typography-C_rG8K21.js";
-import { I as Icon } from "../../../../Icon/Icon-BV4VaWM4.js";
+import { T as Typography } from "../../../Typography/Typography-CiRwBv1u.js";
+import { I as Icon } from "../../../../Icon/Icon-1jxG9mYZ.js";
 const CustomTablePagination = (props) => {
   const {
     count,

package/components/mui_extended/Pager/subcomponents/PagerActions/{index-EKhHcjnO.js → index-bGCq3CMS.js}

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { I as IconButton } from "../../../IconButton/IconButton-B3bJhoym.js";
+import { I as IconButton } from "../../../IconButton/IconButton-Bf75xsn0.js";
 import { useEnvironment } from "@m4l/core";
 function PagerActions(props) {
   const { count, page, rowsPerPage, onPageChange, classes } = props;

package/components/mui_extended/Tabs/styles.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 export declare const MUITabs: import("@emotion/styled").StyledComponent<import("@mui/material").TabsOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "value" | "children" | "className" | "style" | "onChange" | "action" | "sx" | "classes" | "slots" | "slotProps" | "aria-label" | "aria-labelledby" | "variant" | "orientation" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "textColor" | "visibleScrollbar"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "value" | "children" | "className" | "style" | "onChange" | "action" | "sx" | "classes" | "aria-label" | "aria-labelledby" | "slotProps" | "slots" | "variant" | "orientation" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "textColor" | "visibleScrollbar"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/mui_extended/ToggleIconButton/{ToggleIconButton-DEvsd9LS.js → ToggleIconButton-CD79i-ks.js}

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import { i as iconButtonClasses } from "../IconButton/classes/index-BxjJGAqZ.js";
 import { w as withToggle } from "../../../hocs/withToggle/index-C1_DMZD3.js";
-import { I as IconButton } from "../IconButton/IconButton-B3bJhoym.js";
+import { I as IconButton } from "../IconButton/IconButton-Bf75xsn0.js";
 const ToggleAbleIconButton = ({
   onToggle,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars

package/components/mui_extended/Tooltip/slots/TooltipSlots.d.ts

@@ -5,4 +5,4 @@ export declare const RootStyled: import("@emotion/styled").StyledComponent<Pick<
 export declare const PopperStyled: import("react").ForwardRefExoticComponent<import("@mui/material").PopperProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const ToolipStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & Partial<import("..").TooltipProps> & Record<string, unknown> & {
     ownerState: Partial<import("..").TooltipProps> & Record<string, unknown>;
-}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;
+}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement> | keyof import("react").ClassAttributes<HTMLDivElement>>, {}>;

package/components/mui_extended/Typography/{Typography-C_rG8K21.js → Typography-CiRwBv1u.js}

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { useModuleSkeleton } from "@m4l/core";
 import { Typography as Typography$1 } from "@mui/material";
 import { W as WarpperTypography } from "./styles-CJWtZKnm.js";
-import { S as SkeletonTypography } from "./subcomponents/index-iHnfUTTd.js";
+import { S as SkeletonTypography } from "./subcomponents/index-DfI738vA.js";
 import { u as useUtilityClasses } from "./utils/Clases/index-BCQz-htY.js";
 import clsx from "clsx";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock-CF-669v-.js";
@@ -10,7 +10,7 @@ import { g as getNameDataTestId } from "./tests/utils-gCB7BF8a.js";
 function Typography(props) {
   const {
     skeletonWidth = "100%",
-    skeletongHeight = "18px",
+    skeletonHeight = "18px",
     variant = "body",
     className,
     ...other
@@ -22,7 +22,7 @@ function Typography(props) {
     {
       className: clsx(classes.root, className),
       ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("root") } : {},
-      children: !isSkeleton ? /* @__PURE__ */ jsx(Typography$1, { ...other, variant }) : /* @__PURE__ */ jsx(SkeletonTypography, { skeletonWidth, skeletongHeight })
+      children: !isSkeleton ? /* @__PURE__ */ jsx(Typography$1, { ...other, variant }) : /* @__PURE__ */ jsx(SkeletonTypography, { skeletonWidth, skeletonHeight })
     }
   );
 }

package/components/mui_extended/Typography/subcomponents/{index-iHnfUTTd.js → index-DfI738vA.js}

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { Skeleton } from "@mui/material";
 const SkeletonTypography = (props) => {
-  const { skeletonWidth, skeletongHeight } = props;
+  const { skeletonWidth, skeletonHeight: skeletongHeight } = props;
   return /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: skeletonWidth, height: skeletongHeight });
 };
 export {

package/components/mui_extended/Typography/types.d.ts

@@ -1,7 +1,7 @@
 import { TypographyProps as MUITypographyProps } from '@mui/material';
 export interface SkeletonProps {
     skeletonWidth?: string | number;
-    skeletongHeight?: string | number;
+    skeletonHeight?: string | number;
 }
 export interface TypographyProps extends MUITypographyProps, SkeletonProps {
 }

package/components/popups/components/PopupsViewer/{PopupsViewer-C3QkulFR.js → PopupsViewer-ChNJ4euY.js}

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { TransitionGroup, CSSTransition } from "react-transition-group";
 import { shallow } from "zustand/shallow";
-import { P as Popup } from "./subcomponents/Popup/index-CXSzUhBj.js";
+import { P as Popup } from "./subcomponents/Popup/index-BhEEo19P.js";
 import { u as usePopupsStore } from "../PopupsProvider/hooks/usePopupsStore/index-DBMhBXk-.js";
 import { u as useSizeContainer } from "../../../../hooks/useSizeContainer/index-BrtvS2vO.js";
 import { R as RootStyled } from "./slots/popupsViewerSlots-BDDUOz1t.js";

package/components/popups/components/PopupsViewer/slots/popupsViewerSlots.d.ts

@@ -1,13 +1,13 @@
 /// <reference types="react" />
 export declare const RootStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & Partial<import("../types").PopupsViewerOwnerState> & Record<string, unknown> & {
     ownerState: Partial<import("../types").PopupsViewerOwnerState> & Record<string, unknown>;
-}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;
+}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement> | keyof import("react").ClassAttributes<HTMLDivElement>>, {}>;
 export declare const PopupDragWindowRootStyled: import("@emotion/styled").StyledComponent<Pick<import("../../../../DragResizeWindow/types").DraggableWindowProps & import("react").RefAttributes<HTMLDivElement>, keyof import("../../../../DragResizeWindow/types").DraggableWindowProps | keyof import("react").RefAttributes<HTMLDivElement>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & Partial<import("../types").PopupsViewerOwnerState> & Record<string, unknown> & {
     ownerState: Partial<import("../types").PopupsViewerOwnerState> & Record<string, unknown>;
 }, {}, {}>;
 export declare const PopupHeaderContainerStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & Partial<import("../types").PopupsViewerOwnerState> & Record<string, unknown> & {
     ownerState: Partial<import("../types").PopupsViewerOwnerState> & Record<string, unknown>;
-}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;
+}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement> | keyof import("react").ClassAttributes<HTMLDivElement>>, {}>;
 export declare const PopupHeaderTitleStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & Partial<import("../types").PopupsViewerOwnerState> & Record<string, unknown> & {
     ownerState: Partial<import("../types").PopupsViewerOwnerState> & Record<string, unknown>;
 }, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof import("react").ClassAttributes<HTMLSpanElement> | keyof import("react").HTMLAttributes<HTMLSpanElement>>, {}>;
@@ -16,10 +16,10 @@ export declare const PopupHeaderSubTitleStyled: import("@emotion/styled").Styled
 }, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof import("react").ClassAttributes<HTMLSpanElement> | keyof import("react").HTMLAttributes<HTMLSpanElement>>, {}>;
 export declare const PopupContentEditionInfoStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & Partial<import("../types").PopupsViewerOwnerState> & Record<string, unknown> & {
     ownerState: Partial<import("../types").PopupsViewerOwnerState> & Record<string, unknown>;
-}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;
+}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement> | keyof import("react").ClassAttributes<HTMLDivElement>>, {}>;
 export declare const PopupContentRootStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & Partial<import("../types").PopupsViewerOwnerState> & Record<string, unknown> & {
     ownerState: Partial<import("../types").PopupsViewerOwnerState> & Record<string, unknown>;
-}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;
+}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement> | keyof import("react").ClassAttributes<HTMLDivElement>>, {}>;
 export declare const PopupContentWrapperStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & Partial<import("../types").PopupsViewerOwnerState> & Record<string, unknown> & {
     ownerState: Partial<import("../types").PopupsViewerOwnerState> & Record<string, unknown>;
-}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;
+}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement> | keyof import("react").ClassAttributes<HTMLDivElement>>, {}>;

package/components/popups/components/PopupsViewer/subcomponents/Popup/{index-CXSzUhBj.js → index-BhEEo19P.js}

@@ -1,9 +1,9 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { shallow } from "zustand/shallow";
-import { H as Header } from "./subcomponents/Header/index-B66xxc1C.js";
+import { H as Header } from "./subcomponents/Header/index-BSmSdLcn.js";
 import { u as usePopupsStore } from "../../../PopupsProvider/hooks/usePopupsStore/index-DBMhBXk-.js";
-import { E as EditionInfo } from "./subcomponents/EditionInfo/index-CQsA5hGa.js";
+import { E as EditionInfo } from "./subcomponents/EditionInfo/index-DTeOxMYe.js";
 import { P as PopupDragWindowRootStyled, a as PopupContentRootStyled, b as PopupContentWrapperStyled } from "../../slots/popupsViewerSlots-BDDUOz1t.js";
 const Popup = forwardRef((props, ref) => {
   const { popupId, containerElement, containerSize, style } = props;

package/components/popups/components/PopupsViewer/subcomponents/Popup/subcomponents/EditionInfo/{index-CQsA5hGa.js → index-DTeOxMYe.js}

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useEnvironment } from "@m4l/core";
 import { P as POPUPS_ICONS } from "../../../../icons-BUujqqbu.js";
 import { c as PopupContentEditionInfoStyled } from "../../../../slots/popupsViewerSlots-BDDUOz1t.js";
-import { I as Icon } from "../../../../../../../Icon/Icon-BV4VaWM4.js";
+import { I as Icon } from "../../../../../../../Icon/Icon-1jxG9mYZ.js";
 const EditionInfo = (props) => {
   const { editionInfo } = props;
   const { host_static_assets, environment_assets } = useEnvironment();

package/components/popups/components/PopupsViewer/subcomponents/Popup/subcomponents/Header/{index-B66xxc1C.js → index-BSmSdLcn.js}

@@ -5,8 +5,8 @@ import { u as usePopupsStore } from "../../../../../PopupsProvider/hooks/usePopu
 import { P as POPUPS_ICONS } from "../../../../icons-BUujqqbu.js";
 import { d as PopupHeaderContainerStyled, e as PopupHeaderTitleStyled, f as PopupHeaderSubTitleStyled } from "../../../../slots/popupsViewerSlots-BDDUOz1t.js";
 import { d as dragResizeWindowClasses } from "../../../../../../../DragResizeWindow/classes/index-JOh47hwH.js";
-import { I as IconButton } from "../../../../../../../mui_extended/IconButton/IconButton-B3bJhoym.js";
-import { I as Icon } from "../../../../../../../Icon/Icon-BV4VaWM4.js";
+import { I as IconButton } from "../../../../../../../mui_extended/IconButton/IconButton-Bf75xsn0.js";
+import { I as Icon } from "../../../../../../../Icon/Icon-1jxG9mYZ.js";
 const Header = (props) => {
   const { popupId } = props;
   const { host_static_assets, environment_assets } = useEnvironment();

package/contexts/RHFormContext/{index-DE-wmCBw.js → index-DJtfB7-U.js}

@@ -6,9 +6,8 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { F as FormProviderRoot } from "./styles-DAsa8vSY.js";
 import { R as RHFormProviderUtilityClasses } from "./classes/index-CXQ6_8rw.js";
 const classes = RHFormProviderUtilityClasses();
-function RHFormProvider(props) {
-  const { children, onSubmit, values, validationSchema, statusLoad = "ready", className } = props;
-  const methods = useForm({
+function useCustomForm({ validationSchema, values, statusLoad }) {
+  const formMethods = useForm({
     resolver: yupResolver(validationSchema),
     defaultValues: values
   });
@@ -16,34 +15,49 @@ function RHFormProvider(props) {
     if (statusLoad === "reload_values_provider") {
       const keys = Object.keys(values);
       keys.forEach((key) => {
-        methods.setValue(key, values[key], {
+        formMethods.setValue(key, values[key], {
           shouldValidate: false,
           shouldDirty: false,
           shouldTouch: false
         });
       });
-      methods.clearErrors();
+      formMethods.clearErrors();
       return;
     }
-  }, [methods, statusLoad, values]);
+  }, [formMethods, statusLoad, values]);
   useEffect(() => {
     if (statusLoad === "ready") {
-      methods.setValue("statusLoad", "ready", {
+      formMethods.setValue("statusLoad", "ready", {
         shouldValidate: false,
         shouldDirty: false,
         shouldTouch: false
       });
     }
   }, [statusLoad]);
-  return /* @__PURE__ */ jsx(FormProvider, { ...methods, children: /* @__PURE__ */ jsx(
-    FormProviderRoot,
+  return formMethods;
+}
+function FormProviderCustom(props) {
+  const { children, onSubmit, className, handleSubmit } = props;
+  return /* @__PURE__ */ jsx(FormProvider, { ...props, children: /* @__PURE__ */ jsx(FormProviderRoot, { className: clsx(classes.root, className), onSubmit: handleSubmit(onSubmit), children }) });
+}
+function RHFormProvider(props) {
+  const { children, onSubmit, values, validationSchema, statusLoad = "ready", className } = props;
+  const formMethods = useCustomForm({ validationSchema, statusLoad, values });
+  return /* @__PURE__ */ jsx(
+    FormProviderCustom,
     {
-      className: clsx(classes.root, className),
-      onSubmit: methods.handleSubmit(onSubmit),
+      className,
+      values,
+      validationSchema,
+      statusLoad,
+      onSubmit,
+      ...formMethods,
       children
     }
-  ) });
+  );
 }
 export {
-  RHFormProvider as R
+  FormProviderCustom as F,
+  RHFormProvider as R,
+  useCustomForm as u
 };

package/contexts/RHFormContext/index.d.ts

@@ -1,2 +1,15 @@
-import { FormProviderProps } from './types';
+import { FieldValues } from 'react-hook-form';
+import { CustomFormArguments, FormProviderCustomProps, FormProviderProps } from './types';
+export declare function useCustomForm({ validationSchema, values, statusLoad }: CustomFormArguments): import("react-hook-form").UseFormReturn<FieldValues, any, undefined>;
+export declare function FormProviderCustom(props: FormProviderCustomProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Componente que gestiona el `Provider` de `react-hook-form` y encapsula el formulario para la creación de formularios personalizados.
+ *
+ * Este componente utiliza internamente `useForm` para inicializar todos los métodos necesarios para la manipulación del formulario.
+ *
+ * Si necesitas acceder directamente a los métodos de `useForm`, puedes utilizar el `Provider` y el hook por separado mediante
+ * `FormProviderCustom` y `useCustomForm`, respectivamente.
+ * @param props
+ * @constructor
+ */
 export declare function RHFormProvider(props: FormProviderProps): import("react/jsx-runtime").JSX.Element;

package/contexts/RHFormContext/types.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { FieldValues } from 'react-hook-form';
+import { FieldValues, FormProviderProps as RHFormProviderProps } from 'react-hook-form';
 export declare type FormStatusLoad = 'initial' | 'new' | 'edit' | 'reload_values_provider' | 'ready' | 'error';
 export declare type FormInitialValues = FieldValues;
 export interface FormProviderProps {
@@ -10,3 +10,9 @@ export interface FormProviderProps {
     statusLoad?: FormStatusLoad;
     className?: string;
 }
+export declare type FormProviderCustomProps = RHFormProviderProps & FormProviderProps;
+export interface CustomFormArguments {
+    values: FormInitialValues;
+    validationSchema: any;
+    statusLoad?: FormStatusLoad;
+}

package/contexts/index.d.ts

@@ -2,6 +2,6 @@ export { DynamicMFParmsProvider, DynamicMFParmsContext, MemonizedDynamicMFParmsP
 export * from './ModalContext/index';
 export * from './ModalContext/types';
 export type { FormInitialValues, FormStatusLoad } from './RHFormContext/types';
-export { RHFormProvider } from './RHFormContext';
+export { RHFormProvider, FormProviderCustom, useCustomForm } from './RHFormContext';
 export { getFormComponentsDictionary } from './RHFormContext/dictionary';
 export { useAppearanceComponentStore, AppearanceComponentProvider, } from './AppearanceComponentContext';

package/hooks/useFormAddEdit/{index-B-hEaKJy.js → index-wFKCIvw-.js}

@@ -2,7 +2,7 @@ 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-DkNYHw5Z.js";
-import { W as WindowConfirm } from "../../components/modal/WindowConfirm/index-Du4Wb6aF.js";
+import { W as WindowConfirm } from "../../components/modal/WindowConfirm/index-DVVS1d13.js";
 function useFormAddEdit(props) {
   const {
     initialValues,