@sproutsocial/racine 7.1.0-beta-maurice.0 → 7.1.0

package/__flow__/utils/theme.js

@@ -310,7 +310,6 @@ const colors = {
     hubspot: NETWORKCOLORS.NETWORK_COLOR_HUBSPOT,
     microsoft_dynamics: NETWORKCOLORS.NETWORK_COLOR_MICROSOFT_DYNAMICS,
     yelp: NETWORKCOLORS.NETWORK_COLOR_YELP,
-
   },
 };
 

package/commonjs/Checkbox/index.js

@@ -71,7 +71,9 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
         _this$props$qa = _this$props.qa,
         qa = _this$props$qa === void 0 ? {} : _this$props$qa,
         tabIndex = _this$props.tabIndex,
-        rest = _objectWithoutPropertiesLoose(_this$props, ["id", "value", "name", "label", "checked", "disabled", "indeterminate", "onChange", "ariaLabel", "appearance", "qa", "tabIndex"]);
+        _this$props$inputProp = _this$props.inputProps,
+        inputProps = _this$props$inputProp === void 0 ? {} : _this$props$inputProp,
+        rest = _objectWithoutPropertiesLoose(_this$props, ["id", "value", "name", "label", "checked", "disabled", "indeterminate", "onChange", "ariaLabel", "appearance", "qa", "tabIndex", "inputProps"]);
 
     var isPill = appearance === "pill"; // TODO: Refactor pill checkboxes to use fewer elements for performance gains
 
@@ -98,7 +100,7 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
         "data-qa-checkbox-ischecked": indeterminate ? "indeterminate" : checked === true,
         "data-qa-checkbox-isdisabled": disabled === true,
         tabIndex: tabIndex
-      }, qa)), label && /*#__PURE__*/React.createElement(_styles.LabelText, {
+      }, qa, inputProps)), label && /*#__PURE__*/React.createElement(_styles.LabelText, {
         disabled: disabled
       }, label));
     }
@@ -126,13 +128,11 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
         "data-qa-checkbox-ischecked": indeterminate ? "indeterminate" : checked === true,
         "data-qa-checkbox-isdisabled": disabled === true,
         tabIndex: tabIndex
-      }, qa)), /*#__PURE__*/React.createElement(_styles.CheckboxBox, null, /*#__PURE__*/React.createElement(_styles.CheckIcon, {
+      }, qa, inputProps)), /*#__PURE__*/React.createElement(_styles.CheckboxBox, null, /*#__PURE__*/React.createElement(_styles.CheckIcon, {
         name: indeterminate ? "minus" : "check",
         size: "mini",
         fixedWidth: true
-      }))), label && !isPill && /*#__PURE__*/React.createElement(_styles.LabelText, {
-        disabled: disabled
-      }, label))
+      }))))
     );
   };
 

package/commonjs/Table/index.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = void 0;
+exports.default = exports.TableRow = exports.TableBody = exports.TableHead = exports.Table = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
@@ -21,78 +21,87 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
+var renderTableRow = function renderTableRow(row) {
+  return /*#__PURE__*/React.createElement("tbody", {
+    key: row.id,
+    "data-qa-table-row": ""
+  }, /*#__PURE__*/React.createElement("tr", null, row.cells.map(function (td) {
+    return /*#__PURE__*/React.createElement(_TableCell.default, _extends({}, td, {
+      key: td.id
+    }));
+  })));
+};
 /**
  * The table component assist in rendering tablular data.
  */
