@m4l/graphics 0.0.0 → 0.0.3

package/dist/index.js

@@ -31,11 +31,11 @@ var __objRest = (source, exclude) => {
 };
 import Box from "@mui/material/Box";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { IconButton as IconButton$2, Tooltip as Tooltip$1, Accordion as Accordion$2, AccordionSummary, Skeleton as Skeleton$1, AccordionDetails, Popover as Popover$1, Tab as Tab$1, Link as Link$1, Box as Box$1, Typography as Typography$2, Breadcrumbs as Breadcrumbs$3, MenuItem, TablePagination, Button as Button$1, Autocomplete as Autocomplete$1, TextField, CircularProgress, FormControlLabel, Checkbox as Checkbox$1, FormGroup, RadioGroup, Radio as Radio$1, FormHelperText, SvgIcon as SvgIcon$1, InputBase, GlobalStyles, Dialog as Dialog$1, Paper as Paper$2, Fab as Fab$1, Card as Card$1, Stack, Container as Container$5, alpha as alpha$1 } from "@mui/material";
+import { IconButton as IconButton$2, Tooltip as Tooltip$1, Accordion as Accordion$2, AccordionSummary, Skeleton as Skeleton$1, AccordionDetails, Popover as Popover$1, Tab as Tab$1, Link as Link$1, Box as Box$1, Typography as Typography$2, Breadcrumbs as Breadcrumbs$3, MenuItem, TablePagination, Button as Button$1, Autocomplete as Autocomplete$1, TextField, CircularProgress, FormControlLabel, Checkbox as Checkbox$1, FormGroup, RadioGroup, Radio as Radio$1, FormHelperText, SvgIcon as SvgIcon$1, InputBase, GlobalStyles, Dialog as Dialog$1, Paper as Paper$2, Fab as Fab$1, Card as Card$1, Stack, Container as Container$5, CssBaseline as CssBaseline$1, alpha as alpha$1 } from "@mui/material";
 import * as React from "react";
 import React__default, { useMemo, useState, createContext, useContext, useCallback, useEffect, Fragment as Fragment$1, Suspense, forwardRef, useRef, useImperativeHandle, useLayoutEffect as useLayoutEffect$1, memo } from "react";
-import { useModuleDictionary, useEnvironment, voidFunction, useFlagsPresent, useNetwork, getPropertyByString, useHostTools, useLocalStorage, FlagsProvider, ModuleDictionaryProvider, getLocalStorage, useFlags } from "@m4l/core";
-import { styled, alpha, useTheme } from "@mui/material/styles";
+import { useModuleDictionary, useEnvironment, voidFunction, useFlagsPresent, useNetwork, getPropertyByString, useHostTools, useLocalStorage, FlagsProvider, ModuleDictionaryProvider, getLocalStorage, useFlags, EmitEvents } from "@m4l/core";
+import { styled, alpha, useTheme, createTheme, StyledEngineProvider, ThemeProvider } from "@mui/material/styles";
 import { Link as Link$2, useNavigate } from "react-router-dom";
 import { LoadingButton as LoadingButton$2 } from "@mui/lab";
 import { get, set, appendErrors, useFormContext, useFormState, useForm, FormProvider as FormProvider$1, Controller } from "react-hook-form";
