@m4l/components 0.2.0 → 0.2.2

package/components/mui_extended/ToggleIconButton/index.e430bed4.js

@@ -0,0 +1,29 @@
+import clsx from "clsx";
+import { I as IconButton, i as iconButtonClasses } from "../IconButton/index.df52ae90.js";
+import { w as withToggle } from "../../../hocs/withToggle/index.e44eb0da.js";
+import { jsx } from "react/jsx-runtime";
+const ToggleAbleIconButton = ({
+  onClick,
+  isPressed,
+  ...props
+}) => {
+  const onLocalClick = (e) => {
+    onClick(e, !isPressed);
+  };
+  return /* @__PURE__ */ jsx(IconButton, {
+    onClick: onLocalClick,
+    ...props,
+    className: clsx(isPressed ? iconButtonClasses.togglePressed : iconButtonClasses.toggleNotPressed)
+  });
+};
+const ToggleIconButtonHOC = withToggle(ToggleAbleIconButton);
+const ToggleIconButton = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(ToggleIconButtonHOC, {
+    ...props
+  });
+};
+export {
+  ToggleIconButton as T
+};

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

@@ -0,0 +1,5 @@
+import { ComponentWithToggleProps, WithToggleProps } from "../../../hocs/withToggle";
+import { IconButtonProps } from "../IconButton";
+export interface ToggleIconButtonProps extends Omit<IconButtonProps, 'onClick'>, Pick<ComponentWithToggleProps, 'onClick'>, Pick<WithToggleProps, 'isPressed'> {
+    src: string;
+}

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { TooltipProps } from './types';
-export declare const Tooltip: (props: TooltipProps) => import("react").JSX.Element;
+export declare const Tooltip: (props: TooltipProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { TypographyProps } from './types';
-export declare function Typography(props: TypographyProps): import("react").JSX.Element;
+export declare function Typography(props: TypographyProps): import("react/jsx-runtime").JSX.Element;

package/components/mui_extended/Typography/subcomponents/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { SkeletonTypographyProps } from './types';
-export declare const SkeletonTypography: (props: SkeletonTypographyProps) => import("react").JSX.Element;
+export declare const SkeletonTypography: (props: SkeletonTypographyProps) => import("react/jsx-runtime").JSX.Element;

package/components/mui_extended/index.d.ts

@@ -23,5 +23,8 @@ export { Pager } from './Pager';
 export type { PagerProps } from './Pager/types';
 export { getPagerComponentsDictionary } from './Pager/dicctionary';
 export { Tab } from './Tab';
+export * from './TabContext';
 export * from './Tooltip';
 export * from './Typography/Typography';
+export * from './ToggleButton';
+export * from './ToggleIconButton';

package/contexts/ModalContext/{index.b39d303d.js → index.aa3bd23f.js}

@@ -1,5 +1,5 @@
 import { createContext, useState } from "react";
-import { M as ModalDialog } from "../../components/ModalDialog/index.89e26413.js";
+import { M as ModalDialog } from "../../components/ModalDialog/index.8c4fde10.js";
 import { jsxs, jsx } from "react/jsx-runtime";
 const ModalContext = createContext(null);
 function ModalProvider({

package/contexts/ModalContext/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { ModalContextProps, ModalProviderProps } from './types';
 declare const ModalContext: import("react").Context<ModalContextProps | null>;
-declare function ModalProvider({ children }: ModalProviderProps): import("react").JSX.Element;
+declare function ModalProvider({ children }: ModalProviderProps): import("react/jsx-runtime").JSX.Element;
 export { ModalProvider, ModalContext };

package/contexts/RHFormContext/{index.1755b324.js → index.7769076a.js}

@@ -1,4 +1,5 @@
 import { useEffect } from "react";
+import clsx from "clsx";
 import { useForm, FormProvider } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { styled } from "@mui/material/styles";
@@ -36,7 +37,8 @@ function RHFormProvider(props) {
     onSubmit,
     values,
     validationSchema,
-    statusLoad = "ready"
+    statusLoad = "ready",
+    className
   } = props;
   const methods = useForm({
     resolver: yupResolver(validationSchema),
@@ -68,7 +70,7 @@ function RHFormProvider(props) {
   return /* @__PURE__ */ jsx(FormProvider, {
     ...methods,
     children: /* @__PURE__ */ jsx(FormProviderRoot, {
-      className: classes.root,
+      className: clsx(classes.root, className),
       onSubmit: methods.handleSubmit(onSubmit),
       children
     })

package/contexts/RHFormContext/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { FormProviderProps } from './types';
-export declare function RHFormProvider(props: FormProviderProps): import("react").JSX.Element;
+export declare function RHFormProvider(props: FormProviderProps): import("react/jsx-runtime").JSX.Element;

package/contexts/RHFormContext/types.d.ts

@@ -8,4 +8,5 @@ export interface FormProviderProps {
     values: FormInitialValues;
     validationSchema: any;
     statusLoad?: FormStatusLoad;
+    className?: string;
 }

package/hocs/withToggle/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface WithToggleProps {
+    isPressed: boolean;
+    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+export declare type ComponentWithToggleProps = {
+    onClick: (e: React.MouseEvent<HTMLButtonElement>, isPressed?: boolean) => void;
+    defaultIsPressed?: boolean;
+    children?: React.ReactNode;
+};
+export declare function withToggle<T extends WithToggleProps>(Component: React.ComponentType<T>): (props: ComponentWithToggleProps) => import("react/jsx-runtime").JSX.Element;

package/hocs/withToggle/index.e44eb0da.js

@@ -0,0 +1,24 @@
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+function withToggle(Component) {
+  return (props) => {
+    const {
+      defaultIsPressed = false,
+      onClick,
+      ...rest
+    } = props;
+    const [isPressed, setIsPressed] = useState(defaultIsPressed);
+    const handleToggle = (e) => {
+      setIsPressed(!isPressed);
+      onClick(e, !isPressed);
+    };
+    return /* @__PURE__ */ jsx(Component, {
+      ...rest,
+      onClick: handleToggle,
+      isPressed
+    });
+  };
+}
+export {
+  withToggle as w
+};

package/hooks/index.d.ts

@@ -1,3 +1,4 @@
 export { useFormAddEdit } from './useFormAddEdit';
 export { useModal } from './useModal';
+export { useTab } from './useTab';
 export { getformAddEditDictionary } from './useFormAddEdit/dictionary';

package/hooks/useFormAddEdit/{index.67083c9e.js → index.59c74cbf.js}

@@ -1,15 +1,17 @@
 import { useNetwork, useFlags, useModuleDictionary } from "@m4l/core";
 import { useState, useEffect } from "react";
-import { u as useModal } from "../useModal/index.abdc0962.js";
+import { u as useModal } from "../useModal/index.b4b84d5d.js";
 import { jsx } from "react/jsx-runtime";
-import { W as WindowConfirm } from "../../components/modal/WindowConfirm.3aa32f2e.js";
-const useFormAddEdit = (props) => {
+import { W as WindowConfirm } from "../../components/modal/WindowConfirm.cd776fe5.js";
+function useFormAddEdit(props) {
   const {
     initialValues,
     objectId,
     endPoint,
     formatDataEnpoint,
-    queryParamas
+    queryParamas,
+    isRemote = true,
+    omitCallEnpoint = false
   } = props;
   const {
     openModal
@@ -35,15 +37,21 @@ const useFormAddEdit = (props) => {
   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}`
+        endPoint: queryParamas ? `${endPoint}/${objectId}?${queryParamas}` : `${endPoint}/${objectId}`,
+        isRemote
       }).then((response) => {
         if (mounted) {
           if (formatDataEnpoint) {
             setFormValues(formatDataEnpoint(response));
           } else {
-            setFormValues(response);
+            setFormValues(response.data);
           }
           setStatusLoad("reload_values_provider");
         }
@@ -78,7 +86,7 @@ const useFormAddEdit = (props) => {
     statusLoad,
     setRefresh
   };
-};
+}
 const getformAddEditDictionary = () => {
   return "form_add_edit";
 };

package/hooks/useFormAddEdit/index.d.ts

@@ -1,7 +1,8 @@
 import { FormStatusLoad } from '../../contexts/RHFormContext/types';
 import { UseFormAddEditProps } from './types';
-export declare const useFormAddEdit: (props: UseFormAddEditProps) => {
-    formValues: import("react-hook-form").FieldValues;
+import { FieldValues } from 'react-hook-form';
+export declare function useFormAddEdit<TValues extends FieldValues = FieldValues, TEndpointValues extends FieldValues = FieldValues>(props: UseFormAddEditProps<TValues, TEndpointValues>): {
+    formValues: TValues;
     statusLoad: FormStatusLoad;
     setRefresh: () => void;
 };

package/hooks/useFormAddEdit/types.d.ts

@@ -1,9 +1,13 @@
 import { FieldValues } from 'react-hook-form';
-import { FormInitialValues } from '../../contexts/RHFormContext/types';
-export interface UseFormAddEditProps {
+export declare type ResponseEndpoint<TEndpointValues = FieldValues> = {
+    data: TEndpointValues;
+};
+export interface UseFormAddEditProps<TValues = FieldValues, TEndpointValues = FieldValues> {
     objectId?: number;
     endPoint: string;
-    initialValues: FormInitialValues;
-    formatDataEnpoint?: (data: FieldValues) => FormInitialValues;
+    initialValues: TValues;
+    formatDataEnpoint?: (response: ResponseEndpoint<TEndpointValues>) => TValues;
+    isRemote?: boolean;
+    omitCallEnpoint?: boolean;
     queryParamas?: string;
 }

package/hooks/useFormReadyForUpdate/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * hook encargado de activar la bandera de readyToUpdate cuando el formulario este completamente cargado
+ * @param statusLoad
+ * @returns
+ */
+export declare function useFormReadyForUpdate(): boolean;

package/hooks/useFormReadyForUpdate/index.f60f500e.js

@@ -0,0 +1,20 @@
+import { useState, useEffect } from "react";
+import { useFormContext, useWatch } from "react-hook-form";
+function useFormReadyForUpdate() {
+  const [readyToUpdate, setReadyToUpdate] = useState(false);
+  const { control } = useFormContext();
+  const statusLoad = useWatch({
+    control,
+    name: "statusLoad"
+  });
+  useEffect(() => {
+    if (statusLoad !== "ready") {
+      return;
+    }
+    setReadyToUpdate(true);
+  }, [statusLoad]);
+  return readyToUpdate;
+}
+export {
+  useFormReadyForUpdate as u
+};

package/hooks/useModal/{index.abdc0962.js → index.b4b84d5d.js}

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

package/hooks/useTab/index.6ab00d5a.js

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { d as TabContext } from "../../components/mui_extended/Tab/index.53203047.js";
+const useTab = () => {
+  const context = useContext(TabContext);
+  if (context === null) {
+    throw new Error("useTab must be used within a TabProvider");
+  }
+  return context;
+};
+export {
+  useTab as u
+};

package/hooks/useTab/index.d.ts

@@ -0,0 +1,3 @@
+import { TabContextType } from '../../components/mui_extended/TabContext/types';
+declare const useTab: () => TabContextType;
+export { useTab };