-var Table = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(Table, _React$Component);
-
-  function Table() {
-    var _this;
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-
-    _this.renderTableRow = function (row) {
-      return /*#__PURE__*/React.createElement("tbody", {
-        key: row.id,
-        "data-qa-table-row": ""
-      }, /*#__PURE__*/React.createElement("tr", null, row.cells.map(function (td) {
-        return /*#__PURE__*/React.createElement(_TableCell.default, _extends({
-          key: td.id
-        }, td));
-      })));
-    };
-
-    return _this;
+
+
+var Table = function Table(_ref) {
+  var _ref$head = _ref.head,
+      head = _ref$head === void 0 ? [] : _ref$head,
+      _ref$rows = _ref.rows,
+      rows = _ref$rows === void 0 ? [] : _ref$rows,
+      onSort = _ref.onSort,
+      sortId = _ref.sortId,
+      sortDirection = _ref.sortDirection,
+      rowRender = _ref.rowRender,
+      children = _ref.children,
+      rest = _objectWithoutPropertiesLoose(_ref, ["head", "rows", "onSort", "sortId", "sortDirection", "rowRender", "children"]);
+
+  if (children) {
+    return /*#__PURE__*/React.createElement(_styles.default, _extends({}, rest, {
+      "data-qa-table": ""
+    }), children);
   }
 
-  var _proto = Table.prototype;
-
-  _proto.render = function render() {
-    var _this2 = this;
-
-    var _this$props = this.props,
-        head = _this$props.head,
-        rows = _this$props.rows,
-        onSort = _this$props.onSort,
-        sortId = _this$props.sortId,
-        sortDirection = _this$props.sortDirection,
-        rowRender = _this$props.rowRender,
-        rest = _objectWithoutPropertiesLoose(_this$props, ["head", "rows", "onSort", "sortId", "sortDirection", "rowRender"]);
-
-    return (
-      /*#__PURE__*/
-      // $FlowIssue - upgrade v0.112.0
-      React.createElement(_styles.default, _extends({
-        "data-qa-table": ""
-      }, rest), head.length > 0 && /*#__PURE__*/React.createElement("thead", {
-        "data-qa-table-header": ""
-      }, /*#__PURE__*/React.createElement("tr", null, head.map(function (th) {
-        return /*#__PURE__*/React.createElement(_TableHeaderCell.default, _extends({}, th, {
-          key: th.id,
-          onSort: onSort,
-          sortId: sortId,
-          sortDirection: sortDirection
-        }));
-      }))), rows.map(function (row) {
-        return rowRender ? rowRender(row) : _this2.renderTableRow(row);
-      }))
-    );
-  };
-
-  return Table;
-}(React.Component);
-
-exports.default = Table;
-Table.defaultProps = {
-  head: [],
-  rows: []
-};
+  return /*#__PURE__*/React.createElement(_styles.default, _extends({}, rest, {
+    "data-qa-table": ""
+  }), head.length > 0 && /*#__PURE__*/React.createElement("thead", {
+    "data-qa-table-header": ""
+  }, /*#__PURE__*/React.createElement("tr", null, head.map(function (th) {
+    return /*#__PURE__*/React.createElement(_TableHeaderCell.default, _extends({}, th, {
+      key: th.id,
+      onSort: onSort,
+      sortId: sortId,
+      sortDirection: sortDirection
+    }));
+  }))), rows.map(function (row) {
+    return rowRender ? rowRender(row) : renderTableRow(row);
+  }));
+};
+
+exports.Table = Table;
+
+var TableHead = function TableHead(_ref2) {
+  var children = _ref2.children,
+      props = _objectWithoutPropertiesLoose(_ref2, ["children"]);
+
+  return /*#__PURE__*/React.createElement("thead", props, children);
+};
+
+exports.TableHead = TableHead;
+
+var TableBody = function TableBody(_ref3) {
+  var children = _ref3.children,
+      props = _objectWithoutPropertiesLoose(_ref3, ["children"]);
+
+  return /*#__PURE__*/React.createElement("tbody", props, children);
+};
+
+exports.TableBody = TableBody;
+
+var TableRow = function TableRow(_ref4) {
+  var children = _ref4.children,
+      props = _objectWithoutPropertiesLoose(_ref4, ["children"]);
+
+  return /*#__PURE__*/React.createElement("tr", props, children);
+};
+
+exports.TableRow = TableRow;
+Table.TableHead = TableHead;
+Table.TableBody = TableBody;
+Table.TableRow = TableRow;
+Table.HeaderCell = _TableHeaderCell.default;
+Table.Cell = _TableCell.default;
+var _default = Table;
+exports.default = _default;

package/commonjs/TableCell/index.js

