1 files changed, 72 insertions, 0 deletions
diff --git a/browser/components/newtab/content-src/components/ContextMenu/ContextMenuButton.jsx b/browser/components/newtab/content-src/components/ContextMenu/ContextMenuButton.jsx
new file mode 100644
index 0000000000..0364f5386a
--- /dev/null
+++ b/browser/components/newtab/content-src/components/ContextMenu/ContextMenuButton.jsx
@@ -0,0 +1,72 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import React from "react";
+
+export class ContextMenuButton extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showContextMenu: false,
+      contextMenuKeyboard: false,
+    };
+    this.onClick = this.onClick.bind(this);
+    this.onKeyDown = this.onKeyDown.bind(this);
+    this.onUpdate = this.onUpdate.bind(this);
+  }
+
+  openContextMenu(isKeyBoard, event) {
+    if (this.props.onUpdate) {
+      this.props.onUpdate(true);
+    }
+    this.setState({
+      showContextMenu: true,
+      contextMenuKeyboard: isKeyBoard,
+    });
+  }
+
+  onClick(event) {
+    event.preventDefault();
+    this.openContextMenu(false, event);
+  }
+
+  onKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      this.openContextMenu(true, event);
+    }
+  }
+
+  onUpdate(showContextMenu) {
+    if (this.props.onUpdate) {
+      this.props.onUpdate(showContextMenu);
+    }
+    this.setState({ showContextMenu });
+  }
+
+  render() {
+    const { tooltipArgs, tooltip, children, refFunction } = this.props;
+    const { showContextMenu, contextMenuKeyboard } = this.state;
+
+    return (
+      <React.Fragment>
+        <button
+          aria-haspopup="true"
+          data-l10n-id={tooltip}
+          data-l10n-args={tooltipArgs ? JSON.stringify(tooltipArgs) : null}
+          className="context-menu-button icon"
+          onKeyDown={this.onKeyDown}
+          onClick={this.onClick}
+          ref={refFunction}
+        />
+        {showContextMenu
+          ? React.cloneElement(children, {
+              keyboardAccess: contextMenuKeyboard,
+              onUpdate: this.onUpdate,
+            })
+          : null}
+      </React.Fragment>
+    );
+  }
+}