@m4l/graphics 3.0.3 → 6.0.1

package/contexts/index.js

@@ -0,0 +1 @@
+

package/hooks/index.js

@@ -0,0 +1 @@
+

package/hooks/useFormatter/index.d.ts

@@ -1 +1 @@
-export declare const useFormatter: () => import("../..").Formatters;
+export declare const useFormatter: () => import('../..').Formatters;

package/hooks/useFormatter/index.js

@@ -0,0 +1,11 @@
+import { useContext as r } from "react";
+import { F as e } from "../../contexts/FormatterContext/index.js";
+const m = () => {
+  const t = r(e);
+  if (!t)
+    throw new Error("useFormatter context must be use inside FormatterProvider");
+  return t;
+};
+export {
+  m as u
+};

package/hooks/useHostTheme/index.d.ts

@@ -1 +1 @@
-export declare const useHostTheme: () => import("../..").HostThemeType;
+export declare const useHostTheme: () => import('../..').HostThemeType;

package/hooks/useHostTheme/index.js

@@ -0,0 +1,11 @@
+import { useContext as t } from "react";
+import { H as o } from "../../contexts/HostThemeContext/index.js";
+const m = () => {
+  const e = t(o);
+  if (!e)
+    throw new Error("useHostTheme context must be use inside HostThemeProvider");
+  return e;
+};
+export {
+  m as u
+};

package/hooks/useIsMobile/{index-Bro0dV28.js → index.js}

@@ -1,11 +1,11 @@
 import { useState as n, useEffect as o } from "react";