@@ -40,15 +40,16 @@ var TableCell = /*#__PURE__*/function (_React$Component) {
         colSpan = _this$props.colSpan,
         width = _this$props.width,
         align = _this$props.align,
-        rest = _objectWithoutPropertiesLoose(_this$props, ["id", "content", "colSpan", "width", "align"]);
+        children = _this$props.children,
+        rest = _objectWithoutPropertiesLoose(_this$props, ["id", "content", "colSpan", "width", "align", "children"]);
 
-    return /*#__PURE__*/React.createElement(_styles.default, _extends({
+    return /*#__PURE__*/React.createElement(_styles.default, _extends({}, rest, {
       alignment: align || "left",
       key: id,
       colSpan: colSpan,
       width: width,
       "data-qa-table-cell": ""
-    }, rest), content);
+    }), children || content);
   };
 
   return TableCell;

package/commonjs/TableHeaderCell/index.js

@@ -60,39 +60,54 @@ var TableHeaderCell = /*#__PURE__*/function (_React$Component) {
       }));
     };
 
+    _this.handleClick = function (e) {
+      var _this$props = _this.props,
+          onClick = _this$props.onClick,
+          onSort = _this$props.onSort,
+          isSortable = _this$props.isSortable,
+          id = _this$props.id;
+
+      if (onClick) {
+        onClick(e);
+        return;
+      }
+
+      if (!isSortable || !onSort) return;
+      onSort(id);
+    };
+
     return _this;
   }
 
   var _proto = TableHeaderCell.prototype;
 
   _proto.render = function render() {
-    var _this$props = this.props,
-        id = _this$props.id,
-        content = _this$props.content,
-        colSpan = _this$props.colSpan,
-        width = _this$props.width,
-        align = _this$props.align,
-        isSortable = _this$props.isSortable,
-        shouldTruncate = _this$props.shouldTruncate,
-        onSort = _this$props.onSort,
-        sortId = _this$props.sortId,
-        sortDirection = _this$props.sortDirection,
-        rest = _objectWithoutPropertiesLoose(_this$props, ["id", "content", "colSpan", "width", "align", "isSortable", "shouldTruncate", "onSort", "sortId", "sortDirection"]);
-
-    return /*#__PURE__*/React.createElement(_styles.default, _extends({
+    var _this$props2 = this.props,
+        id = _this$props2.id,
+        content = _this$props2.content,
+        colSpan = _this$props2.colSpan,
+        width = _this$props2.width,
+        align = _this$props2.align,
+        isSortable = _this$props2.isSortable,
+        shouldTruncate = _this$props2.shouldTruncate,
+        onSort = _this$props2.onSort,
+        sortId = _this$props2.sortId,
+        sortDirection = _this$props2.sortDirection,
+        children = _this$props2.children,
+        onClick = _this$props2.onClick,
+        rest = _objectWithoutPropertiesLoose(_this$props2, ["id", "content", "colSpan", "width", "align", "isSortable", "shouldTruncate", "onSort", "sortId", "sortDirection", "children", "onClick"]);
+
+    return /*#__PURE__*/React.createElement(_styles.default, _extends({}, rest, {
       key: id,
       alignment: align || "left",
       sortable: isSortable,
       colSpan: colSpan,
       width: width,
-      onClick: isSortable && onSort ? function () {
-        return onSort(id);
-      } : undefined,
+      onClick: this.handleClick,
       "data-tableheadercell-sortable": isSortable,
       "data-qa-table-header-cell": "",
-      "data-qa-table-header-cell-sortdirection": sortDirection // $FlowIssue - upgrade v0.112.0
-
-    }, rest), content, isSortable && this.getSortIcon(id === sortId));
+      "data-qa-table-header-cell-sortdirection": sortDirection
+    }), children || content, isSortable && !children && this.getSortIcon(id === sortId));
   };
 
   return TableHeaderCell;

package/commonjs/TableRowAccordion/index.js

