Fix tooltips in SharePopover components

- Add TooltipProvider to Document and Collection SharePopover components
- Fixes tooltip context being lost when content is rendered in portals
- Ensures tooltips work properly for CopyLinkButton and other tooltip-enabled components

.babelrc

@@ -1,6 +1,11 @@
 {
   "presets": [
-    "@babel/preset-react",
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
+    ],
     "@babel/preset-env",
     "@babel/preset-typescript"
   ],
@@ -60,4 +65,4 @@
       ]
     }
   }
-}
+}

.eslintrc

@@ -2,7 +2,9 @@
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "sourceType": "module",
-    "extraFileExtensions": [".json"],
+    "extraFileExtensions": [
+      ".json"
+    ],
     "project": "./tsconfig.json",
     "ecmaFeatures": {
       "jsx": true
@@ -17,6 +19,7 @@
   ],
   "plugins": [
     "es",
+    "react",
     "@typescript-eslint",
     "eslint-plugin-import",
     "eslint-plugin-node",
@@ -24,24 +27,47 @@
     "eslint-plugin-lodash"
   ],
   "rules": {
+    "no-restricted-imports": [
+      "error",
+      {
+        "paths": [
+          {
+            "name": "reakit/Menu",
+            "importNames": [
+              "useMenuState"
+            ],
+            "message": "Do not use useMenuState from reakit/Menu. Use useMenuState instead."
+          }
+        ]
+      }
+    ],
     "eqeqeq": 2,
     "curly": 2,
     "no-console": "error",
-    "arrow-body-style": ["error", "as-needed"],
+    "arrow-body-style": [
+      "error",
+      "as-needed"
+    ],
     "spaced-comment": "error",
     "object-shorthand": "error",
     "no-mixed-operators": "off",
     "no-useless-escape": "off",
     "no-shadow": "off",
     "es/no-regexp-lookbehind-assertions": "error",
-    "react/self-closing-comp": ["error", {
-      "component": true,
-      "html": true
-    }],
+    "react/react-in-jsx-scope": "off",
+    "react/self-closing-comp": [
+      "error",
+      {
+        "component": true,
+        "html": true
+      }
+    ],
     "@typescript-eslint/no-shadow": [
       "warn",
       {
-        "allow": ["transaction"],
+        "allow": [
+          "transaction"
+        ],
         "hoist": "all",
         "ignoreTypeValueShadow": true
       }
@@ -63,9 +89,25 @@
         "ignoreRestSiblings": true
       }
     ],
-    "padding-line-between-statements": ["error", { "blankLine": "always", "prev": "*", "next": "export" }],
-    "lines-between-class-members": ["error", "always", { "exceptAfterSingleLine": true }],
-    "lodash/import-scope": ["error", "method"],
+    "padding-line-between-statements": [
+      "error",
+      {
+        "blankLine": "always",
+        "prev": "*",
+        "next": "export"
+      }
+    ],
+    "lines-between-class-members": [
+      "error",
+      "always",
+      {
+        "exceptAfterSingleLine": true
+      }
+    ],
+    "lodash/import-scope": [
+      "error",
+      "method"
+    ],
     "import/no-named-as-default": "off",
     "import/no-named-as-default-member": "off",
     "import/newline-after-import": 2,
@@ -134,10 +176,13 @@
       "version": "detect"
     },
     "import/parsers": {
-      "@typescript-eslint/parser": [".ts", ".tsx"]
+      "@typescript-eslint/parser": [
+        ".ts",
+        ".tsx"
+      ]
     },
     "import/resolver": {
       "typescript": {}
     }
   }
-}
+}

app/.eslintrc

@@ -7,6 +7,9 @@
   "plugins": [
     "eslint-plugin-react-hooks"
   ],
