MenuItem, Menu, SubMenu, and MenuBar widgets

src/common/styles/variables.css

@@ -51,4 +51,7 @@
 	--button-icon-font: 'iconFont';
 	--button-icon-size: 1.4em;
 	--button-padding: 0.75em 1.25em;
+	--menu-bg: var(--dojo-white);
+	--menu-selected-bg: var(--dojo-blue);
+	--menu-selected-color: var(--dojo-white);
 }

src/common/styles/widgets.css

@@ -4,6 +4,9 @@
 @import '../../checkbox/styles/checkbox.m.css';
 @import '../../combobox/styles/comboBox.m.css';
 @import '../../dialog/styles/dialog.m.css';
+@import '../../menu/styles/menu.m.css';
+@import '../../menu/styles/menuBar.m.css';
+@import '../../menu/styles/subMenu.m.css';
 @import '../../radio/styles/radio.m.css';
 @import '../../select/styles/select.m.css';
 @import '../../slidepane/styles/slidePane.m.css';

src/common/tests/intern.ts

@@ -56,7 +56,8 @@ export const loaderOptions = {
 		{ name: '@dojo', location: 'node_modules/@dojo' },
 		{ name: 'grunt-dojo2', location: 'node_modules/grunt-dojo2'},
 		{ name: 'pepjs', location: 'node_modules/pepjs/dist', main: 'pep' },
-		{ name: 'maquette', location: 'node_modules/maquette/dist', main: 'maquette' }
+		{ name: 'maquette', location: 'node_modules/maquette/dist', main: 'maquette' },
+		{ name: 'sinon', location: 'node_modules/sinon/pkg', main: 'sinon' }
 	]
 };
 

src/common/tests/unit/all.ts

@@ -18,3 +18,7 @@ import '../../../radio/tests/unit/Radio';
 import '../../../slider/tests/unit/Slider';
 import '../../../select/tests/unit/Select';
 import '../../../select/tests/unit/SelectOption';
+import '../../../menu/tests/unit/Menu';
+import '../../../menu/tests/unit/MenuBar';
+import '../../../menu/tests/unit/MenuItem';
+import '../../../menu/tests/unit/SubMenu';

src/common/tests/unit/main.ts

@@ -18,5 +18,9 @@ registerSuite({
 		assert.isDefined(widgets.Slider);
 		assert.isDefined(widgets.ComboBox);
 		assert.isDefined(widgets.Select);
+		assert.isDefined(widgets.Menu);
+		assert.isDefined(widgets.MenuBar);
+		assert.isDefined(widgets.MenuItem);
+		assert.isDefined(widgets.SubMenu);
 	}
 });

src/common/tests/unit/util.ts

@@ -1,11 +1,22 @@
 import * as registerSuite from 'intern!object';
 import * as assert from 'intern/chai!assert';
