fix: focus lists, rich-text sync, table header scroll + dragToScroll, panel floating actions, no styling prop reaches the DOM, descriptions take block content — 0.78.5

.claude/CLAUDE.md

@@ -184,6 +184,20 @@ release on npm.
 - **Location:** `src/stories/` (e.g. `Collection.stories.tsx`).
 - **Pattern:** ArgTypes for props, canvas controls, visual testing via Chromatic.
 - **Command:** `yarn build-storybook` builds the static site.
+- **Touch stories:** a story whose play calls `withTouchScreen` (`src/stories/utils/touchScreen.ts`)
+  carries `tags: ['touch']`. `yarn test:stories` runs those stories in their own Vitest project
+  (`storybook-touch`), whose browser context is a phone from the start (Playwright's `isMobile` and
+  `hasTouch`, 390×844), and before the others; an untagged one fails with the reason. Never turn
+  Chromium's touch emulation on or off over the DevTools protocol: turning it off leaves the page
+  with the machine's hover and pointer, not the mouse Playwright launched it with, and a Linux CI
+  runner has none, so every later story in the page finds `(hover: none)` (it never shows on a Mac,
+  which always reports a mouse). `.storybook/vitest.setup.ts` checks every story's browser is its
+  project's: `(hover: hover) and (pointer: fine)`, or on the phone `(hover: none) and (pointer: coarse)`.
+- **No layout change inside a ResizeObserver callback:** a story fails when the browser reports
+  "ResizeObserver loop completed with undelivered notifications" (`.storybook/vitest.setup.ts`). It
+  means a resize callback changed the layout it observes in the same frame, often by setting state
+  synchronously (react-popper's `forceUpdate` renders with `flushSync`). Defer that change to the next
+  frame (`requestAnimationFrame`, once per frame), or measure without changing the layout.
 
 ### Verifying a visual fix locally with Qlip — reqore mechanics
 

.eslintrc.js

@@ -5,6 +5,11 @@ module.exports = {
   },
   extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react/recommended', 'plugin:react/jsx-runtime', 'plugin:storybook/recommended'],
   overrides: [
+    {
+      // Stories are not shipped; the helper wraps styled-components' own `styled`.
+      files: ['src/stories/**', 'src/helpers/styled.ts'],
+      rules: { 'no-restricted-imports': 'off' },
+    },
     {
       env: {
         node: true,
@@ -37,6 +42,20 @@ module.exports = {
     // Allow the "omit a key" idiom — `const { dropped, ...rest } = obj` — where
     // the destructured sibling is intentionally discarded.
     '@typescript-eslint/no-unused-vars': ['error', { ignoreRestSiblings: true }],
+    // Reqore's `styled` (src/helpers/styled.ts) keeps styling props that are also HTML attribute
+    // names (`size`, `disabled`, `checked`, ...) off the elements they are not attributes of.
+    'no-restricted-imports': [
+      'error',
+      {
+        paths: [
+          {
+            name: 'styled-components',
+            importNames: ['default'],
+            message: "Import `styled` from 'src/helpers/styled' (it filters DOM props).",
+          },
+        ],
+      },
+    ],
   },
   // Ignore storybook files
   ignorePatterns: ['**/stories/*', '**/mock/*'],

.storybook/reactWarnings.ts

@@ -0,0 +1,9 @@
+// Copyright 2026 Qore Technologies, s.r.o.
+import { watchReactWarnings } from '../src/stories/utils/reactWarningGate';
+
+/**
+ * The console's React warnings, watched from before any of reqore's modules load: `vitest.setup.ts` imports this
+ * module first, so a warning a module gives as it loads (a library calling a deprecated React API at import) is kept
+ * too, and fails the story file's first story (`src/stories/utils/reactWarningGate.ts`).
+ */
+export const reactWarnings = watchReactWarnings();

.storybook/vitest.setup.ts

@@ -1,7 +1,21 @@
+// first: it watches the console for React's warnings before any other module loads (`reactWarnings.ts`)
+import { reactWarnings } from './reactWarnings';
 import { setProjectAnnotations } from '@storybook/react-vite';
 import { createElement } from 'react';
-import { beforeAll } from 'vitest';
+import { afterAll, afterEach, beforeAll, beforeEach, expect } from 'vitest';
+import { server } from 'vitest/browser';
 import * as previewAnnotations from './preview';
+import { reactWarningsFailure, type IReactWarning } from '../src/stories/utils/reactWarningGate';
+import { TOUCH_STORY_PROJECT } from '../src/stories/utils/touchScreen';
+
+/** Whether this run's browser is the phone the stories tagged `touch` run on (vitest.config.ts). */
+const onThePhone = (): boolean => {
+  // a project's browser runs as a project of its own, named after both:
+  // "storybook-touch (chromium)"
+  const project = server.config.name ?? '';
+
+  return project === TOUCH_STORY_PROJECT || project.startsWith(`${TOUCH_STORY_PROJECT} (`);
+};
 
 // Registers the React renderer (renderToCanvas) plus the project's global
 // decorators/parameters from .storybook/preview for the Storybook Vitest project.
@@ -17,6 +31,21 @@ const annotations = setProjectAnnotations([
       // the story test times out. A 100vh frame resolves regardless of parent.
       (Story: any) => createElement('div', { style: { height: '100vh' } }, createElement(Story)),
     ],
+    /* A story tagged `touch` runs on the phone. The two story projects tell those stories from the
+       others by the tags Storybook reads from the story file before it runs it (vitest.config.ts);
+       a tag the story only has once it runs - spread into it from a shared object - is not one of
+       them, and the story would run here, on the desktop, with a mouse. It fails instead, saying
+       how to tag it. */
+    beforeEach: ({ tags, title, name }) => {
+      if (tags.includes('touch') && !onThePhone()) {
+        throw new Error(
+          `"${title} / ${name}" is tagged 'touch' only once it runs, so it ran in the ` +
+            `"${server.config.name}" project, whose browser has a mouse. Write the tag in the ` +
+            `story file, as a string in the story's or its meta's own \`tags\` ` +
+            `(tags: ['touch']), so that it runs on the phone.`
+        );
+      }
+    },
   },
 ]);
 
@@ -31,3 +60,74 @@ style.textContent = `
   }
 `;
 document.head.appendChild(style);
+
+/* A story fails when a ResizeObserver callback changes the layout it observes in the same frame: the
+   browser leaves the change unreported until the next one and says so with an error event whose message
+   is "ResizeObserver loop completed with undelivered notifications" (qorus#646). Vitest only logs that
+   event (it carries no error object), so it is caught here. The listener goes on through EventTarget, not
+   `window.addEventListener`: Vitest counts the error listeners a page adds that way and stops reporting
+   any unhandled error once there is one. */
+const resizeLoops: string[] = [];
+
+EventTarget.prototype.addEventListener.call(window, 'error', (event: Event) => {
+  const { message } = event as ErrorEvent;
+
+  if (typeof message === 'string' && message.includes('ResizeObserver loop')) {
+    resizeLoops.push(message);
+  }
+});
+
+beforeEach(() => {
+  resizeLoops.length = 0;
+});
+
+afterEach(async () => {
+  // the browser reports it after the frame's layout: let the frames after the story's last change pass
+  await new Promise<void>((resolve) =>
+    requestAnimationFrame(() => requestAnimationFrame(() => resolve()))
+  );
+  expect(
+    resizeLoops,
+    'a ResizeObserver callback changed the layout it observes in the same frame - defer that change to the next frame'
+  ).toEqual([]);
+});
+
+/* Each story's browser is the one its project promises (vitest.config.ts): a desktop with a mouse, or, for
+   the stories tagged `touch`, a phone. The phone's stories run first, so every desktop story checks, after
+   them, that it still has its mouse: a touch screen that left a desktop page without one (qorus#646) fails
+   the next story here. */
+beforeEach(() => {
+  const project = server.config.name ?? '';
+  const promised = onThePhone()
+    ? '(hover: none) and (pointer: coarse)'
+    : '(hover: hover) and (pointer: fine)';
+
+  expect(matchMedia(promised).matches, `the "${project}" project's browser matches ${promised}`).toBe(true);
+});
+
+// No story makes React warn (`src/stories/utils/reactWarningGate.ts`): each warning fails the story it was given in.
+// One given before the story started - as its file loaded, or as the story before it unmounted - fails it too, saying
+// so; one given after a file's last story fails the file.
+let reactWarningsBeforeStory: IReactWarning[] = [];
+
+beforeEach(() => {
+  reactWarningsBeforeStory = reactWarnings.take();
+});
+
+afterEach(() => {
+  const failure = reactWarningsFailure({
+    before: reactWarningsBeforeStory,
+    during: reactWarnings.take(),
+  });
+  reactWarningsBeforeStory = [];
+  if (failure) {
+    throw failure;
+  }
+});
+
+afterAll(() => {
+  const failure = reactWarningsFailure({ after: reactWarnings.take() });
+  if (failure) {
+    throw failure;
+  }
+});

__tests__/EntityRow.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render } from '@testing-library/react';
+import { cleanup, fireEvent, render } from '@testing-library/react';
 import {
   ReqoreContent,
   ReqoreEntityRow,
@@ -609,3 +609,103 @@ test('Renders without a ResizeObserver implementation', () => {
     globalThis.ResizeObserver = original;
   }
 });
+
+/*
+ * Narrow, two or more actions are one menu button (qorus#646): the label keeps the row's width.
+ */
+
+const menuButtons = () => document.querySelectorAll('.reqore-row-actions-menu-button');
+
+test('Folds two or more actions into one menu button in a narrow container', () => {
+  withResizeObserver(NarrowResizeObserver, () => {
+    NarrowResizeObserver.width = 400;
+    renderRowWithActions({ actions: [{ label: 'Run' }, { icon: 'DeleteBinLine', tooltip: 'Remove' }] });
+
+    const row = document.querySelector('.reqore-entity-row')!;
+    expect(row.getAttribute('data-actions')).toBe('menu');
+    expect(menuButtons()).toHaveLength(1);
+    expect(menuButtons()[0].getAttribute('aria-label')).toBe('Actions');
+    expect(row.querySelectorAll('.reqore-entity-row-actions .reqore-button')).toHaveLength(1);
+  });
+});
+
+test('Names the menu button with actionsMenuLabel', () => {
+  withResizeObserver(NarrowResizeObserver, () => {
+    NarrowResizeObserver.width = 400;
+    renderRowWithActions({
+      actionsMenuLabel: 'Akce',
+      actions: [{ label: 'Run' }, { label: 'Stop' }],
+    });
+
+    expect(menuButtons()[0].getAttribute('aria-label')).toBe('Akce');
+  });
+});
+
+test('Keeps the actions in sight, stacked, with narrowActions="stack"', () => {
+  withResizeObserver(NarrowResizeObserver, () => {
+    NarrowResizeObserver.width = 400;
+    renderRowWithActions({ narrowActions: 'stack', actions: [{ label: 'Run' }, { label: 'Stop' }] });
+
+    const row = document.querySelector('.reqore-entity-row')!;
+    expect(row.getAttribute('data-narrow')).toBe('true');
+    expect(row.getAttribute('data-actions')).toBeNull();
+    expect(menuButtons()).toHaveLength(0);
+    expect(row.querySelectorAll('.reqore-entity-row-actions .reqore-button')).toHaveLength(2);
+  });
+});
+
+test('Stacked, labels an icon-only action that is a menu with its tooltip', () => {
+  withResizeObserver(NarrowResizeObserver, () => {
+    NarrowResizeObserver.width = 400;
+    renderRowWithActions({
+      narrowActions: 'stack',
+      actions: [
+        { label: 'Run' },
+        { icon: 'More2Line', tooltip: 'More actions', actions: [{ label: 'Show in chat' }] },
+      ],
+    });
+
+    const [, more] = Array.from(
+      document.querySelector('.reqore-entity-row-actions')!.children
+    ) as HTMLElement[];
+    expect(more.textContent).toContain('More actions');
+  });
+});
+
+test('Keeps a single action a button when narrow, and every action inline when wide', () => {
+  withResizeObserver(NarrowResizeObserver, () => {
+    NarrowResizeObserver.width = 400;
+    renderRowWithActions({ actions: [{ label: 'Run' }] });
+    expect(menuButtons()).toHaveLength(0);
+    cleanup();
+
+    NarrowResizeObserver.width = 900;
+    renderRowWithActions({ actions: [{ label: 'Run' }, { label: 'Stop' }] });
+    expect(menuButtons()).toHaveLength(0);
+    expect(document.querySelectorAll('.reqore-entity-row-actions .reqore-button')).toHaveLength(2);
+  });
+});
+
+test('Stacked, labels an action whose label is empty with its tooltip, a menu too', () => {
+  withResizeObserver(NarrowResizeObserver, () => {
+    NarrowResizeObserver.width = 400;
+    renderRowWithActions({
+      narrowActions: 'stack',
+      actions: [
+        { label: '', icon: 'DeleteBinLine', tooltip: 'Remove' },
+        {
+          label: '',
+          icon: 'More2Line',
+          tooltip: 'More actions',
+          actions: [{ label: 'Show in chat' }],
+        },
+      ],
+    });
+
+    const [remove, more] = Array.from(
+      document.querySelector('.reqore-entity-row-actions')!.children
+    ) as HTMLElement[];
+    expect(remove.textContent).toContain('Remove');
+    expect(more.textContent).toContain('More actions');
+  });
+});

__tests__/NavRail.test.tsx

@@ -433,6 +433,34 @@ describe("showLabels='hover'", () => {
     expect(dashboard().textContent).toBe('');
   });
 
+  test("a finger's tap dwells no labels open: the mouseenter emulated after it is no hover", () => {
+    renderRail(<ReqoreNavRail items={ITEMS} defaultActiveId='dashboard' showLabels='hover' />);
+    const nav = screen.getByRole('navigation');
+
+    fireEvent.pointerEnter(nav, { pointerType: 'touch', buttons: 1 });
+    fireEvent.pointerDown(nav, { pointerType: 'touch', buttons: 1 });
+    fireEvent.pointerUp(nav, { pointerType: 'touch', buttons: 0 });
+    fireEvent.mouseEnter(nav);
+    act(() => {
+      vi.advanceTimersByTime(5000);
+    });
+
+    expect(dashboard().textContent).toBe('');
+  });
+
+  test('a mouse dwells them open, its pointer event before its mouseenter', () => {
+    renderRail(<ReqoreNavRail items={ITEMS} defaultActiveId='dashboard' showLabels='hover' />);
+    const nav = screen.getByRole('navigation');
+
+    fireEvent.pointerEnter(nav, { pointerType: 'mouse', buttons: 0 });
+    fireEvent.mouseEnter(nav);
+    act(() => {
+      vi.advanceTimersByTime(1500);
+    });
+
+    expect(dashboard()).toHaveTextContent('Dashboard');
+  });
+
   test('showLabelsDelay sets the dwell', () => {
     renderRail(
       <ReqoreNavRail

__tests__/Rating.test.tsx

@@ -1,4 +1,5 @@
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { useState } from 'react';
 import {
   ReqoreContent,
   ReqoreLayoutContent,
@@ -232,3 +233,41 @@ test('Renders with custom icons', () => {
   expect(document.querySelectorAll('.reqore-rating-item').length).toBe(5);
   expect(document.querySelectorAll('.reqore-icon').length).toBe(5);
 });
+
+/** A rating that holds the value it is given, and says what it shows. */
+const HeldRating = () => {
+  const [value, setValue] = useState(3);
+  return (
+    <ReqoreUIProvider>
+      <ReqoreLayoutContent>
+        <ReqoreContent>
+          <ReqoreRating value={value} onChange={setValue} allowClear showRatingValue />
+        </ReqoreContent>
+      </ReqoreLayoutContent>
+    </ReqoreUIProvider>
+  );
+};
+
+test("A finger's tap previews nothing: a value the tap cleared reads as cleared", () => {
+  render(<HeldRating />);
+  const third = document.querySelectorAll('.reqore-rating-item')[2];
+
+  // a tap, as a browser sends it: the finger's pointer events, then the mouse events it emulates
+  fireEvent.pointerOver(third, { pointerType: 'touch', buttons: 1 });
+  fireEvent.pointerDown(third, { pointerType: 'touch', buttons: 1 });
+  fireEvent.pointerUp(third, { pointerType: 'touch', buttons: 0 });
+  fireEvent.mouseMove(third);
+  fireEvent.click(third);
+
+  expect(screen.getByText('0 / 5')).toBeTruthy();
+});
+
+test('A mouse resting on a star previews it', () => {
+  render(<HeldRating />);
+  const second = document.querySelectorAll('.reqore-rating-item')[1];
+
+  fireEvent.pointerMove(second, { pointerType: 'mouse', buttons: 0 });
+  fireEvent.mouseMove(second);
+
+  expect(screen.getByText('2 / 5')).toBeTruthy();
+});