Components: Add Menu

packages/components/package.json

@@ -45,10 +45,10 @@
 		"@wordpress/primitives": "file:../primitives",
 		"@wordpress/rich-text": "file:../rich-text",
 		"@wordpress/warning": "file:../warning",
-		"@wp-g2/components": "^0.0.160",
-		"@wp-g2/context": "^0.0.160",
-		"@wp-g2/styles": "^0.0.160",
-		"@wp-g2/utils": "^0.0.160",
+		"@wp-g2/components": "^0.0.162",
+		"@wp-g2/context": "^0.0.162",
+		"@wp-g2/styles": "^0.0.162",
+		"@wp-g2/utils": "^0.0.162",
 		"classnames": "^2.2.5",
 		"dom-scroll-into-view": "^1.2.1",
 		"downshift": "^6.0.15",
@@ -62,7 +62,7 @@
 		"react-resize-aware": "^3.1.0",
 		"react-spring": "^8.0.20",
 		"react-use-gesture": "^9.0.0",
-		"reakit": "^1.3.5",
+		"reakit": "1.3.5",
 		"rememo": "^3.0.0",
 		"tinycolor2": "^1.4.2",
 		"uuid": "^8.3.0"

packages/components/src/ui/menu/component.js

@@ -0,0 +1,85 @@
+/**
+ * External dependencies
+ */
+import { contextConnect, useContextSystem } from '@wp-g2/context';
+import { cx } from '@wp-g2/styles';
+// eslint-disable-next-line no-restricted-imports
+import { Menu as ReakitMenu } from 'reakit';
+
+/**
+ * Internal dependencies
+ */
+import { usePopoverResizeUpdater } from '../popover/utils';
+import { View } from '../view';
+import { MenuContext } from './context';
+import * as styles from './styles';
+
+/**
+ * `Menu` is an actionable component that displays a list of actions, links, or informative content.
+ *
+ * @example
+ * ```jsx
+ * <Menu>
+ *  <MenuItem>...</MenuItem>
+ *  <MenuItem>...</MenuItem>
+ *  <MenuItem>...</MenuItem>
+ * </Menu>
+ * ```
+ *
+ * @see https://reakit.io/docs/menu/#menu
+ *
+ * @param {import('@wp-g2/create-styles').ViewOwnProps<import('./types').Props, 'div'>} props
+ * @param {import('react').Ref<any>} forwardedRef
+ */
+function Menu( props, forwardedRef ) {
+	const { as, children, className, menu, ...otherProps } = useContextSystem(
+		props,
+		'Menu'
+	);
+
+	const resizeListener = usePopoverResizeUpdater( {
+		onResize: menu?.unstable_update,
+	} );
+
+	const contextProps = {
+		menu,
+	};
+
+	const classes = cx( styles.Menu, className );
+	const menuProps = menu || {};
+	const Component = as || menu ? ReakitMenu : View;
+
+	return (
+		<MenuContext.Provider value={ contextProps }>
+			{ /* @ts-ignore TS doesn't like the union of PolymorphicComponent and Reakit Component but they are indeed renderable */ }
+			<Component
+				hideOnClickOutside={ false }
+				{ ...menuProps }
+				{ ...otherProps }
+				className={ classes }
+				ref={ forwardedRef }
+			>
+				{ resizeListener }
+				{ children }
+			</Component>
+		</MenuContext.Provider>
+	);
+}
+
+/**
+ * `Menu` is an actionable component that displays a list of actions, links, or informative content.
+ *
+ * @example
+ * ```jsx
+ * <Menu>
+ *  <MenuItem>...</MenuItem>
+ *  <MenuItem>...</MenuItem>
+ *  <MenuItem>...</MenuItem>
+ * </Menu>
+ * ```
+ *
+ * @see https://reakit.io/docs/menu/#menu
+ */
+const ConnectedMenu = contextConnect( Menu, 'Menu' );
+
+export default ConnectedMenu;

packages/components/src/ui/menu/context.js

@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+
+/** @type {import('react').Context<{ menu?: import('reakit').MenuStateReturn }>} */
+export const MenuContext = createContext( {} );
+export const useMenuContext = () => useContext( MenuContext );

packages/components/src/ui/menu/header.js

@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import { contextConnect, useContextSystem } from '@wp-g2/context';
+import { cx } from '@wp-g2/styles';
+import { pick } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import * as baseButtonStyles from '../base-button/styles';
+import { Heading } from '../heading';
+import * as styles from './styles';
+
+const sizeStyles = pick( baseButtonStyles, [ 'large', 'small', 'xSmall' ] );
+
+/**
+ * @typedef OwnProps
+ * @property {keyof sizeStyles} size Size of the menu header.
+ */
+
+/**
+ * @typedef {import('../heading').HeadingProps & OwnProps} Props
+ */
+
+/**
+ *
+ * @param {import('@wp-g2/create-styles').ViewOwnProps<Props, 'div'>} props
+ * @param {import('react').Ref<any>} forwardedRef
+ */
+function MenuHeader( props, forwardedRef ) {
+	const {
+		children,
+		className,
+		size,
+		level = 5,
+		...otherProps
+	} = useContextSystem( props, 'MenuHeader' );
+
+	const classes = cx( styles.MenuHeader, sizeStyles[ size ], className );
+
+	return (
+		<Heading
+			level={ level }
+			{ ...otherProps }
+			className={ classes }
+			ref={ forwardedRef }
+		>
+			{ children }
+		</Heading>
+	);
+}
+
+export default contextConnect( MenuHeader, 'MenuHeader' );

packages/components/src/ui/menu/index.js

@@ -0,0 +1,5 @@
+export { default as Menu } from './component';
+export { default as MenuHeader } from './header';
+export { default as MenuItem } from './item';
+
+export * from './context';