@carbon/react 1.27.0-rc.0 → 1.28.0-rc.0

package/es/components/DataTable/TableHeader.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { defineProperty as _defineProperty, objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default from 'react';
@@ -15,53 +15,53 @@ import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { sortStates } from './state/sortStates.js';
 
-var _excluded = ["className", "children", "colSpan", "isSortable", "isSortHeader", "onClick", "scope", "sortDirection", "translateWithId", "id"];
-
-var _sortDirections;
-var translationKeys = {
+const translationKeys = {
   buttonDescription: 'carbon.table.header.icon.description'
 };
 
-var translateWithId = function translateWithId(key, args) {
+const translateWithId = (key, args) => {
   if (args && key === translationKeys.buttonDescription) {
     if (args.isSortHeader && sortStates) {
       // When transitioning, we know that the sequence of states is as follows:
       // NONE -> ASC -> DESC -> NONE
       if (args.sortDirection === sortStates.NONE) {
-        return "Click to sort rows by ".concat(args.header, " header in ascending order");
+        return `Click to sort rows by ${args.header} header in ascending order`;
       }
 
       if (args.sortDirection === sortStates.ASC) {
-        return "Click to sort rows by ".concat(args.header, " header in descending order");
+        return `Click to sort rows by ${args.header} header in descending order`;
       }
 
-      return "Click to unsort rows by ".concat(args.header, " header");
+      return `Click to unsort rows by ${args.header} header`;
     }
 
-    return "Click to sort rows by ".concat(args.header, " header in ascending order");
+    return `Click to sort rows by ${args.header} header in ascending order`;
   }
 
   return '';
 };
 
-var sortDirections = (_sortDirections = {}, _defineProperty(_sortDirections, sortStates.NONE, 'none'), _defineProperty(_sortDirections, sortStates.ASC, 'ascending'), _defineProperty(_sortDirections, sortStates.DESC, 'descending'), _sortDirections);
-var TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(_ref, ref) {
-  var _cx;
-
-  var headerClassName = _ref.className,
-      children = _ref.children,
-      colSpan = _ref.colSpan,
-      isSortable = _ref.isSortable,
-      isSortHeader = _ref.isSortHeader,
-      onClick = _ref.onClick,
-      scope = _ref.scope,
-      sortDirection = _ref.sortDirection,
-      t = _ref.translateWithId,
-      id = _ref.id,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-  var uniqueId = useId('table-sort');
+const sortDirections = {
+  [sortStates.NONE]: 'none',
+  [sortStates.ASC]: 'ascending',
+  [sortStates.DESC]: 'descending'
+};
+const TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(_ref, ref) {
+  let {
+    className: headerClassName,
+    children,
+    colSpan,
+    isSortable,
+    isSortHeader,
+    onClick,
+    scope,
+    sortDirection,
+    translateWithId: t,
+    id,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
+  const uniqueId = useId('table-sort');
 
   if (!isSortable) {
     return /*#__PURE__*/React__default.createElement("th", _extends({}, rest, {
@@ -71,17 +71,21 @@ var TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(_r
       colSpan: colSpan,
       ref: ref
     }), children ? /*#__PURE__*/React__default.createElement("div", {
-      className: "".concat(prefix, "--table-header-label")
+      className: `${prefix}--table-header-label`
     }, children) : null);
   }
 
-  var className = cx(headerClassName, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--table-sort"), true), _defineProperty(_cx, "".concat(prefix, "--table-sort--active"), isSortHeader && sortDirection !== sortStates.NONE), _defineProperty(_cx, "".concat(prefix, "--table-sort--descending"), isSortHeader && sortDirection === sortStates.DESC), _cx));
-  var ariaSort = !isSortHeader || !sortDirection ? 'none' : sortDirections[sortDirection];
-  var sortDescription = t && t('carbon.table.header.icon.description', {
+  const className = cx(headerClassName, {
+    [`${prefix}--table-sort`]: true,
+    [`${prefix}--table-sort--active`]: isSortHeader && sortDirection !== sortStates.NONE,
+    [`${prefix}--table-sort--descending`]: isSortHeader && sortDirection === sortStates.DESC
+  });
+  const ariaSort = !isSortHeader || !sortDirection ? 'none' : sortDirections[sortDirection];
+  const sortDescription = t && t('carbon.table.header.icon.description', {
     header: children,
-    sortDirection: sortDirection,
-    isSortHeader: isSortHeader,
-    sortStates: sortStates
+    sortDirection,
+    isSortHeader,
+    sortStates
   });
   return /*#__PURE__*/React__default.createElement("th", {
     id: id,
@@ -91,7 +95,7 @@ var TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(_r
     ref: ref,
     scope: scope
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--table-sort__description"),
+    className: `${prefix}--table-sort__description`,
     id: uniqueId
   }, sortDescription), /*#__PURE__*/React__default.createElement("button", _extends({
     type: "button",
@@ -99,15 +103,15 @@ var TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(_r
     className: className,
     onClick: onClick
   }, rest), /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(prefix, "--table-sort__flex")
+    className: `${prefix}--table-sort__flex`
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--table-header-label")
+    className: `${prefix}--table-header-label`
   }, children), /*#__PURE__*/React__default.createElement(ArrowUp, {
     size: 20,
-    className: "".concat(prefix, "--table-sort__icon")
+    className: `${prefix}--table-sort__icon`
   }), /*#__PURE__*/React__default.createElement(ArrowsVertical, {
     size: 20,
-    className: "".concat(prefix, "--table-sort__icon-unsorted")
+    className: `${prefix}--table-sort__icon-unsorted`
   }))));
 });
 TableHeader.propTypes = {
@@ -171,7 +175,7 @@ TableHeader.propTypes = {
 TableHeader.defaultProps = {
   isSortable: false,
   scope: 'col',
-  translateWithId: translateWithId
+  translateWithId
 };
 TableHeader.translationKeys = Object.values(translationKeys);
 TableHeader.displayName = 'TableHeader';

package/es/components/DataTable/TableRow.js

@@ -5,23 +5,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import PropTypes from 'prop-types';
 import omit from 'lodash.omit';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var TableRow = function TableRow(props) {
-  var prefix = usePrefix(); // Remove unnecessary props if provided to this component, these are
+const TableRow = props => {
+  const prefix = usePrefix(); // Remove unnecessary props if provided to this component, these are
   // only useful in `TableExpandRow`
 
-  var className = cx(props.className, _defineProperty({}, "".concat(prefix, "--data-table--selected"), props.isSelected));
-
-  var cleanProps = _objectSpread2(_objectSpread2({}, omit(props, ['ariaLabel', 'onExpand', 'isExpanded', 'isSelected'])), {}, {
-    className: className || undefined
+  const className = cx(props.className, {
+    [`${prefix}--data-table--selected`]: props.isSelected
   });
-
+  const cleanProps = { ...omit(props, ['ariaLabel', 'onExpand', 'isExpanded', 'isSelected']),
+    className: className || undefined
+  };
   return /*#__PURE__*/React__default.createElement("tr", cleanProps);
 };
 

package/es/components/DataTable/TableSelectAll.js

@@ -11,19 +11,21 @@ import InlineCheckbox from '../InlineCheckbox/InlineCheckbox.js';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var TableSelectAll = function TableSelectAll(_ref) {
-  var ariaLabel = _ref.ariaLabel,
-      checked = _ref.checked,
-      id = _ref.id,
-      indeterminate = _ref.indeterminate,
-      name = _ref.name,
-      onSelect = _ref.onSelect,
-      disabled = _ref.disabled,
-      className = _ref.className;
-  var prefix = usePrefix();
+const TableSelectAll = _ref => {
+  let {
+    ariaLabel,
+    checked,
+    id,
+    indeterminate,
+    name,
+    onSelect,
+    disabled,
+    className
+  } = _ref;
+  const prefix = usePrefix();
   return /*#__PURE__*/React__default.createElement("th", {
     scope: "col",
-    className: cx("".concat(prefix, "--table-column-checkbox"), className)
+    className: cx(`${prefix}--table-column-checkbox`, className)
   }, /*#__PURE__*/React__default.createElement(InlineCheckbox, {
     "aria-label": ariaLabel,
     checked: checked,

package/es/components/DataTable/TableSelectRow.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectSpread2 as _objectSpread2, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
@@ -13,33 +13,41 @@ import InlineCheckbox from '../InlineCheckbox/InlineCheckbox.js';
 import RadioButton from '../RadioButton/RadioButton.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var TableSelectRow = function TableSelectRow(_ref) {
-  var ariaLabel = _ref.ariaLabel,
-      checked = _ref.checked,
-      id = _ref.id,
-      name = _ref.name,
-      onSelect = _ref.onSelect,
-      onChange = _ref.onChange,
-      disabled = _ref.disabled,
-      radio = _ref.radio,
-      className = _ref.className;
-  var prefix = usePrefix();
-  var selectionInputProps = {
-    id: id,
-    name: name,
+const TableSelectRow = _ref => {
+  let {
+    ariaLabel,
+    checked,
+    id,
+    name,
+    onSelect,
+    onChange,
+    disabled,
+    radio,
+    className
+  } = _ref;
+  const prefix = usePrefix();
+  const selectionInputProps = {
+    id,
+    name,
     onClick: onSelect,
-    onChange: onChange,
-    checked: checked,
-    disabled: disabled
+    onChange,
+    checked,
+    disabled
   };
-  var InlineInputComponent = radio ? RadioButton : InlineCheckbox;
-  var tableSelectRowClasses = cx("".concat(prefix, "--table-column-checkbox"), _objectSpread2(_objectSpread2({}, className && _defineProperty({}, className, true)), {}, _defineProperty({}, "".concat(prefix, "--table-column-radio"), radio)));
+  const InlineInputComponent = radio ? RadioButton : InlineCheckbox;
+  const tableSelectRowClasses = cx(`${prefix}--table-column-checkbox`, { ...(className && {
+      [className]: true
+    }),
+    [`${prefix}--table-column-radio`]: radio
+  });
   return /*#__PURE__*/React__default.createElement("td", {
     className: tableSelectRowClasses
   }, /*#__PURE__*/React__default.createElement(InlineInputComponent, _extends({}, selectionInputProps, radio && {
     labelText: ariaLabel,
     hideLabel: true
-  }, !radio && _defineProperty({}, 'aria-label', ariaLabel))));
+  }, !radio && {
+    ['aria-label']: ariaLabel
+  })));
 };
 
 TableSelectRow.propTypes = {

package/es/components/DataTable/TableToolbar.js

@@ -5,30 +5,35 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 
-var _excluded = ["children", "size"];
-
-var TableToolbar = function TableToolbar(_ref) {
-  var _cx;
-
-  var children = _ref.children,
-      size = _ref.size,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-  var className = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--table-toolbar"), true), _defineProperty(_cx, "".concat(prefix, "--table-toolbar--").concat(size), size), _cx));
+const TableToolbar = _ref => {
+  let {
+    children,
+    size,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
+  const className = cx({
+    [`${prefix}--table-toolbar`]: true,
+    [`${prefix}--table-toolbar--${size}`]: size
+  });
   return /*#__PURE__*/React__default.createElement("section", _extends({}, rest, {
     className: className
   }), children);
 };
 
-TableToolbar.propTypes = _objectSpread2(_objectSpread2({}, AriaLabelPropType), {}, {
+TableToolbar.propTypes = {
+  /**
+   * Required props for the accessibility label of the TableToolbar
+   */
+  ...AriaLabelPropType,
+
   /**
    * Pass in the children that will be rendered inside the TableToolbar
    */
@@ -38,7 +43,7 @@ TableToolbar.propTypes = _objectSpread2(_objectSpread2({}, AriaLabelPropType), {
    * `lg` Change the row height of table
    */
   size: PropTypes.oneOf(['sm', 'lg'])
-});
+};
 TableToolbar.defaultProps = {
   'aria-label': 'data table toolbar'
 };

package/es/components/DataTable/TableToolbarAction.js

@@ -5,16 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import OverflowMenuItem from '../OverflowMenuItem/OverflowMenuItem.js';
 
-var _excluded = ["children"];
-var TableToolbarAction = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+const TableToolbarAction = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+    children,
+    ...rest
+  } = _ref;
   return /*#__PURE__*/React__default.createElement(OverflowMenuItem, _extends({
     ref: ref,
     itemText: children

package/es/components/DataTable/TableToolbarContent.js

@@ -7,12 +7,10 @@
 
 import wrapComponent from '../../tools/wrapComponent.js';
 
-var TableToolbarContent = wrapComponent({
+const TableToolbarContent = wrapComponent({
   name: 'TableToolbarContent',
   type: 'div',
-  className: function className(prefix) {
-    return "".concat(prefix, "--toolbar-content");
-  }
+  className: prefix => `${prefix}--toolbar-content`
 });
 
 export { TableToolbarContent as default };

package/es/components/DataTable/TableToolbarMenu.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { Settings } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
@@ -13,17 +13,16 @@ import React__default from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import OverflowMenu from '../OverflowMenu/index.js';
 
-var _excluded = ["className", "renderIcon", "iconDescription", "children"];
-
-var TableToolbarMenu = function TableToolbarMenu(_ref) {
-  var className = _ref.className,
-      renderIcon = _ref.renderIcon,
-      iconDescription = _ref.iconDescription,
-      children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-  var toolbarActionClasses = cx(className, "".concat(prefix, "--toolbar-action ").concat(prefix, "--overflow-menu"));
+const TableToolbarMenu = _ref => {
+  let {
+    className,
+    renderIcon,
+    iconDescription,
+    children,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
+  const toolbarActionClasses = cx(className, `${prefix}--toolbar-action ${prefix}--overflow-menu`);
   return /*#__PURE__*/React__default.createElement(OverflowMenu, _extends({
     "aria-label": iconDescription,
     renderIcon: renderIcon,

package/es/components/DataTable/TableToolbarSearch.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default, { useRef, useState, useMemo, useEffect } from 'react';
@@ -14,79 +14,68 @@ import '../Search/Search.Skeleton.js';
 import setupGetInstanceId from './tools/instanceId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _excluded = ["className", "searchContainerClass", "onChange", "onClear", "translateWithId", "placeholder", "labelText", "expanded", "defaultExpanded", "defaultValue", "disabled", "onExpand", "persistent", "id", "onBlur", "onFocus", "size"];
-var getInstanceId = setupGetInstanceId();
-var translationKeys = {
+const getInstanceId = setupGetInstanceId();
+const translationKeys = {
   'carbon.table.toolbar.search.label': 'Filter table',
   'carbon.table.toolbar.search.placeholder': 'Filter table'
 };
 
-var translateWithId = function translateWithId(id) {
+const translateWithId = id => {
   return translationKeys[id];
 };
 
-var TableToolbarSearch = function TableToolbarSearch(_ref) {
-  var _cx;
-
-  var className = _ref.className,
-      searchContainerClass = _ref.searchContainerClass,
-      onChangeProp = _ref.onChange,
-      onClear = _ref.onClear,
-      t = _ref.translateWithId,
-      placeholder = _ref.placeholder,
-      labelText = _ref.labelText,
-      expandedProp = _ref.expanded,
-      defaultExpanded = _ref.defaultExpanded,
-      defaultValue = _ref.defaultValue,
-      disabled = _ref.disabled,
-      onExpand = _ref.onExpand,
-      persistent = _ref.persistent,
-      id = _ref.id,
-      onBlur = _ref.onBlur,
-      onFocus = _ref.onFocus,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'lg' : _ref$size,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var _useRef = useRef(expandedProp !== undefined),
-      controlled = _useRef.current;
-
-  var _useState = useState(defaultExpanded || defaultValue),
-      _useState2 = _slicedToArray(_useState, 2),
-      expandedState = _useState2[0],
-      setExpandedState = _useState2[1];
-
-  var expanded = controlled ? expandedProp : expandedState;
-
-  var _useState3 = useState(defaultValue || ''),
-      _useState4 = _slicedToArray(_useState3, 2),
-      value = _useState4[0],
-      setValue = _useState4[1];
-
-  var uniqueId = useMemo(getInstanceId, []);
-
-  var _useState5 = useState(null),
-      _useState6 = _slicedToArray(_useState5, 2),
-      focusTarget = _useState6[0],
-      setFocusTarget = _useState6[1];
-
-  var prefix = usePrefix();
-  useEffect(function () {
+const TableToolbarSearch = _ref => {
+  let {
+    className,
+    searchContainerClass,
+    onChange: onChangeProp,
+    onClear,
+    translateWithId: t,
+    placeholder,
+    labelText,
+    expanded: expandedProp,
+    defaultExpanded,
+    defaultValue,
+    disabled,
+    onExpand,
+    persistent,
+    id,
+    onBlur,
+    onFocus,
+    size = 'lg',
+    ...rest
+  } = _ref;
+  const {
+    current: controlled
+  } = useRef(expandedProp !== undefined);
+  const [expandedState, setExpandedState] = useState(defaultExpanded || defaultValue);
+  const expanded = controlled ? expandedProp : expandedState;
+  const [value, setValue] = useState(defaultValue || '');
+  const uniqueId = useMemo(getInstanceId, []);
+  const [focusTarget, setFocusTarget] = useState(null);
+  const prefix = usePrefix();
+  useEffect(() => {
     if (focusTarget) {
       focusTarget.current.querySelector('input').focus();
       setFocusTarget(null);
     }
   }, [focusTarget]);
-  useEffect(function () {
+  useEffect(() => {
     if (defaultValue) {
       onChangeProp('', defaultValue);
     }
   }, //eslint-disable-next-line react-hooks/exhaustive-deps
   []);
-  var searchClasses = cx(className, (_cx = {}, _defineProperty(_cx, searchContainerClass, searchContainerClass), _defineProperty(_cx, "".concat(prefix, "--toolbar-search-container-active"), expanded), _defineProperty(_cx, "".concat(prefix, "--toolbar-search-container-disabled"), disabled), _defineProperty(_cx, "".concat(prefix, "--toolbar-search-container-expandable"), !persistent), _defineProperty(_cx, "".concat(prefix, "--toolbar-search-container-persistent"), persistent), _cx));
+  const searchClasses = cx(className, {
+    [searchContainerClass]: searchContainerClass,
+    [`${prefix}--toolbar-search-container-active`]: expanded,
+    [`${prefix}--toolbar-search-container-disabled`]: disabled,
+    [`${prefix}--toolbar-search-container-expandable`]: !persistent,
+    [`${prefix}--toolbar-search-container-persistent`]: persistent
+  });
 
-  var handleExpand = function handleExpand(event) {
-    var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !expanded;
+  const handleExpand = function (event) {
+    let value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !expanded;
 
     if (!disabled) {
       if (!controlled && !persistent) {
@@ -99,7 +88,7 @@ var TableToolbarSearch = function TableToolbarSearch(_ref) {
     }
   };
 
-  var onChange = function onChange(e) {
+  const onChange = e => {
     setValue(e.target.value);
 
     if (onChangeProp) {
@@ -107,13 +96,9 @@ var TableToolbarSearch = function TableToolbarSearch(_ref) {
     }
   };
 
-  var handleOnFocus = function handleOnFocus(event) {
-    return handleExpand(event, true);
-  };
+  const handleOnFocus = event => handleExpand(event, true);
 
-  var handleOnBlur = function handleOnBlur(event) {
-    return !value && handleExpand(event, false);
-  };
+  const handleOnBlur = event => !value && handleExpand(event, false);
 
   return /*#__PURE__*/React__default.createElement(Search, _extends({
     disabled: disabled,
@@ -124,12 +109,8 @@ var TableToolbarSearch = function TableToolbarSearch(_ref) {
     placeholder: placeholder || t('carbon.table.toolbar.search.placeholder'),
     onChange: onChange,
     onClear: onClear,
-    onFocus: onFocus ? function (event) {
-      return onFocus(event, handleExpand);
-    } : handleOnFocus,
-    onBlur: onBlur ? function (event) {
-      return onBlur(event, handleExpand);
-    } : handleOnBlur,
+    onFocus: onFocus ? event => onFocus(event, handleExpand) : handleOnFocus,
+    onBlur: onBlur ? event => onBlur(event, handleExpand) : handleOnBlur,
     size: size
   }, rest));
 };
@@ -233,9 +214,9 @@ TableToolbarSearch.propTypes = {
 };
 TableToolbarSearch.defaultProps = {
   tabIndex: '0',
-  translateWithId: translateWithId,
+  translateWithId,
   persistent: false,
-  onClear: function onClear() {}
+  onClear: () => {}
 };
 var TableToolbarSearch$1 = TableToolbarSearch;