Add types and tests for @reach/menu-button (#36372)

* Add types and tests for @reach/menu-button

* Fix lint on reach/menu-button

types/reach__menu-button/index.d.ts

@@ -0,0 +1,85 @@
+// Type definitions for @reach/menu-button 0.1
+// Project: https://github.com/reach/reach-ui
+// Definitions by: Harry Hedger <https://github.com/hedgerh>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.8
+
+import * as React from 'react';
+
+export interface ButtonRect {
+  height: number;
+  width: number;
+  left: number;
+  top: number;
+}
+
+export interface State {
+  isOpen: boolean;
+  closingWithClick: boolean;
+  selectionIndex: number;
+  buttonRect: undefined | ButtonRect;
+  buttonId: string;
+}
+
+export interface MenuProps {
+  children?: React.ReactNode;
+}
+
+export const Menu: React.FC<MenuProps>;
+
+export type MenuButtonProps = {
+  onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
+  children?: React.ReactNode;
+} & React.HTMLProps<HTMLButtonElement>;
+
+export const MenuButton: React.FC<MenuButtonProps>;
+
+export type MenuListProps = JSX.IntrinsicElements["div"] & {
+  children?: React.ReactNode;
+};
+
+export const MenuList: React.FC<MenuListProps>;
+
+export type ResolvedMenuLinkProps<T> = T extends keyof JSX.IntrinsicElements
+  ? JSX.IntrinsicElements[T]
+  : T;
+
+export type ResolvedMenuLinkComponent<T> = T extends keyof JSX.IntrinsicElements
+  ? T
+  : React.ComponentType<T>;
+
+export type MenuLinkProps<
+  T extends SupportedMenuLinkComponent
+> = ResolvedMenuLinkProps<T> & {
+  as?: string;
+  to?: string;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
+  onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+  component?: ResolvedMenuLinkComponent<T>;
+  index?: number;
+  style?: React.CSSProperties;
+  setState?: (s: State) => Partial<State>;
+  state?: State;
+  _ref?: (node: HTMLElement) => void;
+};
+
+export type SupportedMenuLinkComponent = object | keyof JSX.IntrinsicElements;
+
+export function MenuLink<T extends SupportedMenuLinkComponent>(
+  props: MenuLinkProps<T>
+): React.ReactElement<MenuLinkProps<T>>;
+
+export type MenuItemProps = {
+  onSelect?: () => void;
+  onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
+  onMouseMove?: (e: React.MouseEvent<HTMLElement>) => void;
+  role?: string;
+  state?: State;
+  setState?: (s: State) => Partial<State>;
+  index?: number;
+  _ref?: (node: HTMLElement) => void;
+} & React.HTMLProps<HTMLDivElement>;
+
+export const MenuItem: React.FC<MenuItemProps>;

types/reach__menu-button/reach__menu-button-tests.tsx

@@ -0,0 +1,29 @@
+import { Menu, MenuButton, MenuList, MenuItem, MenuLink } from '@reach/menu-button';
+
+import * as React from 'react';
+import { render } from 'react-dom';
+
+const Example = () => (
+    <Menu>
+        <MenuButton>
+            Actions <span aria-hidden>▾</span>
+        </MenuButton>
+        <MenuList>
+            <MenuItem onSelect={() => alert('Download')}>Download</MenuItem>
+            <MenuItem onSelect={() => alert('Copy')}>Create a Copy</MenuItem>
+            <MenuItem onSelect={() => alert('Mark as Draft')}>Mark as Draft</MenuItem>
+            <MenuItem onSelect={() => alert('Delete')}>Delete</MenuItem>
+            <MenuLink as="a" to="https://reach.tech/workshops">
+                Attend a Workshop
+            </MenuLink>
+        </MenuList>
+    </Menu>
+);
+
+render(<Example />, document.getElementById('app'));
+
+render(<Menu />, document.getElementById('app'));
+render(<MenuButton />, document.getElementById('app'));
+render(<MenuList />, document.getElementById('app'));
+render(<MenuItem />, document.getElementById('app'));
+render(<MenuLink />, document.getElementById('app'));

types/reach__menu-button/tsconfig.json

@@ -0,0 +1,28 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "paths": {
+            "@reach/menu-button": ["reach__menu-button"]
+        },
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true,
+        "jsx": "react"
+    },
+    "files": [
+        "index.d.ts",
+        "reach__menu-button-tests.tsx"
+    ]
+}

types/reach__menu-button/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }