DropdownMenu: add props interfaces, update to named export --no-verify

Author: clairep94

client/components/Dropdown/DropdownMenu.tsx

@@ -1,23 +1,32 @@
-import PropTypes from 'prop-types';
 import React, { forwardRef, useCallback, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { remSize, prop } from '../../theme';
 import { useModalClose } from '../../common/useModalClose';
 import DownArrowIcon from '../../images/down-filled-triangle.svg';
 
-// TODO: enable arrow keys to navigate options from list
-const DropdownWrapper = styled.ul`
+enum DropdownMenuAlignment {
+  RIGHT = 'right',
+  LEFT = 'left'
+}
+
+interface StyledDropdownMenuProps {
+  align: DropdownMenuAlignment;
+}
+
+const DropdownWrapper = styled.ul<StyledDropdownMenuProps>`
   background-color: ${prop('Modal.background')};
   border: 1px solid ${prop('Modal.border')};
   box-shadow: 0 0 18px 0 ${prop('shadowColor')};
   color: ${prop('primaryTextColor')};
 
   position: absolute;
-  right: ${(props) => (props.right ? 0 : 'initial')};
-  left: ${(props) => (props.left ? 0 : 'initial')};
+  right: ${(props) =>
+    props.align === DropdownMenuAlignment.RIGHT ? 0 : 'initial'};
+  left: ${(props) =>
+    props.align === DropdownMenuAlignment.LEFT ? 0 : 'initial'};
 
-  ${(props) => props.align === 'right' && 'right: 0;'}
-  ${(props) => props.align === 'left' && 'left: 0;'}
+  ${(props) => props.align === DropdownMenuAlignment.RIGHT && 'right: 0;'}
+  ${(props) => props.align === DropdownMenuAlignment.LEFT && 'left: 0;'}
 
 
   text-align: left;
@@ -72,15 +81,34 @@ const DropdownWrapper = styled.ul`
   }
 `;
 
-const DropdownMenu = forwardRef(
+export interface DropdownMenuProps extends StyledDropdownMenuProps {
+  /**
+   * Provide <MenuItem> elements as children to control the contents of the menu.
+   */
+  children: React.ReactNode;
+  /**
+   * Can optionally override the contents of the button which opens the menu.
+   * Defaults to <DownArrowIcon>
+   */
+  anchor?: React.ReactNode;
+  'aria-label': string;
+  className?: string;
+  classes?: {
+    button?: string;
+    list?: string;
+  };
+  maxHeight?: string;
+}
+
+export const DropdownMenu = forwardRef<HTMLDivElement, DropdownMenuProps>(
   (
     {
       children,
       anchor,
       'aria-label': ariaLabel,
-      align,
-      className,
-      classes,
+      align = DropdownMenuAlignment.RIGHT,
+      className = '',
+      classes = {},
       maxHeight
     },
     ref
@@ -92,7 +120,7 @@ const DropdownMenu = forwardRef(
 
     const close = useCallback(() => setIsOpen(false), [setIsOpen]);
 
-    const anchorRef = useModalClose(close, ref);
+    const anchorRef = useModalClose<HTMLDivElement>(close, ref);
 
     const toggle = useCallback(() => {
       setIsOpen((prevState) => !prevState);
@@ -116,7 +144,7 @@ const DropdownMenu = forwardRef(
         <button
           className={classes.button}
           aria-label={ariaLabel}
-          tabIndex="0"
+          tabIndex={0}
           onClick={toggle}
           onBlur={handleBlur}
           onFocus={handleFocus}
@@ -133,7 +161,7 @@ const DropdownMenu = forwardRef(
             }}
             onBlur={handleBlur}
             onFocus={handleFocus}
-            style={maxHeight && { maxHeight, overflowY: 'auto' }}
+            style={maxHeight ? { maxHeight, overflowY: 'auto' } : undefined}
           >
             {children}
           </DropdownWrapper>
@@ -142,33 +170,3 @@ const DropdownMenu = forwardRef(
     );
   }
 );
-
-DropdownMenu.propTypes = {
-  /**
-   * Provide <MenuItem> elements as children to control the contents of the menu.
-   */
-  children: PropTypes.node.isRequired,
-  /**
-   * Can optionally override the contents of the button which opens the menu.
-   * Defaults to <DownArrowIcon>
-   */
-  anchor: PropTypes.node,
-  'aria-label': PropTypes.string.isRequired,
-  align: PropTypes.oneOf(['left', 'right']),
-  className: PropTypes.string,
-  classes: PropTypes.shape({
-    button: PropTypes.string,
-    list: PropTypes.string
-  }),
-  maxHeight: PropTypes.string
-};
-
-DropdownMenu.defaultProps = {
-  anchor: null,
-  align: 'right',
-  className: '',
-  classes: {},
-  maxHeight: undefined
-};
-
-export default DropdownMenu;

client/components/Dropdown/TableDropdown.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { prop, remSize } from '../../theme';
-import DropdownMenu from './DropdownMenu';
+import { DropdownMenu } from './DropdownMenu';
 
 import DownFilledTriangleIcon from '../../images/down-filled-triangle.svg';
 import MoreIconSvg from '../../images/more.svg';

client/modules/IDE/components/VersionPicker.jsx

@@ -8,7 +8,7 @@ import { prop } from '../../../theme';
 import { useP5Version } from '../hooks/useP5Version';
 import { p5Versions } from '../../../../common/p5Versions';
 import MenuItem from '../../../components/Dropdown/MenuItem';
-import DropdownMenu from '../../../components/Dropdown/DropdownMenu';
+import { DropdownMenu } from '../../../components/Dropdown/DropdownMenu';
 import { updateFileContent } from '../actions/files';
 // eslint-disable-next-line import/no-cycle
 import { CmControllerContext } from '../pages/IDEView';