diff --git a/src/Toast.test.tsx b/src/Toast.test.tsx
index e35e135c..b88fbee5 100644
--- a/src/Toast.test.tsx
+++ b/src/Toast.test.tsx
@@ -16,6 +16,7 @@ limitations under the License.
import { describe, expect, test, vi } from "vitest";
import { render, configure } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
import { Toast } from "../src/Toast";
import { withFakeTimers } from "./utils/test";
@@ -24,6 +25,9 @@ configure({
defaultHidden: true,
});
+// Test Explanation:
+// This test the toast. We need to use { document: window.document } because the toast listens
+// for user input on `window`.
describe("Toast", () => {
test("renders", () => {
const { queryByRole } = render(
@@ -40,6 +44,33 @@ describe("Toast", () => {
expect(getByRole("dialog")).toMatchSnapshot();
});
+ test("dismisses when Esc is pressed", async () => {
+ const user = userEvent.setup({ document: window.document });
+ const onDismiss = vi.fn();
+ const { debug } = render(
+
+ Hello world!
+ ,
+ );
+ debug();
+ await user.keyboard("[Escape]");
+ expect(onDismiss).toHaveBeenCalled();
+ });
+
+ test("dismisses when background is clicked", async () => {
+ const user = userEvent.setup();
+ const onDismiss = vi.fn();
+ const { getByRole, unmount } = render(
+
+ Hello world!
+ ,
+ );
+ const background = getByRole("dialog").previousSibling! as Element;
+ await user.click(background);
+ expect(onDismiss).toHaveBeenCalled();
+ unmount();
+ });
+
test("dismisses itself after the specified timeout", () => {
withFakeTimers(() => {
const onDismiss = vi.fn();
diff --git a/src/Tooltip.module.css b/src/Tooltip.module.css
deleted file mode 100644
index 07219f75..00000000
--- a/src/Tooltip.module.css
+++ /dev/null
@@ -1,30 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.tooltip {
- background-color: var(--cpd-color-bg-subtle-secondary);
- flex-direction: row;
- justify-content: center;
- align-items: center;
- padding: 10px;
- color: var(--cpd-color-text-primary);
- border-radius: 8px;
- max-width: 135px;
- width: max-content;
- font-size: var(--font-size-caption);
- font-weight: 500;
- text-align: center;
-}
diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx
deleted file mode 100644
index adaa18b3..00000000
--- a/src/Tooltip.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import {
- ForwardedRef,
- forwardRef,
- ReactElement,
- ReactNode,
- useRef,
-} from "react";
-import {
- TooltipTriggerState,
- useTooltipTriggerState,
-} from "@react-stately/tooltip";
-import { FocusableProvider } from "@react-aria/focus";
-import { useTooltipTrigger, useTooltip } from "@react-aria/tooltip";
-import { mergeProps, useObjectRef } from "@react-aria/utils";
-import classNames from "classnames";
-import { OverlayContainer, useOverlayPosition } from "@react-aria/overlays";
-import { Placement } from "@react-types/overlays";
-
-import styles from "./Tooltip.module.css";
-
-interface TooltipProps {
- className?: string;
- state: TooltipTriggerState;
- children: ReactNode;
-}
-
-const Tooltip = forwardRef
(
- (
- { state, className, children, ...rest }: TooltipProps,
- ref: ForwardedRef,
- ) => {
- const { tooltipProps } = useTooltip(rest, state);
-
- return (
-
- {children}
-
- );
- },
-);
-
-Tooltip.displayName = "Tooltip";
-
-interface TooltipTriggerProps {
- children: ReactElement;
- placement?: Placement;
- delay?: number;
- tooltip: () => string;
-}
-
-export const TooltipTrigger = forwardRef(
- (
- { children, placement, tooltip, ...rest }: TooltipTriggerProps,
- ref: ForwardedRef,
- ) => {
- const tooltipTriggerProps = { delay: 250, ...rest };
- const tooltipState = useTooltipTriggerState(tooltipTriggerProps);
- const triggerRef = useObjectRef(ref);
- const overlayRef = useRef(null);
- const { triggerProps, tooltipProps } = useTooltipTrigger(
- tooltipTriggerProps,
- tooltipState,
- triggerRef,
- );
-
- const { overlayProps } = useOverlayPosition({
- placement: placement || "top",
- targetRef: triggerRef,
- overlayRef,
- isOpen: tooltipState.isOpen,
- offset: 12,
- });
-
- return (
-
- (
- children.props,
- rest,
- )}
- />
- {tooltipState.isOpen && (
-
-
- {tooltip()}
-
-
- )}
-
- );
- },
-);
-
-TooltipTrigger.displayName = "TooltipTrigger";
diff --git a/src/UserMenu.module.css b/src/UserMenu.module.css
index 575b71b9..d4e06037 100644
--- a/src/UserMenu.module.css
+++ b/src/UserMenu.module.css
@@ -21,6 +21,14 @@ limitations under the License.
flex-shrink: 0;
}
+.userButton {
+ appearance: none;
+ background: none;
+ border: none;
+ margin: 0;
+ cursor: pointer;
+}
+
.userButton svg * {
fill: var(--cpd-color-icon-primary);
}
diff --git a/src/UserMenu.tsx b/src/UserMenu.tsx
index 7cab4575..55ccc2c0 100644
--- a/src/UserMenu.tsx
+++ b/src/UserMenu.tsx
@@ -14,21 +14,17 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import { FC, ReactNode, useCallback, useMemo } from "react";
-import { Item } from "@react-stately/collections";
+import { FC, useMemo, useState } from "react";
import { useLocation } from "react-router-dom";
import { useTranslation } from "react-i18next";
+import { Menu, MenuItem } from "@vector-im/compound-web";
-import { Button, LinkButton } from "./button";
-import { PopoverMenuTrigger } from "./popover/PopoverMenu";
-import { Menu } from "./Menu";
-import { TooltipTrigger } from "./Tooltip";
+import { LinkButton } from "./button";
import { Avatar, Size } from "./Avatar";
import UserIcon from "./icons/User.svg?react";
import SettingsIcon from "./icons/Settings.svg?react";
import LoginIcon from "./icons/Login.svg?react";
import LogoutIcon from "./icons/Logout.svg?react";
-import { Body } from "./typography/Typography";
import styles from "./UserMenu.module.css";
interface Props {
@@ -91,7 +87,7 @@ export const UserMenu: FC = ({
return arr;
}, [isAuthenticated, isPasswordlessUser, displayName, preventNavigation, t]);
- const tooltip = useCallback(() => t("common.profile"), [t]);
+ const [open, setOpen] = useState(false);
if (!isAuthenticated) {
return (
@@ -102,10 +98,15 @@ export const UserMenu: FC = ({
}
return (
-
-
-
-
- {
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- (props: any): ReactNode => (
-
- )
+
}
-
+ >
+ {items.map(({ key, icon: Icon, label, dataTestid }) => (
+ 
+
### Add a new translation key
To add a new translation key you can do these steps:
diff --git a/knip.ts b/knip.ts
new file mode 100644
index 00000000..becafc2e
--- /dev/null
+++ b/knip.ts
@@ -0,0 +1,30 @@
+import { KnipConfig } from "knip";
+
+export default {
+ entry: ["src/main.tsx", "i18next-parser.config.ts"],
+ ignoreBinaries: [
+ // This is deprecated, so Knip doesn't actually recognize it as a globally
+ // installed binary. TODO We should switch to Compose v2:
+ // https://docs.docker.com/compose/migrate/
+ "docker-compose",
+ ],
+ ignoreDependencies: [
+ // Used in CSS
+ "normalize.css",
+ // Used for its global type declarations
+ "@types/grecaptcha",
+ // Because we use matrix-js-sdk as a Git dependency rather than consuming
+ // the proper release artifacts, and also import directly from src/, we're
+ // forced to re-install some of the types that it depends on even though
+ // these look unused to Knip
+ "@types/content-type",
+ "@types/sdp-transform",
+ "@types/uuid",
+ // We obviously use this, but if the package has been linked with yarn link,
+ // then Knip will flag it as a false positive
+ // https://github.com/webpro-nl/knip/issues/766
+ "@vector-im/compound-web",
+ "matrix-widget-api",
+ ],
+ ignoreExportsUsedInFile: true,
+} satisfies KnipConfig;
diff --git a/package.json b/package.json
index d8183b95..f56efb23 100644
--- a/package.json
+++ b/package.json
@@ -8,107 +8,60 @@
"serve": "vite preview",
"prettier:check": "prettier -c .",
"prettier:format": "prettier -w .",
- "lint": "yarn lint:types && yarn lint:eslint",
+ "lint": "yarn lint:types && yarn lint:eslint && yarn lint:knip",
"lint:eslint": "eslint --max-warnings 0 src",
"lint:eslint-fix": "eslint --max-warnings 0 src --fix",
+ "lint:knip": "knip",
"lint:types": "tsc",
- "i18n": "node_modules/i18next-parser/bin/cli.js",
- "i18n:check": "node_modules/i18next-parser/bin/cli.js --fail-on-warnings --fail-on-update",
+ "i18n": "i18next",
+ "i18n:check": "i18next --fail-on-warnings --fail-on-update",
"test": "vitest",
"test:coverage": "vitest --coverage",
"backend": "docker-compose -f backend-docker-compose.yml up"
},
- "dependencies": {
- "@juggle/resize-observer": "^3.3.1",
- "@livekit/components-core": "^0.11.0",
- "@livekit/components-react": "^2.0.0",
- "@opentelemetry/api": "^1.4.0",
- "@opentelemetry/context-zone": "^1.9.1",
- "@opentelemetry/exporter-jaeger": "^1.9.1",
- "@opentelemetry/exporter-trace-otlp-http": "^0.52.0",
- "@opentelemetry/instrumentation-document-load": "^0.39.0",
- "@opentelemetry/instrumentation-user-interaction": "^0.39.0",
- "@opentelemetry/sdk-trace-web": "^1.9.1",
- "@radix-ui/react-dialog": "^1.0.4",
- "@radix-ui/react-slider": "^1.1.2",
- "@radix-ui/react-visually-hidden": "^1.0.3",
- "@react-aria/button": "^3.3.4",
- "@react-aria/focus": "^3.5.0",
- "@react-aria/menu": "^3.3.0",
- "@react-aria/overlays": "^3.7.3",
- "@react-aria/select": "^3.6.0",
- "@react-aria/tabs": "^3.1.0",
- "@react-aria/tooltip": "^3.1.3",
- "@react-aria/utils": "^3.10.0",
- "@react-spring/web": "^9.4.4",
- "@react-stately/collections": "^3.3.4",
- "@react-stately/select": "^3.1.3",
- "@react-stately/tooltip": "^3.0.5",
- "@react-stately/tree": "^3.2.0",
- "@sentry/react": "^8.0.0",
- "@sentry/tracing": "^7.0.0",
- "@types/lodash": "^4.14.199",
- "@types/qrcode": "^1.5.5",
- "@use-gesture/react": "^10.2.11",
- "@vector-im/compound-design-tokens": "^1.0.0",
- "@vector-im/compound-web": "^6.0.0",
- "@vitejs/plugin-basic-ssl": "^1.0.1",
- "@vitejs/plugin-react": "^4.0.1",
- "buffer": "^6.0.3",
- "classnames": "^2.3.1",
- "events": "^3.3.0",
- "i18next": "^23.0.0",
- "i18next-browser-languagedetector": "^8.0.0",
- "i18next-http-backend": "^2.0.0",
- "livekit-client": "^2.0.2",
- "lodash": "^4.17.21",
- "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#467908703bc67fa3e23d978f5549e2709d4acf74",
- "matrix-widget-api": "^1.8.2",
- "normalize.css": "^8.0.1",
- "observable-hooks": "^4.2.3",
- "pako": "^2.0.4",
- "postcss-preset-env": "^10.0.0",
- "posthog-js": "^1.29.0",
- "qrcode": "^1.5.4",
- "react": "18",
- "react-dom": "18",
- "react-i18next": "^15.0.0",
- "react-router-dom": "^5.2.0",
- "react-use-clipboard": "^1.0.7",
- "react-use-measure": "^2.1.1",
- "rxjs": "^7.8.1",
- "sdp-transform": "^2.14.1",
- "tinyqueue": "^3.0.0",
- "unique-names-generator": "^4.6.0",
- "uuid": "10",
- "vaul": "^0.9.0"
- },
"devDependencies": {
"@babel/core": "^7.16.5",
"@babel/preset-env": "^7.22.20",
"@babel/preset-react": "^7.22.15",
"@babel/preset-typescript": "^7.23.0",
- "@react-spring/rafz": "^9.7.3",
- "@react-types/dialog": "^3.5.5",
+ "@juggle/resize-observer": "^3.3.1",
+ "@livekit/components-core": "^0.11.0",
+ "@livekit/components-react": "^2.0.0",
+ "@opentelemetry/api": "^1.4.0",
+ "@opentelemetry/core": "^1.25.1",
+ "@opentelemetry/exporter-trace-otlp-http": "^0.52.0",
+ "@opentelemetry/resources": "^1.25.1",
+ "@opentelemetry/sdk-trace-base": "^1.25.1",
+ "@opentelemetry/sdk-trace-web": "^1.9.1",
+ "@opentelemetry/semantic-conventions": "^1.25.1",
+ "@radix-ui/react-dialog": "^1.0.4",
+ "@radix-ui/react-slider": "^1.1.2",
+ "@radix-ui/react-visually-hidden": "^1.0.3",
+ "@react-spring/web": "^9.4.4",
+ "@sentry/react": "^8.0.0",
"@sentry/vite-plugin": "^2.0.0",
"@testing-library/dom": "^10.1.0",
"@testing-library/react": "^16.0.0",
"@testing-library/user-event": "^14.5.1",
"@types/content-type": "^1.1.5",
- "@types/dom-screen-wake-lock": "^1.0.1",
- "@types/dompurify": "^3.0.2",
"@types/grecaptcha": "^3.0.9",
+ "@types/jsdom": "^21.1.7",
+ "@types/lodash": "^4.14.199",
"@types/node": "^20.0.0",
"@types/react-dom": "^18.3.0",
"@types/react-router-dom": "^5.3.3",
- "@types/request": "^2.48.8",
"@types/sdp-transform": "^2.4.5",
"@types/uuid": "10",
"@typescript-eslint/eslint-plugin": "^7.0.0",
"@typescript-eslint/parser": "^7.0.0",
+ "@use-gesture/react": "^10.2.11",
+ "@vector-im/compound-design-tokens": "^1.0.0",
+ "@vector-im/compound-web": "^6.0.0",
+ "@vitejs/plugin-basic-ssl": "^1.0.1",
+ "@vitejs/plugin-react": "^4.0.1",
"@vitest/coverage-v8": "^2.0.5",
- "babel-loader": "^9.0.0",
"babel-plugin-transform-vite-meta-env": "^1.0.3",
+ "classnames": "^2.3.1",
"eslint": "^8.14.0",
"eslint-config-google": "^0.14.0",
"eslint-config-prettier": "^9.0.0",
@@ -120,12 +73,38 @@
"eslint-plugin-react-hooks": "^4.5.0",
"eslint-plugin-unicorn": "^55.0.0",
"global-jsdom": "^24.0.0",
+ "history": "^4.0.0",
+ "i18next": "^23.0.0",
+ "i18next-browser-languagedetector": "^8.0.0",
+ "i18next-http-backend": "^2.0.0",
"i18next-parser": "^9.0.0",
"jsdom": "^25.0.0",
+ "knip": "^5.27.2",
+ "livekit-client": "^2.0.2",
+ "lodash": "^4.17.21",
+ "loglevel": "^1.9.1",
+ "matrix-js-sdk": "^v34.4.0",
+ "matrix-widget-api": "^1.8.2",
+ "normalize.css": "^8.0.1",
+ "observable-hooks": "^4.2.3",
+ "pako": "^2.0.4",
+ "postcss": "^8.4.41",
+ "postcss-preset-env": "^10.0.0",
+ "posthog-js": "^1.29.0",
"prettier": "^3.0.0",
+ "qrcode": "^1.5.4",
+ "react": "18",
+ "react-dom": "18",
+ "react-i18next": "^15.0.0",
+ "react-router-dom": "^5.2.0",
+ "react-use-clipboard": "^1.0.7",
+ "react-use-measure": "^2.1.1",
+ "rxjs": "^7.8.1",
"sass": "^1.42.1",
"typescript": "^5.1.6",
"typescript-eslint-language-service": "^5.0.5",
+ "unique-names-generator": "^4.6.0",
+ "vaul": "^0.9.0",
"vite": "^5.0.0",
"vite-plugin-html-template": "^1.1.0",
"vite-plugin-svgr": "^4.0.0",
diff --git a/public/locales/en-GB/app.json b/public/locales/en-GB/app.json
index f4c8824d..6581274a 100644
--- a/public/locales/en-GB/app.json
+++ b/public/locales/en-GB/app.json
@@ -4,8 +4,8 @@
},
"action": {
"close": "Close",
- "copy": "Copy",
"copy_link": "Copy link",
+ "edit": "Edit",
"go": "Go",
"invite": "Invite",
"no": "No",
@@ -13,7 +13,8 @@
"remove": "Remove",
"sign_in": "Sign in",
"sign_out": "Sign out",
- "submit": "Submit"
+ "submit": "Submit",
+ "upload_file": "Upload file"
},
"analytics_notice": "By participating in this beta, you consent to the collection of anonymous data, which we use to improve the product. You can find more information about which data we track in our <2>Privacy Policy and our <5>Cookie Policy.",
"app_selection_modal": {
@@ -43,7 +44,6 @@
"avatar": "Avatar",
"back": "Back",
"camera": "Camera",
- "copied": "Copied!",
"display_name": "Display name",
"encrypted": "Encrypted",
"error": "Error",
@@ -131,7 +131,6 @@
"room_auth_view_eula_caption": "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)",
"room_auth_view_join_button": "Join call now",
"screenshare_button_label": "Share screen",
- "select_input_unset_button": "Select an option",
"settings": {
"developer_settings_label": "Developer Settings",
"developer_settings_label_description": "Expose developer settings in the settings window.",
diff --git a/renovate.json b/renovate.json
index 10dfca5d..91fc985a 100644
--- a/renovate.json
+++ b/renovate.json
@@ -44,20 +44,5 @@
"prHeader": "Please review modals on mobile for visual regressions."
}
],
- "semanticCommits": "disabled",
- "ignoreDeps": [
- "@react-aria/button",
- "@react-aria/focus",
- "@react-aria/menu",
- "@react-aria/overlays",
- "@react-aria/select",
- "@react-aria/tabs",
- "@react-aria/tooltip",
- "@react-aria/utils",
- "@react-stately/collections",
- "@react-stately/select",
- "@react-stately/tooltip",
- "@react-stately/tree",
- "@react-types/dialog"
- ]
+ "semanticCommits": "disabled"
}
diff --git a/src/App.tsx b/src/App.tsx
index bcd049b1..fc12af39 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -22,7 +22,6 @@ import {
useLocation,
} from "react-router-dom";
import * as Sentry from "@sentry/react";
-import { OverlayProvider } from "@react-aria/overlays";
import { History } from "history";
import { TooltipProvider } from "@vector-im/compound-web";
@@ -92,23 +91,21 @@ export const App: FC