@linhey/rhine-design 0.6.0 → 0.9.0

package/tests/DateNativeInput.test.tsx

@@ -0,0 +1,147 @@
+import { useState } from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { Button, DateField, DateRangePicker } from '../components';
+
+// JSDOM cannot edit native calendar fragments; browser coverage verifies the real keystrokes.
+function nativeInput(input: HTMLElement, value: string, badInput: boolean) {
+  Object.defineProperty(input, 'validity', { configurable: true, value: { badInput } });
+  fireEvent.input(input, { target: { value } });
+}
+
+describe('native date editing', () => {
+  it('does not display a valid proposal that the controlled host rejected', () => {
+    const change = vi.fn();
+    render(<DateField label="日期" value="2026-10-20" onValueChange={change} />);
+    const input = screen.getByLabelText('日期');
+    nativeInput(input, '2026-10-21', false);
+    expect(change).toHaveBeenCalledExactlyOnceWith('2026-10-21');
+    expect(input).toHaveValue('2026-10-20');
+  });
+
+  it('does not report an incomplete native date as an intentionally empty boundary', () => {
+    const change = vi.fn(), validation = vi.fn();
+    const props = { label: '日期', value: '2026-10-20', onValueChange: change, onValidationChange: validation };
+    const { rerender } = render(<DateField {...props} />);
+    const input = screen.getByLabelText('日期');
+    nativeInput(input, '', true);
+    expect(change).not.toHaveBeenCalled();
+    expect(input).toHaveValue('');
+    expect(input).toHaveAttribute('aria-invalid', 'true');
+    expect(validation).toHaveBeenLastCalledWith('请填写完整有效的日期。');
+    rerender(<DateField {...props} hint="父级刷新了其他状态" />);
+    expect(input).toHaveValue('');
+    expect(input).toHaveAttribute('aria-invalid', 'true');
+    nativeInput(input, '2026-10-21', false);
+    expect(change.mock.calls).toEqual([['2026-10-21']]);
+    expect(input).toHaveValue('2026-10-20');
+    expect(validation).toHaveBeenLastCalledWith(null);
+  });
+
+  it('detects fragments from an initially empty field even when its string value does not change', () => {
+    const change = vi.fn(), validation = vi.fn();
+    render(<DateField label="日期" value="" onValueChange={change} onValidationChange={validation} />);
+    const input = screen.getByLabelText('日期');
+    nativeInput(input, '', true);
+    expect(change).not.toHaveBeenCalled();
+    expect(validation).toHaveBeenLastCalledWith('请填写完整有效的日期。');
+    nativeInput(input, '', false);
+    expect(change.mock.calls).toEqual([['']]);
+    expect(validation).toHaveBeenLastCalledWith(null);
+  });
+
+  it('observes calendar fragments that only emit keyup without submitting valid values twice', () => {
+    const change = vi.fn(), validation = vi.fn();
+    render(<DateField label="日期" value="" onValueChange={change} onValidationChange={validation} />);
+    const input = screen.getByLabelText('日期');
+    Object.defineProperty(input, 'validity', { configurable: true, value: { badInput: true } });
+    fireEvent.keyUp(input, { key: '2' });
+    expect(input).toHaveAttribute('aria-invalid', 'true');
+    expect(validation).toHaveBeenLastCalledWith('请填写完整有效的日期。');
+    expect(change).not.toHaveBeenCalled();
+    nativeInput(input, '2026-10-21', false);
+    fireEvent.keyUp(input, { key: '1' });
+    fireEvent.blur(input);
+    expect(change.mock.calls).toEqual([['2026-10-21']]);
+    expect(validation).toHaveBeenLastCalledWith(null);
+  });
+
+  it('recognizes intentionally erasing the last native fragment during blur', () => {
+    const change = vi.fn();
+    render(<DateField label="日期" value="2026-10-20" onValueChange={change} />);
+    const input = screen.getByLabelText('日期');
+    nativeInput(input, '', true);
+    Object.defineProperty(input, 'validity', { configurable: true, value: { badInput: false } });
+    fireEvent.blur(input);
+    expect(change.mock.calls).toEqual([['']]);
+    expect(input).not.toHaveAttribute('aria-invalid', 'true');
+  });
+
+  it('synchronizes a genuinely changed external date and removes the native draft error', () => {
+    const validation = vi.fn(), change = vi.fn();
+    const props = { label: '日期', value: '2026-10-20', onValueChange: change, onValidationChange: validation };
+    const { rerender } = render(<DateField {...props} />);
+    const input = screen.getByLabelText('日期');
+    nativeInput(input, '', true);
+    rerender(<DateField {...props} value="2026-10-24" />);
+    expect(input).toHaveValue('2026-10-24');
+    expect(input).not.toHaveAttribute('aria-invalid', 'true');
+    expect(validation).toHaveBeenLastCalledWith(null);
+    expect(change).not.toHaveBeenCalled();
+  });
+
+  it('does not accept input events from disabled or read-only fields', () => {
+    const change = vi.fn();
+    const { rerender } = render(<DateField label="日期" value="2026-10-20" onValueChange={change} readOnly />);
+    nativeInput(screen.getByLabelText('日期'), '2026-10-21', false);
+    expect(change).not.toHaveBeenCalled();
+    rerender(<DateField label="日期" value="2026-10-20" onValueChange={change} disabled />);
+    nativeInput(screen.getByLabelText('日期'), '', true);
+    expect(change).not.toHaveBeenCalled();
+  });
+
+  it('aggregates incomplete child input without creating an error feedback loop', () => {
+    const change = vi.fn(), validation = vi.fn();
+    function Example() {
+      const [value, setValue] = useState({ start: '2026-10-20', end: '2026-10-24' });
+      const [error, setError] = useState<string | null>(null);
+      return <><DateRangePicker label="范围" value={value} onValueChange={next => { change(next); setValue(next); }} onValidationChange={next => { validation(next); setError(next); }} />
+        <Button disabled={!!error}>应用日期</Button></>;
+    }
+    render(<Example />);
+    nativeInput(screen.getByLabelText('开始日期'), '', true);
+    expect(change).not.toHaveBeenCalled();
+    expect(screen.getByRole('button', { name: '应用日期' })).toBeDisabled();
+    expect(screen.getByLabelText('结束日期')).not.toHaveAttribute('aria-invalid', 'true');
+    nativeInput(screen.getByLabelText('开始日期'), '2026-10-21', false);
+    expect(change.mock.calls).toEqual([[{ start: '2026-10-21', end: '2026-10-24' }]]);
+    expect(screen.getByRole('button', { name: '应用日期' })).toBeEnabled();
+    expect(validation.mock.calls).toEqual([[null], ['请填写完整有效的日期。'], [null]]);
+  });
+
+  it('clears an invalid native draft when the accepted range is already empty', () => {
+    const change = vi.fn(), validation = vi.fn();
+    render(<DateRangePicker label="范围" value={{ start: '', end: '' }} onValueChange={change} onValidationChange={validation} />);
+    const input = screen.getByLabelText('开始日期');
+    nativeInput(input, '', true);
+    const clear = screen.getByRole('button', { name: '清空日期' });
+    expect(clear).toBeEnabled();
+    fireEvent.click(clear);
+    expect(change.mock.calls).toEqual([[{ start: '', end: '' }]]);
+    expect(screen.getByLabelText('开始日期')).not.toBe(input);
+    expect(screen.getByLabelText('开始日期')).not.toHaveAttribute('aria-invalid', 'true');
+    expect(validation).toHaveBeenLastCalledWith(null);
+    expect(clear).toBeDisabled();
+  });
+
+  it('replaces incomplete drafts with a preset even when its accepted dates have not changed', () => {
+    const change = vi.fn(), validation = vi.fn(), value = { start: '2026-10-20', end: '2026-10-24' };
+    render(<DateRangePicker label="范围" value={value} onValueChange={change} onValidationChange={validation} presets={[{ label: '当前周', value }]} />);
+    nativeInput(screen.getByLabelText('结束日期'), '', true);
+    fireEvent.click(screen.getByRole('button', { name: '当前周' }));
+    expect(change).toHaveBeenCalledExactlyOnceWith(value);
+    expect(screen.getByLabelText('结束日期')).toHaveValue('2026-10-24');
+    expect(screen.getByLabelText('结束日期')).not.toHaveAttribute('aria-invalid', 'true');
+    expect(validation).toHaveBeenLastCalledWith(null);
+  });
+});

