@centreon/ui 25.6.1 → 25.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "25.6.1",
+  "version": "25.6.2",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/Button/Save/index.stories.tsx

@@ -4,6 +4,7 @@ import { makeStyles } from 'tss-react/mui';
 import { Theme } from '@mui/material';
 
 import ButtonSave from '.';
+import '../../ThemeProvider/tailwindcss.css';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   root: {

package/src/Colors/index.tsx

@@ -55,7 +55,7 @@ const ContainerDescription = ({
         {toPairs(palette[keyTheme]).map(
           ([key, value]) =>
             !includes(key, keysToRemove) && (
-              <Grid item key={key} xs={6}>
+              <Grid item key={key} size={6}>
                 <div className={classes.headerContainer}>
                   <Typography variant="h6">{key}</Typography>
                   <Typography variant="button">{value}</Typography>

package/src/Dialog/UnsavedChanges/index.stories.tsx

@@ -4,6 +4,7 @@ import { useSnackbar } from '../..';
 import SnackbarProvider from '../../Snackbar/SnackbarProvider';
 
 import UnsavedChangesDialog from '.';
+import '../../ThemeProvider/tailwindcss.css';
 
 export default {
   argTypes: {

package/src/ListingPage/index.stories.tsx

@@ -15,6 +15,7 @@ import Panel from '../Panel';
 import Filter from './Filter';
 
 import ListingPage, { ListingPageProps } from '.';
+import '../ThemeProvider/tailwindcss.css';
 
 export default { title: 'Listing Page' };
 

package/src/MultiSelectEntries/index.stories.tsx

@@ -1,6 +1,7 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 
 import MultiSelectEntries from '.';
+import '../ThemeProvider/tailwindcss.css';
 
 export default {
   argTypes: {

package/src/MultiSelectEntries/index.tsx

@@ -63,7 +63,7 @@ const EntryChip = ({
   const { classes } = useStyles();
 
   return (
-    <Grid item xs={gridWidth}>
+    <Grid item size={gridWidth}>
       <Chip
         className={classes.chip}
         label={<div className={classes.labelChip}>{label}</div>}

package/src/SortableItems/index.stories.tsx

@@ -230,7 +230,7 @@ const ContentWithGrid = ({
   const { classes } = useContentStyles({ isDragging });
 
   return (
-    <Grid item style={style} xs={xs} {...listeners} {...attributes}>
+    <Grid item style={style} size={xs} {...listeners} {...attributes}>
       <Paper className={classes.content} ref={itemRef}>
         <Typography>{name as string}</Typography>
       </Paper>
@@ -244,7 +244,7 @@ const RootComponent = ({
 }: RootComponentProps): JSX.Element => (
   <Grid container spacing={1} style={{ width: '550px' }}>
     {not(isInDragOverlay) && (
-      <Grid item xs={12}>
+      <Grid item size={12}>
         <Typography align="center">This item cannot move</Typography>
       </Grid>
     )}

package/src/components/CrudPage/CrudPage.stories.tsx

@@ -7,6 +7,7 @@ import { ChangeEvent, useEffect } from 'react';
 import { CrudPage } from '.';
 import { SnackbarProvider } from '../../';
 import { Column, ColumnType } from '../../Listing/models';
+import '../../ThemeProvider/tailwindcss.css';
 
 interface Item {
   id: number;

package/src/components/DataTable/DataTable.stories.tsx

@@ -5,6 +5,7 @@ import { Box } from '@mui/material';
 import { ColumnType } from '../../Listing/models';
 
 import { DataTable } from './index';
+import '../../ThemeProvider/tailwindcss.css';
 
 const meta: Meta<typeof DataTable> = {
   component: DataTable

package/src/components/DataTable/EmptyState/DataTableEmptyState.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
 import { DataTableEmptyState } from './DataTableEmptyState';
+import '../../../ThemeProvider/tailwindcss.css';
 
 const meta: Meta<typeof DataTableEmptyState> = {
   component: DataTableEmptyState

package/src/components/DataTable/Item/DataTableItem.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
 import { DataTableItem } from './DataTableItem';
+import '../../../ThemeProvider/tailwindcss.css';
 
 const meta: Meta<typeof DataTableItem> = {
   component: DataTableItem

package/src/components/Form/AccessRights/AccessRights.stories.tsx

@@ -12,6 +12,7 @@ import {
   labels,
   roles
 } from './storiesData';
+import '../../../ThemeProvider/tailwindcss.css';
 
 const meta: Meta<typeof AccessRights> = {
   component: AccessRights,

package/src/components/Layout/AreaIndicator.tsx

@@ -17,12 +17,12 @@ const AreaIndicator = ({
 }: AreaIndicatorProps): ReactElement => {
   return (
     <div
-      className={'bg-secondary-main/25 relative min-h-8'}
+      className={'bg-secondary-main/25 min-h-8 grid grid-cols-[3fr_1fr]'}
       data-depth={depth}
       style={{ height, width }}
     >
       {/* biome-ignore lint/a11y: */}
-      <label className="left-2 rounded-sm border border-[#9747FF7F] border-dashed text-[#9747FF] text-[0.75rem] font-medium left-2 absolute top-1.5 px-2 py-0.5">
+      <label className="left-2 rounded-sm border border-[#9747FF7F] border-dashed text-[#9747FF] text-[0.75rem] font-medium left-2 top-1.5 px-2 py-0.5">
         {name}
       </label>
       {children}

package/src/components/Layout/PageLayout/PageLayout.stories.tsx

@@ -4,6 +4,7 @@ import { Default as DefaultPageHeaderStory } from '../../Header/PageHeader/PageH
 import { AreaIndicator } from '../AreaIndicator';
 
 import { PageLayout } from './index';
+import '../../../ThemeProvider/tailwindcss.css';
 
 const meta: Meta<typeof PageLayout> = {
   argTypes: {

package/src/components/Modal/ConfirmationModal/ConfirmationModal.stories.tsx

@@ -4,6 +4,7 @@ import { Provider, atom, createStore, useSetAtom } from 'jotai';
 import { Button } from '../../Button';
 
 import { ConfirmationModal } from './ConfirmationModal';
+import '../../../ThemeProvider/tailwindcss.css';
 
 const meta: Meta<typeof ConfirmationModal> = {
   component: ConfirmationModal

package/src/components/Modal/Modal.stories.tsx

@@ -3,6 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { Button } from '../Button';
 
 import { Modal } from '.';
+import '../../ThemeProvider/tailwindcss.css';
 
 const meta: Meta<typeof Modal> = {
   argTypes: {

package/src/components/Tabs/Tabs.tsx

@@ -1,14 +1,14 @@
 import { useCallback, useState } from 'react';
 
-import { TabContext, TabList, TabListProps } from '@mui/lab';
-import { Tab } from '@mui/material';
+import { TabContext } from '@mui/lab';
+import { Tab, Tabs as MuiTabs, TabsProps } from '@mui/material';
 
 import { useTabsStyles } from './Tab.styles';
 
 type Props = {
   children: Array<JSX.Element>;
   defaultTab: string;
-  tabList?: TabListProps;
+  tabList?: TabsProps;
   tabs: Array<{
     label: string;
     value: string;
@@ -31,12 +31,13 @@ export const Tabs = ({
 
   return (
     <TabContext value={selectedTab}>
-      <TabList
+      <MuiTabs
         classes={{
           indicator: classes.indicator,
           root: classes.tabs
         }}
         onChange={changeTab}
+        value={selectedTab}
         {...tabList}
       >
         {tabs.map(({ value, label }) => (
@@ -48,7 +49,7 @@ export const Tabs = ({
             value={value}
           />
         ))}
-      </TabList>
+      </MuiTabs>
       {children}
     </TabContext>
   );