+  "rules": {
+    "react/react-in-jsx-scope": "off"
+  },
   "env": {
     "jest": true,
     "browser": true

app/actions/definitions/apiKeys.tsx

@@ -1,5 +1,4 @@
 import { PlusIcon } from "outline-icons";
-import * as React from "react";
 import stores from "~/stores";
 import ApiKeyNew from "~/scenes/ApiKeyNew";
 import { createAction } from "..";

app/actions/definitions/collections.tsx

@@ -13,7 +13,6 @@ import {
   UnstarredIcon,
   UnsubscribeIcon,
 } from "outline-icons";
-import * as React from "react";
 import { toast } from "sonner";
 import Collection from "~/models/Collection";
 import { CollectionEdit } from "~/components/Collection/CollectionEdit";

app/actions/definitions/comments.tsx

@@ -1,5 +1,4 @@
 import { DoneIcon, SmileyIcon, TrashIcon } from "outline-icons";
-import * as React from "react";
 import { toast } from "sonner";
 import stores from "~/stores";
 import Comment from "~/models/Comment";

app/actions/definitions/developer.tsx

@@ -7,7 +7,6 @@ import {
   TrashIcon,
   UserIcon,
 } from "outline-icons";
-import * as React from "react";
 import { toast } from "sonner";
 import { createAction } from "~/actions";
 import { DeveloperSection } from "~/actions/sections";

app/actions/definitions/documents.tsx

@@ -31,7 +31,6 @@ import {
   LogoutIcon,
   CaseSensitiveIcon,
 } from "outline-icons";
-import * as React from "react";
 import { toast } from "sonner";
 import Icon from "@shared/components/Icon";
 import {
@@ -751,7 +750,7 @@ export const importDocument = createAction({
 
     return false;
   },
-  perform: ({ activeCollectionId, activeDocumentId, stores }) => {
+  perform: ({ activeDocumentId, activeCollectionId, stores }) => {
     const { documents } = stores;
     const input = document.createElement("input");
     input.type = "file";
@@ -1082,12 +1081,17 @@ export const openDocumentComments = createAction({
   analyticsName: "Open comments",
   section: ActiveDocumentSection,
   icon: <CommentIcon />,
-  visible: ({ activeDocumentId, stores }) => {
+  visible: ({ activeCollectionId, activeDocumentId, stores }) => {
     const can = stores.policies.abilities(activeDocumentId ?? "");
+    const collection = activeCollectionId
+      ? stores.collections.get(activeCollectionId)
+      : undefined;
+
     return (
       !!activeDocumentId &&
       can.comment &&
-      !!stores.auth.team?.getPreference(TeamPreference.Commenting)
+      (collection?.canCreateComment ??
+        !!stores.auth.team?.getPreference(TeamPreference.Commenting))
     );
   },
   perform: ({ activeDocumentId, stores }) => {

app/actions/definitions/navigation.tsx

@@ -13,7 +13,6 @@ import {
   ShapesIcon,
   DraftsIcon,
 } from "outline-icons";
-import * as React from "react";
 import { UrlHelper } from "@shared/utils/UrlHelper";
 import { isMac } from "@shared/utils/browser";
 import stores from "~/stores";

app/actions/definitions/notifications.tsx

@@ -1,5 +1,4 @@
 import { ArchiveIcon, MarkAsReadIcon } from "outline-icons";
-import * as React from "react";
 import { createAction } from "..";
 import { NotificationSection } from "../sections";
 

app/actions/definitions/oauthClients.tsx

@@ -1,5 +1,4 @@
 import { PlusIcon } from "outline-icons";
-import * as React from "react";
 import stores from "~/stores";
 import { OAuthClientNew } from "~/components/OAuthClient/OAuthClientNew";
 import { createAction } from "..";

app/actions/definitions/revisions.tsx

@@ -1,6 +1,5 @@
 import copy from "copy-to-clipboard";
-import { LinkIcon, RestoreIcon } from "outline-icons";
-import * as React from "react";
+import { LinkIcon, RestoreIcon, TrashIcon } from "outline-icons";
 import { matchPath } from "react-router-dom";
 import { toast } from "sonner";
 import stores from "~/stores";
@@ -13,7 +12,7 @@ import {
 } from "~/utils/routeHelpers";
 
 export const restoreRevision = createAction({
-  name: ({ t }) => t("Restore revision"),
+  name: ({ t }) => t("Restore"),
   analyticsName: "Restore revision",
   icon: <RestoreIcon />,
   section: RevisionSection,
@@ -42,6 +41,38 @@ export const restoreRevision = createAction({
   },
 });
 
+export const deleteRevision = createAction({
+  name: ({ t }) => t("Delete"),
+  analyticsName: "Delete revision",
+  icon: <TrashIcon />,
+  section: RevisionSection,
+  dangerous: true,
+  visible: ({ activeDocumentId }) =>
+    !!activeDocumentId && stores.policies.abilities(activeDocumentId).update,
+  perform: async ({ t, event, location, activeDocumentId }) => {
+    event?.preventDefault();
+    if (!activeDocumentId) {
+      return;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+    if (!document) {
+      return;
+    }
+
+    const match = matchPath<{ revisionId: string }>(location.pathname, {
+      path: matchDocumentHistory,
+    });
+    const revisionId = match?.params.revisionId;
+    if (revisionId) {
+      const revision = stores.revisions.get(revisionId);
+      await revision?.delete();
+      toast.success(t("This version of the document was deleted"));
+      history.push(documentHistoryPath(document));
+    }
+  },
+});
+
 export const copyLinkToRevision = createAction({
   name: ({ t }) => t("Copy link"),
   analyticsName: "Copy link to revision",

app/actions/definitions/settings.tsx

@@ -1,5 +1,4 @@
 import { SunIcon, MoonIcon, BrowserIcon } from "outline-icons";
-import * as React from "react";
 import stores from "~/stores";
 import { Theme } from "~/stores/UiStore";
 import { createAction } from "~/actions";

app/actions/definitions/teams.tsx

@@ -1,5 +1,4 @@
 import { ArrowIcon, PlusIcon } from "outline-icons";
-import * as React from "react";
 import styled from "styled-components";
 import { stringToColor } from "@shared/utils/color";
 import RootStore from "~/stores/RootStore";

app/actions/definitions/users.tsx

@@ -1,5 +1,4 @@
 import { PlusIcon } from "outline-icons";
-import * as React from "react";
 import { UserRole } from "@shared/types";
 import { UserRoleHelper } from "@shared/utils/UserRoleHelper";
 import stores from "~/stores";

app/actions/index.ts

@@ -1,5 +1,4 @@
 import flattenDeep from "lodash/flattenDeep";
-import * as React from "react";
 import { toast } from "sonner";
 import { Optional } from "utility-types";
 import { v4 as uuidv4 } from "uuid";

app/components/Arrow.tsx

@@ -1,5 +1,3 @@
-import * as React from "react";
-
 export default function Arrow() {
   return (
     <svg

app/components/Authenticated.tsx

@@ -1,5 +1,5 @@
 import { observer } from "mobx-react";
-import * as React from "react";
+import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { Redirect } from "react-router-dom";
 import useCurrentUser from "~/hooks/useCurrentUser";
@@ -19,7 +19,7 @@ const Authenticated = ({ children }: Props) => {
 
   // Watching for language changes here as this is the earliest point we might have the user
   // available and means we can start loading translations faster
-  React.useEffect(() => {
+  useEffect(() => {
     void changeLanguage(language, i18n);
   }, [i18n, language]);
 

app/components/AuthenticatedLayout.tsx

@@ -49,7 +49,7 @@ type Props = {
 };
 
 const AuthenticatedLayout: React.FC = ({ children }: Props) => {
-  const { ui, auth } = useStores();
+  const { ui, auth, collections } = useStores();
   const location = useLocation();
   const layoutRef = React.useRef<HTMLDivElement>(null);
   const can = usePolicy(ui.activeDocumentId);
@@ -108,7 +108,9 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
     can.comment &&
     ui.activeDocumentId &&
     ui.commentsExpanded &&
-    team.getPreference(TeamPreference.Commenting);
+    (ui.activeCollectionId
+      ? collections.get(ui.activeCollectionId)?.canCreateComment
+      : !!team.getPreference(TeamPreference.Commenting));
 
   const sidebarRight = (
     <AnimatePresence

app/components/Avatar/Avatar.tsx

@@ -45,12 +45,23 @@ type Props = {
 };
 
 function Avatar(props: Props) {
-  const { model, style, variant = AvatarVariant.Round, ...rest } = props;
+  const {
+    model,
+    style,
+    variant = AvatarVariant.Round,
+    className,
+    ...rest
+  } = props;
   const src = props.src || model?.avatarUrl;
   const [error, handleError] = useBoolean(false);
 
   return (
-    <Relative style={style} $variant={variant} $size={props.size}>
+    <Relative
+      style={style}
+      $variant={variant}
+      $size={props.size}
+      className={className}
+    >
       {src && !error ? (
         <Image onError={handleError} src={src} {...rest} />
       ) : model ? (
@@ -75,6 +86,8 @@ const Relative = styled.div<{ $variant: AvatarVariant; $size: AvatarSize }>`
   border-radius: ${(props) =>
     props.$variant === AvatarVariant.Round ? "50%" : `${props.$size / 8}px`};
   overflow: hidden;
+  width: ${(props) => props.$size}px;
+  height: ${(props) => props.$size}px;
 `;
 
 const Image = styled.img<{ size: number }>`

app/components/Avatar/GroupAvatar.tsx

@@ -1,5 +1,4 @@
 import { GroupIcon } from "outline-icons";
-import * as React from "react";
 import { useTheme } from "styled-components";
 import Squircle from "@shared/components/Squircle";
 import Group from "~/models/Group";

app/components/Avatar/index.ts

@@ -1,7 +1,7 @@
-import Avatar, { IAvatar, AvatarSize } from "./Avatar";
+import Avatar, { IAvatar, AvatarSize, AvatarVariant } from "./Avatar";
 import AvatarWithPresence from "./AvatarWithPresence";
 import { GroupAvatar } from "./GroupAvatar";
 
-export { Avatar, GroupAvatar, AvatarSize, AvatarWithPresence };
+export { Avatar, GroupAvatar, AvatarSize, AvatarVariant, AvatarWithPresence };
 
 export type { IAvatar };

app/components/Branding.tsx

@@ -1,4 +1,3 @@
-import * as React from "react";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { depths, s } from "@shared/styles";

app/components/ChangeLanguage.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { changeLanguage } from "~/utils/language";
 
@@ -9,7 +9,7 @@ type Props = {
 export default function ChangeLanguage({ locale }: Props) {
   const { i18n } = useTranslation();
 
-  React.useEffect(() => {
+  useEffect(() => {
     void changeLanguage(locale, i18n);
   }, [locale, i18n]);
 

app/components/CircularProgressBar.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import styled, { useTheme } from "styled-components";
 
 const cleanPercentage = (percentage: number) => {

app/components/Collaborators.tsx

@@ -3,7 +3,7 @@ import isEqual from "lodash/isEqual";
 import orderBy from "lodash/orderBy";
 import uniq from "lodash/uniq";
 import { observer } from "mobx-react";
-import * as React from "react";
+import { useState, useMemo, useEffect, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
 import Document from "~/models/Document";
@@ -31,58 +31,97 @@ function Collaborators(props: Props) {
   const { t } = useTranslation();
   const user = useCurrentUser();
   const currentUserId = user?.id;
-  const [requestedUserIds, setRequestedUserIds] = React.useState<string[]>([]);
+  const [requestedUserIds, setRequestedUserIds] = useState<string[]>([]);
   const { users, presence, ui } = useStores();
   const { document } = props;
+  const { observingUserId } = ui;
   const documentPresence = presence.get(document.id);
   const documentPresenceArray = documentPresence
     ? Array.from(documentPresence.values())
     : [];
 
-  const presentIds = documentPresenceArray.map((p) => p.userId);
-  const editingIds = documentPresenceArray
-    .filter((p) => p.isEditing)
-    .map((p) => p.userId);
+  // Use Set for O(1) lookups and stable references
+  const presentIds = useMemo(
+    () => new Set(documentPresenceArray.map((p) => p.userId)),
+    [documentPresenceArray]
+  );
+  const editingIds = useMemo(
+    () =>
+      new Set(
+        documentPresenceArray.filter((p) => p.isEditing).map((p) => p.userId)
+      ),
+    [documentPresenceArray]
+  );
 
   // ensure currently present via websocket are always ordered first
-  const collaborators = React.useMemo(
+  // Memoize collaboratorIds as a Set for efficient lookup
+  const collaboratorIdsSet = useMemo(
+    () => new Set(document.collaboratorIds),
+    [document.collaboratorIds]
+  );
+  const collaborators = useMemo(
     () =>
       orderBy(
         filter(
           users.all,
           (u) =>
-            (presentIds.includes(u.id) ||
-              document.collaboratorIds.includes(u.id)) &&
+            (presentIds.has(u.id) || collaboratorIdsSet.has(u.id)) &&
             !u.isSuspended
         ),
-        [(u) => presentIds.includes(u.id), "id"],
+        [(u) => presentIds.has(u.id), "id"],
         ["asc", "asc"]
       ),
-    [document.collaboratorIds, users.all, presentIds]
+    [collaboratorIdsSet, users.all, presentIds]
   );
 
   // load any users we don't yet have in memory
-  React.useEffect(() => {
-    const ids = uniq([...document.collaboratorIds, ...presentIds])
-      .filter((userId) => !users.get(userId))
-      .sort();
+  // Memoize ids to avoid unnecessary effect executions
+  const missingUserIds = useMemo(
+    () =>
+      uniq([...document.collaboratorIds, ...Array.from(presentIds)])
+        .filter((userId) => !users.get(userId))
+        .sort(),
+    [document.collaboratorIds, presentIds, users]
+  );
 
-    if (!isEqual(requestedUserIds, ids) && ids.length > 0) {
-      setRequestedUserIds(ids);
-      void users.fetchPage({ ids, limit: 100 });
+  useEffect(() => {
+    if (
+      !isEqual(requestedUserIds, missingUserIds) &&
+      missingUserIds.length > 0
+    ) {
+      setRequestedUserIds(missingUserIds);
+      void users.fetchPage({ ids: missingUserIds, limit: 100 });
     }
-  }, [document, users, presentIds, document.collaboratorIds, requestedUserIds]);
+  }, [missingUserIds, requestedUserIds, users]);
 
   const popover = usePopoverState({
     gutter: 0,
     placement: "bottom-end",
   });
 
-  const renderAvatar = React.useCallback(
+  // Memoize onClick handler to avoid inline function creation
+  const handleAvatarClick = useCallback(
+    (
+        collaboratorId: string,
+        isPresent: boolean,
+        isObserving: boolean,
+        isObservable: boolean
+      ) =>
+      (ev: React.MouseEvent) => {
+        if (isObservable && isPresent) {
+          ev.preventDefault();
+          ev.stopPropagation();
+          ui.setObservingUser(isObserving ? undefined : collaboratorId);
+        }
+      },
+    [ui]
+  );
+
+  const renderAvatar = useCallback(
     ({ model: collaborator, ...rest }) => {
-      const isPresent = presentIds.includes(collaborator.id);
-      const isEditing = editingIds.includes(collaborator.id);
-      const isObserving = ui.observingUserId === collaborator.id;
+      const isPresent = presentIds.has(collaborator.id);
+      const isEditing = editingIds.has(collaborator.id);
+      const isObserving = observingUserId === collaborator.id;
       const isObservable = collaborator.id !== currentUserId;
 
       return (
@@ -96,21 +135,18 @@ function Collaborators(props: Props) {
           isCurrentUser={currentUserId === collaborator.id}
           onClick={
             isObservable
-              ? (ev) => {
-                  if (isPresent) {
-                    ev.preventDefault();
-                    ev.stopPropagation();
-                    ui.setObservingUser(
-                      isObserving ? undefined : collaborator.id
-                    );
-                  }
-                }
+              ? handleAvatarClick(
+                  collaborator.id,
+                  isPresent,
+                  isObserving,
+                  isObservable
+                )
               : undefined
           }
         />
       );
     },
-    [presentIds, ui, currentUserId, editingIds]
+    [presentIds, editingIds, observingUserId, currentUserId, handleAvatarClick]
   );
 
   return (
@@ -133,7 +169,7 @@ function Collaborators(props: Props) {
         )}
       </PopoverDisclosure>
       <Popover {...popover} width={300} aria-label={t("Viewers")} tabIndex={0}>
-        <DocumentViews document={document} isOpen={popover.visible} />
+        {popover.visible && <DocumentViews document={document} />}
       </Popover>
     </>
   );

app/components/Collection/CollectionEdit.tsx

@@ -1,5 +1,5 @@
 import { observer } from "mobx-react";
-import * as React from "react";
+import { useCallback } from "react";
 import { toast } from "sonner";
 import useStores from "~/hooks/useStores";
 import { CollectionForm, FormData } from "./CollectionForm";
@@ -16,7 +16,7 @@ export const CollectionEdit = observer(function CollectionEdit_({
   const { collections } = useStores();
   const collection = collections.get(collectionId);
 
-  const handleSubmit = React.useCallback(
+  const handleSubmit = useCallback(
     async (data: FormData) => {
       try {
         await collection?.save(data);

app/components/Collection/CollectionForm.tsx

@@ -1,12 +1,12 @@
 import uniq from "lodash/uniq";
 import { observer } from "mobx-react";
-import * as React from "react";
+import { useMemo, useEffect, useCallback, Suspense } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { Trans, useTranslation } from "react-i18next";
 import styled from "styled-components";
 import Icon from "@shared/components/Icon";
 import { randomElement } from "@shared/random";
-import { CollectionPermission } from "@shared/types";
+import { CollectionPermission, TeamPreference } from "@shared/types";
 import { IconLibrary } from "@shared/utils/IconLibrary";
 import { colorPalette } from "@shared/utils/collections";
 import { CollectionValidation } from "@shared/validations";
@@ -31,6 +31,7 @@ export interface FormData {
   color: string | null;
   sharing: boolean;
   permission: CollectionPermission | undefined;
+  commenting?: boolean | null;
 }
 
 const useIconColor = (collection?: Collection) => {
@@ -40,7 +41,7 @@ const useIconColor = (collection?: Collection) => {
     collections.orderedData.map((c) => c.color).filter(Boolean)
   ) as string[];
 
-  const iconColor = React.useMemo(
+  const iconColor = useMemo(
     () =>
       collection?.color ??
       // If all the existing collections have the same color, use that color,
@@ -83,6 +84,7 @@ export const CollectionForm = observer(function CollectionForm_({
       icon: collection?.icon,
       sharing: collection?.sharing ?? true,
       permission: collection?.permission,
+      commenting: collection?.commenting ?? true,
       color: iconColor,
     },
   });
@@ -90,11 +92,11 @@ export const CollectionForm = observer(function CollectionForm_({
   const values = watch();
 
   // Preload the IconPicker component on mount
-  React.useEffect(() => {
+  useEffect(() => {
     void IconPicker.preload();
   }, []);
 
-  React.useEffect(() => {
+  useEffect(() => {
     // If the user hasn't picked an icon yet, go ahead and suggest one based on
     // the name of the collection. It's the little things sometimes.
     if (!hasOpenedIconPicker && !collection) {
@@ -107,11 +109,11 @@ export const CollectionForm = observer(function CollectionForm_({
     }
   }, [collection, hasOpenedIconPicker, setValue, values.name, values.icon]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     setTimeout(() => setFocus("name", { shouldSelect: true }), 100);
   }, [setFocus]);
 
-  const handleIconChange = React.useCallback(
+  const handleIconChange = useCallback(
     (icon: string, color: string | null) => {
       if (icon !== values.icon) {
         setFocus("name");
@@ -140,7 +142,7 @@ export const CollectionForm = observer(function CollectionForm_({
             maxLength: CollectionValidation.maxNameLength,
           })}
           prefix={
-            <React.Suspense fallback={fallbackIcon}>
+            <Suspense fallback={fallbackIcon}>
               <StyledIconPicker
                 icon={values.icon}
                 color={values.color ?? iconColor}
@@ -149,7 +151,7 @@ export const CollectionForm = observer(function CollectionForm_({
                 onOpen={setHasOpenedIconPicker}
                 onChange={handleIconChange}
               />
-            </React.Suspense>
+            </Suspense>
           }
           autoComplete="off"
           autoFocus
@@ -190,6 +192,15 @@ export const CollectionForm = observer(function CollectionForm_({
         />
       )}
 
+      {team.getPreference(TeamPreference.Commenting) && (
+        <Switch
+          id="commenting"
+          label={t("Commenting")}
+          note={t("Allow commenting on documents within this collection.")}
+          {...register("commenting")}
+        />
+      )}
+
       <Flex justify="flex-end">
         <Button
           type="submit"

app/components/Collection/CollectionNew.tsx

@@ -1,6 +1,6 @@
 import { runInAction } from "mobx";
 import { observer } from "mobx-react";
-import * as React from "react";
+import { useCallback } from "react";
 import { toast } from "sonner";
 import useStores from "~/hooks/useStores";
 import history from "~/utils/history";
@@ -14,7 +14,7 @@ export const CollectionNew = observer(function CollectionNew_({
   onSubmit,
 }: Props) {
   const { collections } = useStores();
-  const handleSubmit = React.useCallback(
+  const handleSubmit = useCallback(
     async (data: FormData) => {
       try {
         const collection = await collections.save(data);

app/components/CollectionDeleteDialog.tsx

@@ -1,5 +1,4 @@
 import { observer } from "mobx-react";
-import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
 import { useHistory } from "react-router-dom";
 import { toast } from "sonner";

app/components/CommandBar/CommandBarResults.tsx

@@ -1,5 +1,4 @@
 import { useMatches, KBarResults } from "kbar";
-import * as React from "react";
 import styled from "styled-components";
 import Text from "~/components/Text";
 import CommandBarItem from "./CommandBarItem";

app/components/CommandBar/useRecentDocumentActions.tsx

@@ -1,5 +1,5 @@
 import { DocumentIcon } from "outline-icons";
-import * as React from "react";
+import { useMemo } from "react";
 import Icon from "@shared/components/Icon";
 import { createAction } from "~/actions";
 import { RecentSection } from "~/actions/sections";
@@ -10,7 +10,7 @@ import { documentPath } from "~/utils/routeHelpers";
 const useRecentDocumentActions = (count = 6) => {
   const { documents, ui } = useStores();
 
-  return React.useMemo(
+  return useMemo(
     () =>
       documents.recentlyViewed
         .filter((document) => document.id !== ui.activeDocumentId)

app/components/CommandBar/useSettingsAction.tsx

@@ -1,5 +1,5 @@
 import { SettingsIcon } from "outline-icons";
-import * as React from "react";
+import { useMemo } from "react";
 import { createAction } from "~/actions";
 import { NavigationSection } from "~/actions/sections";
 import useSettingsConfig from "~/hooks/useSettingsConfig";
@@ -7,7 +7,7 @@ import history from "~/utils/history";
 
 const useSettingsAction = () => {
   const config = useSettingsConfig();
-  const actions = React.useMemo(
+  const actions = useMemo(
     () =>
       config.map((item) => {
         const Icon = item.icon;
@@ -22,7 +22,7 @@ const useSettingsAction = () => {
     [config]
   );
 
-  const navigateToSettings = React.useMemo(
+  const navigateToSettings = useMemo(
     () =>
       createAction({
         id: "settings",

app/components/CommandBar/useTemplatesAction.tsx

@@ -1,5 +1,5 @@
 import { NewDocumentIcon, ShapesIcon } from "outline-icons";
-import * as React from "react";
+import { useEffect, useMemo } from "react";
 import Icon from "@shared/components/Icon";
 import { createAction } from "~/actions";
 import {
@@ -14,11 +14,11 @@ import { newDocumentPath } from "~/utils/routeHelpers";
 const useTemplatesAction = () => {
   const { documents } = useStores();
 
-  React.useEffect(() => {
+  useEffect(() => {
     void documents.fetchAllTemplates();
   }, [documents]);
 
-  const actions = React.useMemo(
+  const actions = useMemo(
     () =>
       documents.templatesAlphabetical.map((template) =>
         createAction({
@@ -61,7 +61,7 @@ const useTemplatesAction = () => {
     [documents.templatesAlphabetical]
   );
 
-  const newFromTemplate = React.useMemo(
+  const newFromTemplate = useMemo(
     () =>
       createAction({
         id: "templates",

app/components/CommentDeleteDialog.tsx

@@ -1,5 +1,4 @@
 import { observer } from "mobx-react";
-import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
 import { toast } from "sonner";
 import Comment from "~/models/Comment";

app/components/ConfirmMoveDialog.tsx

@@ -1,5 +1,4 @@
 import { observer } from "mobx-react";
-import * as React from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import { CollectionPermission, NavigationNode } from "@shared/types";

app/components/ContextMenu/Template.tsx

@@ -3,7 +3,6 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import {
-  useMenuState,
   MenuButton,
   MenuItem as BaseMenuItem,
   MenuStateReturn,
@@ -13,6 +12,7 @@ import MenuIconWrapper from "~/components/ContextMenu/MenuIconWrapper";
 import Flex from "~/components/Flex";
 import { actionToMenuItem } from "~/actions";
 import useActionContext from "~/hooks/useActionContext";
+import { useMenuState } from "~/hooks/useMenuState";
 import {
   Action,
   ActionContext,
@@ -52,7 +52,9 @@ const SubMenu = React.forwardRef(function _Template(
 ) {
   const { t } = useTranslation();
   const theme = useTheme();
-  const menu = useMenuState();
+  const menu = useMenuState({
+    parentId: parentMenuState.baseId,
+  });
 
   return (
     <>

app/components/CopyToClipboard.ts

@@ -15,7 +15,7 @@ function CopyToClipboard(props: Props, ref: React.Ref<HTMLElement>) {
 
   const onClick = React.useCallback(
     (ev: React.MouseEvent<HTMLElement>) => {
-      const elem = React.Children.only(children);
+      const childElem = React.Children.only(children);
 
       copy(text, {
         debug: env.ENVIRONMENT !== "production",
@@ -24,8 +24,12 @@ function CopyToClipboard(props: Props, ref: React.Ref<HTMLElement>) {
 
       onCopy?.();
 
-      if (elem && elem.props && typeof elem.props.onClick === "function") {
-        elem.props.onClick(ev);
+      if (
+        childElem &&
+        childElem.props &&
+        typeof childElem.props.onClick === "function"
+      ) {
+        childElem.props.onClick(ev);
       } else {
         ev.preventDefault();
         ev.stopPropagation();

app/components/DelayedMount.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import { useState, useEffect } from "react";
 
 type Props = {
   delay?: number;
@@ -6,9 +6,9 @@ type Props = {
 };
 
 export default function DelayedMount({ delay = 250, children }: Props) {
-  const [isShowing, setShowing] = React.useState(false);
+  const [isShowing, setShowing] = useState(false);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const timeout = setTimeout(() => setShowing(true), delay);
     return () => {
       clearTimeout(timeout);

app/components/DesktopEventHandler.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import { useRef, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 import { toast } from "sonner";
@@ -12,9 +12,9 @@ export default function DesktopEventHandler() {
   const { t } = useTranslation();
   const history = useHistory();
   const { dialogs } = useStores();
-  const hasDisabledUpdateMessage = React.useRef(false);
+  const hasDisabledUpdateMessage = useRef(false);
 
-  React.useEffect(() => {
+  useEffect(() => {
     Desktop.bridge?.redirect((path: string, replace = false) => {
       if (replace) {
         history.replace(path);

app/components/Dialogs.tsx

@@ -1,5 +1,4 @@
 import { observer } from "mobx-react";
-import * as React from "react";
 import Guide from "~/components/Guide";
 import Modal from "~/components/Modal";
 import useStores from "~/hooks/useStores";

app/components/DocumentCard.tsx

@@ -4,7 +4,7 @@ import { subDays } from "date-fns";
 import { m } from "framer-motion";
 import { observer } from "mobx-react";
 import { CloseIcon, DocumentIcon, ClockIcon, EyeIcon } from "outline-icons";
-import * as React from "react";
+import { useRef, useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled, { useTheme } from "styled-components";
@@ -40,7 +40,7 @@ function DocumentCard(props: Props) {
   const { collections } = useStores();
   const theme = useTheme();
   const { document, pin, canUpdatePin, isDraggable } = props;
-  const pinnedToHome = React.useRef(!pin?.collectionId).current;
+  const pinnedToHome = useRef(!pin?.collectionId).current;
   const collection = document.collectionId
     ? collections.get(document.collectionId)
     : undefined;
@@ -63,7 +63,7 @@ function DocumentCard(props: Props) {
     transition,
   };
 
-  const handleUnpin = React.useCallback(
+  const handleUnpin = useCallback(
     async (ev) => {
       ev.preventDefault();
       ev.stopPropagation();
@@ -178,7 +178,7 @@ function DocumentCard(props: Props) {
 
 const ReadingTime = ({ document }: { document: Document }) => {
   const { t } = useTranslation();
-  const markdown = React.useMemo(() => document.toMarkdown(), [document]);
+  const markdown = useMemo(() => document.toMarkdown(), [document]);
   const stats = useTextStats(markdown);
 
   return (

app/components/DocumentContext.tsx

@@ -1,5 +1,5 @@
 import { action, computed, observable } from "mobx";
-import React, { PropsWithChildren } from "react";
+import { createContext, useContext, useMemo, PropsWithChildren } from "react";
 import { Heading } from "@shared/utils/ProsemirrorHelper";
 import Document from "~/models/Document";
 import { Editor } from "~/editor";
@@ -64,10 +64,10 @@ class DocumentContext {
   }
 }
 
-const Context = React.createContext<DocumentContext | null>(null);
+const Context = createContext<DocumentContext | null>(null);
 
 export const useDocumentContext = () => {
-  const ctx = React.useContext(Context);
+  const ctx = useContext(Context);
   if (!ctx) {
     throw new Error(
       "useDocumentContext must be used within DocumentContextProvider"
@@ -79,6 +79,6 @@ export const useDocumentContext = () => {
 export const DocumentContextProvider = ({
   children,
 }: PropsWithChildren<unknown>) => {
-  const context = React.useMemo(() => new DocumentContext(), []);
+  const context = useMemo(() => new DocumentContext(), []);
   return <Context.Provider value={context}>{children}</Context.Provider>;
 };

app/components/DocumentExplorer.tsx

@@ -60,7 +60,7 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
     if (defaultValue) {
       const node = items.find((item) => item.id === defaultValue);
       if (node) {
-        return ancestors(node).map((node) => node.id);
+        return ancestors(node).map((ancestorNode) => ancestorNode.id);
       }
     }
     return [];
@@ -99,10 +99,10 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
   }, [searchTerm]);
 
   React.useEffect(() => {
-    setItemRefs((itemRefs) =>
+    setItemRefs((existingItemRefs) =>
       map(
         fill(Array(items.length), 0),
-        (_, i) => itemRefs[i] || React.createRef()
+        (_, i) => existingItemRefs[i] || React.createRef()
       )
     );
   }, [items.length]);
@@ -180,7 +180,7 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
     );
 
     // remove children
-    const newNodes = filter(nodes, (node) => !includes(descendantIds, node.id));
+    const newNodes = filter(nodes, (n) => !includes(descendantIds, n.id));
     const scrollOffset = calculateInitialScrollOffset(newNodes.length);
     setInitialScrollOffset(scrollOffset);
   };

app/components/DocumentTasks.tsx

@@ -1,7 +1,6 @@
 import { TFunction } from "i18next";
 import { observer } from "mobx-react";
 import { DoneIcon } from "outline-icons";
-import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled, { useTheme } from "styled-components";
 import Document from "~/models/Document";

app/components/DocumentViews.tsx

@@ -1,7 +1,7 @@
 import compact from "lodash/compact";
 import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react";
-import * as React from "react";
+import { useMemo, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { dateLocale, dateToRelative } from "@shared/utils/date";
 import Document from "~/models/Document";
@@ -14,78 +14,86 @@ import useStores from "~/hooks/useStores";
 
 type Props = {
   document: Document;
-  isOpen?: boolean;
 };
 
-function DocumentViews({ document, isOpen }: Props) {
+function DocumentViews({ document }: Props) {
   const { t } = useTranslation();
   const { views, presence } = useStores();
   const user = useCurrentUser();
   const locale = dateLocale(user.language);
-
   const documentPresence = presence.get(document.id);
   const documentPresenceArray = documentPresence
     ? Array.from(documentPresence.values())
     : [];
-  const presentIds = documentPresenceArray.map((p) => p.userId);
-  const editingIds = documentPresenceArray
-    .filter((p) => p.isEditing)
-    .map((p) => p.userId);
+
+  // Use Set for O(1) lookups and stable references
+  const presentIds = useMemo(
+    () => new Set(documentPresenceArray.map((p) => p.userId)),
+    [documentPresenceArray]
+  );
+  const editingIds = useMemo(
+    () =>
+      new Set(
+        documentPresenceArray.filter((p) => p.isEditing).map((p) => p.userId)
+      ),
+    [documentPresenceArray]
+  );
 
   // ensure currently present via websocket are always ordered first
-  const documentViews = views.inDocument(document.id);
-  const sortedViews = sortBy(
-    documentViews,
-    (view) => !presentIds.includes(view.userId)
+  const documentViews = useMemo(
+    () => views.inDocument(document.id),
+    [views, document.id]
   );
-  const users = React.useMemo(
+  const sortedViews = useMemo(
+    () => sortBy(documentViews, (view) => !presentIds.has(view.userId)),
+    [documentViews, presentIds]
+  );
+  const users = useMemo(
     () => compact(sortedViews.map((v) => v.user)),
     [sortedViews]
   );
 
-  return (
-    <>
-      {isOpen && (
-        <PaginatedList<User>
-          aria-label={t("Viewers")}
-          items={users}
-          renderItem={(model) => {
-            const view = documentViews.find((v) => v.userId === model.id);
-            const isPresent = presentIds.includes(model.id);
-            const isEditing = editingIds.includes(model.id);
-            const subtitle = isPresent
-              ? isEditing
-                ? t("Currently editing")
-                : t("Currently viewing")
-              : t("Viewed {{ timeAgo }}", {
-                  timeAgo: dateToRelative(
-                    view ? Date.parse(view.lastViewedAt) : new Date(),
-                    {
-                      addSuffix: true,
-                      locale,
-                    }
-                  ),
-                });
-            return (
-              <ListItem
-                key={model.id}
-                title={model.name}
-                subtitle={subtitle}
-                image={
-                  <Avatar
-                    key={model.id}
-                    model={model}
-                    size={AvatarSize.Large}
-                  />
-                }
-                border={false}
-                small
-              />
-            );
-          }}
+  // Memoize renderItem for PaginatedList
+  const renderItem = useCallback(
+    (model: User) => {
+      const view = documentViews.find((v) => v.userId === model.id);
+      const isPresent = presentIds.has(model.id);
+      const isEditing = editingIds.has(model.id);
+      const subtitle = isPresent
+        ? isEditing
+          ? t("Currently editing")
+          : t("Currently viewing")
+        : t("Viewed {{ timeAgo }}", {
+            timeAgo: dateToRelative(
+              view ? Date.parse(view.lastViewedAt) : new Date(),
+              {
+                addSuffix: true,
+                locale,
+              }
+            ),
+          });
+      return (
+        <ListItem
+          key={model.id}
+          title={model.name}
+          subtitle={subtitle}
+          image={
+            <Avatar key={model.id} model={model} size={AvatarSize.Large} />
+          }
+          border={false}
+          small
         />
-      )}
-    </>
+      );
+    },
+    [documentViews, presentIds, editingIds, t, locale]
+  );
+
+  return (
+    <PaginatedList<User>
+      aria-label={t("Viewers")}
+      items={users}
+      renderItem={renderItem}
+    />
   );
 }
 

app/components/EventListItem.tsx

@@ -11,7 +11,7 @@ import {
   UserIcon,
   CrossIcon,
 } from "outline-icons";
-import * as React from "react";
+import { useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
 import styled, { css } from "styled-components";
@@ -48,10 +48,12 @@ export type DocumentEvent = {
   userId: string;
 };
 
-export type Event = { id: string; actorId: string; createdAt: string } & (
-  | RevisionEvent
-  | DocumentEvent
-);
+export type Event = {
+  id: string;
+  actorId: string;
+  createdAt: string;
+  deletedAt?: string;
+} & (RevisionEvent | DocumentEvent);
 
 type Props = {
   document: Document;
@@ -65,7 +67,7 @@ const EventListItem = ({ event, document, ...rest }: Props) => {
   const user = "userId" in event ? users.get(event.userId) : undefined;
   const location = useLocation();
   const sidebarContext = useLocationSidebarContext();
-  const revisionLoadedRef = React.useRef(false);
+  const revisionLoadedRef = useRef(false);
   const opts = {
     userName: actor?.name,
   };
@@ -74,7 +76,7 @@ const EventListItem = ({ event, document, ...rest }: Props) => {
     event.id === RevisionHelper.latestId(document.id);
   let meta, icon, to: LocationDescriptor | undefined;
 
-  const ref = React.useRef<HTMLAnchorElement>(null);
+  const ref = useRef<HTMLAnchorElement>(null);
   // the time component tends to steal focus when clicked
   // ...so forward the focus back to the parent item
   const handleTimeClick = () => {
@@ -85,6 +87,7 @@ const EventListItem = ({ event, document, ...rest }: Props) => {
     if (
       !document.isDeleted &&
       event.name === "revisions.create" &&
+      !event.deletedAt &&
       !isDerivedFromDocument &&
       !revisionLoadedRef.current
     ) {
@@ -95,24 +98,31 @@ const EventListItem = ({ event, document, ...rest }: Props) => {
 
   switch (event.name) {
     case "revisions.create":
-      icon = <EditIcon size={16} />;
-      meta = event.latest ? (
-        <>
-          {t("Current version")} &middot; {actor?.name}
-        </>
-      ) : (
-        t("{{userName}} edited", opts)
-      );
-      to = {
-        pathname: documentHistoryPath(
-          document,
-          isDerivedFromDocument ? "latest" : event.id
-        ),
-        state: {
-          sidebarContext,
-          retainScrollPosition: true,
-        },
-      };
+      {
+        if (event.deletedAt) {
+          icon = <TrashIcon />;
+          meta = t("Revision deleted");
+        } else {
+          icon = <EditIcon size={16} />;
+          meta = event.latest ? (
+            <>
+              {t("Current version")} &middot; {actor?.name}
+            </>
+          ) : (
+            t("{{userName}} edited", opts)
+          );
+          to = {
+            pathname: documentHistoryPath(
+              document,
+              isDerivedFromDocument ? "latest" : event.id
+            ),
+            state: {
+              sidebarContext,
+              retainScrollPosition: true,
+            },
+          };
+        }
+      }
       break;
 
     case "documents.archive":
@@ -181,7 +191,7 @@ const EventListItem = ({ event, document, ...rest }: Props) => {
     to = undefined;
   }
 
-  return event.name === "revisions.create" ? (
+  return event.name === "revisions.create" && !event.deletedAt ? (
     <RevisionItem
       small
       exact
@@ -218,7 +228,12 @@ const EventListItem = ({ event, document, ...rest }: Props) => {
       </IconWrapper>
       <Text size="xsmall" type="secondary">
         {meta} &middot;{" "}
-        <Time dateTime={event.createdAt} relative shorten addSuffix />
+        <Time
+          dateTime={event.deletedAt ?? event.createdAt}
+          relative
+          shorten
+          addSuffix
+        />
       </Text>
     </EventItem>
   );

app/components/Fade.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { useState } from "react";
 import styled from "styled-components";
 import { fadeIn } from "~/styles/animations";
 
@@ -21,7 +21,7 @@ type Props = {
  * Wraps children in a <Fade> if loading is true on mount.
  */
 export const ConditionalFade = ({ animate, children }: Props) => {
-  const [isAnimated] = React.useState(animate);
+  const [isAnimated] = useState(animate);
   return isAnimated ? <Fade>{children}</Fade> : <>{children}</>;
 };
 

app/components/FilterOptions.tsx

@@ -1,7 +1,7 @@
 import deburr from "lodash/deburr";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import { useMenuState, MenuButton } from "reakit/Menu";
+import { MenuButton } from "reakit/Menu";
 import styled from "styled-components";
 import { s } from "@shared/styles";
 import type { FetchPageParams } from "~/stores/base/Store";
@@ -9,6 +9,7 @@ import Button, { Inner } from "~/components/Button";
 import ContextMenu from "~/components/ContextMenu";
 import MenuItem from "~/components/ContextMenu/MenuItem";
 import Text from "~/components/Text";
+import { useMenuState } from "~/hooks/useMenuState";
 import Input, { NativeInput, Outline } from "./Input";
 import PaginatedList, { PaginatedItem } from "./PaginatedList";
 

app/components/FullscreenLoading.tsx

@@ -1,4 +1,3 @@
-import * as React from "react";
 import styled from "styled-components";
 import Empty from "~/components/Empty";
 import Fade from "~/components/Fade";

app/components/Guide.tsx

@@ -36,8 +36,8 @@ const Guide: React.FC<Props> = ({
 
   return (
     <DialogBackdrop {...dialog}>
-      {(props) => (
-        <Backdrop {...props}>
+      {(backdropProps) => (
+        <Backdrop {...backdropProps}>
           <Dialog
             {...dialog}
             aria-label={title}
@@ -45,8 +45,8 @@ const Guide: React.FC<Props> = ({
             hideOnEsc
             hide={onRequestClose}
           >
-            {(props) => (
-              <Scene {...props} {...rest}>
+            {(dialogProps) => (
+              <Scene {...dialogProps} {...rest}>
                 <Content>
                   {title && <Header>{title}</Header>}
                   {children}

app/components/IconPicker/components/ColorPicker.tsx

@@ -1,5 +1,5 @@
 import { BackIcon } from "outline-icons";
-import React from "react";
+import * as React from "react";
 import styled from "styled-components";
 import { breakpoints, s, hover } from "@shared/styles";
 import { colorPalette } from "@shared/utils/collections";

app/components/IconPicker/components/EmojiPanel.tsx

@@ -1,5 +1,5 @@
 import concat from "lodash/concat";
-import React from "react";
+import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { EmojiCategory, EmojiSkinTone, IconType } from "@shared/types";

app/components/IconPicker/components/GridTemplate.tsx

@@ -1,6 +1,6 @@
 import chunk from "lodash/chunk";
 import compact from "lodash/compact";
-import React from "react";
+import * as React from "react";
 import styled from "styled-components";
 import { IconType } from "@shared/types";
 import { IconLibrary } from "@shared/utils/IconLibrary";

app/components/IconPicker/components/IconPanel.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { IconType } from "@shared/types";

app/components/IconPicker/components/SkinTonePicker.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import { useMemo, useCallback } from "react";
 import { useTranslation } from "react-i18next";
-import { Menu, MenuButton, MenuItem, useMenuState } from "reakit";
+import { Menu, MenuButton, MenuItem } from "reakit";
 import styled from "styled-components";
 import { depths, s, hover } from "@shared/styles";
 import { EmojiSkinTone } from "@shared/types";
@@ -8,6 +8,7 @@ import { getEmojiVariants } from "@shared/utils/emoji";
 import { Emoji } from "~/components/Emoji";
 import Flex from "~/components/Flex";
 import NudeButton from "~/components/NudeButton";
+import { useMenuState } from "~/hooks/useMenuState";
 import { IconButton } from "./IconButton";
 
 const SkinTonePicker = ({
@@ -19,16 +20,13 @@ const SkinTonePicker = ({
 }) => {
   const { t } = useTranslation();
 
-  const handEmojiVariants = React.useMemo(
-    () => getEmojiVariants({ id: "hand" }),
-    []
-  );
+  const handEmojiVariants = useMemo(() => getEmojiVariants({ id: "hand" }), []);
 
   const menu = useMenuState({
     placement: "bottom-end",
   });
 
-  const handleSkinClick = React.useCallback(
+  const handleSkinClick = useCallback(
     (emojiSkin) => {
       menu.hide();
       onChange(emojiSkin);
@@ -36,7 +34,7 @@ const SkinTonePicker = ({
     [menu, onChange]
   );
 
-  const menuItems = React.useMemo(
+  const menuItems = useMemo(
     () =>
       Object.entries(handEmojiVariants).map(([eskin, emoji]) => (
         <MenuItem {...menu} key={emoji.value}>

app/components/Icons/CircleIcon.tsx

@@ -1,5 +1,3 @@
-import * as React from "react";
-
 type Props = {
   /** The size of the icon, 24px is default to match standard icons */
   size?: number;

app/components/Icons/CollectionIcon.tsx

@@ -1,7 +1,6 @@
 import { observer } from "mobx-react";
 import { CollectionIcon, PrivateCollectionIcon } from "outline-icons";
 import { getLuminance } from "polished";
-import * as React from "react";
 import Icon from "@shared/components/Icon";
 import { colorPalette } from "@shared/utils/collections";
 import Collection from "~/models/Collection";

app/components/Icons/GoogleIcon.tsx

@@ -1,5 +1,3 @@
-import * as React from "react";
-
 type Props = {
   /** The size of the icon, 24px is default to match standard icons */
   size?: number;

app/components/Icons/LanguageIcon.tsx

@@ -1,5 +1,3 @@
-import * as React from "react";
-
 export function LanguageIcon({ className }: { className?: string }) {
   return (
     <svg

app/components/Icons/MarkdownIcon.tsx

@@ -1,5 +1,3 @@
-import * as React from "react";
-
 type Props = {
   /** The size of the icon, 24px is default to match standard icons */
   size?: number;

app/components/Icons/OutlineIcon.tsx

@@ -1,5 +1,3 @@
-import * as React from "react";
-
 type Props = {
   /** The size of the icon, 24px is default to match standard icons */
   size?: number;

app/components/Input.tsx

@@ -1,6 +1,6 @@
+import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import * as React from "react";
 import { mergeRefs } from "react-merge-refs";
-import { VisuallyHidden } from "reakit/VisuallyHidden";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { s, ellipsis } from "@shared/styles";
@@ -221,7 +221,7 @@ function Input(
       <label>
         {label &&
           (labelHidden ? (
-            <VisuallyHidden>{wrappedLabel}</VisuallyHidden>
+            <VisuallyHidden.Root>{wrappedLabel}</VisuallyHidden.Root>
           ) : (
             wrappedLabel
           ))}

app/components/InputColor.tsx

@@ -1,8 +1,9 @@
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import { MenuButton, useMenuState } from "reakit/Menu";
+import { MenuButton } from "reakit/Menu";
 import styled from "styled-components";
 import { s } from "@shared/styles";
+import { useMenuState } from "~/hooks/useMenuState";
 import lazyWithRetry from "~/utils/lazyWithRetry";
 import ContextMenu from "./ContextMenu";
 import DelayedMount from "./DelayedMount";

app/components/InputSelect.tsx

@@ -1,3 +1,4 @@
+import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import {
   Select,
   SelectOption,
@@ -7,7 +8,6 @@ import {
 } from "@renderlesskit/react";
 import { CheckmarkIcon } from "outline-icons";
 import * as React from "react";
-import { VisuallyHidden } from "reakit/VisuallyHidden";
 import styled, { css } from "styled-components";
 import { s } from "@shared/styles";
 import Button, { Props as ButtonProps, Inner } from "~/components/Button";
@@ -213,7 +213,7 @@ const InputSelect = (props: Props, ref: React.RefObject<InputSelectRef>) => {
       <Wrapper short={short}>
         {label &&
           (labelHidden ? (
-            <VisuallyHidden>{wrappedLabel}</VisuallyHidden>
+            <VisuallyHidden.Root>{wrappedLabel}</VisuallyHidden.Root>
           ) : (
             wrappedLabel
           ))}

app/components/InputSelectNew.tsx

@@ -1,6 +1,6 @@
 import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import { transparentize } from "polished";
-import React from "react";
+import * as React from "react";
 import styled from "styled-components";
 import Text from "~/components/Text";
 import useMobile from "~/hooks/useMobile";

app/components/LanguagePrompt.tsx

@@ -1,6 +1,5 @@
 import { m } from "framer-motion";
 import find from "lodash/find";
-import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { languages, languageOptions } from "@shared/i18n";

app/components/Layout.tsx

@@ -38,39 +38,41 @@ const Layout = React.forwardRef(function Layout_(
   });
 
   return (
-    <Container column auto ref={ref}>
-      <Helmet>
-        <title>{title ? title : env.APP_NAME}</title>
-      </Helmet>
+    <MenuProvider>
+      <Container column auto ref={ref}>
+        <Helmet>
+          <title>{title ? title : env.APP_NAME}</title>
+        </Helmet>
 
-      <SkipNavLink />
+        <SkipNavLink />
 
-      {ui.progressBarVisible && <LoadingIndicatorBar />}
+        {ui.progressBarVisible && <LoadingIndicatorBar />}
 
-      <Container auto>
-        <MenuProvider>{sidebar}</MenuProvider>
+        <Container auto>
+          <MenuProvider>{sidebar}</MenuProvider>
 
-        <SkipNavContent />
-        <Content
-          auto
-          justify="center"
-          $isResizing={ui.sidebarIsResizing}
-          $sidebarCollapsed={sidebarCollapsed}
-          $hasSidebar={!!sidebar}
-          style={
-            sidebarCollapsed
-              ? undefined
-              : {
-                  marginLeft: `${ui.sidebarWidth}px`,
-                }
-          }
-        >
-          {children}
-        </Content>
+          <SkipNavContent />
+          <Content
+            auto
+            justify="center"
+            $isResizing={ui.sidebarIsResizing}
+            $sidebarCollapsed={sidebarCollapsed}
+            $hasSidebar={!!sidebar}
+            style={
+              sidebarCollapsed
+                ? undefined
+                : {
+                    marginLeft: `${ui.sidebarWidth}px`,
+                  }
+            }
+          >
+            {children}
+          </Content>
 
-        {sidebarRight}
+          {sidebarRight}
+        </Container>
       </Container>
-    </Container>
+    </MenuProvider>
   );
 });
 

app/components/List/Error.tsx

@@ -1,5 +1,4 @@
 import { DisconnectedIcon, WarningIcon } from "outline-icons";
-import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { s } from "@shared/styles";

app/components/List/Item.tsx

@@ -33,7 +33,7 @@ export type Props = Omit<React.HTMLAttributes<HTMLAnchorElement>, "title"> & {
   small?: boolean;
   /** Whether to enable keyboard navigation */
   keyboardNavigation?: boolean;
-  ellipsis?: boolean;
+  enableEllipsis?: boolean;
 };
 
 const ListItem = (
@@ -46,7 +46,7 @@ const ListItem = (
     border,
     to,
     keyboardNavigation,
-    ellipsis,
+    enableEllipsis,
     ...rest
   }: Props,
   ref: React.RefObject<HTMLAnchorElement>
@@ -85,7 +85,7 @@ const ListItem = (
         column={!compact}
         $selected={selected}
       >
-        <Heading $small={small} $ellipsis={ellipsis}>
+        <Heading $small={small} $ellipsis={enableEllipsis}>
           {title}
         </Heading>
         {subtitle && (

app/components/List/Placeholder.tsx

@@ -1,5 +1,4 @@
 import times from "lodash/times";
-import * as React from "react";
 import styled from "styled-components";
 import Fade from "~/components/Fade";
 import Flex from "~/components/Flex";

app/components/LoadingIndicator/LoadingIndicator.ts

@@ -1,11 +1,11 @@
 import { observer } from "mobx-react";
-import * as React from "react";
+import { useEffect } from "react";
 import useStores from "~/hooks/useStores";
 
 function LoadingIndicator() {
   const { ui } = useStores();
 
-  React.useEffect(() => {
+  useEffect(() => {
     ui.enableProgressBar();
     return () => ui.disableProgressBar();
   }, [ui]);

app/components/LoadingIndicator/LoadingIndicatorBar.tsx

@@ -1,4 +1,3 @@
-import * as React from "react";
 import styled, { keyframes } from "styled-components";
 import { depths, s } from "@shared/styles";
 

app/components/Modal.tsx

@@ -69,8 +69,8 @@ const Modal: React.FC<Props> = ({
 
   return (
     <DialogBackdrop {...dialog}>
-      {(props) => (
-        <Backdrop $fullscreen={fullscreen} {...props}>
+      {(backdropProps) => (
+        <Backdrop $fullscreen={fullscreen} {...backdropProps}>
           <Dialog
             {...dialog}
             aria-label={typeof title === "string" ? title : undefined}
@@ -79,7 +79,7 @@ const Modal: React.FC<Props> = ({
             hideOnClickOutside={!fullscreen}
             hide={onRequestClose}
           >
-            {(props) =>
+            {(dialogProps) =>
               fullscreen || isMobile ? (
                 <Fullscreen
                   $nested={!!depth}
@@ -90,7 +90,7 @@ const Modal: React.FC<Props> = ({
                           marginLeft: `${depth * 12}px`,
                         }
                   }
-                  {...props}
+                  {...dialogProps}
                 >
                   <Content>
                     <Centered onClick={(ev) => ev.stopPropagation()} column>
@@ -111,7 +111,7 @@ const Modal: React.FC<Props> = ({
                   </Back>
                 </Fullscreen>
               ) : (
-                <Small {...props}>
+                <Small {...dialogProps}>
                   <Centered
                     onClick={(ev) => ev.stopPropagation()}
                     // maxHeight needed for proper overflow behavior in Safari

app/components/Notice.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import styled from "styled-components";
 import { s } from "@shared/styles";
 import Flex from "./Flex";

app/components/Notifications/NotificationIcon.tsx

@@ -1,6 +1,5 @@
 import { observer } from "mobx-react";
 import { SubscribeIcon } from "outline-icons";
-import * as React from "react";
 import styled from "styled-components";
 import { s } from "@shared/styles";
 import useStores from "~/hooks/useStores";

app/components/Notifications/NotificationListItem.tsx

@@ -8,7 +8,7 @@ import { s, hover, truncateMultiline } from "@shared/styles";
 import Notification from "~/models/Notification";
 import CommentEditor from "~/scenes/Document/components/CommentEditor";
 import useStores from "~/hooks/useStores";
-import { Avatar, AvatarSize } from "../Avatar";
+import { Avatar, AvatarSize, AvatarVariant } from "../Avatar";
 import Flex from "../Flex";
 import Text from "../Text";
 import Time from "../Time";
@@ -41,7 +41,7 @@ function NotificationListItem({ notification, onNavigate }: Props) {
   return (
     <StyledLink to={notification.path ?? ""} onClick={handleClick}>
       <Container gap={8} $unread={!notification.viewedAt}>
-        <StyledAvatar model={notification.actor} size={AvatarSize.Large} />
+        <StyledAvatar model={notification.actor} />
         <Flex column>
           <Text as="div" size="small">
             <Text weight="bold">
@@ -79,7 +79,10 @@ const StyledCommentEditor = styled(CommentEditor)`
   ${truncateMultiline(3)}
 `;
 
-const StyledAvatar = styled(Avatar)`
+const StyledAvatar = styled(Avatar).attrs({
+  variant: AvatarVariant.Round,
+  size: AvatarSize.Medium,
+})`
   margin-top: 4px;
 `;
 

app/components/OAuthClient/OAuthClientForm.tsx

@@ -1,5 +1,5 @@
 import { observer } from "mobx-react";
-import * as React from "react";
+import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { OAuthClientValidation } from "@shared/validations";
@@ -49,7 +49,7 @@ export const OAuthClientForm = observer(function OAuthClientForm_({
     },
   });
 
-  React.useEffect(() => {
+  useEffect(() => {
     setTimeout(() => setFocus("name", { shouldSelect: true }), 100);
   }, [setFocus]);
 

app/components/OAuthClient/OAuthClientNew.tsx

@@ -1,5 +1,5 @@
 import { observer } from "mobx-react";
-import * as React from "react";
+import { useCallback } from "react";
 import { useHistory } from "react-router-dom";
 import { toast } from "sonner";
 import useStores from "~/hooks/useStores";
@@ -16,7 +16,7 @@ export const OAuthClientNew = observer(function OAuthClientNew_({
   const { oauthClients } = useStores();
   const history = useHistory();
 
-  const handleSubmit = React.useCallback(
+  const handleSubmit = useCallback(
     async (data: FormData) => {
       try {
         const oauthClient = await oauthClients.save(data);

app/components/PageTheme.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import { useEffect } from "react";
 import { useTheme } from "styled-components";
 import useStores from "~/hooks/useStores";
 
@@ -6,7 +6,7 @@ export default function PageTheme() {
   const { ui } = useStores();
   const theme = useTheme();
 
-  React.useEffect(() => {
+  useEffect(() => {
     // wider page background beyond the React root
     if (document.body) {
       document.body.style.background = theme.background;

app/components/PaginatedList.test.tsx

@@ -2,7 +2,6 @@ import "../stores";
 import { render } from "@testing-library/react";
 import { TFunction } from "i18next";
 import { Provider } from "mobx-react";
-import * as React from "react";
 import { getI18n } from "react-i18next";
 import { Pagination } from "@shared/constants";
 import PaginatedList from "./PaginatedList";

app/components/PinnedDocuments.tsx

@@ -17,7 +17,7 @@ import {
 import fractionalIndex from "fractional-index";
 import { AnimatePresence } from "framer-motion";
 import { observer } from "mobx-react";
-import * as React from "react";
+import { useState, useRef, useEffect, useCallback } from "react";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import Pin from "~/models/Pin";
@@ -44,12 +44,12 @@ function PinnedDocuments({
   ...rest
 }: Props) {
   const { documents } = useStores();
-  const [items, setItems] = React.useState(pins.map((pin) => pin.documentId));
-  const showPlaceholderRef = React.useRef(true);
+  const [items, setItems] = useState(pins.map((pin) => pin.documentId));
+  const showPlaceholderRef = useRef(true);
   const showPlaceholder =
     placeholderCount && !items.length && showPlaceholderRef.current;
 
-  React.useEffect(() => {
+  useEffect(() => {
     setItems(pins.map((pin) => pin.documentId));
   }, [pins]);
 
@@ -65,7 +65,7 @@ function PinnedDocuments({
     })
   );
 
-  const handleDragEnd = React.useCallback(
+  const handleDragEnd = useCallback(
     (event: DragEndEvent) => {
       const { active, over } = event;
 

app/components/PlaceholderDocument.tsx

@@ -1,4 +1,3 @@
-import * as React from "react";
 import styled from "styled-components";
 import DelayedMount from "~/components/DelayedMount";
 import Fade from "~/components/Fade";

app/components/PluginIcon.tsx

@@ -1,5 +1,4 @@
 import { observer } from "mobx-react";
-import * as React from "react";
 import styled from "styled-components";
 import Logger from "~/utils/Logger";
 import { Hook, usePluginValue } from "~/utils/PluginManager";

app/components/Reactions/Reaction.tsx

@@ -1,6 +1,6 @@
 import { observer } from "mobx-react";
 import { transparentize } from "polished";
-import React from "react";
+import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
 import { s, hover } from "@shared/styles";

app/components/Reactions/ReactionList.tsx

@@ -1,6 +1,6 @@
 import compact from "lodash/compact";
 import { observer } from "mobx-react";
-import React from "react";
+import * as React from "react";
 import Comment from "~/models/Comment";
 import useHover from "~/hooks/useHover";
 import useStores from "~/hooks/useStores";

app/components/Reactions/ReactionPicker.tsx

@@ -1,5 +1,5 @@
 import { ReactionIcon } from "outline-icons";
-import React from "react";
+import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { PopoverDisclosure, usePopoverState } from "reakit";
 import EventBoundary from "@shared/components/EventBoundary";
@@ -99,7 +99,7 @@ const ReactionPicker: React.FC<Props> = ({
     <>
       <PopoverDisclosure {...popover}>
         {(props) => (
-          <Tooltip content={t("Add reaction")} placement="top" hideOnClick>
+          <Tooltip content={t("Add reaction")} placement="top">
             <NudeButton
               {...props}
               aria-label={t("Reaction picker")}

app/components/Reactions/ViewReactionsDialog.tsx

@@ -1,6 +1,6 @@
 import compact from "lodash/compact";
 import { observer } from "mobx-react";
-import React from "react";
+import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Tab, TabPanel, useTabState } from "reakit";
 import { toast } from "sonner";

app/components/ScrollContext.ts

@@ -1,15 +1,15 @@
-import * as React from "react";
+import { createContext, useContext } from "react";
 
 /**
  * Context to provide a reference to the scrollable container
  */
-const ScrollContext = React.createContext<
+const ScrollContext = createContext<
   React.RefObject<HTMLDivElement> | undefined
 >(undefined);
 
 /**
  * Hook to get the scrollable container reference
  */
-export const useScrollContext = () => React.useContext(ScrollContext);
+export const useScrollContext = () => useContext(ScrollContext);
 
 export default ScrollContext;

app/components/ScrollToTop.ts

@@ -1,5 +1,5 @@
 // based on: https://reacttraining.com/react-router/web/guides/scroll-restoration
-import * as React from "react";
+import { useEffect } from "react";
 import { useLocation } from "react-router-dom";
 import usePrevious from "~/hooks/usePrevious";
 import { useScrollContext } from "./ScrollContext";
@@ -13,7 +13,7 @@ export default function ScrollToTop({ children }: Props) {
   const previousLocationPathname = usePrevious(location.pathname);
   const scrollContainerRef = useScrollContext();
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (
       location.pathname === previousLocationPathname ||
       location.state?.retainScrollPosition

app/components/SearchActions.ts

@@ -1,5 +1,5 @@
 import { useKBar } from "kbar";
-import * as React from "react";
+import { useEffect } from "react";
 import { searchDocumentsForQuery } from "~/actions/definitions/documents";
 import { navigateToRecentSearchQuery } from "~/actions/definitions/navigation";
 
@@ -9,7 +9,7 @@ import useStores from "~/hooks/useStores";
 export default function SearchActions() {
   const { searches } = useStores();
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!searches.isLoaded && !searches.isFetching) {
       void searches.fetchPage({
         source: "app",

app/components/SearchPopover.tsx

@@ -53,10 +53,10 @@ function SearchPopover({ shareId, className }: Props) {
   }, [searchResults, query, show]);
 
   const performSearch = React.useCallback(
-    async ({ query, ...options }) => {
-      if (query?.length > 0) {
+    async ({ query: searchQuery, ...options }) => {
+      if (searchQuery?.length > 0) {
         const response = await documents.search({
-          query,
+          query: searchQuery,
           shareId,
           ...options,
         });

app/components/Sharing/Collection/SharePopover.tsx

@@ -11,6 +11,7 @@ import Group from "~/models/Group";
 import User from "~/models/User";
 import { Avatar, AvatarSize } from "~/components/Avatar";
 import NudeButton from "~/components/NudeButton";
+import { TooltipProvider } from "~/components/TooltipContext";
 import { createAction } from "~/actions";
 import { UserSection } from "~/actions/sections";
 import useBoolean from "~/hooks/useBoolean";
@@ -335,38 +336,40 @@ function SharePopover({ collection, visible, onRequestClose }: Props) {
   );
 
   return (
-    <Wrapper>
-      {can.update && (
-        <SearchInput
-          ref={searchInputRef}
-          onChange={handleQuery}
-          onClick={showPicker}
-          onKeyDown={handleKeyDown}
-          query={query}
-          back={backButton}
-          action={rightButton}
-        />
-      )}
+    <TooltipProvider>
+      <Wrapper>
+        {can.update && (
+          <SearchInput
+            ref={searchInputRef}
+            onChange={handleQuery}
+            onClick={showPicker}
+            onKeyDown={handleKeyDown}
+            query={query}
+            back={backButton}
+            action={rightButton}
+          />
+        )}
 
-      {picker && (
-        <Suggestions
-          ref={suggestionsRef}
-          query={query}
-          collection={collection}
-          pendingIds={pendingIds}
-          addPendingId={handleAddPendingId}
-          removePendingId={handleRemovePendingId}
-          onEscape={handleEscape}
-        />
-      )}
+        {picker && (
+          <Suggestions
+            ref={suggestionsRef}
+            query={query}
+            collection={collection}
+            pendingIds={pendingIds}
+            addPendingId={handleAddPendingId}
+            removePendingId={handleRemovePendingId}
+            onEscape={handleEscape}
+          />
+        )}
 
-      <div style={{ display: picker ? "none" : "block" }}>
-        <AccessControlList
-          collection={collection}
-          invitedInSession={invitedInSession}
-        />
-      </div>
-    </Wrapper>
+        <div style={{ display: picker ? "none" : "block" }}>
+          <AccessControlList
+            collection={collection}
+            invitedInSession={invitedInSession}
+          />
+        </div>
+      </Wrapper>
+    </TooltipProvider>
   );
 }
 

app/components/Sharing/Document/DocumentMemberList.tsx

@@ -62,16 +62,16 @@ function DocumentMembersList({ document, invitedInSession }: Props) {
   );
 
   const handleUpdateUser = React.useCallback(
-    async (user, permission) => {
+    async (userToUpdate, permission) => {
       try {
         await userMemberships.create({
           documentId: document.id,
-          userId: user.id,
+          userId: userToUpdate.id,
           permission,
         });
         toast.success(
           t(`Permissions for {{ userName }} updated`, {
-            userName: user.name,
+            userName: userToUpdate.name,
           })
         );
       } catch (err) {
@@ -87,9 +87,9 @@ function DocumentMembersList({ document, invitedInSession }: Props) {
     () =>
       orderBy(
         document.members,
-        (user) =>
-          (invitedInSession.includes(user.id) ? "_" : "") +
-          user.name.toLocaleLowerCase(),
+        (memberUser) =>
+          (invitedInSession.includes(memberUser.id) ? "_" : "") +
+          memberUser.name.toLocaleLowerCase(),
         "asc"
       ),
     [document.members, invitedInSession]

app/components/Sharing/Document/DocumentMemberListItem.tsx

@@ -1,5 +1,5 @@
 import { observer } from "mobx-react";
-import * as React from "react";
+import { useCallback, Fragment } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
@@ -31,7 +31,7 @@ const DocumentMemberListItem = ({
 }: Props) => {
   const { t } = useTranslation();
 
-  const handleChange = React.useCallback(
+  const handleChange = useCallback(
     (permission: DocumentPermission | typeof EmptySelectValue) => {
       if (permission === EmptySelectValue) {
         onRemove?.();
@@ -68,7 +68,7 @@ const DocumentMemberListItem = ({
   if (!currentPermission) {
     return null;
   }
-  const MaybeLink = membership?.source ? StyledLink : React.Fragment;
+  const MaybeLink = membership?.source ? StyledLink : Fragment;
 
   return (
     <ListItem

app/components/Sharing/Document/SharePopover.tsx

@@ -11,6 +11,7 @@ import Group from "~/models/Group";
 import User from "~/models/User";
 import { Avatar, GroupAvatar, AvatarSize } from "~/components/Avatar";
 import NudeButton from "~/components/NudeButton";
+import { TooltipProvider } from "~/components/TooltipContext";
 import { createAction } from "~/actions";
 import { UserSection } from "~/actions/sections";
 import useBoolean from "~/hooks/useBoolean";
@@ -345,42 +346,44 @@ function SharePopover({ document, onRequestClose, visible }: Props) {
   );
 
   return (
-    <Wrapper>
-      {can.manageUsers && (
-        <SearchInput
-          ref={searchInputRef}
-          onChange={handleQuery}
-          onClick={showPicker}
-          onKeyDown={handleKeyDown}
-          query={query}
-          back={backButton}
-          action={rightButton}
-        />
-      )}
+    <TooltipProvider>
+      <Wrapper>
+        {can.manageUsers && (
+          <SearchInput
+            ref={searchInputRef}
+            onChange={handleQuery}
+            onClick={showPicker}
+            onKeyDown={handleKeyDown}
+            query={query}
+            back={backButton}
+            action={rightButton}
+          />
+        )}
 
-      {picker && (
-        <Suggestions
-          ref={suggestionsRef}
-          document={document}
-          query={query}
-          pendingIds={pendingIds}
-          addPendingId={handleAddPendingId}
-          removePendingId={handleRemovePendingId}
-          onEscape={handleEscape}
-        />
-      )}
+        {picker && (
+          <Suggestions
+            ref={suggestionsRef}
+            document={document}
+            query={query}
+            pendingIds={pendingIds}
+            addPendingId={handleAddPendingId}
+            removePendingId={handleRemovePendingId}
+            onEscape={handleEscape}
+          />
+        )}
 
-      <div style={{ display: picker ? "none" : "block" }}>
-        <AccessControlList
-          document={document}
-          invitedInSession={invitedInSession}
-          share={share}
-          sharedParent={sharedParent}
-          visible={visible}
-          onRequestClose={onRequestClose}
-        />
-      </div>
-    </Wrapper>
+        <div style={{ display: picker ? "none" : "block" }}>
+          <AccessControlList
+            document={document}
+            invitedInSession={invitedInSession}
+            share={share}
+            sharedParent={sharedParent}
+            visible={visible}
+            onRequestClose={onRequestClose}
+          />
+        </div>
+      </Wrapper>
+    </TooltipProvider>
   );
 }
 

app/components/Sharing/components/CopyLinkButton.tsx

@@ -1,5 +1,5 @@
 import { LinkIcon } from "outline-icons";
-import * as React from "react";
+import { useRef, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import CopyToClipboard from "~/components/CopyToClipboard";
@@ -14,9 +14,9 @@ export function CopyLinkButton({
   onCopy: () => void;
 }) {
   const { t } = useTranslation();
-  const timeout = React.useRef<ReturnType<typeof setTimeout>>();
+  const timeout = useRef<ReturnType<typeof setTimeout>>();
 
-  const handleCopied = React.useCallback(() => {
+  const handleCopied = useCallback(() => {
     onCopy();
 
     timeout.current = setTimeout(() => {

app/components/Sharing/components/PermissionAction.tsx

@@ -1,4 +1,3 @@
-import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import Flex from "@shared/components/Flex";

app/components/Sharing/components/Placeholder.tsx

@@ -1,5 +1,4 @@
 import times from "lodash/times";
-import * as React from "react";
 import { AvatarSize } from "~/components/Avatar";
 import Fade from "~/components/Fade";
 import PlaceholderText from "~/components/PlaceholderText";

app/components/Sharing/components/Suggestions.tsx

@@ -67,9 +67,9 @@ export const Suggestions = observer(
     });
 
     const fetchUsersByQuery = useThrottledCallback(
-      (query: string) => {
-        void users.fetchPage({ query });
-        void groups.fetchPage({ query });
+      (searchQuery: string) => {
+        void users.fetchPage({ query: searchQuery });
+        void groups.fetchPage({ query: searchQuery });
       },
       250,
       undefined,