@m4l/graphics 7.0.7 → 7.0.8

package/contexts/DeviceTypeContext/helper.d.ts

@@ -0,0 +1,9 @@
+import { DeviceType } from './types';
+/**
+ * Check if the device type
+ * @author Juan Escobar - automatic
+ * @createdAt 2024-10-06 20:07:18 - automatic
+ * @updatedAt 2024-10-08 19:28:36 - automatic
+ * @updatedUser Juan Escobar - automatic
+ */
+export declare const getDeviceType: (userAgent: string | undefined) => DeviceType;

package/contexts/DeviceTypeContext/helper.js

@@ -0,0 +1,4 @@
+const i = (e) => typeof e > "u" ? "desktop" : /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(e) ? "mobile" : "desktop";
+export {
+  i as g
+};

package/contexts/DeviceTypeContext/index.d.ts

@@ -0,0 +1,19 @@
+import { DeviceTypePrivderProps } from './types';
+declare const DeviceTypeContext: import('react').Context<(Omit<Omit<import('zustand').StoreApi<import('./types').DeviceTypeWithActions>, "setState"> & {
+    setState<A extends string | {
+        type: unknown;
+    }>(partial: import('./types').DeviceTypeWithActions | Partial<import('./types').DeviceTypeWithActions> | ((state: import('./types').DeviceTypeWithActions) => import('./types').DeviceTypeWithActions | Partial<import('./types').DeviceTypeWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
+}, "setState"> & {
+    setState(nextStateOrUpdater: import('./types').DeviceTypeWithActions | Partial<import('./types').DeviceTypeWithActions> | ((state: import('immer/dist/internal').WritableDraft<import('./types').DeviceTypeWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
+        type: unknown;
+    } | undefined): void;
+}) | null>;
+/**
+ * Proveedor de contenedor responsivo
+ * @author Juan Escobar - automatic
+ * @createdAt 2024-10-06 20:07:18 - automatic
+ * @updatedAt 2024-10-08 19:03:38 - automatic
+ * @updatedUser Juan Escobar - automatic
+ */
+declare const DeviceTypeProvider: (props: DeviceTypePrivderProps) => import("react").JSX.Element;
+export { DeviceTypeProvider, DeviceTypeContext };

package/contexts/DeviceTypeContext/index.js

@@ -0,0 +1,17 @@
+import { jsx as n } from "react/jsx-runtime";
+import { createContext as s, useRef as p, useEffect as u } from "react";
+import { c as a } from "./store.js";
+import { g as f } from "./helper.js";
+import { u as v } from "../../hooks/useUserAgent/index.js";
+const m = s(null), l = (r) => {
+  const { children: c, forcedDeviceType: o } = r, i = v(), e = p(), t = o ?? f(i);
+  return e.current || (e.current = a({
+    deviceType: t
+  })), u(() => {
+    e.current?.getState().deviceType !== t && e.current?.getState().actions.setDeviceType(t);
+  }, [t]), /* @__PURE__ */ n(m.Provider, { value: e.current, children: c });
+};
+export {
+  m as D,
+  l as a
+};

package/contexts/DeviceTypeContext/store.d.ts

@@ -0,0 +1,18 @@
+import { InitialDeviceTypeProps, DeviceTypeWithActions } from './types';
+/**
+ * Crea la tienda de contenedor responsivo
+ * @author Juan Escobar - automatic
+ * @createdAt 2024-10-06 20:07:18 - automatic
+ * @updatedAt 2024-10-06 20:07:18 - automatic
+ * @updatedUser Juan Escobar - automatic
+ */
+export declare const createDeviceTypeStore: (initProps: InitialDeviceTypeProps) => Omit<Omit<import('zustand').StoreApi<DeviceTypeWithActions>, "setState"> & {
+    setState<A extends string | {
+        type: unknown;
+    }>(partial: DeviceTypeWithActions | Partial<DeviceTypeWithActions> | ((state: DeviceTypeWithActions) => DeviceTypeWithActions | Partial<DeviceTypeWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
+}, "setState"> & {
+    setState(nextStateOrUpdater: DeviceTypeWithActions | Partial<DeviceTypeWithActions> | ((state: import('immer/dist/internal').WritableDraft<DeviceTypeWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
+        type: unknown;
+    } | undefined): void;
+};
+export type DeviceTypeStore = ReturnType<typeof createDeviceTypeStore>;

package/contexts/DeviceTypeContext/store.js

@@ -0,0 +1,33 @@
+import { createStore as i } from "zustand";
+import { devtools as m } from "zustand/middleware";
+import { immer as p } from "zustand/middleware/immer";
+const y = (e) => {
+  const t = {
+    ...e
+  };
+  return i(
+    m(
+      p((r, s) => ({
+        ...t,
+        actions: {
+          /**
+           * Establece el punto de interrupción
+           * @author Juan Escobar - automatic
+           * @createdAt 2024-10-06 20:07:18 - automatic
+           * @updatedAt 2024-10-06 20:07:18 - automatic
+           * @updatedUser Juan Escobar - automatic
+           */
+          setDeviceType: (o) => {
+            r((c) => {
+              c.deviceType = o;
+            });
+          }
+        }
+      })),
+      { name: "DeviceType Store" }
+    )
+  );
+};
+export {
+  y as c
+};

package/contexts/DeviceTypeContext/types.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+export type DeviceType = 'mobile' | 'desktop';
+export interface DeviceTypeState {
+    deviceType: DeviceType;
+}
+export type InitialDeviceTypeProps = Pick<DeviceTypeState, 'deviceType'>;
+export interface DeviceTypePrivderProps {
+    forcedDeviceType?: DeviceType;
+    children: React.ReactNode;
+}
+export interface DeviceTypeWithActions extends DeviceTypeState {
+    actions: {
+        setDeviceType: (newDeviceType: DeviceType) => void;
+    };
+}

package/contexts/HostThemeContext/index.js

@@ -1,16 +1,16 @@
-import { jsxs as l, jsx as o } from "react/jsx-runtime";
-import { createContext as h, useMemo as p } from "react";
-import { CssBaseline as f } from "@mui/material";
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
+import { createContext as h, useMemo as d } from "react";
+import { CssBaseline as p } from "@mui/material";
 import { deepmerge as t } from "@mui/utils";
-import { G as u } from "../../components/GlobalStyles/index.js";
-import { experimental_extendTheme as x, Experimental_CssVarsProvider as v, StyledEngineProvider as C } from "@mui/material/styles";
-import { u as S } from "../../hooks/useIsMobile/index.js";
-const T = h(null);
-function E(c) {
-  const { children: a, hostThemeOptions: s, fnComponentsOverrides: n, isMobileForced: i } = c, m = S(i), d = p(() => {
+import { G as f } from "../../components/GlobalStyles/index.js";
+import { experimental_extendTheme as u, Experimental_CssVarsProvider as x, StyledEngineProvider as v } from "@mui/material/styles";
+import { u as C } from "../../hooks/useIsMobile/index.js";
+const S = h(null);
+function y(l) {
+  const { children: c, hostThemeOptions: s, fnComponentsOverrides: n } = l, i = C(), a = d(() => {
     const e = {
       ...s
-    }, r = x({
+    }, r = u({
       cssVarPrefix: "m4l",
       colorSchemes: {
         light: t({}, e),
@@ -18,30 +18,29 @@ function E(c) {
         dark: t({}, e)
       },
       generalSettings: {
-        isMobile: m
+        isMobile: i
       }
     });
     return r.components = n(r), r;
-  }, [m]);
-  return /* @__PURE__ */ l(v, { theme: d, children: [
-    /* @__PURE__ */ o(u, {}),
+  }, [i]);
+  return /* @__PURE__ */ m(x, { theme: a, children: [
+    /* @__PURE__ */ o(f, {}),
     /* @__PURE__ */ o(
-      T.Provider,
+      S.Provider,
       {
         value: {
           hostThemeOptions: s,
-          fnComponentsOverrides: n,
-          isMobileForced: i
+          fnComponentsOverrides: n
         },
-        children: /* @__PURE__ */ l(C, { injectFirst: !0, children: [
-          /* @__PURE__ */ o(f, { enableColorScheme: !0 }),
-          a
+        children: /* @__PURE__ */ m(v, { injectFirst: !0, children: [
+          /* @__PURE__ */ o(p, { enableColorScheme: !0 }),
+          c
         ] })
       }
     )
   ] });
 }
 export {
-  T as H,
-  E as a
+  S as H,
+  y as a
 };

package/contexts/HostThemeContext/types.d.ts

@@ -7,11 +7,6 @@ export interface HostThemeType {
      * @createdAt 2024-10-08 18:52:29 - automatic
      */
     dataTestId?: string;
-    /**
-     * "isMobileForced" es una variable que se encarga de forzar el modo mobile en la plataforma
-     * @createdAt 2024-10-08 13:22:53 - automatic
-     */
-    isMobileForced?: boolean | undefined;
     hostThemeOptions: Theme;
     fnComponentsOverrides: (theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme) => any;
 }

package/contexts/index.d.ts

@@ -6,5 +6,7 @@ export type { BreakpointType } from './ResponsiveContainerContext/types';
 export type { NetworkLocaleType, LocaleType } from './LocalesContext/types';
 export { getLocaleFromNetwork } from './LocalesContext/helper';
 export * from './HostThemeContext';
+export * from './DeviceTypeContext';
 export * from './ThemeSettingsContext';
 export type { HostThemeType } from './HostThemeContext/types';
+export type { DeviceType } from './DeviceTypeContext/types';

package/hooks/index.d.ts

@@ -3,6 +3,7 @@ export { useFormatter } from './useFormatter';
 export { useIsMountedRef } from './useIsMountedRef';
 export { useLocales } from './useLocales';
 export { useResponsiveContainerStore } from './useResponsiveContainer';
+export { useUserAgent } from './useUserAgent';
 export { useIsMobile } from './useIsMobile';
 export { useOffSetTop } from './useOffSetTop';
 export { useHostTheme } from './useHostTheme';

package/hooks/useIsMobile/index.d.ts

@@ -1,15 +1,14 @@
+import { DeviceTypeWithActions } from '../../contexts/DeviceTypeContext/types';
 /**
- * Hook para obtener el valor del userAgent
- */
-export declare const useUserAgent: () => string;
-/**
- * Hook to check if the device is a mobile device
+ * Hook to use the responsive container store
  * @author Juan Escobar - automatic
  * @createdAt 2024-10-06 20:07:18 - automatic
- * @updatedAt 2024-10-08 19:28:36 - automatic
+ * @updatedAt 2024-10-06 20:07:18 - automatic
  * @updatedUser Juan Escobar - automatic
  */
+export declare function useIsMobileStore<T>(selector: (state: DeviceTypeWithActions) => T, equalityFn?: (left: T, right: T) => boolean): T;
 /**
- * Hook de verificación de dispositivo móvil
+ * hook usado para obtener el valor por defecto para los componentes que usan la prop size
+ * @returns objeto con el valor por default del size y la función para cambiarlo
  */
-export declare const useIsMobile: (isMobileForced?: boolean) => boolean;
+export declare function useIsMobile(isMobileForced?: boolean): boolean;

package/hooks/useIsMobile/index.js

@@ -1,18 +1,16 @@
-import { useSyncExternalStore as r } from "react";
-const t = () => navigator.userAgent, s = (e) => {
-  const n = () => e(navigator.userAgent);
-  return window.addEventListener("userAgentChange", n), () => window.removeEventListener("userAgentChange", n);
-}, o = () => r(
-  s,
-  // Función de suscripción
-  t,
-  // Función para obtener el estado actual
-  t
-  // (Opcional) Función para obtener el valor en SSR
-), i = (e) => typeof e > "u" ? !1 : /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(e), c = (e) => {
-  const n = o();
-  return e || i(n);
-};
+import { useContext as r } from "react";
+import { useStore as i } from "zustand";
+import { D as s } from "../../contexts/DeviceTypeContext/index.js";
+function n(o, t) {
+  const e = r(s);
+  if (!e)
+    throw new Error("useIsMobileStore context must be use inside IsMobileContext");
+  return i(e, o, t);
+}
+function b(o) {
+  const t = n((e) => e.deviceType === "mobile");
+  return o || t;
+}
 export {
-  c as u
+  b as u
 };

package/hooks/useUserAgent/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Hook encargado obtener el valor del userAgent, y reaccionar a cambios en el mismo.
+ */
+export declare const useUserAgent: () => string;

package/hooks/useUserAgent/index.js

@@ -0,0 +1,25 @@
+import { debounce as s } from "@mui/material";
+import { useSyncExternalStore as o } from "react";
+const t = () => navigator.userAgent, i = (e) => {
+  const n = s(
+    () => {
+      e(navigator.userAgent);
+    },
+    500
+  ), r = () => {
+    e(navigator.userAgent);
+  };
+  return window.addEventListener("userAgentChange", r), window.addEventListener("resize", n), () => {
+    window.removeEventListener("userAgentChange", r), window.removeEventListener("resize", n);
+  };
+}, u = () => o(
+  i,
+  // Función de suscripción
+  t,
+  // Función para obtener el estado actual
+  t
+  // (Opcional) Función para obtener el valor en SSR
+);
+export {
+  u
+};

package/index.js

@@ -2,48 +2,53 @@ import { G as r } from "./components/GlobalStyles/index.js";
 import { g as s } from "./contexts/LocalesContext/helper.js";
 import { F as m, a as p } from "./contexts/FormatterContext/index.js";
 import { L as f, a as i } from "./contexts/LocalesContext/index.js";
-import { R as u, a as l } from "./contexts/ResponsiveContainerContext/index.js";
-import { H as v, a as T } from "./contexts/HostThemeContext/index.js";
-import { d as h } from "./contexts/ThemeSettingsContext/constants.js";
-import { T as R, a as S } from "./contexts/ThemeSettingsContext/ThemeSettingsContext.js";
-import { u as F } from "./hooks/useFirstRender/index.js";
-import { u as L } from "./hooks/useFormatter/index.js";
-import { u as b } from "./hooks/useIsMountedRef/index.js";
-import { u as w } from "./hooks/useLocales/index.js";
+import { R as u, a as v } from "./contexts/ResponsiveContainerContext/index.js";
+import { H as l, a as T } from "./contexts/HostThemeContext/index.js";
+import { D as g, a as C } from "./contexts/DeviceTypeContext/index.js";
+import { d as R } from "./contexts/ThemeSettingsContext/constants.js";
+import { T as P, a as F } from "./contexts/ThemeSettingsContext/ThemeSettingsContext.js";
+import { u as D } from "./hooks/useFirstRender/index.js";
+import { u as b } from "./hooks/useFormatter/index.js";
+import { u as k } from "./hooks/useIsMountedRef/index.js";
+import { u as z } from "./hooks/useLocales/index.js";
 import { u as G } from "./hooks/useResponsiveContainer/index.js";
-import { u as M } from "./hooks/useIsMobile/index.js";
-import { u as y } from "./hooks/useOffSetTop.js";
-import { u as D } from "./hooks/useHostTheme/index.js";
-import { u as N } from "./hooks/useResizeObserver/index.js";
-import { u as j } from "./hooks/useResponsive/index.js";
-import { u as B } from "./hooks/useThemSettingsStore/index.js";
-import { c as K } from "./utils/strings.js";
-import { g as U } from "./utils/anchorEl.js";
+import { u as M } from "./hooks/useUserAgent/index.js";
+import { u as E } from "./hooks/useIsMobile/index.js";
+import { u as U } from "./hooks/useOffSetTop.js";
+import { u as j } from "./hooks/useHostTheme/index.js";
+import { u as B } from "./hooks/useResizeObserver/index.js";
+import { u as K } from "./hooks/useResponsive/index.js";
+import { u as V } from "./hooks/useThemSettingsStore/index.js";
+import { c as Y } from "./utils/strings.js";
+import { g as _ } from "./utils/anchorEl.js";
 export {
+  g as DeviceTypeContext,
+  C as DeviceTypeProvider,
   m as FormatterContext,
   p as FormatterProvider,
   r as GlobalStyles,
-  v as HostThemeContext,
+  l as HostThemeContext,
   T as HostThemeProvider,
   f as LocalesContext,
   i as LocalesProvider,
   u as ResponsiveContainerContext,
-  l as ResponsiveContainerProvider,
-  R as ThemeSettingsContext,
-  S as ThemeSettingsProvider,
-  K as capitalize,
-  h as defaultThemeSettings,
-  U as getAnchorElPositionWindow,
+  v as ResponsiveContainerProvider,
+  P as ThemeSettingsContext,
+  F as ThemeSettingsProvider,
+  Y as capitalize,
+  R as defaultThemeSettings,
+  _ as getAnchorElPositionWindow,
   s as getLocaleFromNetwork,
-  F as useFirstRender,
-  L as useFormatter,
-  D as useHostTheme,
-  M as useIsMobile,
-  b as useIsMountedRef,
-  w as useLocales,
-  y as useOffSetTop,
-  N as useResizeObserver,
+  D as useFirstRender,
+  b as useFormatter,
+  j as useHostTheme,
+  E as useIsMobile,
+  k as useIsMountedRef,
+  z as useLocales,
+  U as useOffSetTop,
+  B as useResizeObserver,
   G as useResponsiveContainerStore,
-  j as useResponsiveDesktop,
-  B as useThemeSettingsStore
+  K as useResponsiveDesktop,
+  V as useThemeSettingsStore,
+  M as useUserAgent
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/graphics",
-  "version": "7.0.7",
+  "version": "7.0.8",
   "license": "UNLICENSED",
   "author": "M4L Team*",
   "type": "module",
@@ -17,7 +17,7 @@
     "zustand": "4.3.6"
   },
   "peerDependencies": {
-    "@m4l/core": "^2.0.12",
+    "@m4l/core": "^2.0.15",
     "@m4l/styles": "^7.1.18",
     "@mui/material": "5.16.7",
     "@mui/x-date-pickers": "6.20.2",