-import { t as s } from "../../node_modules-BHhXVwYT.js";
-const t = () => typeof navigator > "u" ? !1 : /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent), l = () => {
-  const [i, r] = n(t());
+import s from "lodash/throttle";
+const i = () => typeof navigator > "u" ? !1 : /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent), l = () => {
+  const [t, r] = n(i());
   return o(() => {
     const e = s(
       () => {
-        r(t());
+        r(i());
       },
       200,
       {
@@ -15,7 +15,7 @@ const t = () => typeof navigator > "u" ? !1 : /Android|webOS|iPhone|iPad|iPod|Bl
     return window.addEventListener("resize", e), e(), () => {
       window.removeEventListener("resize", e), e.cancel();
     };
-  }, []), i;
+  }, []), t;
 };
 export {
   l as u

package/hooks/useIsMountedRef/index.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare function useIsMountedRef(): import("react").MutableRefObject<boolean>;
+export declare function useIsMountedRef(): import('react').MutableRefObject<boolean>;

package/hooks/useIsMountedRef/index.js

@@ -0,0 +1,13 @@
+import { useRef as t, useEffect as u } from "react";
+function s() {
+  const e = t(!0);
+  return u(
+    () => () => {
+      e.current = !1;
+    },
+    []
+  ), e;
+}
+export {
+  s as u
+};

package/hooks/useLocales/index.d.ts

@@ -1 +1 @@
-export declare const useLocales: () => import("../../contexts/LocalesContext/types").LocalesContextProps;
+export declare const useLocales: () => import('../../contexts/LocalesContext/types').LocalesContextProps;

package/hooks/useLocales/index.js

@@ -0,0 +1,11 @@
+import { useContext as o } from "react";
+import { L as t } from "../../contexts/LocalesContext/index.js";
+const n = () => {
+  const e = o(t);
+  if (!e)
+    throw new Error("useLocales context must be use inside LocalesProvider");
+  return e;
+};
+export {
+  n as u
+};

package/hooks/useOffSetTop.js

@@ -0,0 +1,12 @@
+import { useState as s, useEffect as n } from "react";
+function l(t) {
+  const [f, e] = s(!1), o = t || 100;
+  return n(() => (window.onscroll = () => {
+    window.pageYOffset > o ? e(!0) : e(!1);
+  }, () => {
+    window.onscroll = null;
+  }), [o]), f;
+}
+export {
+  l as u
+};

package/hooks/useResizeObserver/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-export declare function useResizeObserver<T extends HTMLElement>(callback: (target: T, entry: ResizeObserverEntry) => void): import("react").RefObject<T>;
+export declare function useResizeObserver<T extends HTMLElement>(callback: (target: T, entry: ResizeObserverEntry) => void): import('react').RefObject<T>;
 export default useResizeObserver;

package/hooks/useResizeObserver/index.js

@@ -0,0 +1,18 @@
+import { useRef as u, useLayoutEffect as o } from "react";
+function f(n) {
+  const e = u(null);
+  return o(() => {
+    const r = e?.current;
+    if (!r)
+      return;
+    const t = new ResizeObserver((s) => {
+      n(r, s[0]);
+    });
+    return t.observe(r), () => {
+      t.disconnect();
+    };
+  }, [n, e.current]), e;
+}
+export {
+  f as u
+};

package/hooks/useResponsive/index.js

@@ -0,0 +1,7 @@
+import { useResponsive as s } from "@m4l/styles";
+function p() {
+  return s("up", "sm");
+}
+export {
+  p as u
+};

package/hooks/useResponsiveContainer/index.js

@@ -0,0 +1,12 @@
+import { useContext as r } from "react";
+import { useStore as n } from "zustand";
+import { R as s } from "../../contexts/ResponsiveContainerContext/index.js";
+function a(t, o) {
+  const e = r(s);
+  if (!e)
+    throw new Error("useAreasStore context must be use inside AreasContext");
+  return n(e, t, o);
+}
+export {
+  a as u
+};

package/hooks/useThemSettingsStore/index.js

@@ -0,0 +1,12 @@
+import { useContext as r } from "react";
+import { useStore as n } from "zustand";
+import { T as s } from "../../contexts/ThemeSettingsContext/ThemeSettingsContext.js";
+function S(e, o) {
+  const t = r(s);
+  if (!t)
+    throw new Error("useSettingsStore context must be use inside SettignsContext");
+  return n(t, e, o);
+}
+export {
+  S as u
+};

package/index.js

@@ -1,40 +1,49 @@
-import { G as s } from "./components/GlobalStyle/index-C3p7OfnO.js";
-import { L as r, a, g as i } from "./contexts/LocalesContext/index-C89UlO0s.js";
-import { F as m, a as p } from "./contexts/FormatterContext/index-Ch6IW7j8.js";
-import { R as x, a as f, T as d, b as l, d as v } from "./contexts/index-DEyJidab.js";
-import { H as T, a as g } from "./contexts/HostThemeContext/index-BMSwOCtA.js";
-import { u as R } from "./hooks/useFirstRender/index-B-Q0TTn0.js";
-import { u as c } from "./hooks/useFormatter/index-BBgQ4lJL.js";
-import { b as P, u as b, a as L, c as H, d as k } from "./hooks/index-Y3uj_IzK.js";
-import { u as z } from "./hooks/useLocales/index-_thMBNE7.js";
-import { u as I, a as M } from "./hooks/useResponsive/index-Dki-WJi8.js";
-import { u as y } from "./hooks/useIsMobile/index-Bro0dV28.js";
-import { C as D, g as E } from "./utils/index-DZG6QXjf.js";
+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 C } from "./contexts/HostThemeContext/index.js";
+import { d as g } from "./contexts/ThemeSettingsContext/constants.js";
+import { T as R, a as S } from "./contexts/ThemeSettingsContext/ThemeSettingsContext.js";
+import { u as P } 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 { 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";
 export {
-  D as Capitalize,
+  K as Capitalize,
   m as FormatterContext,
   p as FormatterProvider,
-  s as GlobalStyles,
-  T as HostThemeContext,
-  g as HostThemeProvider,
-  r as LocalesContext,
-  a as LocalesProvider,
-  x as ResponsiveContainerContext,
-  f as ResponsiveContainerProvider,
-  d as ThemeSettingsContext,
-  l as ThemeSettingsProvider,
-  v as defaultThemeSettings,
-  E as getAnchorElPositionWindow,
-  i as getLocaleFromNetwork,
-  R as useFirstRender,
-  c as useFormatter,
-  P as useHostTheme,
-  y as useIsMobile,
+  r as GlobalStyles,
+  v as HostThemeContext,
+  C as HostThemeProvider,
+  f as LocalesContext,
+  i as LocalesProvider,
+  u as ResponsiveContainerContext,
+  l as ResponsiveContainerProvider,
+  R as ThemeSettingsContext,
+  S as ThemeSettingsProvider,
+  g as defaultThemeSettings,
+  U as getAnchorElPositionWindow,
+  s as getLocaleFromNetwork,
+  P as useFirstRender,
+  L as useFormatter,
+  D as useHostTheme,
+  M as useIsMobile,
   b as useIsMountedRef,
-  z as useLocales,
-  L as useOffSetTop,
-  H as useResizeObserver,
-  I as useResponsiveContainerStore,
-  M as useResponsiveDesktop,
-  k as useThemeSettingsStore
+  w as useLocales,
+  y as useOffSetTop,
+  N as useResizeObserver,
+  G as useResponsiveContainerStore,
+  j as useResponsiveDesktop,
+  B as useThemeSettingsStore
 };

package/package.json

@@ -1,22 +1,65 @@
 {
   "name": "@m4l/graphics",
-  "version": "3.0.3",
+  "version": "6.0.1",
   "license": "UNLICENSED",
   "author": "M4L Team*",
   "dependencies": {
-    "@m4l/core": "^2.0.0",
-    "@m4l/styles": "^3.0.0",
     "date-fns": "^2.30.0",
-    "zustand": "4.3.6",
-    "immer": "^9.0.21"
+    "immer": "^9.0.21",
+    "zustand": "4.3.6"
   },
   "peerDependencies": {
-    "@types/react": "^17.0.0 || ^18.0.0",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-toastify": "10.0.5",
-    "lodash.clonedeep": "^4.5.0",
-    "lodash.debounce": "^4.0.8",
-    "lodash.throttle": "^4.1.1"
+    "@m4l/core": "^2.0.8",
+    "@m4l/styles": "^6.4.1",
+    "@mui/material": "^5.15.19",
+    "@mui/x-date-pickers": "^6.11.1",
+    "@types/react": "^18.0.0",
+    "lodash.clonedeep": "^4.0.0",
+    "lodash.debounce": "^4.0.0",
+    "lodash.isstring": "^4.0.0",
+    "lodash.merge": "^4.0.0",
+    "lodash.throttle": "^4.0.0",
+    "react": "^18.0.0",
+    "react-toastify": "10.0.5"
+  },
+  "peerDependenciesMeta": {
+    "@mui/material": {
+      "optional": true
+    },
+    "@mui/x-date-pickers": {
+      "optional": true
+    },
+    "lodash.clonedeep": {
+      "optional": true
+    },
+    "lodash.debounce": {
+      "optional": true
+    },
+    "lodash.isstring": {
+      "optional": true
+    },
+    "lodash.merge": {
+      "optional": true
+    },
+    "lodash.throttle": {
+      "optional": true
+    }
+  },
+  "resolutions": {
+    "eslint": "^9.0.0",
+    "react": "^18.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "vite": "^5.4.7"
+  },
+  "overrides": {
+    "eslint": "^9.0.0",
+    "react": "^18.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "vite": "^5.4.7"
   },
   "files": [
     "*"
@@ -33,5 +76,6 @@
   "engines": {
     "node": ">=12.0.0"
   },
+  "packageManager": "yarn@4.5.0",
   "private": false
 }

package/utils/anchorEl.d.ts

@@ -1,4 +1,4 @@
-export declare type AnchorEl = HTMLElement | (() => HTMLElement);
+export type AnchorEl = HTMLElement | (() => HTMLElement);
 export interface AnchorOrigin {
     vertical: 'top' | 'center' | 'bottom' | number;
     horizontal: 'left' | 'center' | 'right' | number;
@@ -7,7 +7,7 @@ export interface AnchorPosition {
     top: number;
     left: number;
 }
-export declare const getAnchorElPositionWindow: (anchorElement: HTMLElement, newWindowRect: Pick<DOMRect, 'width' | 'height'>, anchorOrigin: AnchorOrigin, transformOrigin: AnchorOrigin, marginThreshold?: number) => {
+export declare const getAnchorElPositionWindow: (anchorElement: HTMLElement, newWindowRect: Pick<DOMRect, "width" | "height">, anchorOrigin: AnchorOrigin, transformOrigin: AnchorOrigin, marginThreshold?: number) => {
     top: number;
     left: number;
 };

package/utils/anchorEl.js

@@ -0,0 +1,49 @@
+function a(e, t) {
+  let o = 0;
+  return typeof t == "number" ? o = t : t === "center" ? o = e.height / 2 : t === "bottom" && (o = e.height), o;
+}
+function b(e, t) {
+  let o = 0;
+  return typeof t == "number" ? o = t : t === "center" ? o = e.width / 2 : t === "right" && (o = e.width), o;
+}
+function v(e) {
+  return typeof e == "function" ? e() : e;
+}
+const w = (e, t) => {
+  const f = v(e).getBoundingClientRect();
+  return {
+    top: f.top + a(f, t.vertical),
+    left: f.left + b(f, t.horizontal)
+  };
+}, y = (e, t) => ({
+  vertical: a(e, t.vertical),
+  horizontal: b(e, t.horizontal)
+}), O = (e, t, o, f, i = 16) => {
+  const r = w(e, o), l = y(t, f), h = document.getElementById("ContainerAreas")?.getBoundingClientRect() || {
+    top: 0,
+    left: 0
+  };
+  let s = r.top - l.vertical, c = r.left - l.horizontal;
+  const u = s + t.height, d = c + t.width, g = window, p = g.innerHeight - i, A = g.innerWidth - i;
+  if (s < i) {
+    const n = s - i;
+    s -= n;
+  } else if (u > p) {
+    const n = u - p;
+    s -= n;
+  }
+  if (c < i) {
+    const n = c - i;
+    c -= n;
+  } else if (d > A) {
+    const n = d - A;
+    c -= n;
+  }
+  return {
+    top: Math.round(s) - h.top,
+    left: Math.round(c) - h.left
+  };
+};
+export {
+  O as g
+};

package/utils/index.js

@@ -0,0 +1 @@
+

package/utils/strings.js

@@ -0,0 +1,4 @@
+const a = (e) => e && e[0].toUpperCase() + e.slice(1) || "";
+export {
+  a as C
+};

package/commonjs-BCz0-aDl.js

@@ -1,9 +0,0 @@
-import "react";
-var l = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
-function t(e) {
-  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
-}
-export {
-  l as c,
-  t as g
-};

package/contexts/HostThemeContext/index-BMSwOCtA.js

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

package/contexts/LocalesContext/index-C89UlO0s.js

@@ -1,101 +0,0 @@
-import { jsx as E } from "react/jsx-runtime";
-import { createContext as k, useState as _, useCallback as x, useEffect as L } from "react";
-import { AdapterDateFns as F } from "@mui/x-date-pickers/AdapterDateFns";
-import { LocalizationProvider as U } from "@mui/x-date-pickers";
-import { useEnvironment as P, useNetwork as I, useHostTools as j, useLocalStorageWithListener as w, EmitEvents as u } from "@m4l/core";
-import S from "date-fns/locale/en-US";
-async function B(t, e, o) {
-  const s = g(t), r = { ...t };
-  let i;
-  return s === "es" ? i = (await import("date-fns/locale/es")).default : s === "fr" ? i = (await import("date-fns/locale/fr")).default : s === "en-US" ? i = S : (i = S, r.lang = "en", r.script = void 0, r.region = "US", r.url_icon = `${e}/${o}/frontend/commons/assets/icons/langs/lang_en.svg`, r.name = "English US*"), {
-    ...r,
-    module: i,
-    localeString: g(r)
-  };
-}
-function g(t) {
-  let e = t.lang;
-  return t.script && t.script !== "" && (e = e + "-" + t.script), t.region && t.region !== "" && (e = e + "-" + t.region), e;
-}
-function y(t) {
-  try {
-    const e = new Intl.Locale(t);
-    return {
-      lang: e.language || "",
-      script: e.script,
-      region: e.region
-    };
-  } catch {
-    return {
-      lang: "en",
-      script: void 0,
-      region: "US"
-    };
-  }
-}
-const G = k(null);
-function J(t) {
-  const { children: e, isMicroFrontEnd: o, localeHost: s, getLocaleFromNetwork: r } = t;
-  if (o && !s)
-    throw Error("Must set localeHost in microfrontend");
-  if (!o && !r)
-    throw Error("Must set getLocaleFromNetwork in host");
-  const { domain_token: i, host_static_assets: v, environment_assets: h } = P(), { networkOperation: C } = I(), { events_add_listener: N, events_remove_listener: T, events_emit: H } = j(), [a, f] = _(() => {
-    if (o)
-      return s;
-  }), [l, m] = w(
-    "localeHost",
-    navigator.language
-  ), [M, A] = _(""), d = x((n) => {
-    f(n);
-  }, []);
-  if (L(() => (o && N(u.EMMIT_EVENT_HOST_LOCALE_CHANGE, d), () => {
-    o && T(u.EMMIT_EVENT_HOST_LOCALE_CHANGE, d);
-  }), []), L(() => {
-    let n = !0;
-    if (!o && r && !(l === M && l !== ""))
-      return C({
-        method: "POST",
-        endPoint: "na/locales",
-        data: { ...y(l), domain_token: i }
-      }).then((p) => {
-        n && r(
-          p.data,
-          v,
-          h
-        ).then((c) => {
-          f(c), A(c.localeString), l !== c.localeString && m(c.localeString), H(u.EMMIT_EVENT_HOST_LOCALE_CHANGE, c);
-        });
-      }).finally(() => {
-      }), function() {
-        n = !1;
-      };
-  }, [l]), !a)
-    return null;
-  const O = (n) => {
-    (n.lang !== a.lang || n.script !== a.script || n.region !== a.region) && m(g(n));
-  };
-  return /* @__PURE__ */ E(
-    G.Provider,
-    {
-      value: {
-        currentLocale: a,
-        onChangeLocale: O
-      },
-      children: /* @__PURE__ */ E(
-        U,
-        {
-          dateAdapter: F,
-          adapterLocale: a.module,
-          dateFormats: { hours24h: "23" },
-          children: e
-        }
-      )
-    }
-  );
-}
-export {
-  G as L,
-  J as a,
-  B as g
-};