package/tests/DateRangeFilterGallery.test.tsx

@@ -0,0 +1,85 @@
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { DateRangeFilterExample } from '../preview/DateRangeFilterGallery';
+
+function demo(props = {}) {
+  render(<div className="rhine-theme"><DateRangeFilterExample {...props} /></div>);
+}
+const trigger = () => screen.getByRole('button', { name: /时间范围：.+选择日期/ });
+async function open() {
+  trigger().focus(); fireEvent.click(trigger());
+  return screen.findByRole('dialog', { name: '时间范围设置' });
+}
+
+describe('date range filtering composition', () => {
+  it('applies a quick preset immediately and always displays its dates', () => {
+    demo();
+    fireEvent.click(screen.getByRole('radio', { name: '昨天' }));
+    expect(screen.getByRole('radio', { name: '昨天' })).toBeChecked();
+    expect(trigger()).toHaveTextContent('2026-10-23 — 2026-10-23');
+    expect(screen.getByRole('status')).toHaveTextContent('本次操作 1 次');
+  });
+
+  it('keeps edits as drafts, discards cancellation and restores trigger focus', async () => {
+    demo(); const dialog = await open();
+    fireEvent.change(within(dialog).getByLabelText('开始日期'), { target: { value: '2026-10-01' } });
+    expect(screen.getByRole('status')).toHaveTextContent('2026-10-24 — 2026-10-24 · 本次操作 0 次');
+    fireEvent.click(within(dialog).getByRole('button', { name: '取消' }));
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+    await waitFor(() => expect(trigger()).toHaveFocus());
+    const reopened = await open();
+    expect(within(reopened).getByLabelText('开始日期')).toHaveValue('2026-10-24');
+  });
+
+  it('does not commit on Escape or the overlay close button', async () => {
+    demo();
+    for (const close of ['escape', 'button']) {
+      const dialog = await open();
+      fireEvent.change(within(dialog).getByLabelText('开始日期'), { target: { value: '2026-10-02' } });
+      if (close === 'escape') fireEvent.keyDown(document.activeElement!, { key: 'Escape' });
+      else fireEvent.click(within(dialog).getByRole('button', { name: '关闭详情' }));
+      await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+      expect(screen.getByRole('status')).toHaveTextContent('本次操作 0 次');
+      await waitFor(() => expect(trigger()).toHaveFocus());
+    }
+  });
+
+  it('blocks incomplete, reversed and out-of-range dates before applying one valid range', async () => {
+    demo(); const dialog = await open();
+    const start = within(dialog).getByLabelText('开始日期'), end = within(dialog).getByLabelText('结束日期');
+    const apply = within(dialog).getByRole('button', { name: '应用日期' });
+    for (const [from, to] of [['', '2026-10-24'], ['2026-10-24', ''], ['2026-10-25', '2026-10-24'], ['2024-12-31', '2026-10-24'], ['2026-10-24', '2027-01-01']]) {
+      fireEvent.change(start, { target: { value: from } });
+      fireEvent.change(end, { target: { value: to } });
+      expect(apply).toBeDisabled();
+      fireEvent.submit(apply.closest('form')!);
+      expect(screen.getByRole('status')).toHaveTextContent('本次操作 0 次');
+    }
+    fireEvent.change(start, { target: { value: '2025-12-28' } });
+    fireEvent.change(end, { target: { value: '2026-01-06' } });
+    await waitFor(() => expect(apply).toBeEnabled());
+    fireEvent.click(apply);
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+    expect(screen.getByRole('status')).toHaveTextContent('2025-12-28 — 2026-01-06 · 本次操作 1 次');
+    expect(screen.getAllByRole('radio').every(radio => !(radio as HTMLInputElement).checked)).toBe(true);
+    await waitFor(() => expect(trigger()).toHaveFocus());
+  });
+
+  it('applies additional presets immediately instead of submitting an unfinished draft', async () => {
+    demo(); const dialog = await open();
+    fireEvent.change(within(dialog).getByLabelText('开始日期'), { target: { value: '' } });
+    fireEvent.click(within(dialog).getByRole('button', { name: '最近 30 天' }));
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+    expect(trigger()).toHaveTextContent('2026-09-25 — 2026-10-24');
+    expect(screen.getByRole('status')).toHaveTextContent('本次操作 1 次');
+  });
+
+  it('keeps a disabled range readable and prevents all entry points', () => {
+    demo({ disabled: true });
+    expect(trigger()).toBeDisabled();
+    expect(screen.getAllByRole('radio').every(radio => (radio as HTMLInputElement).disabled)).toBe(true);
+    fireEvent.click(trigger());
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    expect(screen.getByRole('status')).toHaveTextContent('2026-10-24 — 2026-10-24 · 本次操作 0 次');
+  });
+});