@@ -72,9 +72,9 @@ var TableRowAccordion = /*#__PURE__*/function (_React$Component) {
       "data-tablerowaccordion-summary": true,
       onClick: this.handleToggle
     }, cells.map(function (td) {
-      return /*#__PURE__*/React.createElement(_TableCell.default, _extends({
+      return /*#__PURE__*/React.createElement(_TableCell.default, _extends({}, td, {
         key: td.id
-      }, td));
+      }));
     }), /*#__PURE__*/React.createElement(_TableCell.default, {
       id: "tableRowAccordion_trigger",
       content: /*#__PURE__*/React.createElement(_styles.Trigger, {

package/lib/Checkbox/index.js

@@ -61,7 +61,9 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
         _this$props$qa = _this$props.qa,
         qa = _this$props$qa === void 0 ? {} : _this$props$qa,
         tabIndex = _this$props.tabIndex,
-        rest = _objectWithoutPropertiesLoose(_this$props, ["id", "value", "name", "label", "checked", "disabled", "indeterminate", "onChange", "ariaLabel", "appearance", "qa", "tabIndex"]);
+        _this$props$inputProp = _this$props.inputProps,
+        inputProps = _this$props$inputProp === void 0 ? {} : _this$props$inputProp,
+        rest = _objectWithoutPropertiesLoose(_this$props, ["id", "value", "name", "label", "checked", "disabled", "indeterminate", "onChange", "ariaLabel", "appearance", "qa", "tabIndex", "inputProps"]);
 
     var isPill = appearance === "pill"; // TODO: Refactor pill checkboxes to use fewer elements for performance gains
 
@@ -88,7 +90,7 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
         "data-qa-checkbox-ischecked": indeterminate ? "indeterminate" : checked === true,
         "data-qa-checkbox-isdisabled": disabled === true,
         tabIndex: tabIndex
-      }, qa)), label && /*#__PURE__*/React.createElement(LabelText, {
+      }, qa, inputProps)), label && /*#__PURE__*/React.createElement(LabelText, {
         disabled: disabled
       }, label));
     }
@@ -116,13 +118,11 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
         "data-qa-checkbox-ischecked": indeterminate ? "indeterminate" : checked === true,
         "data-qa-checkbox-isdisabled": disabled === true,
         tabIndex: tabIndex
-      }, qa)), /*#__PURE__*/React.createElement(CheckboxBox, null, /*#__PURE__*/React.createElement(CheckIcon, {
+      }, qa, inputProps)), /*#__PURE__*/React.createElement(CheckboxBox, null, /*#__PURE__*/React.createElement(CheckIcon, {
         name: indeterminate ? "minus" : "check",
         size: "mini",
         fixedWidth: true
-      }))), label && !isPill && /*#__PURE__*/React.createElement(LabelText, {
-        disabled: disabled
-      }, label))
+      }))))
     );
   };
 

package/lib/Table/index.js

@@ -2,83 +2,80 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
 import * as React from "react";
 import TableCell from "../TableCell";
 import TableHeaderCell from "../TableHeaderCell";
 import Container from "./styles";
 
+var renderTableRow = function renderTableRow(row) {
+  return /*#__PURE__*/React.createElement("tbody", {
+    key: row.id,
+    "data-qa-table-row": ""
+  }, /*#__PURE__*/React.createElement("tr", null, row.cells.map(function (td) {
+    return /*#__PURE__*/React.createElement(TableCell, _extends({}, td, {
+      key: td.id
+    }));
+  })));
+};
 /**
  * The table component assist in rendering tablular data.
  */
