feat(table-toolbar-search): add onBlur/onFocus handling (#10187)

* feat(table-toolbar-search): add onBlur/onFocus handling

* feat(table-toolbar-search): add onBlur/onFocus handling

* chore(table-toolbar-search): update PublicAPI snapshot

* chore(data-table): add args to onFocus/onBlur actions

* refactor(table-toolbar-search): change internal name to match practice

* chore(table-toolbar-search): update story

Author: kevinsperrine

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

@@ -1558,6 +1558,9 @@ Map {
         "labelText": Object {
           "type": "string",
         },
+        "onBlur": Object {
+          "type": "func",
+        },
         "onChange": Object {
           "type": "func",
         },
@@ -1567,6 +1570,9 @@ Map {
         "onExpand": Object {
           "type": "func",
         },
+        "onFocus": Object {
+          "type": "func",
+        },
         "persistant": [Function],
         "persistent": Object {
           "type": "bool",
@@ -2190,6 +2196,9 @@ Map {
       "labelText": Object {
         "type": "string",
       },
+      "onBlur": Object {
+        "type": "func",
+      },
       "onChange": Object {
         "type": "func",
       },
@@ -2199,6 +2208,9 @@ Map {
       "onExpand": Object {
         "type": "func",
       },
+      "onFocus": Object {
+        "type": "func",
+      },
       "persistant": [Function],
       "persistent": Object {
         "type": "bool",

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

@@ -216,6 +216,17 @@ export const WithToolbar = () => (
             <TableToolbarSearch
               onChange={onInputChange}
               onClear={action('onClear')}
+              onFocus={(event, handleExpand) => {
+                action('onFocus')();
+                handleExpand(event, true);
+              }}
+              onBlur={(event, handleExpand) => {
+                action('onBlur')();
+                const { value } = event.target;
+                if (!value) {
+                  handleExpand(event, false);
+                }
+              }}
             />
             <TableToolbarMenu light>
               <TableToolbarAction onClick={action('Action 1 Click')}>

packages/react/src/components/DataTable/TableToolbarSearch.js

@@ -39,6 +39,8 @@ const TableToolbarSearch = ({
   persistent,
   persistant,
   id,
+  onBlur,
+  onFocus,
   ...rest
 }) => {
   const { current: controlled } = useRef(expandedProp !== undefined);
@@ -96,6 +98,9 @@ const TableToolbarSearch = ({
     }
   };
 
+  const handleOnFocus = (event) => handleExpand(event, true);
+  const handleOnBlur = (event) => !value && handleExpand(event, false);
+
   return (
     <Search
       disabled={disabled}
@@ -110,8 +115,10 @@ const TableToolbarSearch = ({
       }
       onChange={onChange}
       onClear={onClear}
-      onFocus={(event) => handleExpand(event, true)}
-      onBlur={(event) => !value && handleExpand(event, false)}
+      onFocus={
+        onFocus ? (event) => onFocus(event, handleExpand) : handleOnFocus
+      }
+      onBlur={onBlur ? (event) => onBlur(event, handleExpand) : handleOnBlur}
       {...rest}
     />
   );
@@ -155,6 +162,13 @@ TableToolbarSearch.propTypes = {
    */
   labelText: PropTypes.string,
 
+  /**
+   * Provide an optional function to be called when the search input loses focus, this will be
+   * passed the event as the first parameter and a function to handle the expanding of the search
+   * input as the second
+   */
+  onBlur: PropTypes.func,
+
   /**
    * Provide an optional hook that is called each time the input is updated
    */
@@ -170,6 +184,13 @@ TableToolbarSearch.propTypes = {
    */
   onExpand: PropTypes.func,
 
+  /**
+   * Provide an optional function to be called when the search input gains focus, this will be
+   * passed the event as the first parameter and a function to handle the expanding of the search
+   * input as the second.
+   */
+  onFocus: PropTypes.func,
+
   persistant: deprecate(
     PropTypes.bool,
     `\nThe prop \`persistant\` for TableToolbarSearch has been deprecated in favor of \`persistent\`. Please use \`persistent\` instead.`

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

@@ -8,6 +8,9 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { TableToolbarSearch } from '../';
+import { settings } from 'carbon-components';
+
+const { prefix } = settings;
 
 describe('DataTable.TableToolbarSearch', () => {
   it('should render', () => {
@@ -26,4 +29,48 @@ describe('DataTable.TableToolbarSearch', () => {
     );
     expect(typeof wrapper.find('Search').prop('id')).toBe('string');
   });
+  it('should pass handleExpand as second parameter to onBlur/onFocus when provided', () => {
+    const onBlur = jest.fn().mockImplementation((event, handleExpand) => {
+      const { value } = event.target;
+      if (!value) {
+        handleExpand(event, false);
+      }
+    });
+    const onFocus = jest.fn().mockImplementation((event, handleExpand) => {
+      handleExpand(event, true);
+    });
+    const wrapper = mount(
+      <TableToolbarSearch
+        onChange={jest.fn()}
+        onBlur={onBlur}
+        onFocus={onFocus}
+      />
+    );
+    wrapper.find('input').simulate('focus');
+    expect(onFocus).toHaveBeenCalledTimes(1);
+    expect(typeof onFocus.mock.calls[0][1]).toEqual('function');
+    expect(wrapper.find('div').first().instance()).toHaveClass(
+      `${prefix}--toolbar-search-container-active`
+    );
+    wrapper.find('input').simulate('blur', { target: { value: 'test' } });
+    expect(onBlur).toHaveBeenCalledTimes(1);
+    expect(typeof onBlur.mock.calls[0][1]).toEqual('function');
+
+    // should continue to be expanded, because the input has a value.
+    expect(wrapper.find('div').first().instance()).toHaveClass(
+      `${prefix}--toolbar-search-container-active`
+    );
+  });
+
+  it('should expand/contract as normal when no onBlur/onFocus provided', () => {
+    const wrapper = mount(<TableToolbarSearch onChange={jest.fn()} />);
+    wrapper.find('input').simulate('focus');
+    expect(wrapper.find('div').first().instance()).toHaveClass(
+      `${prefix}--toolbar-search-container-active`
+    );
+    wrapper.find('input').simulate('blur');
+    expect(wrapper.find('div').first().instance()).not.toHaveClass(
+      `${prefix}--toolbar-search-container-active`
+    );
+  });
 });