package/tests/ListFilterBar.test.tsx

@@ -0,0 +1,198 @@
+import { useEffect, useState } from 'react';
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { Button, ListFilterBar, Select, TextField, type ListFilterField } from '../components';
+
+const label = '记录筛选';
+const selection = (id: string, fieldLabel: string): ListFilterField => ({
+  id, label: fieldLabel,
+  control: <Select label={fieldLabel} defaultValue="all"><option value="all">全部</option><option value="selected">选中项</option></Select>,
+});
+const theme = (children: React.ReactNode) => <div className="rhine-theme" data-rhine-theme="neo-brutalism" data-rhine-motion="reduced">{children}</div>;
+
+async function openFilters() {
+  const trigger = screen.getByRole('button', { name: /^更多筛选/ });
+  trigger.focus();
+  fireEvent.click(trigger);
+  return { trigger, dialog: await screen.findByRole('dialog', { name: label }) };
+}
+
+describe('ListFilterBar', () => {
+  it('keeps focus on the filter region when the last removable summary has no focusable field', () => {
+    function Example() {
+      const [active, setActive] = useState(true);
+      return <ListFilterBar label={label} primary={[{ id: 'fixed', label: '固定范围', control: <span>只读范围</span>, activeLabel: active ? '本周' : undefined, onClear: () => setActive(false) }]} />;
+    }
+    const { container } = render(<Example />);
+    const chip = screen.getByRole('button', { name: '清除固定范围：本周' });
+    chip.focus(); fireEvent.click(chip);
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    expect(container.querySelector('.rhine-list-filter-bar')).toHaveFocus();
+  });
+
+  it('limits primary controls to two and keeps overflow in the same themed drawer', async () => {
+    render(theme(<ListFilterBar label={label} primary={[selection('state', '状态'), selection('sort', '排序'), selection('length', '长度')]} filters={[selection('owner', '人员')]} />));
+    expect(screen.getAllByRole('combobox')).toHaveLength(2);
+    expect(screen.queryByRole('combobox', { name: '长度' })).not.toBeInTheDocument();
+    const { dialog } = await openFilters();
+    expect(within(dialog).getAllByRole('combobox')).toHaveLength(2);
+    expect(within(dialog).getByRole('combobox', { name: '长度' })).toHaveValue('all');
+    expect(within(dialog).getByRole('combobox', { name: '人员' })).toHaveValue('all');
+    expect(dialog.closest('.rhine-theme')).toHaveAttribute('data-rhine-theme', 'neo-brutalism');
+    expect(dialog.closest('.rhine-theme')).toHaveAttribute('data-rhine-motion', 'reduced');
+    expect(document.querySelectorAll('select')).toHaveLength(4);
+  });
+
+  it('does not move or remount primary fields when the container changes width', () => {
+    const mounted = vi.fn(), unmounted = vi.fn();
+    function LocalField() {
+      useEffect(() => { mounted(); return unmounted; }, []);
+      return <TextField label="本地输入" defaultValue="保留草稿" />;
+    }
+    const field = { id: 'local', label: '本地输入', control: <LocalField /> };
+    const { rerender } = render(theme(<div style={{ width: 1000 }}><ListFilterBar label={label} primary={[field]} /></div>));
+    const input = screen.getByRole('textbox');
+    fireEvent.change(input, { target: { value: '尚未提交' } });
+    input.focus();
+    rerender(theme(<div style={{ width: 320 }}><ListFilterBar label={label} primary={[field]} /></div>));
+    fireEvent(window, new Event('resize'));
+    expect(screen.getByRole('textbox')).toBe(input);
+    expect(input).toHaveValue('尚未提交');
+    expect(input).toHaveFocus();
+    expect(mounted).toHaveBeenCalledTimes(1);
+    expect(unmounted).not.toHaveBeenCalled();
+  });
+
+  it('forwards controlled search and composition events without trimming or another query state', () => {
+    const changed = vi.fn(), start = vi.fn(), end = vi.fn();
+    function Example() {
+      const [query, setQuery] = useState('');
+      return <ListFilterBar label={label} search={{ label: '搜索记录', value: query, onChange: event => { changed(event.target.value); setQuery(event.target.value); }, onCompositionStart: start, onCompositionEnd: end, maxLength: 80, placeholder: '输入关键词' }} />;
+    }
+    render(theme(<Example />));
+    const input = screen.getByRole('searchbox', { name: '搜索记录' });
+    fireEvent.compositionStart(input);
+    fireEvent.change(input, { target: { value: '  中文草稿  ' } });
+    expect(input).toHaveValue('  中文草稿  ');
+    expect(changed).toHaveBeenCalledWith('  中文草稿  ');
+    fireEvent.compositionEnd(input);
+    expect(start).toHaveBeenCalledTimes(1);
+    expect(end).toHaveBeenCalledTimes(1);
+    expect(input).toHaveAttribute('maxlength', '80');
+    expect(screen.queryByRole('button', { name: /^更多筛选/ })).not.toBeInTheDocument();
+  });
+
+  it('applies host changes immediately and closing the drawer does not undo them', async () => {
+    const changes = vi.fn(), reset = vi.fn();
+    function Example() {
+      const [value, setValue] = useState('all');
+      return <ListFilterBar label={label} onReset={reset} result={value === 'all' ? '12 条结果' : '3 条结果'} filters={[{
+        id: 'state', label: '状态', activeLabel: value === 'all' ? undefined : '选中项',
+        control: <Select label="状态" value={value} onChange={event => { setValue(event.target.value); changes(event.target.value); }}><option value="all">全部</option><option value="selected">选中项</option></Select>,
+      }]} />;
+    }
+    render(theme(<Example />));
+    const { dialog, trigger } = await openFilters();
+    fireEvent.change(within(dialog).getByRole('combobox', { name: '状态' }), { target: { value: 'selected' } });
+    expect(changes).toHaveBeenCalledWith('selected');
+    expect(within(dialog).getByRole('status')).toHaveTextContent('3 条结果');
+    expect(within(dialog).queryByRole('button', { name: /应用|取消/ })).not.toBeInTheDocument();
+    fireEvent.keyDown(document.activeElement!, { key: 'Escape' });
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+    await waitFor(() => expect(trigger).toHaveFocus());
+    expect(reset).not.toHaveBeenCalled();
+    expect(screen.getByRole('status')).toHaveTextContent('3 条结果');
+    const reopened = await openFilters();
+    expect(within(reopened.dialog).getByRole('combobox', { name: '状态' })).toHaveValue('selected');
+  });
+
+  it('only summarizes explicit active labels and offers reset for an active search', () => {
+    const reset = vi.fn(), field = selection('state', '状态');
+    const { rerender } = render(theme(<ListFilterBar label={label} primary={[field]} onReset={reset} />));
+    fireEvent.change(screen.getByRole('combobox'), { target: { value: 'selected' } });
+    expect(screen.queryByRole('group', { name: '已选条件' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: '重置筛选' })).not.toBeInTheDocument();
+    rerender(theme(<ListFilterBar label={label} primary={[{ ...field, activeLabel: ' ' }]} onReset={reset} search={{ label: '搜索', value: '真实查询', readOnly: true }} />));
+    expect(screen.getByRole('button', { name: '重置筛选' })).toBeVisible();
+    expect(screen.queryByText('搜索：真实查询')).not.toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: '重置筛选' }));
+    expect(reset).toHaveBeenCalledTimes(1);
+  });
+
+  it('keeps full active labels available and returns focus to a field when its chip is cleared', () => {
+    const longLabel = '跨部门体验与可访问性协作组'.repeat(12);
+    function Example() {
+      const [active, setActive] = useState(true);
+      return <ListFilterBar label={label} primary={[{ ...selection('team', '团队'), activeLabel: active ? longLabel : undefined, onClear: () => setActive(false) }]} />;
+    }
+    render(theme(<Example />));
+    const chip = screen.getByRole('button', { name: `清除团队：${longLabel}` });
+    expect(chip).toHaveTextContent(longLabel);
+    chip.focus();
+    fireEvent.click(chip);
+    expect(screen.queryByRole('button', { name: /^清除团队/ })).not.toBeInTheDocument();
+    expect(screen.getByRole('combobox', { name: '团队' })).toHaveFocus();
+  });
+
+  it('shows non-clearable summaries without inventing an action', () => {
+    render(theme(<ListFilterBar label={label} primary={[{ ...selection('scope', '范围'), activeLabel: '团队范围' }]} />));
+    expect(screen.getByText('范围：团队范围')).toBeVisible();
+    expect(screen.queryByRole('button', { name: /^清除/ })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: '重置筛选' })).not.toBeInTheDocument();
+  });
+
+  it('shows pending, accepted results and failures inside the modal without disabling correction', async () => {
+    const props = { label, filters: [selection('state', '状态')], result: '上次结果 12 条' };
+    const { rerender } = render(theme(<ListFilterBar {...props} pending />));
+    const { dialog } = await openFilters();
+    expect(within(dialog).getByRole('status')).toHaveTextContent('正在更新结果…');
+    expect(within(dialog).getByRole('status')).toHaveTextContent('上次结果 12 条');
+    expect(within(dialog).getByRole('combobox')).toBeEnabled();
+    rerender(theme(<ListFilterBar {...props} error="连接暂不可用，请重试。" />));
+    expect(within(dialog).getByRole('alert')).toHaveTextContent('连接暂不可用，请重试。');
+    expect(within(dialog).queryByText('正在更新结果…')).not.toBeInTheDocument();
+    expect(within(dialog).getByRole('combobox')).toBeEnabled();
+    rerender(theme(<ListFilterBar {...props} result="8 条结果" />));
+    expect(within(dialog).queryByRole('alert')).not.toBeInTheDocument();
+    expect(within(dialog).getByRole('status')).toHaveTextContent('8 条结果');
+  });
+
+  it('lets host reset query and all fields without closing the drawer or losing focus', async () => {
+    function Example() {
+      const [query, setQuery] = useState('关键词'), [state, setState] = useState('selected');
+      return <ListFilterBar label={label} search={{ label: '搜索', value: query, onChange: event => setQuery(event.target.value) }}
+        onReset={() => { setQuery(''); setState('all'); }}
+        filters={[{ id: 'state', label: '状态', activeLabel: state === 'all' ? undefined : '选中项', control: <Select label="状态" value={state} onChange={event => setState(event.target.value)}><option value="all">全部</option><option value="selected">选中项</option></Select> }]} />;
+    }
+    render(theme(<Example />));
+    const { dialog } = await openFilters();
+    const reset = within(dialog).getByRole('button', { name: '重置筛选' });
+    reset.focus();
+    fireEvent.click(reset);
+    expect(within(dialog).getByRole('combobox')).toHaveValue('all');
+    expect(within(dialog).getByRole('combobox')).toHaveFocus();
+    expect(within(dialog).queryByRole('button', { name: '重置筛选' })).not.toBeInTheDocument();
+    fireEvent.keyDown(document.activeElement!, { key: 'Escape' });
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+    expect(screen.getByRole('searchbox')).toHaveValue('');
+    expect(screen.queryByRole('button', { name: '重置筛选' })).not.toBeInTheDocument();
+  });
+
+  it('preserves refresh busy focus and disables it independently of the one business action', () => {
+    const refresh = vi.fn(), action = vi.fn();
+    const props = { label, action: <Button onClick={action}>审查设置</Button> };
+    const { rerender } = render(theme(<ListFilterBar {...props} refresh={{ onClick: refresh }} />));
+    const button = screen.getByRole('button', { name: '刷新' });
+    button.focus();
+    rerender(theme(<ListFilterBar {...props} refresh={{ onClick: refresh, busy: true }} />));
+    fireEvent.click(button);
+    expect(refresh).not.toHaveBeenCalled();
+    expect(button).toHaveFocus();
+    expect(button).toHaveAttribute('aria-busy', 'true');
+    fireEvent.click(screen.getByRole('button', { name: '审查设置' }));
+    expect(action).toHaveBeenCalledTimes(1);
+    rerender(theme(<ListFilterBar {...props} refresh={{ onClick: refresh, disabled: true }} />));
+    expect(button).toBeDisabled();
+    expect(screen.getByRole('button', { name: '审查设置' })).toBeEnabled();
+  });
+});