@centreon/ui 24.4.76 → 24.4.78

package/package.json

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

package/src/Listing/ActionBar/ColumnMultiSelect.tsx

@@ -15,7 +15,7 @@ type Props = Pick<
 >;
 
 const toSelectEntries = (columns: Array<Column>): Array<SelectEntry> => {
-  return columns.map(({ id, label, shortLabel }) => ({
+  return columns.filter(Boolean).map(({ id, label, shortLabel }) => ({
     id,
     name: `${label}${!isNil(shortLabel) ? ` (${shortLabel})` : ''}`
   }));
@@ -28,10 +28,11 @@ const ColumnMultiSelect = ({
   onResetColumns
 }: Props): JSX.Element => {
   const { t } = useTranslation();
+  const sanitizedColumns = columns.filter(Boolean);
 
   const visibleColumns = getVisibleColumns({
     columnConfiguration,
-    columns
+    columns: sanitizedColumns
   });
 
   const selectColumnIds = (updatedColumns): void => {
@@ -41,7 +42,7 @@ const ColumnMultiSelect = ({
   return (
     <IconPopoverMultiSelect
       icon={<ColumnIcon />}
-      options={toSelectEntries(columns)}
+      options={toSelectEntries(sanitizedColumns)}
       popperPlacement="bottom-end"
       title={t(labelAddColumns)}
       value={toSelectEntries(visibleColumns)}

package/src/Listing/Header/ListingHeader.tsx

@@ -123,7 +123,7 @@ const ListingHeader = ({
           additionalProps={[sortField, sortOrder]}
           collisionDetection={closestCenter}
           itemProps={['id']}
-          items={visibleColumns}
+          items={visibleColumns.filter(Boolean)}
           memoProps={memoProps}
           sortingStrategy={horizontalListSortingStrategy}
           onDragEnd={({ items }): void => {

package/src/Listing/index.tsx

@@ -188,9 +188,10 @@ const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
     labelExpand: 'Expand'
   }
 }: Props<TRow>): JSX.Element => {
+  const sanitizedColumns = columns.filter(Boolean);
   const currentVisibleColumns = getVisibleColumns({
     columnConfiguration,
-    columns
+    columns: sanitizedColumns
   });
   const { dataStyle, getGridTemplateColumn } = useStyleTable({
     checkable,
@@ -486,7 +487,7 @@ const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
 
   const visibleColumns = getVisibleColumns({
     columnConfiguration,
-    columns
+    columns: sanitizedColumns
   });
 
   React.useEffect(() => {
@@ -520,7 +521,7 @@ const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
             actions={actions}
             actionsBarMemoProps={actionsBarMemoProps}
             columnConfiguration={columnConfiguration}
-            columns={columns}
+            columns={sanitizedColumns}
             currentPage={currentPage}
             customPaginationClassName={customPaginationClassName}
             limit={limit}
@@ -567,7 +568,7 @@ const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
                     areColumnsEditable={areColumnsEditable}
                     checkable={checkable}
                     columnConfiguration={columnConfiguration}
-                    columns={columns}
+                    columns={sanitizedColumns}
                     listingVariant={listingVariant}
                     memoProps={headerMemoProps}
                     predefinedRowsSelection={predefinedRowsSelection}
@@ -600,7 +601,7 @@ const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
                             (!isSubItem || subItems.canCheckSubItems)
                           }
                           columnConfiguration={columnConfiguration}
-                          columnIds={columns.map(prop('id'))}
+                          columnIds={sanitizedColumns.map(prop('id'))}
                           disableRowCondition={disableRowCondition}
                           isHovered={isRowHovered}
                           isSelected={isRowSelected}