@centreon/ui 26.11.8 → 26.11.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "26.11.8",
+  "version": "26.11.10",
   "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/components/SortableEntriesList/SortableEntriesList.cypress.spec.tsx

@@ -1,3 +1,4 @@
+import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';
 import EditIcon from '@mui/icons-material/Edit';
 import VisibilityIcon from '@mui/icons-material/Visibility';
 
@@ -205,7 +206,7 @@ describe('SortableEntriesList - single input rows', () => {
     });
   });
 
-  it('removes a row and moves the focus to the delete button of the row taking its place', () => {
+  it('removes a row and moves the focus to the first input of the row taking its place', () => {
     const { onChange } = initializeTemplates({
       templates: [options[0], options[1], options[2]]
     });
@@ -217,9 +218,7 @@ describe('SortableEntriesList - single input rows', () => {
       expect(getLastValues(onChange)).to.deep.equal([options[1], options[2]]);
     });
     cy.focused()
-      .should('have.attr', 'data-testid', 'delete-row')
-      .closest('li')
-      .find('[data-testid="Template"]')
+      .should('have.attr', 'data-testid', 'Template')
       .should('have.value', options[1].name);
   });
 
@@ -326,15 +325,17 @@ const renderMacroRow = ({
   setField,
   value: macro
 }: RenderRowParams<MacroRow>): JSX.Element => (
-  <div className="flex gap-2">
+  <div className="grid grid-cols-2 gap-2 @max-[600px]:grid-cols-1">
     <TextField
       dataTestId="macro-name"
+      fullWidth
       label="Name"
       onChange={(event): void => setField('name', event.target.value)}
       value={macro.name}
     />
     <TextField
       dataTestId="macro-value"
+      fullWidth
       label="Value"
       onChange={(event): void => setField('value', event.target.value)}
       type={macro.isPassword ? 'password' : 'text'}
@@ -504,3 +505,288 @@ describe('SortableEntriesList - multiple input rows', () => {
     getRows().eq(1).should('have.class', 'origin-fromTpl');
   });
 });
+
+const buildMacros = (count: number): Array<MacroRow> =>
+  Array.from({ length: count }, (_, index) => ({
+    ...emptyMacro,
+    name: `MACRO_${index + 1}`
+  }));
+
+const panelWidths = [1400, 900, 720, 560];
+
+// The panel width is state, so changing it resizes the mounted list at runtime.
+const ResizablePanel = ({
+  count,
+  maxVisibleRows,
+  onChangeSpy
+}: {
+  count: number;
+  maxVisibleRows?: number;
+  onChangeSpy: Stub;
+}): JSX.Element => {
+  const [width, setWidth] = useState(panelWidths[0]);
+
+  return (
+    <div className="p-4">
+      {panelWidths.map((panelWidth) => (
+        <button
+          data-testid={`width-${panelWidth}`}
+          key={panelWidth}
+          onClick={(): void => setWidth(panelWidth)}
+          type="button"
+        >
+          {panelWidth}
+        </button>
+      ))}
+      <div data-testid="panel" style={{ width }}>
+        <ControlledList<MacroRow>
+          actions={(): Array<SortableRowAction> => [
+            {
+              icon: <VisibilityIcon />,
+              id: 'toggle-password',
+              label: 'Toggle password',
+              onClick: () => undefined
+            },
+            {
+              icon: <DescriptionOutlinedIcon />,
+              id: 'macro-description',
+              label: 'Description',
+              onClick: () => undefined
+            }
+          ]}
+          createValue={(): MacroRow => emptyMacro}
+          initialValues={buildMacros(count)}
+          maxVisibleRows={maxVisibleRows}
+          onChangeSpy={onChangeSpy}
+          renderRow={renderMacroRow}
+        />
+      </div>
+    </div>
+  );
+};
+
+const initializePanel = ({
+  count,
+  maxVisibleRows
+}: {
+  count: number;
+  maxVisibleRows?: number;
+}): { onChange: Stub } => {
+  const onChange = cy.stub();
+
+  cy.viewport(1600, 900);
+  cy.mount({
+    Component: (
+      <ResizablePanel
+        count={count}
+        maxVisibleRows={maxVisibleRows}
+        onChangeSpy={onChange}
+      />
+    )
+  });
+
+  return { onChange };
+};
+
+const getScrollArea = (): Cypress.Chainable =>
+  cy.findByTestId('sortable-entries-scroll');
+
+const getRect = (element: Element): DOMRect => element.getBoundingClientRect();
+
+const getLastNames = (onChange: Stub): Array<string> =>
+  getLastValues<MacroRow>(onChange).map(({ name }) => name);
+
+describe('SortableEntriesList - capped list', () => {
+  it('shows maxVisibleRows rows plus half of the next one, and keeps the add button outside the scroll area', () => {
+    initializePanel({ count: 15, maxVisibleRows: 10 });
+
+    getScrollArea().should(($scrollArea) => {
+      const scrollArea = $scrollArea[0];
+      const rows = scrollArea.querySelectorAll('li');
+      const visibleBottom = getRect(scrollArea).bottom;
+
+      expect(scrollArea.scrollHeight).to.be.greaterThan(
+        scrollArea.clientHeight
+      );
+      expect(getRect(rows[9]).bottom).to.be.at.most(visibleBottom);
+      expect(visibleBottom - getRect(rows[10]).top).to.be.closeTo(
+        getRect(rows[10]).height / 2,
+        1
+      );
+    });
+
+    cy.findByTestId('Add')
+      .should('be.visible')
+      .closest('[data-testid="sortable-entries-scroll"]')
+      .should('not.exist');
+  });
+
+  it('fades the cut-off row only while rows are hidden below', () => {
+    initializePanel({ count: 15, maxVisibleRows: 10 });
+
+    getScrollArea().should('not.have.css', 'mask-image', 'none');
+    getScrollArea().scrollTo('bottom');
+    getScrollArea().should('have.css', 'mask-image', 'none');
+  });
+
+  it('does not cap a list shorter than maxVisibleRows', () => {
+    initializePanel({ count: 5, maxVisibleRows: 10 });
+
+    getScrollArea()
+      .should('have.css', 'max-height', 'none')
+      .should(($scrollArea) => {
+        expect($scrollArea[0].scrollHeight).to.equal(
+          $scrollArea[0].clientHeight
+        );
+      });
+  });
+
+  it('focuses and scrolls to a row added at the end of a capped list', () => {
+    initializePanel({ count: 15, maxVisibleRows: 10 });
+
+    cy.findByTestId('Add').click();
+
+    getRows().should('have.length', 16);
+    cy.focused()
+      .should('have.attr', 'data-testid', 'macro-name')
+      .should(($input) => {
+        const scrollAreaRect = getRect(
+          $input[0].closest(
+            '[data-testid="sortable-entries-scroll"]'
+          ) as Element
+        );
+        const inputRect = getRect($input[0]);
+
+        expect(inputRect.top).to.be.at.least(scrollAreaRect.top);
+        expect(inputRect.bottom).to.be.at.most(scrollAreaRect.bottom);
+      });
+  });
+
+  it('scrolls to the focused new row when adding it makes the list reach the cap', () => {
+    initializePanel({ count: 10, maxVisibleRows: 10 });
+
+    getScrollArea().should('have.css', 'max-height', 'none');
+    cy.findByTestId('Add').click();
+
+    getRows().should('have.length', 11);
+    getScrollArea().should('not.have.css', 'max-height', 'none');
+    cy.focused()
+      .should('have.attr', 'data-testid', 'macro-name')
+      .closest('li')
+      .should(($row) => {
+        const scrollAreaRect = getRect(
+          $row[0].closest('[data-testid="sortable-entries-scroll"]') as Element
+        );
+
+        // 1px tolerance for sub-pixel row heights.
+        expect(getRect($row[0]).bottom).to.be.at.most(
+          scrollAreaRect.bottom + 1
+        );
+      });
+    getScrollArea().should('have.css', 'mask-image', 'none');
+  });
+
+  it('moves a row past the visible area with the keyboard, scrolling the list', () => {
+    const { onChange } = initializePanel({ count: 15, maxVisibleRows: 10 });
+
+    cy.moveSortableElement({
+      direction: 'down',
+      element: cy.findAllByTestId('drag-handle').eq(0),
+      times: 12
+    });
+
+    cy.wrap(onChange).should(() => {
+      expect(getLastNames(onChange).indexOf('MACRO_1')).to.equal(12);
+    });
+    getScrollArea().its('0.scrollTop').should('be.greaterThan', 0);
+  });
+
+  it('auto-scrolls while a row is dragged with the pointer near the bottom edge', () => {
+    const { onChange } = initializePanel({ count: 15, maxVisibleRows: 10 });
+
+    cy.findAllByTestId('drag-handle')
+      .eq(0)
+      .then(($handle) => {
+        const { left, top, width, height } = getRect($handle[0]);
+        const pointer = {
+          button: 0,
+          clientX: left + width / 2,
+          isPrimary: true,
+          pointerId: 1
+        };
+
+        cy.wrap($handle).trigger('pointerdown', {
+          ...pointer,
+          clientY: top + height / 2
+        });
+
+        getScrollArea().then(($scrollArea) => {
+          const clientY = getRect($scrollArea[0]).bottom - 5;
+
+          cy.document().trigger('pointermove', { ...pointer, clientY });
+          getScrollArea().its('0.scrollTop').should('be.greaterThan', 100);
+          cy.document().trigger('pointermove', { ...pointer, clientY });
+          cy.document().trigger('pointerup', { ...pointer, clientY });
+        });
+      });
+
+    cy.wrap(onChange).should(() => {
+      expect(getLastNames(onChange).indexOf('MACRO_1')).to.be.greaterThan(10);
+    });
+  });
+});
+
+describe('SortableEntriesList - container responsive rows', () => {
+  const getFieldRects = (): Cypress.Chainable<Array<DOMRect>> =>
+    getRows()
+      .eq(0)
+      .find('.MuiFormControl-root')
+      .then(($fields) => $fields.toArray().map(getRect));
+
+  it('keeps the fields and the four buttons on one line at 1400, 900 and 720px, resized at runtime', () => {
+    initializePanel({ count: 3 });
+
+    [1400, 900, 720, 1400].forEach((width) => {
+      cy.findByTestId(`width-${width}`).click();
+      cy.findByTestId('panel').should('have.css', 'width', `${width}px`);
+
+      getFieldRects().should(([name, value]) => {
+        expect(value.top).to.equal(name.top);
+        expect(name.width).to.be.at.least(275);
+        expect(value.width).to.be.at.least(275);
+      });
+
+      cy.get('[data-row-fields]')
+        .eq(0)
+        .next()
+        .find('button')
+        .should('have.length', 4)
+        .should(($buttons) => {
+          const rects = $buttons.toArray().map(getRect);
+          const panelRight = getRect(
+            Cypress.$('[data-testid="panel"]')[0]
+          ).right;
+
+          rects.slice(1).forEach((rect, index) => {
+            expect(rect.top).to.equal(rects[index].top);
+            expect(rect.left - rects[index].left).to.equal(32);
+          });
+          expect(rects[3].right).to.be.at.most(panelRight);
+        });
+    });
+  });
+
+  it('stacks the fields when the list gets narrower than 600px, whatever the viewport', () => {
+    initializePanel({ count: 3 });
+
+    cy.findByTestId('width-560').click();
+    getFieldRects().should(([name, value]) => {
+      expect(value.top).to.be.greaterThan(name.bottom);
+    });
+
+    cy.findByTestId('width-900').click();
+    getFieldRects().should(([name, value]) => {
+      expect(value.top).to.equal(name.top);
+    });
+  });
+});

package/src/components/SortableEntriesList/SortableEntriesList.stories.tsx

@@ -1,3 +1,4 @@
+import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';
 import EditIcon from '@mui/icons-material/Edit';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import VisibilityIcon from '@mui/icons-material/Visibility';
@@ -90,7 +91,10 @@ const renderTemplateRow = ({
 };
 
 type TemplatesListArgs = Partial<
-  Pick<SortableEntriesListProps<TemplateRow>, 'addLabel' | 'draggable'>
+  Pick<
+    SortableEntriesListProps<TemplateRow>,
+    'addLabel' | 'draggable' | 'maxVisibleRows'
+  >
 >;
 
 const TemplatesList = (args: TemplatesListArgs): JSX.Element => {
@@ -132,10 +136,11 @@ const TemplatesList = (args: TemplatesListArgs): JSX.Element => {
 };
 
 export const Templates: Story = {
-  args: { draggable: true },
+  args: { draggable: true, maxVisibleRows: 10 },
   argTypes: {
     addLabel: { control: 'text' },
-    draggable: { control: 'boolean' }
+    draggable: { control: 'boolean' },
+    maxVisibleRows: { control: 'number' }
   },
   parameters: { mockData: templatesMockData },
   render: (args) => <TemplatesList {...(args as TemplatesListArgs)} />
@@ -167,7 +172,7 @@ const renderMacroRow = ({
   setField,
   value: macro
 }: RenderRowParams<MacroRow>): JSX.Element => (
-  <div className="grid grid-cols-2 gap-2">
+  <div className="grid grid-cols-2 gap-2 @max-[600px]:grid-cols-1">
     <TextField
       dataTestId="macro-name"
       fullWidth
@@ -197,12 +202,22 @@ const initialMacros: Array<MacroRow> = [
   { isPassword: false, name: 'PORT', origin: 'fromCommand', value: '443' }
 ];
 
+const buildMacros = (count: number): Array<MacroRow> =>
+  Array.from({ length: count }, (_, index) => ({
+    isPassword: false,
+    name: `MACRO_${index + 1}`,
+    origin: 'direct',
+    value: `value ${index + 1}`
+  }));
+
 const MacrosList = ({
   draggable,
-  initialValues = initialMacros
+  initialValues = initialMacros,
+  maxVisibleRows
 }: {
   draggable: boolean;
   initialValues?: Array<MacroRow>;
+  maxVisibleRows?: number;
 }): JSX.Element => {
   const [macros, setMacros] = useState(initialValues);
 
@@ -216,7 +231,7 @@ const MacrosList = ({
     );
 
   return (
-    <div className="w-[640px]">
+    <>
       <SortableEntriesList<MacroRow>
         actions={({ index, value }) => [
           {
@@ -224,29 +239,87 @@ const MacrosList = ({
             id: 'toggle-password',
             label: value.isPassword ? 'Show value' : 'Hide value',
             onClick: () => toggleIsPassword(index)
+          },
+          {
+            icon: <DescriptionOutlinedIcon />,
+            id: 'macro-description',
+            label: 'Description',
+            onClick: () => undefined
           }
         ]}
         createValue={createMacroRow}
         draggable={draggable}
         getRowClassName={({ value }) => macroRowClassName[value.origin]}
         label="Custom macros"
+        maxVisibleRows={maxVisibleRows}
         onChange={setMacros}
         renderRow={renderMacroRow}
         values={macros}
       />
       <ValuesPreview values={macros} />
-    </div>
+    </>
   );
 };
 
 export const CustomMacros: Story = {
-  render: () => <MacrosList draggable />
+  render: () => (
+    <div className="w-[640px]">
+      <MacrosList draggable />
+    </div>
+  )
 };
 
 export const NonDraggable: Story = {
-  render: () => <MacrosList draggable={false} />
+  render: () => (
+    <div className="w-[640px]">
+      <MacrosList draggable={false} />
+    </div>
+  )
 };
 
 export const Empty: Story = {
-  render: () => <MacrosList draggable initialValues={[]} />
+  render: () => (
+    <div className="w-[640px]">
+      <MacrosList draggable initialValues={[]} />
+    </div>
+  )
+};
+
+// Capped list in a resizable container: drag the bottom-right corner or use the
+// presets to check the row layout against the list width, not the viewport.
+const panelWidths = [1400, 900, 720, 560];
+
+const ScrollableMacrosList = (): JSX.Element => {
+  const [width, setWidth] = useState(panelWidths[0]);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex gap-2">
+        {panelWidths.map((panelWidth) => (
+          <button
+            className="rounded border px-2 py-1"
+            key={panelWidth}
+            onClick={(): void => setWidth(panelWidth)}
+            type="button"
+          >
+            {panelWidth}px
+          </button>
+        ))}
+      </div>
+      <div
+        className="max-w-full resize-x overflow-auto border border-dashed p-2"
+        style={{ width }}
+      >
+        <MacrosList
+          draggable
+          initialValues={buildMacros(15)}
+          maxVisibleRows={10}
+        />
+      </div>
+    </div>
+  );
+};
+
+export const ScrollableAndResizable: Story = {
+  render: () => <ScrollableMacrosList />
 };

package/src/components/SortableEntriesList/SortableEntriesList.tsx

@@ -29,6 +29,7 @@ import {
   labelRowMovedOver,
   labelRowPickedUp
 } from './translatedLabels';
+import { useMaxVisibleRows } from './useMaxVisibleRows';
 import { useSortableEntries } from './useSortableEntries';
 
 export interface Props<T> {
@@ -42,8 +43,17 @@ export interface Props<T> {
   getRowClassName?: (params: RowParams<T>) => string | undefined;
   /** Accessible name of the list. */
   label?: string;
+  /**
+   * Caps the list to this many rows, the next one half visible, and scrolls
+   * the rest. The add button stays outside the scroll area.
+   */
+  maxVisibleRows?: number;
   onChange: (values: Array<T>) => void;
-  /** Renders the inputs of one row. `values` gives access to sibling rows. */
+  /**
+   * Renders the inputs of one row. `values` gives access to sibling rows. The
+   * list is a CSS container, so the row layout can adapt to the list width
+   * with container query classes (e.g. `@max-[600px]:grid-cols-1`).
+   */
   renderRow: (params: RenderRowParams<T>) => ReactNode;
   values: Array<T>;
 }
@@ -60,6 +70,7 @@ export const SortableEntriesList = <T,>({
   draggable = true,
   getRowClassName,
   label,
+  maxVisibleRows,
   onChange,
   renderRow,
   values
@@ -81,10 +92,21 @@ export const SortableEntriesList = <T,>({
     values
   });
 
+  const {
+    hasHiddenRowsBelow,
+    listRef,
+    maxHeight,
+    scrollRef,
+    updateHiddenRowsBelow
+  } = useMaxVisibleRows(maxVisibleRows);
+
   const sensors = useSensors(
     useSensor(PointerSensor),
     useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates
+      coordinateGetter: sortableKeyboardCoordinates,
+      // Instant scroll keeps each key press based on up-to-date positions in a
+      // capped list.
+      scrollBehavior: 'auto'
     })
   );
 
@@ -113,7 +135,7 @@ export const SortableEntriesList = <T,>({
   };
 
   return (
-    <div ref={containerRef}>
+    <div className="@container w-full" ref={containerRef}>
       <ItemComposition labelAdd={translatedAddLabel} onAddItem={addEntry}>
         {[
           <DndContext
@@ -133,28 +155,41 @@ export const SortableEntriesList = <T,>({
               items={entryIds}
               strategy={verticalListSortingStrategy}
             >
-              <ul
-                aria-label={label}
-                className="m-0 flex w-full list-none flex-col gap-2 p-0"
+              <div
+                className={
+                  maxVisibleRows
+                    ? `relative w-full overflow-y-auto pt-2 [scrollbar-gutter:stable] [scrollbar-width:thin] ${hasHiddenRowsBelow ? '[mask-image:linear-gradient(to_bottom,#000_calc(100%-2rem),transparent)]' : ''}`
+                    : 'w-full'
+                }
+                data-testid="sortable-entries-scroll"
+                onScroll={updateHiddenRowsBelow}
+                ref={scrollRef}
+                style={{ maxHeight }}
               >
-                {entries.map(({ id, value }, index) => {
-                  const rowParams = { index, value, values };
+                <ul
+                  aria-label={label}
+                  className="m-0 flex w-full list-none flex-col gap-2 p-0"
+                  ref={listRef}
+                >
+                  {entries.map(({ id, value }, index) => {
+                    const rowParams = { index, value, values };
 
-                  return (
-                    <Row<T>
-                      actions={actions?.(rowParams) ?? []}
-                      className={getRowClassName?.(rowParams)}
-                      draggable={draggable}
-                      id={id}
-                      key={id}
-                      onDelete={removeEntry}
-                      onUpdate={updateEntry}
-                      renderRow={renderRow}
-                      rowParams={rowParams}
-                    />
-                  );
-                })}
-              </ul>
+                    return (
+                      <Row<T>
+                        actions={actions?.(rowParams) ?? []}
+                        className={getRowClassName?.(rowParams)}
+                        draggable={draggable}
+                        id={id}
+                        key={id}
+                        onDelete={removeEntry}
+                        onUpdate={updateEntry}
+                        renderRow={renderRow}
+                        rowParams={rowParams}
+                      />
+                    );
+                  })}
+                </ul>
+              </div>
             </SortableContext>
           </DndContext>
         ]}

package/src/components/SortableEntriesList/useMaxVisibleRows.ts

@@ -0,0 +1,77 @@
+import { type RefObject, useLayoutEffect, useRef, useState } from 'react';
+
+interface Result {
+  hasHiddenRowsBelow: boolean;
+  listRef: RefObject<HTMLUListElement | null>;
+  maxHeight?: number;
+  scrollRef: RefObject<HTMLDivElement | null>;
+  updateHiddenRowsBelow: () => void;
+}
+
+// Caps the list height to `maxVisibleRows` rows, measured from the rendered
+// rows so it stays right whatever the row height (content, container width).
+export const useMaxVisibleRows = (maxVisibleRows?: number): Result => {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const listRef = useRef<HTMLUListElement>(null);
+  const [maxHeight, setMaxHeight] = useState<number>();
+  const [hasHiddenRowsBelow, setHasHiddenRowsBelow] = useState(false);
+
+  const updateHiddenRowsBelow = (): void => {
+    const container = scrollRef.current;
+
+    setHasHiddenRowsBelow(
+      !!container &&
+        container.scrollHeight - container.scrollTop - container.clientHeight >
+          1
+    );
+  };
+
+  useLayoutEffect(() => {
+    const list = listRef.current;
+
+    if (!maxVisibleRows || !list) {
+      setMaxHeight(undefined);
+
+      return undefined;
+    }
+
+    const observer = new ResizeObserver(() => {
+      const cutOffRow = list.children[maxVisibleRows] as
+        | HTMLElement
+        | undefined;
+
+      // Half of the first row past the cap stays visible, so the cut reads as
+      // a deliberate hint that the list scrolls.
+      setMaxHeight(
+        cutOffRow
+          ? Math.round(cutOffRow.offsetTop + cutOffRow.offsetHeight / 2)
+          : undefined
+      );
+      updateHiddenRowsBelow();
+    });
+
+    observer.observe(list);
+
+    return () => observer.disconnect();
+  }, [maxVisibleRows]);
+
+  useLayoutEffect(() => {
+    // The cap can apply after a row was added and focused (e.g. the 11th row
+    // of a list capped to 10): bring the focused row back into view.
+    const focusedRow = document.activeElement?.closest('li');
+
+    if (focusedRow && scrollRef.current?.contains(focusedRow)) {
+      focusedRow.scrollIntoView({ block: 'nearest' });
+    }
+
+    updateHiddenRowsBelow();
+  }, [maxHeight]);
+
+  return {
+    hasHiddenRowsBelow,
+    listRef,
+    maxHeight,
+    scrollRef,
+    updateHiddenRowsBelow
+  };
+};

package/src/components/SortableEntriesList/useSortableEntries.ts

@@ -77,7 +77,12 @@ export const useSortableEntries = <T>({
     }
 
     pendingFocusSelectorRef.current = null;
-    containerRef.current?.querySelector<HTMLElement>(selector)?.focus();
+
+    const element = containerRef.current?.querySelector<HTMLElement>(selector);
+
+    element?.focus();
+    // In a capped list, show the whole row, not only the focused element.
+    element?.closest('li')?.scrollIntoView({ block: 'nearest' });
   }, [entries]);
 
   const commit = (nextEntries: Array<Entry<T>>): void => {
@@ -108,7 +113,7 @@ export const useSortableEntries = <T>({
       currentEntries[index + 1] ?? currentEntries[index - 1];
 
     pendingFocusSelectorRef.current = nextFocusedEntry
-      ? `${getRowSelector(nextFocusedEntry.id)} [data-testid="delete-row"]`
+      ? `${getRowSelector(nextFocusedEntry.id)} [data-row-fields] :is(${focusableSelector})`
       : `button[aria-label="${CSS.escape(addLabel)}"]`;
     commit(currentEntries.filter((entry) => entry.id !== id));
   };

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