@centreon/ui 25.6.1 → 25.6.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "25.6.1",
+  "version": "25.6.10",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
@@ -167,5 +167,11 @@
     "workerDirectory": [
       "public"
     ]
+  },
+  "nyc": {
+    "report-dir": "coverage",
+    "reporter": [
+      "json"
+    ]
   }
 }

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/Form/Inputs/ConnectedAutocomplete.tsx

@@ -135,6 +135,7 @@ const ConnectedAutocomplete = ({
         error={error}
         field={filterKey}
         getEndpoint={getEndpoint}
+        decoder={connectedAutocomplete?.decoder}
         getRenderedOptionText={connectedAutocomplete?.getRenderedOptionText}
         initialPage={1}
         isOptionEqualToValue={isOptionEqualToValue}
@@ -146,6 +147,7 @@ const ConnectedAutocomplete = ({
         onChange={changeAutocomplete}
         disableSelectAll={connectedAutocomplete?.disableSelectAll}
         limitTags={connectedAutocomplete?.limitTags}
+        searchConditions={connectedAutocomplete?.additionalConditionParameters}
       />
     ),
     memoProps: [

package/src/Form/Inputs/models.ts

@@ -63,6 +63,7 @@ export interface InputProps {
     getRenderedOptionText?: (option) => string | JSX.Element;
     disableSelectAll?: boolean;
     limitTags?: number;
+    decoder?;
   };
   file?: {
     multiple?: boolean;

package/src/InputField/Select/Autocomplete/Connected/index.tsx

@@ -37,6 +37,7 @@ export interface ConnectedAutoCompleteFieldProps<TData> {
   exclusionOptionProperty?: keyof SelectEntry;
   field: string;
   getEndpoint: ({ search, page }) => string;
+  decoder?;
   getRenderedOptionText: (option: TData) => string;
   getRequestHeaders?: HeadersInit;
   initialPage: number;
@@ -52,6 +53,7 @@ const ConnectedAutocompleteField = (
   const InnerConnectedAutocompleteField = <TData extends { name: string }>({
     initialPage = 1,
     getEndpoint,
+    decoder,
     field,
     labelKey,
     open,
@@ -91,6 +93,7 @@ const ConnectedAutocompleteField = (
     const { fetchQuery, isFetching, prefetchNextPage, data } = useFetchQuery<
       ListingModel<TData>
     >({
+      decoder,
       baseEndpoint,
       fetchHeaders: getRequestHeaders,
       getEndpoint: (params) => {

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>
   );