Merge remote-tracking branch 'parent/main' into upstream-20240806

app/javascript/mastodon/components/avatar.tsx

@@ -11,6 +11,8 @@ interface Props {
   style?: React.CSSProperties;
   inline?: boolean;
   animate?: boolean;
+  counter?: number | string;
+  counterBorderColor?: string;
 }
 
 export const Avatar: React.FC<Props> = ({
@@ -19,6 +21,8 @@ export const Avatar: React.FC<Props> = ({
   size = 20,
   inline = false,
   style: styleFromParent,
+  counter,
+  counterBorderColor,
 }) => {
   const { hovering, handleMouseEnter, handleMouseLeave } = useHovering(animate);
 
@@ -43,6 +47,14 @@ export const Avatar: React.FC<Props> = ({
       style={style}
     >
       {src && <img src={src} alt='' />}
+      {counter && (
+        <div
+          className='account__avatar__counter'
+          style={{ borderColor: counterBorderColor }}
+        >
+          {counter}
+        </div>
+      )}
     </div>
   );
 };

app/javascript/mastodon/components/dropdown_menu.jsx

@@ -20,7 +20,7 @@ let id = 0;
 class DropdownMenu extends PureComponent {
 
   static propTypes = {
-    items: PropTypes.oneOfType([PropTypes.array, ImmutablePropTypes.list]).isRequired,
+    items: PropTypes.array.isRequired,
     loading: PropTypes.bool,
     scrollable: PropTypes.bool,
     onClose: PropTypes.func.isRequired,
@@ -39,6 +39,7 @@ class DropdownMenu extends PureComponent {
     if (this.node && !this.node.contains(e.target)) {
       this.props.onClose();
       e.stopPropagation();
+      e.preventDefault();
     }
   };
 
@@ -164,7 +165,7 @@ class Dropdown extends PureComponent {
     children: PropTypes.node,
     icon: PropTypes.string,
     iconComponent: PropTypes.func,
-    items: PropTypes.oneOfType([PropTypes.array, ImmutablePropTypes.list]),
+    items: PropTypes.array.isRequired,
     loading: PropTypes.bool,
     size: PropTypes.number,
     title: PropTypes.string,