@m4l/components 9.1.125 → 9.1.127

package/components/mui_extended/Popover/Popover.js

@@ -34,6 +34,9 @@ const Popover = (props) => {
         anchorOrigin,
         transformOrigin,
         transitionDuration: 0,
+        TransitionProps: {
+          timeout: 0
+        },
         ...getPropDataTestId(POPOVER_PREFIX, PopoverSlots.root, instaceDataTestId),
         slotProps: {
           paper: {

package/components/mui_extended/TabContext/index.js

@@ -19,6 +19,6 @@ function TabProvider(props) {
   );
 }
 export {
-  TabProvider as T,
-  TabContext as a
+  TabContext as T,
+  TabProvider as a
 };

package/components/mui_extended/index.d.ts

@@ -27,3 +27,4 @@ export * from './TabContext';
 export * from './Typography/Typography';
 export * from './ToggleButton';
 export * from './ToggleIconButton';
+export * from './NavLink';

package/components/popups/components/PopupsProvider/contexts/PopupsContext/PopupsContext.js

@@ -7,7 +7,7 @@ import { useModuleDictionary } from "@m4l/core";
 import { c as createPopupsStore } from "./store.js";
 const PopupsContext = createContext(null);
 function PopupsProvider(props) {
-  const { children, initialPopups, baseZindex = 0, storeId, containerElement } = props;
+  const { children, initialPopups, baseZindex = 0, storeId, getContainerElement } = props;
   const { getLabel } = useModuleDictionary();
   const isFirstRender = useFirstRender([getLabel]);
   const popupsStoreRef = useRef();
@@ -16,7 +16,7 @@ function PopupsProvider(props) {
       getLabel,
       baseZindex,
       storeId,
-      containerElement
+      getContainerElement
     });
     popupsStoreRef.current?.getState().popupsActions.init(initialPopups || []);
   }
@@ -33,6 +33,6 @@ function PopupsProvider(props) {
   return /* @__PURE__ */ jsx(PopupsContext.Provider, { value: popupsStoreRef.current, children: /* @__PURE__ */ jsx(React.Fragment, { children }) });
 }
 export {
-  PopupsProvider as P,
-  PopupsContext as a
+  PopupsContext as P,
+  PopupsProvider as a
 };

package/components/popups/components/PopupsProvider/contexts/PopupsContext/store.js

@@ -7,7 +7,7 @@ const createPopupsStore = (initProps) => {
     currentZindex: initProps.baseZindex,
     popupsIds: [],
     hashPopups: {},
-    getContainer: () => initProps.containerElement,
+    getContainer: initProps.getContainerElement,
     ...initProps
   };
   return createStore(

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

@@ -144,13 +144,13 @@ export interface PopupsStateWithActions extends PopupsStore {
 }
 export type DefaultPopupsStoreProps = PopupsStore;
 export type InitialPopupsStoreProps = Pick<PopupsStore, 'getLabel' | 'baseZindex'> & Partial<DefaultPopupsStoreProps> & {
-    containerElement: HTMLElement;
+    getContainerElement: () => HTMLElement;
 };
 export interface PopupsProviderProps extends Pick<PopupsStore, 'baseZindex' | 'storeId'> {
     /**
      * Contenedor donde los popups serán renderizados
      */
-    containerElement: HTMLElement;
+    getContainerElement: () => HTMLElement;
     /**
      * Poopus abiertos desde el principio, puede servir para abrir los poupus previamente cargados en las cookies
      */

package/components/popups/components/PopupsProvider/hooks/usePopupsStore/index.js

@@ -1,6 +1,6 @@
 import { useContext } from "react";
 import { useStore } from "zustand";
-import { a as PopupsContext } from "../../contexts/PopupsContext/PopupsContext.js";
+import { P as PopupsContext } from "../../contexts/PopupsContext/PopupsContext.js";
 function usePopupsStore(selector, equalityFn) {
   const context = useContext(PopupsContext);
   if (!context) {

package/contexts/index.d.ts

@@ -5,4 +5,3 @@ export type { FormInitialValues, FormStatusLoad, } from '../components/hook-form
 export { RHFormProvider, FormProviderCustom, useCustomForm, } from '../components/hook-form/RHFormContext';
 export { getFormComponentsDictionary } from '../components/hook-form/RHFormContext/dictionary';
 export { useAppearanceComponentStore, AppearanceComponentProvider, } from './AppearanceComponentContext';
-export * from './RealTimeContext';

package/hooks/index.d.ts

@@ -5,4 +5,6 @@ export { getformAddEditDictionary } from './useFormAddEdit/dictionary';
 export { useFormFocus } from './useFormFocus';
 export { useInterval } from './useInterval';
 export { useComponentSize } from './useComponentSize';
-export { useSvgColor } from './useSvgColor';
+export * from './useSvgColor';
+export { useFormReadyForUpdate } from './useFormReadyForUpdate';
+export { useStateRef } from './useStateRef';

package/hooks/useSvgColor/constants.d.ts

@@ -1,4 +1,5 @@
-export declare const REPLACEMENT_COLOR: RegExp;
+export declare const REPLACEMENT_PRYMARY_COLOR: RegExp;
+export declare const REPLACEMENT_SECONDARY_COLOR: RegExp;
 export declare const SVG_CACHE_PREFIX = "M4L_CACHE_SVG_";
 export declare const SKELETON_SVG_ICON: string;
 export declare const SVG_ICON_ERROR: string;

package/hooks/useSvgColor/constants.js

@@ -1,4 +1,5 @@
-const REPLACEMENT_COLOR = /#1E96DC/g;
+const REPLACEMENT_PRYMARY_COLOR = /#1E96DC/g;
+const REPLACEMENT_SECONDARY_COLOR = /#FFFFFE/g;
 const SVG_CACHE_PREFIX = "M4L_CACHE_SVG_";
 const SKELETON_SVG_ICON = "data:image/svg+xml;base64," + btoa(`<svg viewBox="0 0 640 640" height="32" width="32" xmlns="http://www.w3.org/2000/svg">
     <circle
@@ -29,8 +30,9 @@ const SVG_ICON_ERROR = "data:image/svg+xml;base64," + btoa(`<svg viewBox="0 0 64
 </g>
 </svg>`);
 export {
-  REPLACEMENT_COLOR as R,
-  SKELETON_SVG_ICON as S,
-  SVG_CACHE_PREFIX as a,
-  SVG_ICON_ERROR as b
+  REPLACEMENT_PRYMARY_COLOR as R,
+  SVG_CACHE_PREFIX as S,
+  SKELETON_SVG_ICON as a,
+  SVG_ICON_ERROR as b,
+  REPLACEMENT_SECONDARY_COLOR as c
 };

package/hooks/useSvgColor/helpers.js

@@ -1,4 +1,4 @@
-import { a as SVG_CACHE_PREFIX, S as SKELETON_SVG_ICON } from "./constants.js";
+import { S as SVG_CACHE_PREFIX, a as SKELETON_SVG_ICON } from "./constants.js";
 function purgedColor(color) {
   return color.replace(/[#\s]/g, "");
 }
@@ -11,14 +11,14 @@ function getSVG(src, cacheKey, color, skeletonIcon = SKELETON_SVG_ICON) {
     return {
       src,
       cacheKey,
-      color,
+      primaryColor: color,
       isSkeleton: false,
       dataWithColor: window[cacheKeyColor]
     };
   }
   return {
     src: "",
-    color,
+    primaryColor: color,
     cacheKey,
     isSkeleton: true,
     dataWithColor: skeletonIcon

package/hooks/useSvgColor/types.d.ts

@@ -1,5 +1,6 @@
 export type SVGType = {
-    color: string;
+    primaryColor: string;
+    secondaryColor?: string;
     src: string;
     cacheKey?: string;
     isSkeleton: boolean;
@@ -9,4 +10,5 @@ export type SVGType = {
 export type UseSvgColorProps = Omit<SVGType, 'dataWithColor' | 'isSkeleton' | 'isError' | 'src'> & {
     src?: string;
     skeletonIcon?: string;
+    fallBackIcon?: string;
 };

package/hooks/useSvgColor/useSvgColor.js

@@ -1,20 +1,20 @@
 import { useState, useEffect } from "react";
-import { a as SVG_CACHE_PREFIX, b as SVG_ICON_ERROR, R as REPLACEMENT_COLOR } from "./constants.js";
+import { b as SVG_ICON_ERROR, S as SVG_CACHE_PREFIX, R as REPLACEMENT_PRYMARY_COLOR, c as REPLACEMENT_SECONDARY_COLOR } from "./constants.js";
 import { g as getSVG, p as purgedColor } from "./helpers.js";
 function useSvgColor(props) {
-  const { src, cacheKey, color, skeletonIcon } = props;
-  const [svg, setSvg] = useState(getSVG(src, cacheKey, color, skeletonIcon));
+  const { src, cacheKey, primaryColor, secondaryColor = "#FFFFFF", skeletonIcon, fallBackIcon = SVG_ICON_ERROR } = props;
+  const [svg, setSvg] = useState(getSVG(src, cacheKey, primaryColor, skeletonIcon));
   useEffect(() => {
     if (!src) {
       return;
     }
     const fetchData = async () => {
-      if (svg && svg.src === src && svg.cacheKey === cacheKey && svg.color === color) {
+      if (svg && svg.src === src && svg.cacheKey === cacheKey && svg.primaryColor === primaryColor && svg.secondaryColor === secondaryColor) {
         return;
       }
       let dataWithColor;
       let isError = false;
-      const cacheKeyColor = `${SVG_CACHE_PREFIX}_${cacheKey}_color_${purgedColor(color)}`;
+      const cacheKeyColor = `${SVG_CACHE_PREFIX}_${cacheKey}_primary_${purgedColor(primaryColor)}_secondary_${purgedColor(secondaryColor)}`;
       if (cacheKey && window[cacheKeyColor]) {
         dataWithColor = window[cacheKeyColor];
       } else {
@@ -34,17 +34,18 @@ function useSvgColor(props) {
           }
           if (!dataRaw) {
             isError = true;
-            dataRaw = SVG_ICON_ERROR;
+            dataRaw = fallBackIcon;
           }
         }
-        dataWithColor = "data:image/svg+xml;base64," + btoa((dataRaw || "").replace(REPLACEMENT_COLOR, color));
+        dataWithColor = "data:image/svg+xml;base64," + btoa((dataRaw || "").replace(REPLACEMENT_PRYMARY_COLOR, primaryColor).replace(REPLACEMENT_SECONDARY_COLOR, secondaryColor));
         if (cacheKey && !isError) {
           window[cacheKeyColor] = dataWithColor;
         }
       }
       setSvg({
         src,
-        color,
+        primaryColor,
+        secondaryColor,
         cacheKey,
         dataWithColor,
         isSkeleton: false,
@@ -52,7 +53,7 @@ function useSvgColor(props) {
       });
     };
     fetchData();
-  }, [src, color, cacheKey]);
+  }, [src, primaryColor, cacheKey, secondaryColor, fallBackIcon]);
   return svg;
 }
 export {

package/hooks/useTab/index.js

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

package/index.d.ts

@@ -7,3 +7,5 @@ export * from './contexts';
 export * from './hooks';
 export * from './@types/export.d';
 export * from './@types/types.d';
+export * from './utils';
+export * from '../.storybook/decorators';