♿(frontend) use aria-haspopup menu on DropButton triggers

Replace aria-haspopup true with menu on DropButton
🚸(frontend) hint min char search users
2026-03-25 10:15:22 +01:00 · 2026-03-25 09:33:14 +01:00 · 2026-03-24 16:48:40 +01:00 · 2026-03-24 15:54:34 +01:00 · 2026-03-24 13:01:52 +01:00 · 2026-03-24 13:01:51 +01:00
37 changed files with 2556 additions and 2202 deletions
@@ -6,9 +6,15 @@ and this project adheres to

 ## [Unreleased]

+### Added
+
+- 🚸(frontend) hint min char search users #2064
+
 ### Changed

 - 💄(frontend) improve comments highlights #1961
+- ♿(frontend) use aria-haspopup menu on DropButton triggers
+  #2126

 ## [v4.8.3] - 2026-03-23

@@ -60,10 +60,13 @@
      "groupName": "ignored js dependencies",
      "matchManagers": ["npm"],
      "matchPackageNames": [
+        "@react-pdf/renderer",
        "fetch-mock",
        "node",
        "node-fetch",
        "react-resizable-panels",
+        "stylelint",
+        "stylelint-config-standard",
        "workbox-webpack-plugin"
      ]
    }
@@ -47,9 +47,9 @@ test.describe('Doc AI feature', () => {

      await page.locator('.bn-block-outer').last().fill('Anything');
      await page.getByText('Anything').selectText();
-      expect(
-        await page.locator('button[data-test="convertMarkdown"]').count(),
-      ).toBe(1);
+      await expect(
+        page.locator('button[data-test="convertMarkdown"]'),
+      ).toHaveCount(1);
      await expect(
        page.getByRole('button', { name: config.selector, exact: true }),
      ).toBeHidden();
@@ -155,13 +155,11 @@ test.describe('Doc Editor', () => {
    expect(wsClose.isClosed()).toBeTruthy();

    // Check the ws is connected again
-    webSocketPromise = page.waitForEvent('websocket', (webSocket) => {
+    webSocket = await page.waitForEvent('websocket', (webSocket) => {
      return webSocket
        .url()
        .includes('ws://localhost:4444/collaboration/ws/?room=');
    });
-
-    webSocket = await webSocketPromise;
    framesentPromise = webSocket.waitForEvent('framesent');
    framesent = await framesentPromise;
    expect(framesent.payload).not.toBeNull();
@@ -578,12 +576,10 @@ test.describe('Doc Editor', () => {

    await page.reload();

-    responseCanEditPromise = page.waitForResponse(
+    responseCanEdit = await page.waitForResponse(
      (response) =>
        response.url().includes(`/can-edit/`) && response.status() === 200,
    );
-
-    responseCanEdit = await responseCanEditPromise;
    expect(responseCanEdit.ok()).toBeTruthy();

    jsonCanEdit = (await responseCanEdit.json()) as { can_edit: boolean };
@@ -236,7 +236,7 @@ test.describe('Doc Header', () => {
        hasText: randomDoc,
      });

-    expect(await row.count()).toBe(0);
+    await expect(row).toHaveCount(0);
  });

  test('it checks the options available if administrator', async ({ page }) => {
@@ -273,7 +273,7 @@ test.describe('Doc Header', () => {
    await expect(getMenuItem(page, 'Delete document')).toBeDisabled();

    // Click somewhere else to close the options
-    await page.click('body', { position: { x: 0, y: 0 } });
+    await page.locator('body').click({ position: { x: 0, y: 0 } });

    await page.getByRole('button', { name: 'Share' }).click();

@@ -348,7 +348,7 @@ test.describe('Doc Header', () => {
    await expect(getMenuItem(page, 'Delete document')).toBeDisabled();

    // Click somewhere else to close the options
-    await page.click('body', { position: { x: 0, y: 0 } });
+    await page.locator('body').click({ position: { x: 0, y: 0 } });

    await page.getByRole('button', { name: 'Share' }).click();

@@ -418,7 +418,7 @@ test.describe('Doc Header', () => {
    await expect(getMenuItem(page, 'Delete document')).toBeDisabled();

    // Click somewhere else to close the options
-    await page.click('body', { position: { x: 0, y: 0 } });
+    await page.locator('body').click({ position: { x: 0, y: 0 } });

    await page.getByRole('button', { name: 'Share' }).click();

@@ -177,5 +177,5 @@ const dragAndDropFiles = async (
    return dt;
  }, filesData);

-  await page.dispatchEvent(selector, 'drop', { dataTransfer });
+  await page.locator(selector).dispatchEvent('drop', { dataTransfer });
 };
@@ -17,6 +17,41 @@ test.describe('Document create member', () => {
    await page.goto('/');
  });

+  test('it checks search hints', async ({ page, browserName }) => {
+    await createDoc(page, 'select-multi-users', browserName, 1);
+
+    await page.getByRole('button', { name: 'Share' }).click();
+
+    const shareModal = page.getByLabel('Share the document');
+    await expect(shareModal.getByText('Document owner')).toBeVisible();
+
+    const inputSearch = page.getByTestId('quick-search-input');
+    await inputSearch.fill('u');
+    await expect(shareModal.getByText('Document owner')).toBeHidden();
+    await expect(
+      shareModal.getByText('Type at least 3 characters to display user names'),
+    ).toBeVisible();
+    await inputSearch.fill('user');
+    await expect(
+      shareModal.getByText('Type at least 3 characters to display user names'),
+    ).toBeHidden();
+    await expect(shareModal.getByText('Choose a user')).toBeVisible();
+    await inputSearch.fill('anything');
+    await expect(shareModal.getByText('Choose a user')).toBeHidden();
+    await expect(
+      shareModal.getByText(
+        'No results. Type a full email address to invite someone.',
+      ),
+    ).toBeVisible();
+    await inputSearch.fill('anything@test.com');
+    await expect(
+      shareModal.getByText(
+        'No results. Type a full email address to invite someone.',
+      ),
+    ).toBeHidden();
+    await expect(shareModal.getByText('Choose the email')).toBeVisible();
+  });
+
  test('it selects 2 users and 1 invitation', async ({ page, browserName }) => {
    const inputFill = 'user.test';
    const responsePromise = page.waitForResponse(
@@ -43,15 +43,12 @@ test.describe('Doc Tree', () => {
    await expect(secondSubPageItem).toBeVisible();

    // Check the position of the sub pages
-    const allSubPageItems = await docTree
-      .getByTestId(/^doc-sub-page-item/)
-      .all();
-
-    expect(allSubPageItems.length).toBe(2);
+    const allSubPageItems = docTree.getByTestId(/^doc-sub-page-item/);
+    await expect(allSubPageItems).toHaveCount(2);

    // Check that elements are in the correct order
-    await expect(allSubPageItems[0].getByText('first move')).toBeVisible();
-    await expect(allSubPageItems[1].getByText('second move')).toBeVisible();
+    await expect(allSubPageItems.nth(0).getByText('first move')).toBeVisible();
+    await expect(allSubPageItems.nth(1).getByText('second move')).toBeVisible();

    // Will move the first sub page to the second position
    const firstSubPageBoundingBox = await firstSubPageItem.boundingBox();
@@ -91,17 +88,15 @@ test.describe('Doc Tree', () => {
    await expect(secondSubPageItem).toBeVisible();

    // Check that elements are in the correct order
-    const allSubPageItemsAfterReload = await docTree
-      .getByTestId(/^doc-sub-page-item/)
-      .all();
-
-    expect(allSubPageItemsAfterReload.length).toBe(2);
+    const allSubPageItemsAfterReload =
+      docTree.getByTestId(/^doc-sub-page-item/);
+    await expect(allSubPageItemsAfterReload).toHaveCount(2);

    await expect(
-      allSubPageItemsAfterReload[0].getByText('second move'),
+      allSubPageItemsAfterReload.nth(0).getByText('second move'),
    ).toBeVisible();
    await expect(
-      allSubPageItemsAfterReload[1].getByText('first move'),
+      allSubPageItemsAfterReload.nth(1).getByText('first move'),
    ).toBeVisible();
  });

@@ -80,9 +80,9 @@ test.describe('Doc Version', () => {
    await expect(panel).toBeVisible();
    await expect(page.getByText('History', { exact: true })).toBeVisible();
    await expect(page.getByRole('status')).toBeHidden();
-    const items = await panel.locator('.version-item').all();
-    expect(items.length).toBe(2);
-    await items[1].click();
+    const items = panel.locator('.version-item');
+    await expect(items).toHaveCount(2);
+    await items.nth(1).click();

    await expect(modal.getByText('Hello World')).toBeVisible();
    await expect(modal.getByText('It will create a version')).toBeHidden();
@@ -90,7 +90,7 @@ test.describe('Doc Version', () => {
      modal.locator('div[data-content-type="callout"]').first(),
    ).toBeHidden();

-    await items[0].click();
+    await items.nth(0).click();

    await expect(modal.getByText('Hello World')).toBeVisible();
    await expect(modal.getByText('It will create a version')).toBeVisible();
@@ -101,7 +101,7 @@ test.describe('Doc Version', () => {
      modal.getByText('It will create a second version'),
    ).toBeHidden();

-    await items[1].click();
+    await items.nth(1).click();

    await expect(modal.getByText('Hello World')).toBeVisible();
    await expect(modal.getByText('It will create a version')).toBeHidden();
@@ -3,6 +3,11 @@ import path from 'path';

 import { Locator, Page, TestInfo, expect } from '@playwright/test';

+import theme_customization from '../../../../../backend/impress/configuration/theme/default.json';
+
+export type BrowserName = 'chromium' | 'firefox' | 'webkit';
+export const BROWSERS: BrowserName[] = ['chromium', 'webkit', 'firefox'];
+
 /** Returns a locator for a menu item (handles both menuitem and menuitemradio roles) */
 export const getMenuItem = (
  context: Page | Locator,
@@ -13,11 +18,6 @@ export const getMenuItem = (
    .getByRole('menuitem', { name, exact: options?.exact })
    .or(context.getByRole('menuitemradio', { name, exact: options?.exact }));

-import theme_customization from '../../../../../backend/impress/configuration/theme/default.json';
-
-export type BrowserName = 'chromium' | 'firefox' | 'webkit';
-export const BROWSERS: BrowserName[] = ['chromium', 'webkit', 'firefox'];
-
 export const CONFIG = {
  AI_BOT: {
    name: 'Docs AI',
@@ -23,7 +23,7 @@
  },
  "dependencies": {
    "@ag-media/react-pdf-table": "2.0.3",
-    "@ai-sdk/openai": "3.0.19",
+    "@ai-sdk/openai": "3.0.45",
    "@blocknote/code-block": "0.47.1",
    "@blocknote/core": "0.47.1",
    "@blocknote/mantine": "0.47.1",
@@ -38,20 +38,20 @@
    "@emoji-mart/data": "1.2.1",
    "@emoji-mart/react": "1.1.1",
    "@fontsource-variable/inter": "5.2.8",
-    "@fontsource-variable/material-symbols-outlined": "5.2.35",
+    "@fontsource-variable/material-symbols-outlined": "5.2.38",
    "@fontsource/material-icons": "5.2.7",
    "@gouvfr-lasuite/cunningham-react": "4.2.0",
    "@gouvfr-lasuite/integration": "1.0.3",
-    "@gouvfr-lasuite/ui-kit": "0.19.6",
+    "@gouvfr-lasuite/ui-kit": "0.19.10",
    "@hocuspocus/provider": "3.4.4",
-    "@mantine/core": "8.3.14",
-    "@mantine/hooks": "8.3.14",
+    "@mantine/core": "8.3.17",
+    "@mantine/hooks": "8.3.17",
    "@react-aria/live-announcer": "3.4.4",
    "@react-pdf/renderer": "4.3.1",
-    "@sentry/nextjs": "10.38.0",
+    "@sentry/nextjs": "10.43.0",
    "@tanstack/react-query": "5.90.21",
    "@tiptap/extensions": "*",
-    "ai": "6.0.49",
+    "ai": "6.0.128",
    "canvg": "4.0.3",
    "clsx": "2.1.1",
    "cmdk": "1.1.1",
@@ -59,28 +59,28 @@
    "emoji-datasource-apple": "16.0.0",
    "emoji-mart": "5.6.0",
    "emoji-regex": "10.6.0",
-    "i18next": "25.8.12",
+    "i18next": "25.8.18",
    "i18next-browser-languagedetector": "8.2.1",
    "idb": "8.0.3",
    "lodash": "4.17.23",
    "luxon": "3.7.2",
    "next": "16.1.7",
-    "posthog-js": "1.347.2",
+    "posthog-js": "1.360.2",
    "react": "*",
-    "react-aria-components": "1.15.1",
+    "react-aria-components": "1.16.0",
    "react-dom": "*",
    "react-dropzone": "15.0.0",
-    "react-i18next": "16.5.4",
-    "react-intersection-observer": "10.0.2",
+    "react-i18next": "16.5.8",
+    "react-intersection-observer": "10.0.3",
    "react-resizable-panels": "3.0.6",
    "react-select": "5.10.2",
-    "styled-components": "6.3.9",
+    "styled-components": "6.3.11",
    "use-debounce": "10.1.0",
    "uuid": "13.0.0",
    "y-protocols": "1.0.7",
    "yjs": "*",
-    "zod": "3.25.28",
-    "zustand": "5.0.11"
+    "zod": "4.3.6",
+    "zustand": "5.0.12"
  },
  "devDependencies": {
    "@svgr/webpack": "8.1.0",
@@ -89,26 +89,25 @@
    "@testing-library/jest-dom": "6.9.1",
    "@testing-library/react": "16.3.2",
    "@testing-library/user-event": "14.6.1",
-    "@types/lodash": "4.17.23",
+    "@types/lodash": "4.17.24",
    "@types/luxon": "3.7.1",
    "@types/node": "*",
    "@types/react": "*",
    "@types/react-dom": "*",
-    "@vitejs/plugin-react": "5.1.4",
+    "@vitejs/plugin-react": "6.0.1",
    "cross-env": "10.1.0",
    "dotenv": "17.3.1",
    "eslint-plugin-docs": "*",
    "fetch-mock": "9.11.0",
-    "jsdom": "28.1.0",
+    "jsdom": "29.0.0",
    "node-fetch": "2.7.0",
    "prettier": "3.8.1",
    "stylelint": "16.26.1",
    "stylelint-config-standard": "39.0.1",
    "stylelint-prettier": "5.0.3",
    "typescript": "*",
-    "vite-tsconfig-paths": "6.1.1",
-    "vitest": "4.0.18",
-    "webpack": "5.105.2",
+    "vitest": "4.1.0",
+    "webpack": "5.105.4",
    "workbox-webpack-plugin": "7.1.0"
  },
  "packageManager": "yarn@1.22.22"
@@ -93,7 +93,7 @@ export const DropButton = ({
          onOpenChangeHandler(true);
        }}
        aria-label={label}
-        aria-haspopup="true"
+        aria-haspopup="menu"
        aria-expanded={isLocalOpen}
        data-testid={testId}
        $css={css`
@@ -94,7 +94,7 @@ describe('<DropdownMenu />', () => {
    );

    const trigger = screen.getByRole('button', { name: 'Select language' });
-    expect(trigger).toHaveAttribute('aria-haspopup', 'true');
+    expect(trigger).toHaveAttribute('aria-haspopup', 'menu');
    expect(trigger).toHaveAttribute('aria-expanded', 'false');

    await userEvent.click(trigger);
@@ -48,7 +48,7 @@ export const QuickSearchInput = ({
        $direction="row"
        $align="center"
        className="quick-search-input"
-        $gap={spacingsTokens['2xs']}
+        $gap={spacingsTokens['xxs']}
        $padding={{ horizontal: 'base', vertical: 'xxs' }}
      >
        <Icon iconName="search" $variation="secondary" aria-hidden="true" />
@@ -62,6 +62,7 @@ export const QuickSearchInput = ({
          placeholder={placeholder ?? t('Search')}
          onValueChange={onFilter}
          maxLength={254}
+          minLength={6}
          data-testid="quick-search-input"
        />
      </Box>
@@ -18,14 +18,15 @@ export const QuickSearchStyle = createGlobalStyle`
    [cmdk-input] {
      border: none;
      width: 100%;
-      font-size: 17px;
+      font-size: 16px;
      background: white;
      outline: none;
      color: var(--c--contextuals--content--semantic--neutral--primary);
      border-radius: var(--c--globals--spacings--0);
+      font-family: var(--c--globals--font--families--base);

      &::placeholder {
-        color: var(--c--globals--colors--gray-500);
+        color: var(--c--contextuals--content--semantic--neutral--tertiary);
      }
    }

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useState } from 'react';
 import * as Y from 'yjs';

 import { useUpdateDoc } from '@/docs/doc-management/';
-import { KEY_LIST_DOC_VERSIONS } from '@/docs/doc-versioning';
+import { KEY_LIST_DOC_VERSIONS } from '@/docs/doc-versioning/api/useDocVersions';
 import { toBase64 } from '@/utils/string';
 import { isFirefox } from '@/utils/userAgent';

@@ -1,4 +1,9 @@
 import { afterAll, afterEach, describe, expect, it, vi } from 'vitest';
+
+vi.mock('@/docs/doc-export/components/ModalExport', () => ({
+  ModalExport: vi.fn(),
+}));
+
 const originalEnv = process.env.NEXT_PUBLIC_PUBLISH_AS_MIT;

 describe('useModuleExport', () => {
@@ -16,12 +21,12 @@ describe('useModuleExport', () => {
    const Export = await import('@/features/docs/doc-export/');

    expect(Export.default).toBeUndefined();
-  }, 15000);
+  });

  it('should load modules when NEXT_PUBLIC_PUBLISH_AS_MIT is false', async () => {
    process.env.NEXT_PUBLIC_PUBLISH_AS_MIT = 'false';
    const Export = await import('@/features/docs/doc-export/');

    expect(Export.default).toHaveProperty('ModalExport');
-  }, 15000);
+  });
 });
@@ -1,6 +1,4 @@
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import React from 'react';
 import { afterAll, beforeEach, describe, expect, vi } from 'vitest';

 import { AppWrapper } from '@/tests/utils';
@@ -40,17 +38,11 @@ describe('DocToolBox - Licence', () => {
    render(<DocToolBox doc={doc as any} />, {
      wrapper: AppWrapper,
    });
-    const optionsButton = await screen.findByLabelText('Export the document');
-    await userEvent.click(optionsButton);

-    // Wait for the export modal to be visible, then assert on its content text.
-    await screen.findByTestId('modal-export-title');
    expect(
-      screen.getByText(
-        'Export your document to print or download in .docx, .odt, .pdf or .html(zip) format.',
-      ),
+      await screen.findByLabelText('Export the document'),
    ).toBeInTheDocument();
-  }, 10000);
+  }, 15000);

  test('The export button is not rendered when MIT version is activated', async () => {
    process.env.NEXT_PUBLIC_PUBLISH_AS_MIT = 'true';
@@ -68,5 +60,5 @@ describe('DocToolBox - Licence', () => {
    expect(
      screen.queryByLabelText('Export the document'),
    ).not.toBeInTheDocument();
-  });
+  }, 15000);
 });
@@ -1,9 +1,8 @@
 import { Button, useModal } from '@gouvfr-lasuite/cunningham-react';
 import { useTreeContext } from '@gouvfr-lasuite/ui-kit';
-import { useQueryClient } from '@tanstack/react-query';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';

@@ -39,7 +38,6 @@ import {
  useDocUtils,
  useDuplicateDoc,
 } from '@/docs/doc-management';
-import { KEY_LIST_DOC_VERSIONS } from '@/docs/doc-versioning';
 import { useFocusStore, useResponsiveStore } from '@/stores';

 import { useCopyCurrentEditorToClipboard } from '../hooks/useCopyCurrentEditorToClipboard';
@@ -88,7 +86,6 @@ interface DocToolBoxProps {
 export const DocToolBox = ({ doc }: DocToolBoxProps) => {
  const { t } = useTranslation();
  const treeContext = useTreeContext<Doc>();
-  const queryClient = useQueryClient();
  const router = useRouter();
  const { isChild, isTopRoot } = useDocUtils(doc);

@@ -114,16 +111,6 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
    listInvalidQueries: [KEY_LIST_DOC, KEY_DOC, KEY_LIST_FAVORITE_DOC],
  });

-  useEffect(() => {
-    if (selectHistoryModal.isOpen) {
-      return;
-    }
-
-    void queryClient.resetQueries({
-      queryKey: [KEY_LIST_DOC_VERSIONS],
-    });
-  }, [selectHistoryModal.isOpen, queryClient]);
-
  // Emoji Management
  const { emoji } = getEmojiAndTitle(doc.title ?? '');
  const { updateDocEmoji } = useDocTitleUpdate();
@@ -4,7 +4,7 @@ import {
 } from '@gouvfr-lasuite/cunningham-react';
 import { useTranslation } from 'react-i18next';

-import { useEditorStore } from '../../doc-editor';
+import { useEditorStore } from '@/docs/doc-editor/stores/useEditorStore';

 export const useCopyCurrentEditorToClipboard = () => {
  const { editor } = useEditorStore();
@@ -21,8 +21,8 @@ export const useCopyCurrentEditorToClipboard = () => {
    try {
      const editorContentFormatted =
        asFormat === 'html'
-          ? await editor.blocksToHTMLLossy()
-          : await editor.blocksToMarkdownLossy();
+          ? editor.blocksToHTMLLossy()
+          : editor.blocksToMarkdownLossy();
      await navigator.clipboard.writeText(editorContentFormatted);
      const successMessage =
        asFormat === 'markdown'
@@ -44,7 +44,7 @@ export function useUpdateDoc(queryConfig?: UseUpdateDoc) {
    ...queryConfig,
    onSuccess: (data, variables, onMutateResult, context) => {
      queryConfig?.listInvalidQueries?.forEach((queryKey) => {
-        void queryClient.invalidateQueries({
+        void queryClient.resetQueries({
          queryKey: [queryKey],
        });
      });
@@ -14,6 +14,11 @@ vi.mock('@/stores', () => ({
  }),
 }));

+vi.mock('@gouvfr-lasuite/ui-kit', async () => ({
+  ...(await vi.importActual('@gouvfr-lasuite/ui-kit')),
+  useTreeContext: () => null,
+}));
+
 describe('useDocTitleUpdate', () => {
  beforeEach(() => {
    vi.clearAllMocks();
@@ -124,7 +124,8 @@ export const DocShareAddMemberList = ({
      $scope="surface"
      $theme="tertiary"
      $variation=""
-      $border="1px solid var(--c--contextuals--border--semantic--contextual--primary)"
+      $border="1px solid var(--c--contextuals--border--surface--primary)"
+      $margin={{ bottom: 'sm' }}
    >
      <Box
        $direction="row"
@@ -289,7 +289,7 @@ export const DocShareModal = ({ doc, onClose, isRootDoc = true }: Props) => {
                    />
                  )}
                  {showMemberSection && isRootDoc && (
-                    <Box $padding={{ horizontal: 'base' }}>
+                    <Box $padding={{ horizontal: 'base', top: 'base' }}>
                      <QuickSearchGroupAccessRequest doc={doc} />
                      <QuickSearchGroupInvitation doc={doc} />
                      <QuickSearchGroupMember doc={doc} />
@@ -301,6 +301,7 @@ export const DocShareModal = ({ doc, onClose, isRootDoc = true }: Props) => {
                      searchUsersRawData={searchUsersQuery.data}
                      onSelect={onSelect}
                      userQuery={userQuery}
+                      minLength={API_USERS_SEARCH_QUERY_MIN_LENGTH}
                    />
                  )}
                </QuickSearch>
@@ -321,14 +322,35 @@ interface QuickSearchInviteInputSectionProps {
  onSelect: (usr: User) => void;
  searchUsersRawData: User[] | undefined;
  userQuery: string;
+  minLength: number;
 }

 const QuickSearchInviteInputSection = ({
  onSelect,
  searchUsersRawData,
  userQuery,
+  minLength,
 }: QuickSearchInviteInputSectionProps) => {
  const { t } = useTranslation();
+  const hint = useMemo(() => {
+    if (userQuery.length < minLength) {
+      return t('Type at least {{minLength}} characters to display user names', {
+        minLength,
+      });
+    }
+    if (isValidEmail(userQuery)) {
+      return t('Choose the email');
+    }
+    if (!searchUsersRawData?.length) {
+      return t('No results. Type a full email address to invite someone.');
+    }
+
+    return t('Choose a user');
+  }, [minLength, searchUsersRawData?.length, t, userQuery]);
+
+  useEffect(() => {
+    announce(hint, 'polite');
+  }, [hint]);

  const searchUserData: QuickSearchData<User> = useMemo(() => {
    const users = searchUsersRawData || [];
@@ -347,7 +369,7 @@ const QuickSearchInviteInputSection = ({
    );

    return {
-      groupName: t('Search user result'),
+      groupName: hint,
      elements: users,
      endActions:
        isEmail && !hasEmailInUsers
@@ -359,12 +381,12 @@ const QuickSearchInviteInputSection = ({
            ]
          : undefined,
    };
-  }, [onSelect, searchUsersRawData, t, userQuery]);
+  }, [searchUsersRawData, userQuery, hint, onSelect]);

  return (
    <Box
      aria-label={t('List search user result card')}
-      $padding={{ horizontal: 'base', bottom: '3xs' }}
+      $padding={{ horizontal: 'base', bottom: '3xs', top: 'base' }}
    >
      <QuickSearchGroup
        group={searchUserData}
@@ -4,9 +4,12 @@ import { useEffect, useState } from 'react';
 import * as Y from 'yjs';

 import { Box, Text, TextErrors } from '@/components';
-import { BlockNoteReader, DocEditorContainer } from '@/docs/doc-editor/';
+import { BlockNoteReader } from '@/docs/doc-editor/components/BlockNoteEditor';
+import { DocEditorContainer } from '@/docs/doc-editor/components/DocEditor';
 import { Doc, base64ToBlocknoteXmlFragment } from '@/docs/doc-management';
-import { Versions, useDocVersion } from '@/docs/doc-versioning/';
+
+import { useDocVersion } from '../api/useDocVersion';
+import { Versions } from '../types';

 import { DocVersionHeader } from './DocVersionHeader';

@@ -1,4 +1,4 @@
-import { Doc } from '../doc-management';
+import { Doc } from '../doc-management/types';

 export interface APIListVersions {
  count: number;
@@ -1,4 +1,4 @@
-import { render, screen, waitFor } from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
 import i18next from 'i18next';
 import { DateTime } from 'luxon';
@@ -73,7 +73,9 @@ describe('DocsGridItemDate', () => {
  });

  it(`should render rendered the updated_at field in the correct language`, async () => {
-    await i18next.changeLanguage('fr');
+    await act(async () => {
+      await i18next.changeLanguage('fr');
+    });

    render(
      <DocsGridItemDate
@@ -90,7 +92,9 @@ describe('DocsGridItemDate', () => {

    expect(screen.getByText('il y a 5 jours')).toBeInTheDocument();

-    await i18next.changeLanguage('en');
+    await act(async () => {
+      await i18next.changeLanguage('en');
+    });
  });

  [
@@ -1,12 +1,7 @@
-import { afterEach, describe, expect, it, vi } from 'vitest';
-
-vi.mock('@/../package.json', () => ({
-  default: { version: '0.0.0' },
-}));
+import { describe, expect, it, vi } from 'vitest';

 describe('DocsDB', () => {
-  afterEach(() => {
-    vi.clearAllMocks();
+  beforeEach(() => {
    vi.resetModules();
  });

@@ -20,17 +15,16 @@ describe('DocsDB', () => {
    { version: '3.0.0', expected: 3000000 },
    { version: '10.20.30', expected: 10020030 },
  ].forEach(({ version, expected }) => {
-    it(`correctly computes version for ${version}`, () => {
+    it(`correctly computes version for ${version}`, async () => {
      vi.doMock('@/../package.json', () => ({
        default: { version },
      }));

-      return vi.importActual('../DocsDB').then((module: any) => {
-        const result = module.getCurrentVersion();
-        expect(result).toBe(expected);
-        expect(result).toBeGreaterThan(previousExpected);
-        previousExpected = result;
-      });
+      const module = await import('../DocsDB');
+      const result = (module as any).getCurrentVersion();
+      expect(result).toBe(expected);
+      expect(result).toBeGreaterThan(previousExpected);
+      previousExpected = result;
    });
  });
 });
@@ -1,16 +1,9 @@
 /// <reference types="vitest" />
 import react from '@vitejs/plugin-react';
-import tsconfigPaths from 'vite-tsconfig-paths';
 import { defineConfig } from 'vitest/config';

 export default defineConfig({
-  plugins: [
-    react(),
-    tsconfigPaths({
-      root: '.',
-      projects: ['./tsconfig.json'],
-    }),
-  ],
+  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
@@ -22,4 +15,7 @@ export default defineConfig({
  define: {
    'process.env.NODE_ENV': 'test',
  },
+  resolve: {
+    tsconfigPaths: true,
+  },
 });
@@ -32,17 +32,17 @@
  },
  "resolutions": {
    "@tiptap/extensions": "3.19.0",
-    "@types/node": "24.10.13",
+    "@types/node": "24.12.0",
    "@types/react": "19.2.14",
    "@types/react-dom": "19.2.3",
-    "eslint": "10.0.1",
+    "eslint": "10.0.3",
    "glob": "13.0.6",
    "prosemirror-view": "1.41.6",
    "react": "19.2.4",
    "react-dom": "19.2.4",
    "typescript": "5.9.3",
-    "wrap-ansi": "9.0.2",
-    "yjs": "13.6.29"
+    "wrap-ansi": "10.0.0",
+    "yjs": "13.6.30"
  },
  "packageManager": "yarn@1.22.22"
 }
@@ -2,7 +2,7 @@ const js = require('@eslint/js');
 const nextPlugin = require('@next/eslint-plugin-next');
 const tanstackQuery = require('@tanstack/eslint-plugin-query');
 const { defineConfig } = require('eslint/config');
-const importPlugin = require('eslint-plugin-import');
+const importPlugin = require('eslint-plugin-import-x');
 const jsxA11y = require('eslint-plugin-jsx-a11y');
 const prettier = require('eslint-plugin-prettier');
 const react = require('eslint-plugin-react');
@@ -18,22 +18,22 @@
  },
  "dependencies": {
    "@eslint/js": "10.0.1",
-    "@next/eslint-plugin-next": "16.1.6",
+    "@next/eslint-plugin-next": "16.1.7",
    "@tanstack/eslint-plugin-query": "5.91.4",
-    "@typescript-eslint/eslint-plugin": "8.56.0",
-    "@typescript-eslint/parser": "8.56.0",
-    "@typescript-eslint/utils": "8.56.0",
-    "@vitest/eslint-plugin": "1.6.9",
-    "eslint-config-next": "16.1.6",
+    "@typescript-eslint/eslint-plugin": "8.57.1",
+    "@typescript-eslint/parser": "8.57.1",
+    "@typescript-eslint/utils": "8.57.1",
+    "@vitest/eslint-plugin": "1.6.12",
+    "eslint-config-next": "16.1.7",
    "eslint-config-prettier": "10.1.8",
-    "eslint-plugin-import": "2.32.0",
+    "eslint-plugin-import-x": "4.16.2",
    "eslint-plugin-jest": "29.15.0",
    "eslint-plugin-jsx-a11y": "6.10.2",
-    "eslint-plugin-playwright": "2.5.1",
+    "eslint-plugin-playwright": "2.10.0",
    "eslint-plugin-prettier": "5.5.5",
    "eslint-plugin-react": "7.37.5",
-    "eslint-plugin-react-hooks": "5.2.0",
-    "eslint-plugin-testing-library": "7.15.4",
+    "eslint-plugin-react-hooks": "7.0.1",
+    "eslint-plugin-testing-library": "7.16.0",
    "prettier": "3.8.1"
  },
  "packageManager": "yarn@1.22.22"
@@ -19,8 +19,8 @@
    "@types/node": "*",
    "eslint-plugin-docs": "*",
    "eslint-plugin-import": "2.32.0",
-    "i18next-parser": "9.3.0",
-    "jest": "30.2.0",
+    "i18next-parser": "9.4.0",
+    "jest": "30.3.0",
    "ts-jest": "29.4.6",
    "typescript": "*",
    "yargs": "18.0.0"
@@ -18,10 +18,10 @@
  "dependencies": {
    "@blocknote/server-util": "0.47.1",
    "@hocuspocus/server": "3.4.4",
-    "@sentry/node": "10.38.0",
-    "@sentry/profiling-node": "10.38.0",
+    "@sentry/node": "10.43.0",
+    "@sentry/profiling-node": "10.43.0",
    "@tiptap/extensions": "*",
-    "axios": "1.13.5",
+    "axios": "1.13.6",
    "cors": "2.8.6",
    "express": "5.2.1",
    "express-ws": "5.0.2",
@@ -36,16 +36,16 @@
    "@types/express": "5.0.6",
    "@types/express-ws": "3.0.6",
    "@types/node": "*",
-    "@types/supertest": "6.0.3",
+    "@types/supertest": "7.2.0",
    "@types/ws": "8.18.1",
    "cross-env": "10.1.0",
    "eslint-plugin-docs": "*",
-    "nodemon": "3.1.11",
+    "nodemon": "3.1.14",
    "supertest": "7.2.2",
    "ts-node": "10.9.2",
    "tsc-alias": "1.8.16",
    "typescript": "*",
-    "vitest": "4.0.18",
+    "vitest": "4.1.0",
    "vitest-mock-extended": "3.1.0",
    "ws": "8.19.0"
  },
@@ -7,6 +7,9 @@
    "@html-to/text-cli": "0.5.4",
    "mjml": "4.18.0"
  },
+  "resolutions": {
+    "minimatch": "^9.0.7"
+  },
  "private": true,
  "scripts": {
    "build-mjml-to-html": "bash ./bin/mjml-to-html",
@@ -110,7 +110,7 @@ boolbase@^1.0.0:
  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
  integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==

-brace-expansion@^2.0.1:
+brace-expansion@^2.0.2:
  version "2.0.2"
  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-2.0.2.tgz#54fc53237a613d854c7bd37463aad17df87214e7"
  integrity sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==
@@ -562,19 +562,12 @@ mime@^2.4.6:
  resolved "https://registry.yarnpkg.com/mime/-/mime-2.6.0.tgz#a2a682a95cd4d0cb1d6257e28f83da7e35800367"
  integrity sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==

-minimatch@9.0.1:
-  version "9.0.1"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.1.tgz#8a555f541cf976c622daf078bb28f29fb927c253"
-  integrity sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==
+minimatch@9.0.1, minimatch@^9.0.3, minimatch@^9.0.4, minimatch@^9.0.7:
+  version "9.0.9"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.9.tgz#9b0cb9fcb78087f6fd7eababe2511c4d3d60574e"
+  integrity sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==
  dependencies:
-    brace-expansion "^2.0.1"
-
-minimatch@^9.0.3, minimatch@^9.0.4:
-  version "9.0.5"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.5.tgz#d74f9dd6b57d83d8e98cfb82133b03978bc929e5"
-  integrity sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==
-  dependencies:
-    brace-expansion "^2.0.1"
+    brace-expansion "^2.0.2"

 "minipass@^5.0.0 || ^6.0.2 || ^7.0.0", minipass@^7.1.2:
  version "7.1.2"
Author	SHA1	Message	Date
Cyril	2b60f68570	♿(frontend) use aria-haspopup menu on DropButton triggers Replace aria-haspopup true with menu on DropButton	2026-03-25 10:15:22 +01:00
Anthony LC	fb92a43755	🚸(frontend) hint min char search users We give a hint to the user about the minimum number of characters required to perform a search in the quick search input of the doc share modal. This is to improve the user experience.	2026-03-25 09:33:14 +01:00
Anthony LC	03fd1fe50e	✅(frontend) fix vitest tests We upgraded vitest recently, we need to adapt some of our tests to the new version. We brought some modules improvments as well, problemes that was highlighted by the new version of vitest.	2026-03-24 16:48:40 +01:00
Anthony LC	fc803226ac	🔒️(js) fix security warning Force the upgrade of some dependencies to fix security warnings.	2026-03-24 15:54:34 +01:00
Anthony LC	fb725edda3	🚨(frontend) fix eslint errors Recent upgrade of eslint-plugin-playwright highlighted some errors. This commit fixes those errors.	2026-03-24 13:01:52 +01:00
Anthony LC	6838b387a2	➕(linter) replace eslint-plugin-import by eslint-plugin-import-x "eslint-plugin-import" is not well maintained anymore better to use "eslint-plugin-import-x" which is a fork of "eslint-plugin-import" and is actively maintained.	2026-03-24 13:01:51 +01:00
Anthony LC	87f570582f	⬇️(frontend) downgrade @react-pdf/renderer and pin it @react-pdf/renderer is not compatible with the Blocknote version. We need to downgrade it to a compatible version and pin it to avoid future issues. When Blocknote updates to a compatible version, we can upgrade @react-pdf/renderer again.	2026-03-24 13:01:51 +01:00
Anthony LC	37f56fcc22	📌(frontend) blocked upgrade stylelint stylelint introduces lot of breaking changes in its latest version, and since we use it only for linting css files, so we can block its upgrade for now and upgrade it later when we will have more time to handle the breaking changes.	2026-03-24 13:00:46 +01:00
renovate[bot]	19aa3a36bc	⬆️(dependencies) update js dependencies	2026-03-24 13:00:04 +01:00