@centreon/ui 25.9.0 → 25.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "25.9.0",
+  "version": "25.9.2",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
@@ -106,7 +106,6 @@
     "storybook-dark-mode": "^4.0.2",
     "storybook-react-rsbuild": "^1.0.1",
     "style-dictionary": "^4.3.3",
-    "tailwind": "^4.0.0",
     "tailwindcss": "^4.1.7",
     "ts-node": "^10.9.2",
     "use-resize-observer": "^9.1.0",

package/src/InputField/Text/index.tsx

@@ -98,6 +98,7 @@ export type TextProps = {
   transparent?: boolean;
   value?: string;
   textFieldSlotsAndSlotProps?: TextFieldSlotsAndSlotProps<InputProps>;
+  forceUncontrolled?: boolean;
 } & Omit<TextFieldProps, 'variant' | 'size' | 'error'>;
 
 const TextField = forwardRef(
@@ -123,6 +124,7 @@ const TextField = forwardRef(
       containerClassName,
       type,
       textFieldSlotsAndSlotProps,
+      forceUncontrolled,
       ...rest
     }: TextProps,
     ref: React.ForwardedRef<HTMLDivElement>
@@ -141,7 +143,7 @@ const TextField = forwardRef(
     const tooltipTitle = displayErrorInTooltip && !isNil(error) ? error : '';
 
     const getValueProps = useCallback((): object => {
-      if (debounced) {
+      if (debounced || forceUncontrolled) {
         return {};
       }
       if (defaultValue) {
@@ -149,7 +151,7 @@ const TextField = forwardRef(
       }
 
       return { value: innerValue };
-    }, [innerValue, debounced, defaultValue]);
+    }, [innerValue, debounced, defaultValue, forceUncontrolled]);
 
     return (
       <Box

package/src/Module/index.tsx

@@ -5,6 +5,7 @@ import { StylesProvider, createGenerateClassName } from '@mui/styles';
 
 import { QueryProvider, ThemeProvider } from '..';
 import SnackbarProvider from '../Snackbar/SnackbarProvider';
+import { ThemeOptions } from '@mui/material';
 
 export interface ModuleProps {
   children: React.ReactElement;
@@ -12,6 +13,10 @@ export interface ModuleProps {
   queryClient?: QueryClient;
   seedName: string;
   store: ReturnType<typeof createStore>;
+  overrideTheme?: {
+    light: Partial<ThemeOptions>;
+    dark: Partial<ThemeOptions>;
+  };
 }
 
 const Module = ({
@@ -19,7 +24,8 @@ const Module = ({
   seedName,
   maxSnackbars = 3,
   store,
-  queryClient
+  queryClient,
+  overrideTheme
 }: ModuleProps): JSX.Element => {
   const generateClassName = createGenerateClassName({
     seed: seedName
@@ -29,7 +35,7 @@ const Module = ({
     <QueryProvider queryClient={queryClient}>
       <JotaiProvider store={store}>
         <StylesProvider generateClassName={generateClassName}>
-          <ThemeProvider>
+          <ThemeProvider overrideTheme={overrideTheme}>
             <SnackbarProvider maxSnackbars={maxSnackbars}>
               {children}
             </SnackbarProvider>

package/src/ThemeProvider/index.tsx

@@ -1,11 +1,12 @@
 import { useAtomValue } from 'jotai';
-import { equals } from 'ramda';
+import { equals, mergeDeepRight } from 'ramda';
 import { CSSInterpolation } from 'tss-react';
 
 import {
   ButtonProps,
   InputBaseProps,
   ThemeProvider as MuiThemeProvider,
+  PaletteOptions,
   StyledEngineProvider,
   Theme,
   createTheme
@@ -26,7 +27,7 @@ import { ReactNode, useMemo } from 'react';
 import { getPalette } from './palettes';
 
 declare module '@mui/styles/defaultTheme' {
-  interface DefaultTheme extends Theme { }
+  interface DefaultTheme extends Theme {}
 }
 
 declare module '@mui/material/TextField' {
@@ -198,14 +199,14 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
       styleOverrides: {
         root: ({ theme }) => ({
           '&:hover, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus':
-          {
-            background: equals(theme.palette.mode, ThemeMode.dark)
-              ? theme.palette.primary.dark
-              : theme.palette.primary.light,
-            color: equals(theme.palette.mode, ThemeMode.dark)
-              ? theme.palette.common.white
-              : theme.palette.primary.main
-          },
+            {
+              background: equals(theme.palette.mode, ThemeMode.dark)
+                ? theme.palette.primary.dark
+                : theme.palette.primary.light,
+              color: equals(theme.palette.mode, ThemeMode.dark)
+                ? theme.palette.common.white
+                : theme.palette.primary.main
+            },
           fontSize: theme.typography.body2.fontSize
         })
       }
@@ -222,12 +223,12 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
       styleOverrides: {
         root: ({ theme }) => ({
           [`[role="tooltip"] &, &.MuiMenu-paper, &.${autocompleteClasses.paper}`]:
-          {
-            backgroundColor: theme.palette.background.default,
-            border: 'none',
-            borderRadius: `${theme.shape.borderRadius}px`,
-            boxShadow: theme.shadows[3]
-          }
+            {
+              backgroundColor: theme.palette.background.default,
+              border: 'none',
+              borderRadius: `${theme.shape.borderRadius}px`,
+              boxShadow: theme.shadows[3]
+            }
         })
       }
     },
@@ -257,15 +258,23 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
 
 interface Props {
   children: ReactNode;
+  overrideTheme?: {
+    light: Partial<PaletteOptions>;
+    dark: Partial<PaletteOptions>;
+  };
 }
 
-const ThemeProvider = ({ children }: Props): JSX.Element => {
+const ThemeProvider = ({ children, overrideTheme }: Props): JSX.Element => {
   const { themeMode } = useAtomValue(userAtom);
 
-  const theme = useMemo(
-    () => createTheme(getTheme(themeMode || ThemeMode.light)),
-    [themeMode]
-  );
+  const theme = useMemo(() => {
+    const overrideThemeByMode = overrideTheme?.[themeMode || 'light'];
+    return createTheme(
+      mergeDeepRight(getTheme(themeMode || ThemeMode.light), {
+        palette: overrideThemeByMode || {}
+      })
+    );
+  }, [themeMode, overrideTheme]);
 
   return (
     <StyledEngineProvider injectFirst enableCssLayer>