@@ -1138,17 +1138,17 @@ function RHFAutocompleteAsync(props) {
   const {
     networkOperation
   } = useNetwork();
-  const initialValue = getValues(name);
-  const [options, setOptions] = useState(initialValue === null ? [] : [initialValue]);
+  const initialValue2 = getValues(name);
+  const [options, setOptions] = useState(initialValue2 === null ? [] : [initialValue2]);
   const [open, setOpen] = useState(false);
   const [optionsLoaded, setOptionsLoaded] = useState(false);
   const loading = open && !optionsLoaded;
   useEffect(() => {
-    if (!optionsLoaded && initialValue) {
-      setOptions([initialValue]);
+    if (!optionsLoaded && initialValue2) {
+      setOptions([initialValue2]);
     }
-  }, [initialValue, optionsLoaded]);
-  console.log("***2022Render RHFAutocompleteAsync", loading, options, initialValue);
+  }, [initialValue2, optionsLoaded]);
+  console.log("***2022Render RHFAutocompleteAsync", loading, options, initialValue2);
   const getOptionLabelLocal = (option) => {
     if (option === void 0 || option === null) {
       return "";
@@ -1212,7 +1212,7 @@ function RHFAutocompleteAsync(props) {
     }) => /* @__PURE__ */ jsx(Autocomplete$1, {
       options,
       getOptionLabel: getOptionLabelLocal,
-      defaultValue: initialValue,
+      defaultValue: initialValue2,
       isOptionEqualToValue: isOptionEqualToValueLocal,
       disableClearable: true,
       value: value || null,
@@ -9356,6 +9356,70 @@ const NoAuthModuleLayout = (props) => {
     })
   });
 };