-import { Keys } from '../../util';
+import * as sinon from 'sinon';
+import { Keys, observeViewport } from '../../util';
 
 registerSuite({
 	name: 'util',
 
-	keys() {
+	beforeEach() {
+		sinon.spy(window, 'addEventListener');
+		sinon.spy(window, 'removeEventListener');
+	},
+
+	afterEach() {
+		(<any> window).addEventListener.restore();
+		(<any> window).removeEventListener.restore();
+	},
+
+	Keys() {
 		assert.strictEqual(Keys.Down, 40);
 		assert.strictEqual(Keys.End, 35);
 		assert.strictEqual(Keys.Enter, 13);
@@ -18,5 +29,23 @@ registerSuite({
 		assert.strictEqual(Keys.Space, 32);
 		assert.strictEqual(Keys.Tab, 9);
 		assert.strictEqual(Keys.Up, 38);
+	},
+
+	observeViewport() {
+		let next = sinon.spy();
+		const subscriber = observeViewport({ next });
+		const listener: () => void = (<any> window.addEventListener).args[0][1];
+		listener();
+
+		assert.isTrue((<any> window.addEventListener).calledWith('resize'));
+		assert.isNumber(next.args[0][0], '`next should be passed the current viewport width.`');
+
+		subscriber.unsubscribe();
+		assert.isTrue((<any> window.removeEventListener).calledWith('resize'));
+
+		next = sinon.spy();
+		observeViewport({ next }).unsubscribe();
+		listener();
+		assert.isFalse(next.called);
 	}
 });

src/common/util.ts

@@ -1,3 +1,5 @@
+import Observable, { Observer, Subscription } from '@dojo/shim/Observable';
+
 export const enum Keys {
 	Down = 40,
 	End = 35,
@@ -12,3 +14,23 @@ export const enum Keys {
 	Tab = 9,
 	Up = 38
 }
+
+export const observeViewport = (function () {
+	let viewportSource: Observable<number>;
+
+	return function (observer: Observer<number>): Subscription {
+		if (!viewportSource) {
+			viewportSource = new Observable((observer) => {
+				const listener = function () {
+					observer.next(document.body.offsetWidth);
+				};
+				window.addEventListener('resize', listener);
+				return function () {
+					window.removeEventListener('resize', listener);
+				};
+			});
+		}
+
+		return viewportSource.subscribe(observer);
+	};
+})();

src/main.ts

@@ -3,25 +3,33 @@ import Checkbox from './checkbox/Checkbox';
 import ComboBox from './combobox/ComboBox';
 import Dialog from './dialog/Dialog';
 import Label from './label/Label';
+import Menu from './menu/Menu';
+import MenuBar from './menu/MenuBar';
+import MenuItem from './menu/MenuItem';
 import Radio from './radio/Radio';
 import Select from './select/Select';
 import SlidePane from './slidepane/SlidePane';
 import Slider from './slider/Slider';
+import SubMenu from './menu/SubMenu';
 import TabPane from './tabpane/TabPane';
-import Textarea from './textarea/Textarea';
 import TextInput from './textinput/TextInput';
+import Textarea from './textarea/Textarea';
 
 export {
 	Button,
 	Checkbox,
 	ComboBox,
 	Dialog,
 	Label,
+	Menu,
+	MenuBar,
+	MenuItem,
 	Radio,
 	Select,
 	SlidePane,
 	Slider,
+	SubMenu,
 	TabPane,
-	Textarea,
-	TextInput
+	TextInput,
+	Textarea
 };

src/menu/Menu.ts

@@ -0,0 +1,186 @@
+import { createHandle } from '@dojo/core/lang';
+import uuid from '@dojo/core/uuid';
+import { v } from '@dojo/widget-core/d';
+import { DNode } from '@dojo/widget-core/interfaces';
+import ThemeableMixin, { theme, ThemeableProperties } from '@dojo/widget-core/mixins/Themeable';
+import WidgetBase from '@dojo/widget-core/WidgetBase';
+import * as css from './styles/menu.m.css';
+import { Keys } from '../common/util';
+
+export type Orientation = 'horizontal' | 'vertical';
+
+export type RoleType = 'menu' | 'menubar';
+
+/**
+ * @type MenuProperties
+ *
+ * Properties that can be set on a Menu component.
+ *
+ * @property active             Determines whether the menu has focus.
+ * @property activeIndex        Determines the index of the focused item.
+ * @property disabled           Determines whether the menu is disabled.
+ * @property id                 The widget ID. Defaults to a random string.
+ * @property orientation        Determines whether the menu is rendered horizontally.
+ * @property role               The value to use for the menu's `role` property. Defaults to 'menu'.
+ */
+export interface MenuProperties extends ThemeableProperties {
+	active?: boolean;
+	activeIndex?: number;
+	disabled?: boolean;
+	id?: string;
+	orientation?: Orientation;
+	role?: RoleType;
+}
+
+export const enum Operation {
+	decrease,
+	increase
+}
+
+export const MenuBase = ThemeableMixin(WidgetBase);
+
+@theme(css)
+export class Menu extends MenuBase<MenuProperties> {
+	private _active = false;
+	private _activeIndex = 0;
+	private _domNode: HTMLElement | null;
+	private _id = uuid();
+
+	constructor() {
+		/* istanbul ignore next: disregard transpiled `super`'s "else" block */
+		super();
+		// TODO: Remove once focus management is implemented.
+		this.own(createHandle(() => {
+			this._domNode = null;
+		}));
+	}
+
+	render(): DNode {
+		const {
+			id = this._id,
+			role = 'menu'
+		} = this.properties;
+
+		return v('div', {
+			classes: this.classes.apply(this, this._getMenuClasses()),
+			id,
+			key: 'root',
+			onfocusin: this._onMenuFocus,
+			onfocusout: this._onMenuFocusOut,
+			onkeydown: this._onMenuKeyDown,
+			role
+		}, this._renderChildren());
+	}
+
+	protected onElementCreated(element: HTMLElement, key: string) {
+		if (key === 'root') {
+			this._domNode = element;
+		}
+	}
+
+	private _getDefaultOrientation(): Orientation {
+		const { role = 'menu' } = this.properties;
+		return role === 'menubar' ? 'horizontal' : 'vertical';
+	}
+
+	private _getKeys() {
+		const { orientation = this._getDefaultOrientation() } = this.properties;
+		const isHorizontal = orientation === 'horizontal';
+
+		return {
+			decrease: isHorizontal ? Keys.Left : Keys.Up,
+			increase: isHorizontal ? Keys.Right : Keys.Down,
+			tab: Keys.Tab
+		};
+	}
+
+	private _getMenuClasses() {
+		const { orientation = this._getDefaultOrientation() } = this.properties;
+		const classes = [ css.root ];
+
+		if (orientation === 'horizontal') {
+			classes.push(css.horizontal);
+		}
+
+		return classes;
+	}
+
+	private _isActive() {
+		return this._active || this.properties.active;
+	}
+
+	private _moveActiveIndex(operation: Operation) {
+		const max = this.children.length;
+		const previousIndex = this._activeIndex;
+		this._activeIndex = operation === Operation.decrease ?
+			previousIndex - 1 < 0 ? max - 1 : previousIndex - 1 :
+			Math.min(previousIndex + 1, max) % max;
+
+		this.invalidate();
+	}
+
+	private _onMenuFocus() {
+		if (!this._isActive()) {
+			this._active = true;
+			this.invalidate();
+		}
+	}
+
+	private _onMenuFocusOut() {
+		if (this._isActive()) {
+			requestAnimationFrame(() => {
+				const node = this._domNode as HTMLElement;
+				if (node && !node.contains(document.activeElement)) {
+					this._active = false;
+					this.invalidate();
+				}
+			});
+		}
+	}
+
+	private _onMenuKeyDown(event: KeyboardEvent) {
+		const keys = this._getKeys();
+
+		switch (event.keyCode) {
+			case keys.tab:
+				event.stopPropagation();
+				this._active = false;
+				this.invalidate();
+				break;
+			case keys.decrease:
+				event.preventDefault();
+				event.stopPropagation();
+				this._moveActiveIndex(Operation.decrease);
+				break;
+			case keys.increase:
+				event.preventDefault();
+				event.stopPropagation();
+				this._moveActiveIndex(Operation.increase);
+				break;
+		}
+	}
+
+	private _onMenuItemMouseDown(index?: number) {
+		if (typeof index === 'number') {
+			this._activeIndex = index;
+		}
+	}
+
+	private _renderChildren() {
+		const { activeIndex = this._activeIndex } = this.properties;
+		const focusIndex = this._isActive() ? activeIndex : undefined;
+		this._activeIndex = activeIndex;
+
+		this.children.filter((child: any) => child && child.properties)
+			.forEach((child: any, i) => {
+				child.properties.active = i === focusIndex;
+				child.properties.focusable = i === activeIndex;
+				child.properties.index = i;
+				child.properties.onMouseDown = this._onMenuItemMouseDown;
+			});
+
+		return this.children;
+	}
+}
+
+export default Menu;