@canonical/react-components 3.12.0 → 3.12.1

package/dist/components/MainTable/MainTable.js

@@ -51,7 +51,7 @@ const generateHeaders = (currentSortKey, currentSortDirection, expanding, header
     return /*#__PURE__*/_react.default.createElement(_TableHeader.default, _extends({
       key: index,
       sort: sortDirection,
-      onClick: sortable && sortKey ? updateSort.bind(void 0, setSortKey, setSortDirection, sortKey, sortDirection) : undefined
+      onSort: sortable && sortKey ? updateSort.bind(void 0, setSortKey, setSortDirection, sortKey, sortDirection) : undefined
     }, props), content);
   });
   // When there is expanding content then provide an extra hidden header to

package/dist/components/TableHeader/TableHeader.d.ts

@@ -9,6 +9,8 @@ export type Props = PropsWithSpread<{
      * The direction of sorting, if applicable.
      */
     sort?: SortDirection;
+    /** Function to call when the sort button is clicked. */
+    onSort?: () => void;
 }, HTMLProps<HTMLTableHeaderCellElement>>;
-declare const TableHeader: ({ children, sort, ...props }: Props) => React.JSX.Element;
+declare const TableHeader: ({ children, sort, onSort, ...props }: Props) => React.JSX.Element;
 export default TableHeader;

package/dist/components/TableHeader/TableHeader.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-const _excluded = ["children", "sort"];
+const _excluded = ["children", "sort", "onSort"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -13,12 +13,17 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 const TableHeader = _ref => {
   let {
       children,
-      sort
+      sort,
+      onSort
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
+  const headerContents = () => sort && onSort ? /*#__PURE__*/_react.default.createElement("button", {
+    className: "p-table__sort-button",
+    onClick: onSort
+  }, children) : children;
   return /*#__PURE__*/_react.default.createElement("th", _extends({
     role: "columnheader",
     "aria-sort": sort
-  }, props), children);
+  }, props), headerContents());
 };
 var _default = exports.default = TableHeader;

package/dist/esm/components/MainTable/MainTable.js

@@ -42,7 +42,7 @@ var generateHeaders = (currentSortKey, currentSortDirection, expanding, headers,
     return /*#__PURE__*/React.createElement(TableHeader, _extends({
       key: index,
       sort: sortDirection,
-      onClick: sortable && sortKey ? updateSort.bind(this, setSortKey, setSortDirection, sortKey, sortDirection) : undefined
+      onSort: sortable && sortKey ? updateSort.bind(this, setSortKey, setSortDirection, sortKey, sortDirection) : undefined
     }, props), content);
   });
   // When there is expanding content then provide an extra hidden header to

package/dist/esm/components/TableHeader/TableHeader.d.ts

@@ -9,6 +9,8 @@ export type Props = PropsWithSpread<{
      * The direction of sorting, if applicable.
      */
     sort?: SortDirection;
+    /** Function to call when the sort button is clicked. */
+    onSort?: () => void;
 }, HTMLProps<HTMLTableHeaderCellElement>>;
-declare const TableHeader: ({ children, sort, ...props }: Props) => React.JSX.Element;
+declare const TableHeader: ({ children, sort, onSort, ...props }: Props) => React.JSX.Element;
 export default TableHeader;

package/dist/esm/components/TableHeader/TableHeader.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "sort"];
+var _excluded = ["children", "sort", "onSort"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -6,12 +6,17 @@ import React from "react";
 var TableHeader = _ref => {
   var {
       children,
-      sort
+      sort,
+      onSort
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
+  var headerContents = () => sort && onSort ? /*#__PURE__*/React.createElement("button", {
+    className: "p-table__sort-button",
+    onClick: onSort
+  }, children) : children;
   return /*#__PURE__*/React.createElement("th", _extends({
     role: "columnheader",
     "aria-sort": sort
-  }, props), children);
+  }, props), headerContents());
 };
 export default TableHeader;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "3.12.0",
+  "version": "3.12.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {