@canonical/react-components 3.8.3 → 3.9.0

package/README.md

@@ -1,4 +1,5 @@
 # React components for Vanilla Framework
+
 ![CI](https://github.com/canonical/react-components/workflows/CI/badge.svg?branch=main)
 
 This is a collection of components designed to be the way to consume [Vanilla Framework](http://vanillaframework.io) when using React. The library exposes both a CJS and an ESM build.
@@ -33,9 +34,7 @@ Please file any issues at [GitHub](https://github.com/canonical/react-components
 You might want to:
 
 - [View the source](https://github.com/canonical/react-components) on GitHub.
-- Read about [developing components](https://github.com/canonical/react-components/blob/main/HACKING.md).
-- Find out how to [publish to NPM](https://github.com/canonical/react-components/blob/main/PUBLISH-NPM-PACKAGE.md).
-- Know how to [publish the docs](https://github.com/canonical/react-components/blob/main/PUBLISHING-DOCS.md) to GitHub Pages.
+- Read about [developing components](HACKING.md).
 
 ## Developing locally using this repository
 

package/dist/components/ModularTable/ModularTable.d.ts

@@ -48,6 +48,10 @@ export type Props<D extends Record<string, unknown>> = PropsWithSpread<{
      * Whether the sort by needs to be reset after each data change.
      */
     autoResetSortBy?: boolean;
+    /**
+     * This will render between the header and the content.
+     */
+    subhead?: ReactNode;
 }, HTMLProps<HTMLTableElement>>;
 /**
 This is a [React](https://reactjs.org/) component to support many table use cases.
@@ -101,5 +105,5 @@ columns = {
 };
 ```
  */
-declare function ModularTable<D extends Record<string, unknown>>({ data, columns, emptyMsg, footer, sortable, getHeaderProps, getRowProps, getCellProps, getRowId, initialSortColumn, initialSortDirection, autoResetSortBy, ...props }: Props<D>): React.JSX.Element;
+declare function ModularTable<D extends Record<string, unknown>>({ data, columns, emptyMsg, footer, sortable, getHeaderProps, getRowProps, getCellProps, getRowId, initialSortColumn, initialSortDirection, autoResetSortBy, subhead, ...props }: Props<D>): React.JSX.Element;
 export default ModularTable;

package/dist/components/ModularTable/ModularTable.js

@@ -111,6 +111,7 @@ function ModularTable(_ref) {
     initialSortColumn,
     initialSortDirection,
     autoResetSortBy = false,
+    subhead,
     ...props
   } = _ref;
   const sortBy = (0, _react.useMemo)(() => initialSortColumn ? [{
@@ -162,7 +163,7 @@ function ModularTable(_ref) {
   // Only call this if we want it to be sortable too.
   sortable && isColumnSortable(column) ? column.getSortByToggleProps({
     title: undefined
-  }) : {}])), column.render("Header")))))), /*#__PURE__*/_react.default.createElement("tbody", getTableBodyProps(), generateRows(rows, prepareRow, getRowProps, getCellProps), showEmpty && /*#__PURE__*/_react.default.createElement(_TableRow.default, null, /*#__PURE__*/_react.default.createElement(_TableCell.default, {
+  }) : {}])), column.render("Header"))))), subhead), /*#__PURE__*/_react.default.createElement("tbody", getTableBodyProps(), generateRows(rows, prepareRow, getRowProps, getCellProps), showEmpty && /*#__PURE__*/_react.default.createElement(_TableRow.default, null, /*#__PURE__*/_react.default.createElement(_TableCell.default, {
     colSpan: columns.length
   }, emptyMsg)), footer && /*#__PURE__*/_react.default.createElement(_TableRow.default, null, /*#__PURE__*/_react.default.createElement(_TableCell.default, {
     colSpan: columns.length

package/dist/components/ModularTable/ModularTable.stories.d.ts

@@ -12,6 +12,7 @@ at the start of the group. In the following example sorting the columns will
 sort the group rows, then sort the sub-rows, but the group header always comes first.
  */
 export declare const Subrows: Story;
+export declare const Subheading: Story;
 /**
 Example below shows a basic `ModularTable` with `SummaryButton` component in the footer.
 ```

package/dist/components/ModularTable/ModularTable.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Subrows = exports.Sortable = exports.LoadMore = exports.Empty = exports.Default = void 0;
+exports.default = exports.Subrows = exports.Subheading = exports.Sortable = exports.LoadMore = exports.Empty = exports.Default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _SummaryButton = _interopRequireDefault(require("../SummaryButton"));
 var _ModularTable = _interopRequireDefault(require("./ModularTable"));
@@ -298,6 +298,101 @@ const Subrows = exports.Subrows = {
   }),
   name: "Subrows"
 };
+const Subheading = exports.Subheading = {
+  render: () => /*#__PURE__*/_react.default.createElement(_ModularTable.default, {
+    getCellProps: _ref9 => {
+      let {
+        value
+      } = _ref9;
+      return {
+        className: value === "1 minute" ? "p-heading--5" : ""
+      };
+    }
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    ,
+    columns: _react.default.useMemo(() => [{
+      Header: "ID",
+      accessor: "buildId",
+      Cell: _ref10 => {
+        let {
+          value
+        } = _ref10;
+        return /*#__PURE__*/_react.default.createElement("a", {
+          href: "#test"
+        }, "#", value);
+      }
+    }, {
+      Header: "Architecture",
+      accessor: "arch"
+    }, {
+      Header: "Build Duration",
+      accessor: "duration",
+      className: "u-hide--small"
+    }, {
+      Header: "Result",
+      accessor: "result",
+      Cell: _ref11 => {
+        let {
+          value
+        } = _ref11;
+        switch (value) {
+          case "released":
+            return "Released";
+          case "failed":
+            return "Failed";
+          default:
+            return "Unknown";
+        }
+      },
+      getCellIcon: _ref12 => {
+        let {
+          value
+        } = _ref12;
+        switch (value) {
+          case "released":
+            return _Icon.ICONS.success;
+          case "failed":
+            return _Icon.ICONS.error;
+          default:
+            return false;
+        }
+      }
+    }, {
+      Header: "Build Finished",
+      accessor: "finished",
+      className: "u-align-text--right"
+    }], [])
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    ,
+    data: _react.default.useMemo(() => [{
+      buildId: "5432",
+      arch: "arm64",
+      duration: "5 minutes",
+      result: "released",
+      finished: "10 minutes ago"
+    }, {
+      buildId: "1234",
+      arch: "armhf",
+      duration: "5 minutes",
+      result: "failed",
+      finished: "over 1 year ago"
+    }, {
+      buildId: "1111",
+      arch: "test64",
+      duration: "1 minute",
+      result: "other",
+      finished: "ages ago"
+    }], []),
+    subhead: /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("th", {
+      colSpan: 5,
+      className: "p-text--default",
+      style: {
+        textTransform: "none"
+      }
+    }, "Showing 3 of 3 results"))
+  }),
+  name: "Subheading"
+};
 
 /**
 Example below shows a basic `ModularTable` with `SummaryButton` component in the footer.

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

@@ -48,6 +48,10 @@ export type Props<D extends Record<string, unknown>> = PropsWithSpread<{
      * Whether the sort by needs to be reset after each data change.
      */
     autoResetSortBy?: boolean;
+    /**
+     * This will render between the header and the content.
+     */
+    subhead?: ReactNode;
 }, HTMLProps<HTMLTableElement>>;
 /**
 This is a [React](https://reactjs.org/) component to support many table use cases.
@@ -101,5 +105,5 @@ columns = {
 };
 ```
  */
-declare function ModularTable<D extends Record<string, unknown>>({ data, columns, emptyMsg, footer, sortable, getHeaderProps, getRowProps, getCellProps, getRowId, initialSortColumn, initialSortDirection, autoResetSortBy, ...props }: Props<D>): React.JSX.Element;
+declare function ModularTable<D extends Record<string, unknown>>({ data, columns, emptyMsg, footer, sortable, getHeaderProps, getRowProps, getCellProps, getRowId, initialSortColumn, initialSortDirection, autoResetSortBy, subhead, ...props }: Props<D>): React.JSX.Element;
 export default ModularTable;

package/dist/esm/components/ModularTable/ModularTable.js

@@ -1,4 +1,4 @@
-var _excluded = ["data", "columns", "emptyMsg", "footer", "sortable", "getHeaderProps", "getRowProps", "getCellProps", "getRowId", "initialSortColumn", "initialSortDirection", "autoResetSortBy"];
+var _excluded = ["data", "columns", "emptyMsg", "footer", "sortable", "getHeaderProps", "getRowProps", "getCellProps", "getRowId", "initialSortColumn", "initialSortDirection", "autoResetSortBy", "subhead"];
 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; }