-var Table = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(Table, _React$Component);
-
-  function Table() {
-    var _this;
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
 
-    _this.renderTableRow = function (row) {
-      return /*#__PURE__*/React.createElement("tbody", {
-        key: row.id,
-        "data-qa-table-row": ""
-      }, /*#__PURE__*/React.createElement("tr", null, row.cells.map(function (td) {
-        return /*#__PURE__*/React.createElement(TableCell, _extends({
-          key: td.id
-        }, td));
-      })));
-    };
 
-    return _this;
+export var Table = function Table(_ref) {
+  var _ref$head = _ref.head,
+      head = _ref$head === void 0 ? [] : _ref$head,
+      _ref$rows = _ref.rows,
+      rows = _ref$rows === void 0 ? [] : _ref$rows,
+      onSort = _ref.onSort,
+      sortId = _ref.sortId,
+      sortDirection = _ref.sortDirection,
+      rowRender = _ref.rowRender,
+      children = _ref.children,
+      rest = _objectWithoutPropertiesLoose(_ref, ["head", "rows", "onSort", "sortId", "sortDirection", "rowRender", "children"]);
+
+  if (children) {
+    return /*#__PURE__*/React.createElement(Container, _extends({}, rest, {
+      "data-qa-table": ""
+    }), children);
   }
 
-  var _proto = Table.prototype;
-
-  _proto.render = function render() {
-    var _this2 = this;
-
-    var _this$props = this.props,
-        head = _this$props.head,
-        rows = _this$props.rows,
-        onSort = _this$props.onSort,
-        sortId = _this$props.sortId,
-        sortDirection = _this$props.sortDirection,
-        rowRender = _this$props.rowRender,
-        rest = _objectWithoutPropertiesLoose(_this$props, ["head", "rows", "onSort", "sortId", "sortDirection", "rowRender"]);
+  return /*#__PURE__*/React.createElement(Container, _extends({}, rest, {
+    "data-qa-table": ""
+  }), head.length > 0 && /*#__PURE__*/React.createElement("thead", {
+    "data-qa-table-header": ""
+  }, /*#__PURE__*/React.createElement("tr", null, head.map(function (th) {
+    return /*#__PURE__*/React.createElement(TableHeaderCell, _extends({}, th, {
+      key: th.id,
+      onSort: onSort,
+      sortId: sortId,
+      sortDirection: sortDirection
+    }));
+  }))), rows.map(function (row) {
+    return rowRender ? rowRender(row) : renderTableRow(row);
+  }));
+};
+export var TableHead = function TableHead(_ref2) {
+  var children = _ref2.children,
+      props = _objectWithoutPropertiesLoose(_ref2, ["children"]);
 
-    return (
-      /*#__PURE__*/
-      // $FlowIssue - upgrade v0.112.0
-      React.createElement(Container, _extends({
-        "data-qa-table": ""
-      }, rest), head.length > 0 && /*#__PURE__*/React.createElement("thead", {
-        "data-qa-table-header": ""
-      }, /*#__PURE__*/React.createElement("tr", null, head.map(function (th) {
-        return /*#__PURE__*/React.createElement(TableHeaderCell, _extends({}, th, {
-          key: th.id,
-          onSort: onSort,
-          sortId: sortId,
-          sortDirection: sortDirection
-        }));
-      }))), rows.map(function (row) {
-        return rowRender ? rowRender(row) : _this2.renderTableRow(row);
-      }))
-    );
-  };
+  return /*#__PURE__*/React.createElement("thead", props, children);
+};
+export var TableBody = function TableBody(_ref3) {
+  var children = _ref3.children,
+      props = _objectWithoutPropertiesLoose(_ref3, ["children"]);
 
-  return Table;
-}(React.Component);
+  return /*#__PURE__*/React.createElement("tbody", props, children);
+};
+export var TableRow = function TableRow(_ref4) {
+  var children = _ref4.children,
+      props = _objectWithoutPropertiesLoose(_ref4, ["children"]);
 
-Table.defaultProps = {
-  head: [],
-  rows: []
+  return /*#__PURE__*/React.createElement("tr", props, children);
 };
-export { Table as default };
+Table.TableHead = TableHead;
+Table.TableBody = TableBody;
+Table.TableRow = TableRow;
+Table.HeaderCell = TableHeaderCell;
+Table.Cell = TableCell;
+export default Table;

package/lib/TableCell/index.js

@@ -28,15 +28,16 @@ var TableCell = /*#__PURE__*/function (_React$Component) {
         colSpan = _this$props.colSpan,
         width = _this$props.width,
         align = _this$props.align,
-        rest = _objectWithoutPropertiesLoose(_this$props, ["id", "content", "colSpan", "width", "align"]);
+        children = _this$props.children,
+        rest = _objectWithoutPropertiesLoose(_this$props, ["id", "content", "colSpan", "width", "align", "children"]);
 
-    return /*#__PURE__*/React.createElement(Container, _extends({
+    return /*#__PURE__*/React.createElement(Container, _extends({}, rest, {
       alignment: align || "left",
       key: id,
       colSpan: colSpan,
       width: width,
       "data-qa-table-cell": ""
-    }, rest), content);
+    }), children || content);
   };
 
   return TableCell;

package/lib/TableHeaderCell/index.js

@@ -45,39 +45,54 @@ var TableHeaderCell = /*#__PURE__*/function (_React$Component) {
       }));
     };
 
