@centreon/ui 26.11.9 → 26.11.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "26.11.9",
+  "version": "26.11.11",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
@@ -56,7 +56,7 @@
     "test/*"
   ],
   "devDependencies": {
-    "@biomejs/biome": "2.3.11",
+    "@biomejs/biome": "2.5.14",
     "@cypress/react": "^9.0.0",
     "@cypress/webpack-dev-server": "^4.0.1",
     "@faker-js/faker": "^9.5.1",

package/src/Form/Inputs/ConnectedAutocomplete.tsx

@@ -57,7 +57,6 @@ const ConnectedAutocomplete = ({
         ? [
             {
               name: 'name[lk]',
-              // The field wraps the typed text in `%`.
               value: searchedValue.slice(1, -1)
             }
           ]

package/src/Graph/Chart/InteractiveComponents/Annotations/Annotation/index.tsx

@@ -79,4 +79,4 @@ const Annotation = ({
 };
 
 export default Annotation;
-export { yMargin, iconSize };
+export { iconSize, yMargin };

package/src/Graph/Chart/common/index.ts

@@ -42,11 +42,11 @@ const getCurveFactory = (
 
 export {
   commonTickLabelProps,
-  margin,
-  getFillColor,
   dateFormat,
-  timeFormat,
   dateTimeFormat,
+  getCurveFactory,
+  getFillColor,
+  margin,
   maxLinesDisplayedLegend,
-  getCurveFactory
+  timeFormat
 };

package/src/Graph/common/BaseChart/Header/index.tsx

@@ -5,7 +5,7 @@ import { useMemoComponent } from '@centreon/ui';
 import type { ReactElement } from 'react';
 
 import type { LineChartHeader } from './models';
-import { ussHeaderChartStyles } from './useHeaderStyles';
+import { useHeaderChartStyles } from './useHeaderStyles';
 
 interface Props {
   header?: LineChartHeader;
@@ -13,7 +13,7 @@ interface Props {
 }
 
 const Header = ({ title, header }: Props): ReactElement => {
-  const { classes } = ussHeaderChartStyles();
+  const { classes } = useHeaderChartStyles();
 
   const displayTitle = header?.displayTitle ?? true;
 

package/src/Graph/common/BaseChart/Header/useHeaderStyles.ts

@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui';
 
-export const ussHeaderChartStyles = makeStyles()({
+export const useHeaderChartStyles = makeStyles()({
   header: {
     display: 'grid',
     gridTemplateColumns: 'auto 1fr auto',

package/src/Graph/common/timeSeries/index.test.ts

@@ -397,11 +397,14 @@ describe('timeSeries', () => {
       [null, 'B', 1024, null]
     ];
 
-    it.each(
-      cases
-    )('formats the given value to a human readable form according to the given unit and base', (value, unit, base, formattedResult) => {
-      expect(formatMetricValue({ base, unit, value })).toEqual(formattedResult);
-    });
+    it.each(cases)(
+      'formats the given value to a human readable form according to the given unit and base',
+      (value, unit, base, formattedResult) => {
+        expect(formatMetricValue({ base, unit, value })).toEqual(
+          formattedResult
+        );
+      }
+    );
   });
 
   describe('getSortedStackedLines', () => {
@@ -639,33 +642,31 @@ describe('Format value with unit', () => {
   });
 
   describe('Format the value as human readable', () => {
-    it.each(humanReadableTestCases)('formats the value with $unit', ({
-      value,
-      unit,
-      expectedResult
-    }) => {
-      expect(
-        formatMetricValueWithUnit({
-          unit,
-          value
-        })
-      ).toEqual(expectedResult);
-    });
+    it.each(humanReadableTestCases)(
+      'formats the value with $unit',
+      ({ value, unit, expectedResult }) => {
+        expect(
+          formatMetricValueWithUnit({
+            unit,
+            value
+          })
+        ).toEqual(expectedResult);
+      }
+    );
   });
 
   describe('Format the value as raw', () => {
-    it.each(rawTestCases)('formats the value with $unit', ({
-      value,
-      unit,
-      expectedResult
-    }) => {
-      expect(
-        formatMetricValueWithUnit({
-          isRaw: true,
-          unit,
-          value
-        })
-      ).toEqual(expectedResult);
-    });
+    it.each(rawTestCases)(
+      'formats the value with $unit',
+      ({ value, unit, expectedResult }) => {
+        expect(
+          formatMetricValueWithUnit({
+            isRaw: true,
+            unit,
+            value
+          })
+        ).toEqual(expectedResult);
+      }
+    );
   });
 });

package/src/Graph/common/timeSeries/index.ts

@@ -947,32 +947,32 @@ export const getStackedLinesTimeSeriesPerStackAndUnit = ({
 };
 
 export {
-  getTimeSeries,
+  bisectDate,
+  formatMetricValue,
+  formatMetricValueWithUnit,
+  getDates,
+  getInvertedStackedLines,
   getLineData,
-  getMin,
+  getLineForMetric,
   getMax,
-  getTime,
   getMetrics,
-  getValueForMetric,
-  getMetricValuesForUnit,
-  getUnits,
-  getDates,
-  getLineForMetric,
   getMetricValuesForLines,
-  getSortedStackedLines,
-  getTimeSeriesForLines,
-  getStackedMetricValues,
-  getInvertedStackedLines,
+  getMetricValuesForUnit,
+  getMetricWithLatestData,
+  getMin,
   getNotInvertedStackedLines,
-  hasUnitStackedLines,
-  getYScale,
   getScale,
-  getXScale,
-  formatMetricValue,
+  getSortedStackedLines,
+  getStackedMetricValues,
+  getTime,
+  getTimeSeries,
+  getTimeSeriesForLines,
   getTimeValue,
-  bisectDate,
-  getMetricWithLatestData,
-  formatMetricValueWithUnit,
+  getUnits,
+  getValueForMetric,
+  getXScale,
+  getYScale,
+  getYScalePerUnit,
   getYScaleUnit,
-  getYScalePerUnit
+  hasUnitStackedLines
 };

package/src/Listing/Cell/DataCell.tsx

@@ -113,7 +113,6 @@ const DataCell = ({
               if (!clickable) {
                 return;
               }
-              e.preventDefault();
               e.stopPropagation();
             }}
             {...commonCellProps}
@@ -130,7 +129,6 @@ const DataCell = ({
             if (!clickable) {
               return;
             }
-            e.preventDefault();
             e.stopPropagation();
           }}
           style={{

package/src/Listing/Listing.cypress.spec.tsx

@@ -15,6 +15,19 @@ const ButtonColumn = ({ row }: Props): JSX.Element => (
   <Button size="small">Click to reveal details about {row.name}</Button>
 );
 
+const CheckboxColumn = ({ row }: Props): JSX.Element => {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <input
+      aria-label={`Toggle ${row.name}`}
+      checked={checked}
+      onChange={(event) => setChecked(event.target.checked)}
+      type="checkbox"
+    />
+  );
+};
+
 const LargeText = (): JSX.Element => (
   <Typography sx={{ whiteSpace: 'normal' }}>
     This is a large text that fills the content
@@ -301,4 +314,36 @@ describe('Listing', () => {
 
     cy.makeSnapshot();
   });
+
+  it('toggles a checkbox in a clickable column without clicking the row', () => {
+    const onRowClick = cy.stub().as('rowClick');
+
+    cy.mount({
+      Component: (
+        <div style={{ height: '100vh' }}>
+          <Listing
+            columns={[
+              {
+                Component: CheckboxColumn,
+                clickable: true,
+                id: 'toggle',
+                label: 'Toggle',
+                type: ColumnType.component
+              }
+            ]}
+            currentPage={1}
+            limit={10}
+            onRowClick={onRowClick}
+            rows={[{ id: 0, name: 'E0' }]}
+            totalRows={1}
+          />
+        </div>
+      )
+    });
+
+    cy.findByLabelText('Toggle E0').click();
+
+    cy.findByLabelText('Toggle E0').should('be.checked');
+    cy.get('@rowClick').should('not.have.been.called');
+  });
 });

package/src/StatusChip/index.tsx

@@ -55,5 +55,5 @@ const StatusChip = ({
   );
 };
 
-export { SeverityCode, getStatusColors };
+export { getStatusColors, SeverityCode };
 export default StatusChip;

package/src/api/index.ts

@@ -66,4 +66,4 @@ const deleteData =
       })
       .then(({ data }) => data);
 
-export { getData, patchData, postData, putData, deleteData };
+export { deleteData, getData, patchData, postData, putData };

package/src/components/Button/Icon/IconButton.tsx

@@ -63,4 +63,5 @@ const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
     );
   }
 );
+
 export { IconButton };

package/src/components/Form/Dashboard/DashboardForm.styles.ts

@@ -18,4 +18,4 @@ const useGlobalRefreshIntervalStyles = makeStyles()((theme) => ({
   }
 }));
 
-export { useStyles, useGlobalRefreshIntervalStyles };
+export { useGlobalRefreshIntervalStyles, useStyles };

package/src/components/Menu/useMenu.tsx

@@ -77,4 +77,4 @@ const useMenu = (): UseMenu => {
   };
 };
 
-export { useMenu, MenuProvider };
+export { MenuProvider, useMenu };

package/src/index.ts

@@ -1,11 +1,5 @@
 import type { Props as SingleAutocompleteFieldProps } from './InputField/Select/Autocomplete';
 
-export { default as IconButton } from './Button/Icon';
-export { Checkbox, CheckboxGroup } from './Checkbox';
-export { default as SingleAutocompleteField } from './InputField/Select/Autocomplete';
-export { default as Pagination } from './Pagination';
-export type { SingleAutocompleteFieldProps };
-
 export type { ActionsListActions } from './ActionsList';
 export {
   ActionsListActionDivider,
@@ -46,7 +40,9 @@ export {
 export { WidgetResourceType as ResourceType } from './api/useGraphQuery/models';
 export { default as useMutationQuery, Method } from './api/useMutationQuery';
 export { default as useRequest } from './api/useRequest';
+export { default as IconButton } from './Button/Icon';
 export { default as SaveButton } from './Button/Save';
+export { Checkbox, CheckboxGroup } from './Checkbox';
 export { default as ContentWithCircularLoading } from './ContentWithCircularProgress';
 export * from './Dashboard';
 export { default as Dialog } from './Dialog';
@@ -78,6 +74,7 @@ export { default as PersistentTooltip } from './InputField/Search/PersistentTool
 export { default as RegexpHelpTooltip } from './InputField/Search/RegexpHelpTooltip';
 export type { SelectEntry } from './InputField/Select';
 export { default as SelectField } from './InputField/Select';
+export { default as SingleAutocompleteField } from './InputField/Select/Autocomplete';
 export { default as MultiConnectedAutocompleteField } from './InputField/Select/Autocomplete/Connected/Multi/index';
 export { default as PopoverMultiConnectedAutocompleteField } from './InputField/Select/Autocomplete/Connected/Multi/Popover';
 export { default as SingleConnectedAutocompleteField } from './InputField/Select/Autocomplete/Connected/Single';
@@ -112,6 +109,7 @@ export { default as Module } from './Module/index';
 export { default as LicensedModule } from './Module/LicensedModule';
 export { default as MultiSelectEntries } from './MultiSelectEntries';
 export { default as PageSkeleton } from './PageSkeleton';
+export { default as Pagination } from './Pagination';
 export { default as Panel } from './Panel';
 export { default as MemoizedPanel } from './Panel/Memoized';
 export { default as SectionPanel, MemoizedSectionPanel } from './Panel/Section';
@@ -145,3 +143,4 @@ export { default as Subtitle } from './Typography/Subtitle';
 export * from './utils';
 export { default as WallpaperPage } from './WallpaperPage';
 export { default as Wizard } from './Wizard';
+export type { SingleAutocompleteFieldProps };

package/src/queryParameters/url/index.ts

@@ -41,4 +41,4 @@ const getUrlQueryParameters = <
   return fromPairs(entries) as TQueryParameters;
 };
 
-export { setUrlQueryParameters, getUrlQueryParameters };
+export { getUrlQueryParameters, setUrlQueryParameters };

package/src/utils/useLocaleDateTimeFormat/index.ts

@@ -92,4 +92,4 @@ const useLocaleDateTimeFormat = (): LocaleDateTimeFormat => {
   };
 };
 
-export { dateTimeFormat, dateFormat, timeFormat, useLocaleDateTimeFormat };
+export { dateFormat, dateTimeFormat, timeFormat, useLocaleDateTimeFormat };