@@ -107,7 +107,8 @@ function ModularTable(_ref) {
       getRowId,
       initialSortColumn,
       initialSortDirection,
-      autoResetSortBy = false
+      autoResetSortBy = false,
+      subhead
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   var sortBy = useMemo(() => initialSortColumn ? [{
@@ -157,7 +158,7 @@ function ModularTable(_ref) {
   // Only call this if we want it to be sortable too.
   sortable && isColumnSortable(column) ? column.getSortByToggleProps({
     title: undefined
-  }) : {}])), column.render("Header")))))), /*#__PURE__*/React.createElement("tbody", getTableBodyProps(), generateRows(rows, prepareRow, getRowProps, getCellProps), showEmpty && /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableCell, {
+  }) : {}])), column.render("Header"))))), subhead), /*#__PURE__*/React.createElement("tbody", getTableBodyProps(), generateRows(rows, prepareRow, getRowProps, getCellProps), showEmpty && /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableCell, {
     colSpan: columns.length
   }, emptyMsg)), footer && /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableCell, {
     colSpan: columns.length

package/dist/esm/components/ModularTable/ModularTable.stories.d.ts

@@ -12,6 +12,7 @@ at the start of the group. In the following example sorting the columns will
 sort the group rows, then sort the sub-rows, but the group header always comes first.
  */
 export declare const Subrows: Story;
+export declare const Subheading: Story;
 /**
 Example below shows a basic `ModularTable` with `SummaryButton` component in the footer.
 ```

package/dist/esm/components/ModularTable/ModularTable.stories.js

@@ -338,6 +338,117 @@ export var Subrows = {
   }),
   name: "Subrows"
 };
+export var Subheading = {
+  render: () => /*#__PURE__*/React.createElement(ModularTable, {
+    getCellProps: _ref9 => {
+      var {
+        value
+      } = _ref9;
+      return {
+        className: value === "1 minute" ? "p-heading--5" : ""
+      };
+    }
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    ,
+    columns: React.useMemo(() => [{
+      Header: "ID",
+      accessor: "buildId",
+      Cell: function (_Cell7) {
+        function Cell(_x7) {
+          return _Cell7.apply(this, arguments);
+        }
+        Cell.toString = function () {
+          return _Cell7.toString();
+        };
+        return Cell;
+      }(_ref10 => {
+        var {
+          value
+        } = _ref10;
+        return /*#__PURE__*/React.createElement("a", {
+          href: "#test"
+        }, "#", value);
+      })
+    }, {
+      Header: "Architecture",
+      accessor: "arch"
+    }, {
+      Header: "Build Duration",
+      accessor: "duration",
+      className: "u-hide--small"
+    }, {
+      Header: "Result",
+      accessor: "result",
+      Cell: function (_Cell8) {
+        function Cell(_x8) {
+          return _Cell8.apply(this, arguments);
+        }
+        Cell.toString = function () {
+          return _Cell8.toString();
+        };
+        return Cell;
+      }(_ref11 => {
+        var {
+          value
+        } = _ref11;
+        switch (value) {
+          case "released":
+            return "Released";
+          case "failed":
+            return "Failed";
+          default:
+            return "Unknown";
+        }
+      }),
+      getCellIcon: _ref12 => {
+        var {
+          value
+        } = _ref12;
+        switch (value) {
+          case "released":
+            return ICONS.success;
+          case "failed":
+            return ICONS.error;
+          default:
+            return false;
+        }
+      }
+    }, {
+      Header: "Build Finished",
+      accessor: "finished",
+      className: "u-align-text--right"
+    }], [])
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    ,
+    data: React.useMemo(() => [{
+      buildId: "5432",
+      arch: "arm64",
+      duration: "5 minutes",
+      result: "released",
+      finished: "10 minutes ago"
+    }, {
+      buildId: "1234",
+      arch: "armhf",
+      duration: "5 minutes",
+      result: "failed",
+      finished: "over 1 year ago"
+    }, {
+      buildId: "1111",
+      arch: "test64",
+      duration: "1 minute",
+      result: "other",
+      finished: "ages ago"
+    }], []),
+    subhead: /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
+      colSpan: 5,
+      className: "p-text--default",
+      style: {
+        textTransform: "none"
+      }
+    }, "Showing 3 of 3 results"))
+  }),
+  name: "Subheading"
+};
 
 /**
 Example below shows a basic `ModularTable` with `SummaryButton` component in the footer.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "3.8.3",
+  "version": "3.9.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {
@@ -93,7 +93,7 @@
     "tsc-alias": "1.8.10",
     "typescript": "5.7.3",
     "typescript-eslint": "8.24.1",
-    "vanilla-framework": "4.38.0",
+    "vanilla-framework": "4.39.0",
     "wait-on": "8.0.2",
     "webpack": "5.98.0"
   },