@centreon/ui 26.10.5 → 26.10.7

package/package.json

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

package/src/components/Layout/PageLayout/PageQuickAccess.tsx

@@ -1,9 +1,11 @@
 import AddIcon from '@mui/icons-material/Add';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import { CircularProgress } from '@mui/material';
 
 import { useTranslation } from 'react-i18next';
 
 import { Button, Menu } from '../..';
+import { labelLoading } from './translatedLabels';
 
 interface NamedEntity {
   id: number | string;
@@ -16,10 +18,13 @@ type Props = {
   goBack: () => void;
   isActive: (id: number | string) => boolean;
   isDisabled?: (id: number | string) => boolean;
+  isLoading?: boolean;
   labels: {
     create: string;
     goBack: string;
   };
+  // Observed at the bottom of the list to load the next page when it is reached
+  loadMoreRef?: (node: Element | null) => void;
   navigateToElement: (id: number | string) => () => void;
 };
 
@@ -27,6 +32,8 @@ export const PageQuickAccess = ({
   elements,
   isActive,
   isDisabled,
+  isLoading,
+  loadMoreRef,
   navigateToElement,
   goBack,
   create,
@@ -38,16 +45,27 @@ export const PageQuickAccess = ({
     <Menu>
       <Menu.Button data-testid="quickaccess" />
       <Menu.Items>
-        {elements?.map((element) => (
-          <Menu.Item
-            isActive={isActive(element.id)}
-            isDisabled={isDisabled?.(element.id)}
-            key={`${element.id}`}
-            onClick={navigateToElement(element.id)}
-          >
-            {element.name}
-          </Menu.Item>
-        ))}
+        <div
+          className="max-h-[50vh] overflow-y-auto"
+          data-testid="quickaccess-elements"
+        >
+          {elements?.map((element) => (
+            <Menu.Item
+              isActive={isActive(element.id)}
+              isDisabled={isDisabled?.(element.id)}
+              key={`${element.id}`}
+              onClick={navigateToElement(element.id)}
+            >
+              {element.name}
+            </Menu.Item>
+          ))}
+          {loadMoreRef && <div className="h-px" ref={loadMoreRef} />}
+          {isLoading && (
+            <div className="flex justify-center py-2">
+              <CircularProgress aria-label={t(labelLoading)} size={20} />
+            </div>
+          )}
+        </div>
         <Menu.Divider key="divider" />
         <div className="px-2 pb-2 flex gap-4">
           <Button

package/src/components/Layout/PageLayout/translatedLabels.ts

@@ -0,0 +1 @@
+export const labelLoading = 'Loading...';

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/utils/useInfiniteScrollListing.ts

@@ -49,6 +49,15 @@ export const useInfiniteScrollListing = <T>({
 
   const [page, setPage] = useAtom(pageAtom);
 
+  // Shared by the active query and the next page prefetch, so that the
+  // prefetched page is reused instead of being requested again
+  const getQueryKey = (queryPage: number): Array<string | number> => [
+    queryKeyName,
+    queryPage,
+    JSON.stringify(parameters),
+    JSON.stringify(customQueryParameters)
+  ];
+
   const { data, isLoading, prefetchNextPage, fetchStatus } = useFetchQuery<
     Listing<T>
   >({
@@ -59,12 +68,7 @@ export const useInfiniteScrollListing = <T>({
         customQueryParameters,
         parameters: { limit, page: params?.page || page, ...parameters }
       }),
-    getQueryKey: () => [
-      queryKeyName,
-      page,
-      JSON.stringify(parameters),
-      JSON.stringify(customQueryParameters)
-    ],
+    getQueryKey: () => getQueryKey(page),
     isPaginated: true,
     queryOptions: {
       enabled,
@@ -110,7 +114,7 @@ export const useInfiniteScrollListing = <T>({
     }
 
     prefetchNextPage({
-      getPrefetchQueryKey: (newPage: number) => ['dashboards', newPage],
+      getPrefetchQueryKey: getQueryKey,
       page
     });
   }, [data, limit, page, prefetchNextPage]);