+    _this.handleClick = function (e) {
+      var _this$props = _this.props,
+          onClick = _this$props.onClick,
+          onSort = _this$props.onSort,
+          isSortable = _this$props.isSortable,
+          id = _this$props.id;
+
+      if (onClick) {
+        onClick(e);
+        return;
+      }
+
+      if (!isSortable || !onSort) return;
+      onSort(id);
+    };
+
     return _this;
   }
 
   var _proto = TableHeaderCell.prototype;
 
   _proto.render = function render() {
-    var _this$props = this.props,
-        id = _this$props.id,
-        content = _this$props.content,
-        colSpan = _this$props.colSpan,
-        width = _this$props.width,
-        align = _this$props.align,
-        isSortable = _this$props.isSortable,
-        shouldTruncate = _this$props.shouldTruncate,
-        onSort = _this$props.onSort,
-        sortId = _this$props.sortId,
-        sortDirection = _this$props.sortDirection,
-        rest = _objectWithoutPropertiesLoose(_this$props, ["id", "content", "colSpan", "width", "align", "isSortable", "shouldTruncate", "onSort", "sortId", "sortDirection"]);
-
-    return /*#__PURE__*/React.createElement(Container, _extends({
+    var _this$props2 = this.props,
+        id = _this$props2.id,
+        content = _this$props2.content,
+        colSpan = _this$props2.colSpan,
+        width = _this$props2.width,
+        align = _this$props2.align,
+        isSortable = _this$props2.isSortable,
+        shouldTruncate = _this$props2.shouldTruncate,
+        onSort = _this$props2.onSort,
+        sortId = _this$props2.sortId,
+        sortDirection = _this$props2.sortDirection,
+        children = _this$props2.children,
+        onClick = _this$props2.onClick,
+        rest = _objectWithoutPropertiesLoose(_this$props2, ["id", "content", "colSpan", "width", "align", "isSortable", "shouldTruncate", "onSort", "sortId", "sortDirection", "children", "onClick"]);
+
+    return /*#__PURE__*/React.createElement(Container, _extends({}, rest, {
       key: id,
       alignment: align || "left",
       sortable: isSortable,
       colSpan: colSpan,
       width: width,
-      onClick: isSortable && onSort ? function () {
-        return onSort(id);
-      } : undefined,
+      onClick: this.handleClick,
       "data-tableheadercell-sortable": isSortable,
       "data-qa-table-header-cell": "",
-      "data-qa-table-header-cell-sortdirection": sortDirection // $FlowIssue - upgrade v0.112.0
-
-    }, rest), content, isSortable && this.getSortIcon(id === sortId));
+      "data-qa-table-header-cell-sortdirection": sortDirection
+    }), children || content, isSortable && !children && this.getSortIcon(id === sortId));
   };
 
   return TableHeaderCell;

package/lib/TableRowAccordion/index.js

@@ -58,9 +58,9 @@ var TableRowAccordion = /*#__PURE__*/function (_React$Component) {
       "data-tablerowaccordion-summary": true,
       onClick: this.handleToggle
     }, cells.map(function (td) {
-      return /*#__PURE__*/React.createElement(TableCell, _extends({
+      return /*#__PURE__*/React.createElement(TableCell, _extends({}, td, {
         key: td.id
-      }, td));
+      }));
     }), /*#__PURE__*/React.createElement(TableCell, {
       id: "tableRowAccordion_trigger",
       content: /*#__PURE__*/React.createElement(Trigger, {