feat(Search): add Esc button support to clear input field

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -4510,6 +4510,9 @@ Map {
       "onChange": Object {
         "type": "func",
       },
+      "onKeyDown": Object {
+        "type": "func",
+      },
       "placeHolderText": Object {
         "type": "string",
       },

packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap

@@ -2353,6 +2353,7 @@ exports[`DataTable should render 1`] = `
                         className="bx--search-input"
                         id="custom-id"
                         onChange={[Function]}
+                        onKeyDown={[Function]}
                         placeholder="Filter table"
                         role="searchbox"
                         tabIndex="0"
@@ -3360,6 +3361,7 @@ exports[`DataTable sticky header should render 1`] = `
                         className="bx--search-input"
                         id="custom-id"
                         onChange={[Function]}
+                        onKeyDown={[Function]}
                         placeholder="Filter table"
                         role="searchbox"
                         tabIndex="0"

packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap

@@ -77,6 +77,7 @@ exports[`DataTable.TableToolbarSearch should render 1`] = `
           className="bx--search-input"
           id="custom-id"
           onChange={[Function]}
+          onKeyDown={[Function]}
           placeholder="Filter table"
           role="searchbox"
           tabIndex="-1"

packages/react/src/components/Search/Search-story.js

@@ -9,7 +9,6 @@
 
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-
 import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
 import Search from '../Search';
 import SearchSkeleton from '../Search/Search.Skeleton';
@@ -37,6 +36,7 @@ const props = () => ({
   ),
   placeHolderText: text('Placeholder text (placeHolderText)', 'Search'),
   onChange: action('onChange'),
+  onKeyDown: action('onKeyDown'),
 });
 
 export default {

packages/react/src/components/Search/Search.js

@@ -10,6 +10,8 @@ import React, { Component } from 'react';
 import classNames from 'classnames';
 import { Search16, Close16 } from '@carbon/icons-react';
 import { settings } from 'carbon-components';
+import { composeEventHandlers } from '../../tools/events';
+import { keys, match } from '../../internal/keyboard';
 import deprecate from '../../prop-types/deprecate';
 
 const { prefix } = settings;
@@ -56,6 +58,11 @@ export default class Search extends Component {
      */
     onChange: PropTypes.func,
 
+    /**
+     * Provide a handler that is invoked on the key down event for the input
+     */
+    onKeyDown: PropTypes.func,
+
     /**
      * Provide an optional placeholder text for the Search.
      * Note: if the label and placeholder differ,
@@ -137,6 +144,12 @@ export default class Search extends Component {
     this.props.onChange(evt);
   };
 
+  handleKeyDown = (evt) => {
+    if (match(evt, keys.Escape)) {
+      this.clearInput(evt);
+    }
+  };
+
   render() {
     const {
       className,
@@ -151,6 +164,8 @@ export default class Search extends Component {
       size = !small ? 'xl' : 'sm',
       light,
       disabled,
+      onChange,
+      onKeyDown,
       ...other
     } = this.props;
 
@@ -186,7 +201,8 @@ export default class Search extends Component {
           className={`${prefix}--search-input`}
           id={id}
           placeholder={placeHolderText}
-          onChange={this.handleChange}
+          onChange={composeEventHandlers([onChange, this.handleChange])}
+          onKeyDown={composeEventHandlers([onKeyDown, this.handleKeyDown])}
           ref={(input) => {
             this.input = input;
           }}