Merge pull request #13038 from overleaf/ii-history-react-dropdowns

[web] Adjust dropdowns placement in history list

GitOrigin-RevId: 050e16b97630eb37c890ad9a97a56ba882cca06b

services/web/frontend/js/shared/components/dropdown/dropdown-menu-with-ref.tsx

@@ -0,0 +1,72 @@
+import { forwardRef } from 'react'
+import classnames from 'classnames'
+// @ts-ignore
+// eslint-disable-next-line import/no-extraneous-dependencies
+import RootCloseWrapper from 'react-overlays/lib/RootCloseWrapper'
+import { DropdownProps } from 'react-bootstrap'
+import { MergeAndOverride } from '../../../../../types/utils'
+
+type DropdownMenuWithRefProps = MergeAndOverride<
+  Pick<DropdownProps, 'bsClass' | 'open' | 'pullRight' | 'onClose'>,
+  {
+    children: React.ReactNode
+    bsRole: 'menu'
+    menuRef: React.MutableRefObject<HTMLElement | undefined>
+    className?: string
+    // The props below are passed by react-bootstrap
+    labelledBy?: string | undefined
+    rootCloseEvent?: 'click' | 'mousedown' | undefined
+  }
+>
+
+const DropdownMenuWithRef = forwardRef<
+  HTMLUListElement,
+  DropdownMenuWithRefProps
+>(function (props, ref) {
+  const {
+    children,
+    bsRole,
+    bsClass,
+    className,
+    open,
+    pullRight,
+    labelledBy,
+    menuRef,
+    onClose,
+    rootCloseEvent,
+    ...rest
+  } = props
+
+  // expose the menu reference to both the `menuRef` and `ref callback` from react-bootstrap
+  const handleRefs = (node: HTMLUListElement) => {
+    if (typeof ref === 'function') {
+      ref(node)
+    }
+    menuRef.current = node
+  }
+
+  // Implementation as suggested in
+  // https://react-bootstrap-v3.netlify.app/components/dropdowns/#btn-dropdowns-props-dropdown
+  return (
+    <RootCloseWrapper
+      disabled={!open}
+      onRootClose={onClose}
+      event={rootCloseEvent}
+    >
+      <ul
+        role={bsRole}
+        className={classnames(className, bsClass, {
+          'dropdown-menu-right': pullRight,
+        })}
+        aria-labelledby={labelledBy}
+        ref={handleRefs}
+        {...rest}
+      >
+        {children}
+      </ul>
+    </RootCloseWrapper>
+  )
+})
+DropdownMenuWithRef.displayName = 'DropdownMenuWithRef'
+
+export default DropdownMenuWithRef

services/web/frontend/js/shared/components/dropdown/dropdown-toggle-with-tooltip.tsx

@@ -5,7 +5,7 @@ import { DropdownProps } from 'react-bootstrap'
 import { MergeAndOverride } from '../../../../../types/utils'
 
 type CustomToggleProps = MergeAndOverride<
-  Pick<DropdownProps, 'bsClass'>,
+  Pick<DropdownProps, 'bsClass' | 'open'>,
   {
     children: React.ReactNode
     bsRole: 'toggle'
@@ -23,6 +23,7 @@ const DropdownToggleWithTooltip = forwardRef<
     children,
     bsClass,
     className,
+    open,
     bsRole: _bsRole,
     ...rest
   } = props
@@ -33,6 +34,8 @@ const DropdownToggleWithTooltip = forwardRef<
         type="button"
         ref={ref}
         className={classnames(bsClass, 'btn', className)}
+        aria-expanded={open}
+        aria-haspopup="true"
         {...rest}
       >
         {children}