+const initialValue = {
+  hostThemeOptions: {},
+  fnComponentsOverrides: voidFunction
+};
+const HostThemeContext = createContext(initialValue);
+function HostThemeProvider(props) {
+  const {
+    children,
+    hostThemeOptions,
+    fnComponentsOverrides: fnComponentsOverrides2,
+    isMicroFrontEnd
+  } = props;
+  const [finalThemeOptions, setFinalThemeOptions] = useState(hostThemeOptions);
+  const {
+    events_add_listener,
+    events_remove_listener,
+    events_emit
+  } = useHostTools();
+  const [isFirstTime, setIsFirstTime] = useState(true);
+  const finalTheme = useMemo(() => {
+    const theme = createTheme(finalThemeOptions);
+    theme.components = fnComponentsOverrides2(theme);
+    return theme;
+  }, [finalThemeOptions]);
+  const onUpdateOverrides = useCallback((newThemeOptions) => {
+    console.debug("Emit HostThemeProvider", newThemeOptions);
+    setFinalThemeOptions(newThemeOptions);
+  }, []);
+  useEffect(() => {
+    if (isMicroFrontEnd) {
+      events_add_listener(EmitEvents.EMMIT_EVENT_HOST_THEME_CHANGE, onUpdateOverrides);
+    }
+    return () => {
+      if (isMicroFrontEnd) {
+        console.log("****** REMOVE LISTENER host_theme_change");
+        events_remove_listener("host_theme_change", onUpdateOverrides);
+      }
+    };
+  }, []);
+  useEffect(() => {
+    if (isFirstTime) {
+      setIsFirstTime(false);
+      return;
+    }
+    if (!isMicroFrontEnd) {
+      events_emit(EmitEvents.EMMIT_EVENT_HOST_THEME_CHANGE, hostThemeOptions);
+    }
+  }, [hostThemeOptions]);
+  return /* @__PURE__ */ jsx(HostThemeContext.Provider, {
+    value: {
+      hostThemeOptions: finalThemeOptions,
+      fnComponentsOverrides: fnComponentsOverrides2
+    },
+    children: /* @__PURE__ */ jsx(StyledEngineProvider, {
+      injectFirst: true,
+      children: /* @__PURE__ */ jsxs(ThemeProvider, {
+        theme: finalTheme,
+        children: [/* @__PURE__ */ jsx(CssBaseline$1, {
+          enableColorScheme: true
+        }), children]
+      })
+    })
+  });
+}
 function useIsMountedRef() {
   const isMounted = useRef(true);
   useEffect(() => () => {
@@ -9380,6 +9444,12 @@ function useOffSetTop(top) {
   }, [isTop]);
   return offsetTop;
 }
+const useHostTheme = () => {
+  const context = useContext(HostThemeContext);
+  if (!context)
+    throw new Error("useHostTheme context must be use inside HostThemeProvider");
+  return context;
+};
 function pxToRem(value) {
   return `${value / 16}rem`;
 }
@@ -10989,4 +11059,4 @@ function LoadingButton(theme) {
 function fnComponentsOverrides(theme) {
   return Object.assign(Fab(theme), Tabs(theme), Card(theme), Menu(theme), Link(theme), Input(theme), InputLabel(), Radio(theme), Badge(), List(theme), Table(theme), Paper(theme), Switch(theme), Button(theme), IconButton(theme), Dialog(theme), Avatar(theme), Slider(theme), Drawer(theme), Stepper(theme), Tooltip(theme), Popover(theme), SvgIcon(), Checkbox(theme), DataGrid(theme), Skeleton(theme), Timeline(theme), Backdrop(theme), Progress(theme), Accordion(theme), Typography(theme), Pagination(theme), ButtonGroup(theme), Breadcrumbs(theme), CssBaseline(), Autocomplete(theme), ControlLabel(theme), ToggleButton(theme), LoadingButton(theme));
 }
-export { Accordion$1 as Accordion, BooleanFormatter, BoxIcon, Breadcrumbs$2 as Breadcrumbs, DataGrid$1 as DataGrid, DateFormatter, DialogAnimate, FabButtonAnimate, FormActions, FormProvider, IconButton$1 as IconButton, IconButtonAnimate, LinkWithRoute, Loadable, LoadingButton$1 as LoadingButton, LocalesContext, LocalesProvider, MasterDetailLayout, MenuActions, MenuPopover, ModalContext, ModalDialog, ModalProvider, ModuleLayout, MotionContainer, MotionInView, MotionLazyContainer, NoAuthModuleLayout, NoItemSelected, ObjectLogs, Page, Pager, PaperForm, ProgressBar, ProgressBarStyle, PropertyValue, RHFAutocompleteAsync, RHFCheckbox, RHFMultiCheckbox, RHFRadioGroup, RHFSelect, RHFTextField, Resizeable, ScrollBar, SplitLayout, TRANSITION, Tab, TextAnimate, Typography$1 as Typography, fnComponentsOverrides as default, defaultPagerDictionary, defaultThemeOptions, getGridComponentsDictionary, getNoItemSelectedComponentsDictionary, getObjectLogsComponentsDictionary, getPagerComponentsDictionary, useIsMountedRef, useLocales, useMasterDetail, useModal, useModule, useOffSetTop, usePaginate, useResponsive, useResponsiveDesktop, varBgColor, varBgKenburns, varBgPan, varBounce, varContainer, varFade, varFlip, varHover, varPath, varRotate, varScale, varSlide, varTranEnter, varTranExit, varTranHover, varZoom };
+export { Accordion$1 as Accordion, BooleanFormatter, BoxIcon, Breadcrumbs$2 as Breadcrumbs, DataGrid$1 as DataGrid, DateFormatter, DialogAnimate, FabButtonAnimate, FormActions, FormProvider, HostThemeContext, HostThemeProvider, IconButton$1 as IconButton, IconButtonAnimate, LinkWithRoute, Loadable, LoadingButton$1 as LoadingButton, LocalesContext, LocalesProvider, MasterDetailLayout, MenuActions, MenuPopover, ModalContext, ModalDialog, ModalProvider, ModuleLayout, MotionContainer, MotionInView, MotionLazyContainer, NoAuthModuleLayout, NoItemSelected, ObjectLogs, Page, Pager, PaperForm, ProgressBar, ProgressBarStyle, PropertyValue, RHFAutocompleteAsync, RHFCheckbox, RHFMultiCheckbox, RHFRadioGroup, RHFSelect, RHFTextField, Resizeable, ScrollBar, SplitLayout, TRANSITION, Tab, TextAnimate, Typography$1 as Typography, defaultPagerDictionary, defaultThemeOptions, fnComponentsOverrides, getGridComponentsDictionary, getNoItemSelectedComponentsDictionary, getObjectLogsComponentsDictionary, getPagerComponentsDictionary, useHostTheme, useIsMountedRef, useLocales, useMasterDetail, useModal, useModule, useOffSetTop, usePaginate, useResponsive, useResponsiveDesktop, varBgColor, varBgKenburns, varBgPan, varBounce, varContainer, varFade, varFlip, varHover, varPath, varRotate, varScale, varSlide, varTranEnter, varTranExit, varTranHover, varZoom };

package/dist/lib/contexts/HostThemeContext/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { HostThemeProviderProps } from './types';
+declare const HostThemeContext: import("react").Context<import("./types").ThemeType>;
+declare function HostThemeProvider(props: HostThemeProviderProps): JSX.Element;
+export { HostThemeProvider, HostThemeContext };

package/dist/lib/contexts/HostThemeContext/types.d.ts

@@ -0,0 +1,12 @@
+import type { ThemeOptions, Theme } from '@mui/material/styles';
+import type { ReactNode } from 'react';
+export declare type EventFunListener = (...args: any[]) => void;
+export interface ThemeType {
+    hostThemeOptions: ThemeOptions;
+    fnComponentsOverrides: (theme: Theme) => any;
+}
+export interface HostThemeProviderProps extends ThemeType {
+    isMicroFrontEnd: boolean;
+    children: ReactNode;
+}
+export declare type HostThemeContextType = ThemeType;

package/dist/lib/contexts/index.d.ts

@@ -1,3 +1,4 @@
 export * from './ModalContext';
 export * from './LocalesContext';
+export * from './HostThemeContext';
 export { HelmetProvider } from 'react-helmet-async';

package/dist/lib/hooks/index.d.ts

@@ -6,4 +6,5 @@ export { useModal } from './useModal';
 export { useMasterDetail } from './useMasterDetail';
 export { useLocales } from './useLocales';
 export { useOffSetTop } from './useOffSetTop';
+export { useHostTheme } from './useHostTheme';
 export { useFormContext, Controller, useWatch } from 'react-hook-form';

package/dist/lib/hooks/useHostTheme.d.ts

@@ -0,0 +1 @@
+export declare const useHostTheme: () => import("../contexts/HostThemeContext/types").ThemeType;

package/dist/lib/index.d.ts

@@ -7,4 +7,4 @@ export type { GradientsPaletteOptions } from './theme/palette';
 export type { ChartPaletteOptions } from './theme/palette';
 export type { GridPaletteOptions } from './theme/palette';
 export { defaultThemeOptions } from './theme/defaultThemeOptions';
-export { default } from './theme/overrides';
+export { default as fnComponentsOverrides } from './theme/overrides';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@m4l/graphics",
   "private": false,
-  "version": "0.0.0",
+  "version": "0.0.3",
   "license": "UNLICENSED",
   "author": "M4L Team",
   "scripts": {
@@ -17,10 +17,11 @@
   "dependencies": {
     "framer-motion": "^6.3.11",
     "nprogress": "^0.2.0",
-    "react": "^17.0.0 || 18.x",
+    "react": ">=18",
     "react-data-grid": "^7.0.0-beta.13",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
+    "react-dom": "^18.0.0",
     "react-draggable": "^4.4.5",
     "react-dropzone": "^14.2.1",
     "react-helmet-async": "^1.3.0",
@@ -30,13 +31,12 @@
     "react-router-dom": "^6.3.0",
     "react-splitter-layout": "^4.0.0",
     "simplebar-react": "^2.4.1",
-    "vite-tsconfig-paths": "^3.5.0",
-    "react-dom": "^18.0.0"
+    "vite-tsconfig-paths": "^3.5.0"
   },
   "devDependencies": {
     "@emotion/styled": "^11.9.3",
     "@hookform/resolvers": "^2.9.3",
-    "@m4l/core": "^0.0.6",
+    "@m4l/core": "^0.0.8",
     "@mui/icons-material": "^5.8.4",
     "@mui/lab": "^5.0.0-alpha.87",
     "@mui/material": "^5.8.5",
@@ -72,8 +72,7 @@
   },
   "peerDependencies": {
     "react": ">=18",
-    "react-dom": "^18.0.0",
-    "@m4l/core": "^0.0.6"
+    "react-dom": "^18.0.0"
   },
   "files": [
     "dist"