From 86e3c346a42c4d61e49c61b6576e55ba5793acc5 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Fri, 2 Aug 2024 19:23:22 +0000 Subject: [PATCH 1/2] Update dependency @vector-im/compound-web to v6 --- package.json | 2 +- yarn.lock | 98 ++++++++++++++++++++-------------------------------- 2 files changed, 38 insertions(+), 62 deletions(-) diff --git a/package.json b/package.json index a4c8dbbc..8f1bab64 100644 --- a/package.json +++ b/package.json @@ -51,7 +51,7 @@ "@types/lodash": "^4.14.199", "@use-gesture/react": "^10.2.11", "@vector-im/compound-design-tokens": "^1.0.0", - "@vector-im/compound-web": "^3.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", diff --git a/yarn.lock b/yarn.lock index 2eae43e9..7abe3477 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1746,7 +1746,7 @@ "@floating-ui/core" "^1.0.0" "@floating-ui/utils" "^0.2.0" -"@floating-ui/react-dom@^2.0.0", "@floating-ui/react-dom@^2.0.8", "@floating-ui/react-dom@^2.1.0": +"@floating-ui/react-dom@^2.0.0", "@floating-ui/react-dom@^2.1.0": version "2.1.0" resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.1.0.tgz#4f0e5e9920137874b2405f7d6c862873baf4beff" integrity sha512-lNzj5EQmEKn5FFKc04+zasr09h/uX8RtJRNj5gUXsSQIXHVWTVh+hVAg1vOMCexkX8EgvemMvIFpQfkosnVNyA== @@ -2376,18 +2376,17 @@ "@radix-ui/react-primitive" "2.0.0" "@radix-ui/react-use-callback-ref" "1.1.0" -"@radix-ui/react-form@^0.0.3": - version "0.0.3" - resolved "https://registry.yarnpkg.com/@radix-ui/react-form/-/react-form-0.0.3.tgz#328e7163e723ccc748459d66a2d685d7b4f85d5a" - integrity sha512-kgE+Z/haV6fxE5WqIXj05KkaXa3OkZASoTDy25yX2EIp/x0c54rOH/vFr5nOZTg7n7T1z8bSyXmiVIFP9bbhPQ== +"@radix-ui/react-form@^0.1.0": + version "0.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-form/-/react-form-0.1.0.tgz#7111a6aa54a2bde0d11fb72643f9ffc871ac58ad" + integrity sha512-1/oVYPDjbFILOLIarcGcMKo+y6SbTVT/iUKVEw59CF4offwZgBgC3ZOeSBewjqU0vdA6FWTPWTN63obj55S/tQ== dependencies: - "@babel/runtime" "^7.13.10" - "@radix-ui/primitive" "1.0.1" - "@radix-ui/react-compose-refs" "1.0.1" - "@radix-ui/react-context" "1.0.1" - "@radix-ui/react-id" "1.0.1" - "@radix-ui/react-label" "2.0.2" - "@radix-ui/react-primitive" "1.0.3" + "@radix-ui/primitive" "1.1.0" + "@radix-ui/react-compose-refs" "1.1.0" + "@radix-ui/react-context" "1.1.0" + "@radix-ui/react-id" "1.1.0" + "@radix-ui/react-label" "2.1.0" + "@radix-ui/react-primitive" "2.0.0" "@radix-ui/react-id@1.0.1": version "1.0.1" @@ -2404,13 +2403,12 @@ dependencies: "@radix-ui/react-use-layout-effect" "1.1.0" -"@radix-ui/react-label@2.0.2": - version "2.0.2" - resolved "https://registry.yarnpkg.com/@radix-ui/react-label/-/react-label-2.0.2.tgz#9c72f1d334aac996fdc27b48a8bdddd82108fb6d" - integrity sha512-N5ehvlM7qoTLx7nWPodsPYPgMzA5WM8zZChQg8nyFJKnDO5WHdba1vv5/H6IO5LtJMfD2Q3wh1qHFGNtK0w3bQ== +"@radix-ui/react-label@2.1.0": + version "2.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-label/-/react-label-2.1.0.tgz#3aa2418d70bb242be37c51ff5e51a2adcbc372e3" + integrity sha512-peLblDlFw/ngk3UWq0VnYaOLy6agTZZ+MUO/WhVfm14vJGML+xH4FAl2XQGLqdefjNb7ApRg6Yn7U42ZhmYXdw== dependencies: - "@babel/runtime" "^7.13.10" - "@radix-ui/react-primitive" "1.0.3" + "@radix-ui/react-primitive" "2.0.0" "@radix-ui/react-menu@2.0.6": version "2.0.6" @@ -2502,6 +2500,14 @@ dependencies: "@radix-ui/react-slot" "1.1.0" +"@radix-ui/react-progress@^1.0.3": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-progress/-/react-progress-1.1.0.tgz#28c267885ec154fc557ec7a66cb462787312f7e2" + integrity sha512-aSzvnYpP725CROcxAOEBVZZSIQVQdHgBr2QQFKySsaD14u8dNT0batuXI+AAGDdAHfXH8rbnHmjYFqVJ21KkRg== + dependencies: + "@radix-ui/react-context" "1.1.0" + "@radix-ui/react-primitive" "2.0.0" + "@radix-ui/react-roving-focus@1.0.4": version "1.0.4" resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz#e90c4a6a5f6ac09d3b8c1f5b5e81aab2f0db1974" @@ -2558,25 +2564,6 @@ dependencies: "@radix-ui/react-compose-refs" "1.1.0" -"@radix-ui/react-tooltip@^1.0.6": - version "1.0.7" - resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz#8f55070f852e7e7450cc1d9210b793d2e5a7686e" - integrity sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw== - dependencies: - "@babel/runtime" "^7.13.10" - "@radix-ui/primitive" "1.0.1" - "@radix-ui/react-compose-refs" "1.0.1" - "@radix-ui/react-context" "1.0.1" - "@radix-ui/react-dismissable-layer" "1.0.5" - "@radix-ui/react-id" "1.0.1" - "@radix-ui/react-popper" "1.1.3" - "@radix-ui/react-portal" "1.0.4" - "@radix-ui/react-presence" "1.0.1" - "@radix-ui/react-primitive" "1.0.3" - "@radix-ui/react-slot" "1.0.2" - "@radix-ui/react-use-controllable-state" "1.0.1" - "@radix-ui/react-visually-hidden" "1.0.3" - "@radix-ui/react-use-callback-ref@1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz#f4bb1f27f2023c984e6534317ebc411fc181107a" @@ -2659,14 +2646,6 @@ dependencies: "@radix-ui/react-use-layout-effect" "1.1.0" -"@radix-ui/react-visually-hidden@1.0.3": - version "1.0.3" - resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz#51aed9dd0fe5abcad7dee2a234ad36106a6984ac" - integrity sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA== - dependencies: - "@babel/runtime" "^7.13.10" - "@radix-ui/react-primitive" "1.0.3" - "@radix-ui/react-visually-hidden@^1.0.3": version "1.1.0" resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.0.tgz#ad47a8572580f7034b3807c8e6740cd41038a5a2" @@ -3829,22 +3808,21 @@ resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-1.7.0.tgz#508b41cd8464c72d73725030f5c84b627a41167c" integrity sha512-cXb2QiwEwtEZiC+7IRvYIf7tBD1KoFcL4YsrFlWapD689Wi3qrmmhFRLFoijHUM3d8Ni6B+7p5SdACRrWb6xBQ== -"@vector-im/compound-web@^3.0.0": - version "3.3.1" - resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-3.3.1.tgz#f5d69255fa62472626e0ed71b7176b09f21cbcaf" - integrity sha512-V9CQfaMyKdsWxC1D4Wz08Xh0ge3SnaOBf5SSIp1+uwoJTPyfEFHKgqbZl536SHBvVBc9M9IYg+3+lPB8xkFRFA== +"@vector-im/compound-web@^6.0.0": + version "6.0.0" + resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-6.0.0.tgz#cd9cd36f58161aa36c77f22bab7d0644a059c94e" + integrity sha512-+e4QlvjkCHgsG9jaIwY7viKmf5pk9nzzuiecCM6ROAX9n0oySOd01OAl0ZZBUEWeAXsPt8UbT4Ab/ewDkPs7Zw== dependencies: "@floating-ui/react" "^0.26.9" - "@floating-ui/react-dom" "^2.0.8" "@radix-ui/react-context-menu" "^2.1.5" "@radix-ui/react-dropdown-menu" "^2.0.6" - "@radix-ui/react-form" "^0.0.3" + "@radix-ui/react-form" "^0.1.0" + "@radix-ui/react-progress" "^1.0.3" "@radix-ui/react-separator" "^1.0.3" "@radix-ui/react-slot" "^1.0.2" - "@radix-ui/react-tooltip" "^1.0.6" classnames "^2.3.2" - graphemer "^1.4.0" - vaul "^0.7.0" + ts-xor "^1.3.0" + vaul "^0.9.0" "@vitejs/plugin-basic-ssl@^1.0.1": version "1.1.0" @@ -8513,6 +8491,11 @@ ts-debounce@^4.0.0: resolved "https://registry.yarnpkg.com/ts-debounce/-/ts-debounce-4.0.0.tgz#33440ef64fab53793c3d546a8ca6ae539ec15841" integrity sha512-+1iDGY6NmOGidq7i7xZGA4cm8DAa6fqdYcvO5Z6yBevH++Bdo9Qt/mN0TzHUgcCcKv1gmh9+W5dHqz8pMWbCbg== +ts-xor@^1.3.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/ts-xor/-/ts-xor-1.3.0.tgz#3e59f24f0321f9f10f350e0cee3b534b89a2c70b" + integrity sha512-RLXVjliCzc1gfKQFLRpfeD0rrWmjnSTgj7+RFhoq3KRkUYa8LE/TIidYOzM5h+IdFBDSjjSgk9Lto9sdMfDFEA== + tsconfig-paths@^3.15.0: version "3.15.0" resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz#5299ec605e55b1abb23ec939ef15edaf483070d4" @@ -8775,13 +8758,6 @@ value-or-function@^4.0.0: resolved "https://registry.yarnpkg.com/value-or-function/-/value-or-function-4.0.0.tgz#70836b6a876a010dc3a2b884e7902e9db064378d" integrity sha512-aeVK81SIuT6aMJfNo9Vte8Dw0/FZINGBV8BfCraGtqVxIeLAEhJyoWs8SmvRVmXfGss2PmmOwZCuBPbZR+IYWg== -vaul@^0.7.0: - version "0.7.9" - resolved "https://registry.yarnpkg.com/vaul/-/vaul-0.7.9.tgz#365dfe8f6c1df3a81a26508474db0e0ceb98ac8c" - integrity sha512-RrcnGOHOq/cEU3YpyyZrnjh0H79xMpF3IrHZs9ichvHlpKjLDc4Vwjn4VkuGzeUGrmQ3wamfm/cpdKWpvBIgQw== - dependencies: - "@radix-ui/react-dialog" "^1.0.4" - vaul@^0.9.0: version "0.9.1" resolved "https://registry.yarnpkg.com/vaul/-/vaul-0.9.1.tgz#3640198e04636b209b1f907fcf3079bec6ecc66b" From b5030566736baf8010bd6d1f79e732acdf58017f Mon Sep 17 00:00:00 2001 From: Robin Date: Fri, 2 Aug 2024 15:27:49 -0400 Subject: [PATCH 2/2] Adapt to breaking changes in Compound --- src/button/Button.tsx | 18 +++------- src/room/EncryptionLock.tsx | 6 ++-- src/room/LayoutToggle.module.css | 60 +++++++++++++++++--------------- src/room/LayoutToggle.tsx | 53 ++++++++++------------------ src/tile/GridTile.tsx | 29 ++++++++------- src/tile/MediaView.tsx | 4 +-- 6 files changed, 76 insertions(+), 94 deletions(-) diff --git a/src/button/Button.tsx b/src/button/Button.tsx index 63e29420..10c4dfd0 100644 --- a/src/button/Button.tsx +++ b/src/button/Button.tsx @@ -151,7 +151,7 @@ export const MicButton: FC<{ return ( ); @@ -171,7 +171,7 @@ export const VideoButton: FC<{ return ( ); @@ -191,7 +191,7 @@ export const ScreenshareButton: FC<{ return ( ); @@ -211,11 +211,7 @@ export const HangupButton: FC<{ className={classNames(styles.hangupButton, className)} {...rest} > - + ); @@ -231,11 +227,7 @@ export const SettingsButton: FC<{ return ( ); diff --git a/src/room/EncryptionLock.tsx b/src/room/EncryptionLock.tsx index fe60ad30..53b8e430 100644 --- a/src/room/EncryptionLock.tsx +++ b/src/room/EncryptionLock.tsx @@ -1,5 +1,5 @@ /* -Copyright 2023 New Vector Ltd +Copyright 2023-2024 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. @@ -34,13 +34,13 @@ export const EncryptionLock: FC = ({ encrypted }) => { const label = encrypted ? t("common.encrypted") : t("common.unencrypted"); return ( - + ); diff --git a/src/room/LayoutToggle.module.css b/src/room/LayoutToggle.module.css index 0f9d614d..e2e592fc 100644 --- a/src/room/LayoutToggle.module.css +++ b/src/room/LayoutToggle.module.css @@ -1,5 +1,5 @@ /* -Copyright 2023 New Vector Ltd +Copyright 2023-2024 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. @@ -21,22 +21,15 @@ limitations under the License. background: var(--cpd-color-bg-canvas-default); box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.5); display: flex; + position: relative; } .toggle input { appearance: none; - /* - * Safari puts a margin on these, which is not removed via appearance: none - * mobile safari also has them take up space in the DOM, so set width 0 - */ + /* Safari puts a margin on these, which is not removed via appearance: none */ margin: 0; - width: 0; - outline: none !important; -} - -.toggle label { - display: block; - padding: calc(2.5 * var(--cpd-space-1x)); + block-size: var(--cpd-space-11x); + inline-size: var(--cpd-space-11x); cursor: pointer; border-radius: var(--cpd-radius-pill-effect); color: var(--cpd-color-icon-primary); @@ -44,41 +37,52 @@ limitations under the License. box-shadow: var(--small-drop-shadow); } +.toggle svg { + display: block; + position: absolute; + padding: calc(2.5 * var(--cpd-space-1x)); + pointer-events: none; + color: var(--cpd-color-icon-primary); +} + +.toggle svg:nth-child(2) { + inset-inline-start: 2px; +} + +.toggle svg:nth-child(4) { + inset-inline-end: 2px; +} + @media (hover: hover) { - .toggle label:hover { + .toggle input:hover { background: var(--cpd-color-bg-action-secondary-hovered); box-shadow: none; } } -.toggle label:active { +.toggle input:active { background: var(--cpd-color-bg-action-secondary-hovered); box-shadow: none; } -.toggle input:checked + label { - color: var(--cpd-color-icon-on-solid-primary); +.toggle input:checked { background: var(--cpd-color-bg-action-primary-rest); } +.toggle input:checked + svg { + color: var(--cpd-color-icon-on-solid-primary); +} + @media (hover: hover) { - .toggle input:checked + label:hover { + .toggle input:checked:hover { background: var(--cpd-color-bg-action-primary-hovered); } } -.toggle input:checked + label:active { +.toggle input:checked:active { background: var(--cpd-color-bg-action-primary-hovered); } -.toggle label > svg { - display: block; -} - -.toggle label:last-child { - margin-inline-start: 5px; -} - -.toggle input:focus-visible + label { - outline: auto; +.toggle input:first-child { + margin-inline-end: 5px; } diff --git a/src/room/LayoutToggle.tsx b/src/room/LayoutToggle.tsx index fe3020ed..ed68198c 100644 --- a/src/room/LayoutToggle.tsx +++ b/src/room/LayoutToggle.tsx @@ -1,5 +1,5 @@ /* -Copyright 2023 New Vector Ltd +Copyright 2023-2024 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. @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { ChangeEvent, FC, useCallback, useId } from "react"; +import { ChangeEvent, FC, useCallback } from "react"; import { useTranslation } from "react-i18next"; import { Tooltip } from "@vector-im/compound-web"; import { @@ -41,45 +41,28 @@ export const LayoutToggle: FC = ({ layout, setLayout, className }) => { [setLayout], ); - const spotlightId = useId(); - const gridId = useId(); - return (
- - + - + - + +
); }; diff --git a/src/tile/GridTile.tsx b/src/tile/GridTile.tsx index e87c506e..f1e0c72b 100644 --- a/src/tile/GridTile.tsx +++ b/src/tile/GridTile.tsx @@ -90,10 +90,12 @@ const UserMediaTile = forwardRef( const videoEnabled = useObservableEagerState(vm.videoEnabled); const speaking = useObservableEagerState(vm.speaking); const cropVideo = useObservableEagerState(vm.cropVideo); - const onChangeFitContain = useCallback(() => vm.toggleFitContain(), [vm]); const onSelectFitContain = useCallback( - (e: Event) => e.preventDefault(), - [], + (e: Event) => { + e.preventDefault(); + vm.toggleFitContain(); + }, + [vm], ); const MicIcon = audioEnabled ? MicOnSolidIcon : MicOffSolidIcon; @@ -106,7 +108,6 @@ const UserMediaTile = forwardRef( Icon={ExpandIcon} label={t("video_tile.change_fit_contain")} checked={cropVideo} - onChange={onChangeFitContain} onSelect={onSelectFitContain} /> {menuEnd} @@ -176,11 +177,10 @@ const LocalUserMediaTile = forwardRef( const alwaysShow = useObservableEagerState(vm.alwaysShow); const latestAlwaysShow = useLatest(alwaysShow); const onSelectAlwaysShow = useCallback( - (e: Event) => e.preventDefault(), - [], - ); - const onChangeAlwaysShow = useCallback( - () => vm.setAlwaysShow(!latestAlwaysShow.current), + (e: Event) => { + e.preventDefault(); + vm.setAlwaysShow(!latestAlwaysShow.current); + }, [vm, latestAlwaysShow], ); @@ -194,7 +194,6 @@ const LocalUserMediaTile = forwardRef( Icon={VisibilityOnIcon} label={t("video_tile.always_show")} checked={alwaysShow} - onChange={onChangeAlwaysShow} onSelect={onSelectAlwaysShow} /> } @@ -224,8 +223,13 @@ const RemoteUserMediaTile = forwardRef< const { t } = useTranslation(); const locallyMuted = useObservableEagerState(vm.locallyMuted); const localVolume = useObservableEagerState(vm.localVolume); - const onChangeMute = useCallback(() => vm.toggleLocallyMuted(), [vm]); - const onSelectMute = useCallback((e: Event) => e.preventDefault(), []); + const onSelectMute = useCallback( + (e: Event) => { + e.preventDefault(); + vm.toggleLocallyMuted(); + }, + [vm], + ); const onChangeLocalVolume = useCallback( (v: number) => vm.setLocalVolume(v), [vm], @@ -244,7 +248,6 @@ const RemoteUserMediaTile = forwardRef< Icon={MicOffIcon} label={t("video_tile.mute_for_me")} checked={locallyMuted} - onChange={onChangeMute} onSelect={onSelectMute} /> {/* TODO: Figure out how to make this slider keyboard accessible */} diff --git a/src/tile/MediaView.tsx b/src/tile/MediaView.tsx index e30bdb8c..4d073092 100644 --- a/src/tile/MediaView.tsx +++ b/src/tile/MediaView.tsx @@ -103,14 +103,14 @@ export const MediaView = forwardRef( {unencryptedWarning && ( )}