Extract MenuArrow component for reuse

src/sidebar/components/Annotation/AnnotationShareControl.js

 import {
   Card,
-  Icon,
   IconButton,
   TextInput,
   TextInputWithButton,
@@ -15,6 +14,7 @@ import { isPrivate } from '../../helpers/permissions';
 import { withServices } from '../../service-context';
 import { isIOS } from '../../../shared/user-agent';
 
+import MenuArrow from '../MenuArrow';
 import ShareLinks from '../ShareLinks';
 
 /**
@@ -39,23 +39,6 @@ function selectionOverflowsInputElement() {
   return isIOS();
 }
 
-/**
- *
- * @param {object} props
- *   @param {string} [props.classes] - Optional additional CSS classes
- */
-function MenuArrowDown({ classes }) {
-  return (
-    <Icon
-      name="pointer"
-      classes={classnames(
-        'absolute inline z-2 text-grey-3 fill-white rotate-180',
-        classes
-      )}
-    />
-  );
-}
-
 /**
  * "Popup"-style component for sharing a single annotation.
  *
@@ -203,7 +186,10 @@ function AnnotationShareControl({
             )}
           </div>
           {showShareLinks && <ShareLinks shareURI={shareUri} />}
-          <MenuArrowDown classes="bottom-[-12px] right-1 touch:right-[9px]" />
+          <MenuArrow
+            direction="down"
+            classes="bottom-[-12px] right-1 touch:right-[9px]"
+          />
         </Card>
       )}
     </div>

src/sidebar/components/AutocompleteList.js

-import { Card, Icon } from '@hypothesis/frontend-shared';
+import { Card } from '@hypothesis/frontend-shared';
 import classnames from 'classnames';
 import { useMemo } from 'preact/hooks';
 
+import MenuArrow from './MenuArrow';
+
 /**
  * @template T
  * @param {T} item
  */
 const defaultListFormatter = item => item;
 
-/**
- * @param {object} props
- *   @param {string} [props.classes] - Optional additional CSS classes
- */
-function MenuArrowUp({ classes }) {
-  return (
-    <Icon
-      name="pointer"
-      classes={classnames(
-        'absolute inline z-2 text-grey-3 fill-white',
-        classes
-      )}
-    />
-  );
-}
-
 /**
  * @template T
  * @typedef AutocompleteListProps
@@ -111,7 +97,7 @@ export default function AutocompleteList({
         <ul tabIndex={-1} aria-label="Suggestions" role="listbox" {...props}>
           {items}
         </ul>
-        <MenuArrowUp classes="top-[-10px] left-[3px]" />
+        <MenuArrow direction="up" classes="top-[-10px] left-[3px]" />
       </Card>
     </div>
   );

src/sidebar/components/MenuArrow.js

+import { Icon } from '@hypothesis/frontend-shared';
+import classnames from 'classnames';
+
+/**
+ * @typedef MenuArrowProps
+ * @prop {string} [classes]
+ * @prop {'up'|'down'} [direction]
+ */
+
+/**
+ * Render a white-filled "pointer" arrow for use in menus and menu-like
+ * elements
+ *
+ * @param {MenuArrowProps} props
+ */
+export default function MenuArrow({ classes, direction = 'up' }) {
+  return (
+    <Icon
+      name="pointer"
+      classes={classnames(
+        'absolute inline z-2 text-grey-3 fill-white',
+        { 'rotate-180': direction === 'down' },
+        classes
+      )}
+    />
+  );
+}

src/sidebar/components/test/MenuArrow-test.js

+import { mount } from 'enzyme';
+
+import { mockImportedComponents } from '../../../test-util/mock-imported-components';
+import MenuArrow, { $imports } from '../MenuArrow';
+
+describe('MenuArrow', () => {
+  const createComponent = (props = {}) => mount(<MenuArrow {...props} />);
+
+  beforeEach(() => {
+    $imports.$mock(mockImportedComponents());
+  });
+
+  afterEach(() => {
+    $imports.$restore();
+  });
+
+  it('should render an arrow pointing up by default', () => {
+    const wrapper = createComponent();
+    const arrowClasses = wrapper.find('Icon').props().classes;
+
+    assert.notInclude(arrowClasses, 'rotate-180');
+  });
+
+  it('should render an arrow pointing down if direction is `down`', () => {
+    const wrapper = createComponent({ direction: 'down' });
+    const arrowClasses = wrapper.find('Icon').props().classes;
+
+    assert.include(arrowClasses, 'rotate-180');
+  });
+});