Merge remote-tracking branch 'origin/develop' into group-lookup

app/soapbox/components/modal-root.tsx

@@ -181,7 +181,9 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
   };
 
   const getSiblings = () => {
-    return Array(...(ref.current!.parentElement!.childNodes as any as ChildNode[])).filter(node => node !== ref.current);
+    return Array(...(ref.current!.parentElement!.childNodes as any as ChildNode[]))
+      .filter(node => (node as HTMLDivElement).id !== 'toaster')
+      .filter(node => node !== ref.current);
   };
 
   useEffect(() => {

app/soapbox/components/status-action-bar.tsx

@@ -536,7 +536,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
     return menu;
   };
 
-  const publicStatus = ['public', 'unlisted'].includes(status.visibility);
+  const publicStatus = ['public', 'unlisted', 'group'].includes(status.visibility);
 
   const replyCount = status.replies_count;
   const reblogCount = status.reblogs_count;
@@ -609,7 +609,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
     replyTitle = intl.formatMessage(messages.replyAll);
   }
 
-  const canShare = ('share' in navigator) && status.visibility === 'public';
+  const canShare = ('share' in navigator) && (status.visibility === 'public' || status.visibility === 'group');
 
   return (
     <HStack data-testid='status-action-bar'>

app/soapbox/components/status-action-button.tsx

@@ -53,7 +53,7 @@ const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButt
           src={icon}
           className={clsx(
             {
-              'fill-accent-300 hover:fill-accent-300': active && filled && color === COLORS.accent,
+              'fill-accent-300 text-accent-300 hover:fill-accent-300': active && filled && color === COLORS.accent,
             },
             iconClassName,
           )}

app/soapbox/components/ui/streamfield/streamfield.tsx

@@ -16,6 +16,7 @@ const messages = defineMessages({
 export type StreamfieldComponent<T> = React.ComponentType<{
   value: T
   onChange: (value: T) => void
+  autoFocus: boolean
 }>;
 
 interface IStreamfield {
@@ -72,7 +73,12 @@ const Streamfield: React.FC<IStreamfield> = ({
         <Stack space={1}>
           {values.map((value, i) => value?._destroy ? null : (
             <HStack space={2} alignItems='center'>
-              <Component key={i} onChange={handleChange(i)} value={value} />
+              <Component
+                key={i}
+                onChange={handleChange(i)}
+                value={value}
+                autoFocus={i > 0}
+              />
               {values.length > minItems && onRemoveItem && (
                 <IconButton
                   iconClassName='h-4 w-4'

app/soapbox/components/ui/tooltip/tooltip.css

@@ -1,12 +0,0 @@
-:root {
-  --reach-tooltip: 1;
-}
-
-[data-reach-tooltip] {
-  @apply pointer-events-none absolute px-2.5 py-1.5 rounded shadow whitespace-nowrap text-xs font-medium bg-gray-800 text-gray-100 dark:bg-gray-100 dark:text-gray-900;
-  z-index: 100;
-}
-
-[data-reach-tooltip-arrow] {
-  @apply absolute z-50 w-0 h-0 border-l-8 border-solid border-l-transparent border-r-8 border-r-transparent border-b-8 border-b-gray-800 dark:border-b-gray-100;
-}

app/soapbox/components/ui/tooltip/tooltip.tsx

@@ -1,67 +1,88 @@
-import { TooltipPopup, useTooltip } from '@reach/tooltip';
-import React from 'react';
-
-import Portal from '../portal/portal';
-
-import './tooltip.css';
+import {
+  arrow,
+  FloatingArrow,
+  FloatingPortal,
+  offset,
+  useFloating,
+  useHover,
+  useInteractions,
+  useTransitionStyles,
+} from '@floating-ui/react';
+import React, { useRef, useState } from 'react';
 
 interface ITooltip {
+  /** Element to display the tooltip around. */
+  children: React.ReactElement<any, string | React.JSXElementConstructor<any>>
   /** Text to display in the tooltip. */
   text: string
-  /** Element to display the tooltip around. */
-  children: React.ReactNode
 }
 
-const centered = (triggerRect: any, tooltipRect: any) => {
-  const triggerCenter = triggerRect.left + triggerRect.width / 2;
-  const left = triggerCenter - tooltipRect.width / 2;
-  const maxLeft = window.innerWidth - tooltipRect.width - 2;
-  return {
-    left: Math.min(Math.max(2, left), maxLeft) + window.scrollX,
-    top: triggerRect.bottom + 8 + window.scrollY,
-  };
-};
+/**
+ * Tooltip
+ */
+const Tooltip: React.FC<ITooltip> = (props) => {
+  const { children, text } = props;
 
-/** Hoverable tooltip element. */
-const Tooltip: React.FC<ITooltip> = ({
-  children,
-  text,
-}) => {
-  // get the props from useTooltip
-  const [trigger, tooltip] = useTooltip();
+  const [isOpen, setIsOpen] = useState<boolean>(false);
 
-  // destructure off what we need to position the triangle
-  const { isVisible, triggerRect } = tooltip;
+  const arrowRef = useRef<SVGSVGElement>(null);
+
+  const { x, y, strategy, refs, context } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    placement: 'top',
+    middleware: [
+      offset(6),
+      arrow({
+        element: arrowRef,
+      }),
+    ],
+  });
+
+  const hover = useHover(context);
+  const { isMounted, styles } = useTransitionStyles(context, {
+    initial: {
+      opacity: 0,
+      transform: 'scale(0.8)',
+    },
+    duration: {
+      open: 200,
+      close: 200,
+    },
+  });
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    hover,
+  ]);
 
   return (
-    <React.Fragment>
-      {React.cloneElement(children as any, trigger)}
+    <>
+      {React.cloneElement(children, {
+        ref: refs.setReference,
+        ...getReferenceProps(),
+      })}
 
-      {isVisible && (
-        // The Triangle. We position it relative to the trigger, not the popup
-        // so that collisions don't have a triangle pointing off to nowhere.
-        // Using a Portal may seem a little extreme, but we can keep the
-        // positioning logic simpler here instead of needing to consider
-        // the popup's position relative to the trigger and collisions
-        <Portal>
+      {(isMounted) && (
+        <FloatingPortal>
           <div
-            data-reach-tooltip-arrow='true'
+            ref={refs.setFloating}
             style={{
-              left:
-                triggerRect && triggerRect.left - 10 + triggerRect.width / 2 as any,
-              top: triggerRect && triggerRect.bottom + window.scrollY as any,
+              position: strategy,
+              top: y ?? 0,
+              left: x ?? 0,
+              ...styles,
             }}
-          />
-        </Portal>
+            className='pointer-events-none z-[100] whitespace-nowrap rounded bg-gray-800 px-2.5 py-1.5 text-xs font-medium text-gray-100 shadow dark:bg-gray-100 dark:text-gray-900'
+            {...getFloatingProps()}
+          >
+            {text}
+
+            <FloatingArrow ref={arrowRef} context={context} className='fill-gray-800 dark:fill-gray-100' />
+          </div>
+        </FloatingPortal>
       )}
-      <TooltipPopup
-        {...tooltip}
-        label={text}
-        aria-label={text}
-        position={centered}
-      />
-    </React.Fragment>
+    </>
   );
 };
 
-export default Tooltip;
+export default Tooltip;