diff --git a/package.json b/package.json
index 00b61e35..cf17c3cc 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
"classnames": "^2.3.1",
"color-hash": "^2.0.1",
"events": "^3.3.0",
- "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#9a15094374f52053ca9f833269d2b1c6c7f964d2",
+ "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#984dd26a138411ef73903ff4e635f2752e0829f2",
"mermaid": "^8.13.8",
"normalize.css": "^8.0.1",
"pako": "^2.0.4",
diff --git a/src/Facepile.jsx b/src/Facepile.jsx
index aace9b1d..e19e6425 100644
--- a/src/Facepile.jsx
+++ b/src/Facepile.jsx
@@ -24,7 +24,11 @@ export function Facepile({
member.name).join(", ")}
- style={{ width: participants.length * (_size - _overlap) + _overlap }}
+ style={{
+ width:
+ Math.min(participants.length, max + 1) * (_size - _overlap) +
+ _overlap,
+ }}
{...rest}
>
{participants.slice(0, max).map((member, i) => {
diff --git a/src/button/Button.jsx b/src/button/Button.tsx
similarity index 74%
rename from src/button/Button.jsx
rename to src/button/Button.tsx
index aabc3093..cbaf715f 100644
--- a/src/button/Button.jsx
+++ b/src/button/Button.tsx
@@ -13,9 +13,12 @@ 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 React, { forwardRef } from "react";
+import { PressEvent } from "@react-types/shared";
import classNames from "classnames";
+import { useButton } from "@react-aria/button";
+import { mergeProps, useObjectRef } from "@react-aria/utils";
+
import styles from "./Button.module.css";
import { ReactComponent as MicIcon } from "../icons/Mic.svg";
import { ReactComponent as MuteMicIcon } from "../icons/MuteMic.svg";
@@ -26,10 +29,21 @@ import { ReactComponent as ScreenshareIcon } from "../icons/Screenshare.svg";
import { ReactComponent as SettingsIcon } from "../icons/Settings.svg";
import { ReactComponent as AddUserIcon } from "../icons/AddUser.svg";
import { ReactComponent as ArrowDownIcon } from "../icons/ArrowDown.svg";
-import { useButton } from "@react-aria/button";
-import { mergeProps, useObjectRef } from "@react-aria/utils";
import { TooltipTrigger } from "../Tooltip";
+export type ButtonVariant =
+ | "default"
+ | "toolbar"
+ | "toolbarSecondary"
+ | "icon"
+ | "secondary"
+ | "copy"
+ | "secondaryCopy"
+ | "iconCopy"
+ | "secondaryHangup"
+ | "dropdown"
+ | "link";
+
export const variantToClassName = {
default: [styles.button],
toolbar: [styles.toolbarButton],
@@ -44,11 +58,24 @@ export const variantToClassName = {
link: [styles.linkButton],
};
-export const sizeToClassName = {
+export type ButtonSize = "lg";
+
+export const sizeToClassName: { lg: string[] } = {
lg: [styles.lg],
};
-
-export const Button = forwardRef(
+interface Props {
+ variant: ButtonVariant;
+ size: ButtonSize;
+ on: () => void;
+ off: () => void;
+ iconStyle: string;
+ className: string;
+ children: Element[];
+ onPress: (e: PressEvent) => void;
+ onPressStart: (e: PressEvent) => void;
+ [index: string]: unknown;
+}
+export const Button = forwardRef(
(
{
variant = "default",
@@ -64,7 +91,7 @@ export const Button = forwardRef(
},
ref
) => {
- const buttonRef = useObjectRef(ref);
+ const buttonRef = useObjectRef(ref);
const { buttonProps } = useButton(
{ onPress, onPressStart, ...rest },
buttonRef
@@ -75,7 +102,7 @@ export const Button = forwardRef(
let filteredButtonProps = buttonProps;
if (rest.type === "submit" && !rest.onPress) {
- const { onKeyDown, onKeyUp, ...filtered } = buttonProps;
+ const { ...filtered } = buttonProps;
filteredButtonProps = filtered;
}
@@ -101,7 +128,13 @@ export const Button = forwardRef(
}
);
-export function MicButton({ muted, ...rest }) {
+export function MicButton({
+ muted,
+ ...rest
+}: {
+ muted: boolean;
+ [index: string]: unknown;
+}) {
return (