@centreon/ui 25.2.4 → 25.3.0

package/package.json

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

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

@@ -13,7 +13,7 @@ import { baseEndpoint, getEndpoint, label, optionsData } from './utils';
 
 import MultiConnectedAutocompleteField from '.';
 
-const renderMultiAutocompleteField = (): RenderResult =>
+const renderMultiAutocompleteField = (customRenderTags?): RenderResult =>
   render(
     <TestQueryProvider>
       <MultiConnectedAutocompleteField
@@ -23,6 +23,7 @@ const renderMultiAutocompleteField = (): RenderResult =>
         label={label}
         placeholder="Type here..."
         value={[optionsData.result[0]]}
+        customRenderTags={customRenderTags}
       />
     </TestQueryProvider>
   );
@@ -42,4 +43,22 @@ describe(MultiConnectedAutocompleteField, () => {
       expect(getFetchCall(0)).toEqual(`${baseEndpoint}?page=1`);
     });
   });
+
+  it('display tags when customTagsRender is defined', async () => {
+    const customRender = (tags: React.ReactNode): React.ReactNode => (
+      <div data-testid="custom-tags-wrapper">
+        {tags}
+      </div>
+    );
+
+    const { getByLabelText, getByTestId } = renderMultiAutocompleteField(customRender);
+
+    fireEvent.click(getByLabelText('Open'));
+
+    await waitFor(() => {
+      const tagChip = getByTestId(`tag-option-chip-${optionsData.result[0].id}`);
+      expect(tagChip).toBeVisible();
+      expect(tagChip).toHaveTextContent(optionsData.result[0].name);
+    });
+  });
 });

package/src/InputField/Select/Autocomplete/Multi/index.stories.tsx

@@ -58,3 +58,22 @@ export const popoverWithoutInput = (): JSX.Element => {
     />
   );
 };
+
+export const customRenderedTags = (): JSX.Element => {
+  const customRender = (tags: React.ReactNode): React.ReactNode => (
+    <div style={{ display: 'flex' }}>
+      {tags}
+      <span style={{ color: '#999' }}>Custom wrapper</span>
+    </div>
+  );
+
+  return (
+    <MultiAutocompleteField
+      label="Custom Tags Render"
+      options={options}
+      placeholder="Type here..."
+      value={[options[0], options[1]]}
+      customRenderTags={customRender}
+    />
+  );
+};

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

@@ -9,10 +9,6 @@ import { SelectEntry } from '../..';
 import Option from '../../Option';
 
 const useStyles = makeStyles()((theme) => ({
-  checkbox: {
-    marginRight: theme.spacing(1),
-    padding: 0
-  },
   deleteIcon: {
     height: theme.spacing(1.5),
     width: theme.spacing(1.5)
@@ -37,6 +33,7 @@ export interface Props
   getOptionTooltipLabel?: (option) => string;
   getTagLabel?: (option) => string;
   optionProperty?: string;
+  customRenderTags?: (tags: React.ReactNode) => React.ReactNode;
 }
 
 const MultiAutocompleteField = ({
@@ -48,6 +45,7 @@ const MultiAutocompleteField = ({
   getTagLabel = (option): string => option[optionProperty],
   getOptionTooltipLabel,
   chipProps,
+  customRenderTags,
   ...props
 }: Props): JSX.Element => {
   const { classes } = useStyles();
@@ -65,6 +63,7 @@ const MultiAutocompleteField = ({
               deleteIcon: classes.deleteIcon,
               root: classes.tag
             }}
+            data-testid={`tag-option-chip-${option.id}`}
             label={getTagLabel(option)}
             size="medium"
             {...getTagProps({ index })}
@@ -106,7 +105,11 @@ const MultiAutocompleteField = ({
           <Option checkboxSelected={selected}>{getOptionLabel(option)}</Option>
         </li>
       )}
-      renderTags={renderTags}
+      renderTags={(renderedValue, getTagProps): React.ReactNode =>
+        customRenderTags
+          ? customRenderTags(renderTags(renderedValue, getTagProps))
+          : renderTags(renderedValue, getTagProps)
+      }
       value={value}
       {...props}
     />

package/src/Listing/index.tsx

@@ -707,7 +707,9 @@ const Listing = <
                       ) : (
                         <EmptyResult
                           label={
-                            labelNoResultFound ? t(labelNoResultFound) : t(defaultLabelNoResultFound)
+                            labelNoResultFound
+                              ? t(labelNoResultFound)
+                              : t(defaultLabelNoResultFound)
                           }
                         />
                       ))}