@canonical/react-components 3.8.2 → 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/ActionButton/ActionButton.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { MouseEventHandler } from "react";
 import type { ButtonHTMLAttributes, ReactNode } from "react";
 import type { ButtonProps } from "../Button";
 import type { ClassName, PropsWithSpread } from "../../types";
@@ -33,6 +33,10 @@ export type Props = PropsWithSpread<{
      * Whether the button should be in the loading state.
      */
     loading?: boolean;
+    /**
+     * Function for handling button click event.
+     */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
     /**
      * Whether the button should be in the success state.
      */
@@ -45,5 +49,5 @@ export type Props = PropsWithSpread<{
  * [Button](?path=/docs/components-button--docs) in addition to those in the
  * props table:
  */
-declare const ActionButton: ({ appearance, children, className, disabled, inline, loading, success, ...buttonProps }: Props) => React.JSX.Element;
+declare const ActionButton: ({ appearance, children, className, onClick, disabled, inline, loading, success, ...buttonProps }: Props) => React.JSX.Element;
 export default ActionButton;

package/dist/components/ActionButton/ActionButton.js

@@ -30,6 +30,7 @@ const ActionButton = _ref => {
     appearance,
     children,
     className,
+    onClick,
     disabled = null,
     inline = false,
     loading = false,
@@ -108,8 +109,10 @@ const ActionButton = _ref => {
     "is-inline": inline
   });
   const showIcon = showLoader || showSuccess;
+  const isDisabled = disabled === null ? showLoader : disabled;
   const icon = showLoader && "spinner" || showSuccess && "success" || null;
   const iconLight = appearance === "positive" || appearance === "negative";
+  const onClickDisabled = e => e.preventDefault();
 
   // This component uses the base button element instead of the Button component
   // as the button requires a ref and Button would have to be updated to use
@@ -117,8 +120,9 @@ const ActionButton = _ref => {
   // typescript generics.
   return /*#__PURE__*/_react.default.createElement("button", _extends({
     className: buttonClasses,
-    disabled: disabled === null ? showLoader : disabled,
     ref: ref,
+    onClick: isDisabled ? onClickDisabled : onClick,
+    "aria-disabled": isDisabled || undefined,
     style: height && width ? {
       height: "".concat(height, "px"),
       width: "".concat(width, "px")

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/ActionButton/ActionButton.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { MouseEventHandler } from "react";
 import type { ButtonHTMLAttributes, ReactNode } from "react";
 import type { ButtonProps } from "../Button";
 import type { ClassName, PropsWithSpread } from "../../types";
@@ -33,6 +33,10 @@ export type Props = PropsWithSpread<{
      * Whether the button should be in the loading state.
      */
     loading?: boolean;
+    /**
+     * Function for handling button click event.
+     */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
     /**
      * Whether the button should be in the success state.
      */
@@ -45,5 +49,5 @@ export type Props = PropsWithSpread<{
  * [Button](?path=/docs/components-button--docs) in addition to those in the
  * props table:
  */
-declare const ActionButton: ({ appearance, children, className, disabled, inline, loading, success, ...buttonProps }: Props) => React.JSX.Element;
+declare const ActionButton: ({ appearance, children, className, onClick, disabled, inline, loading, success, ...buttonProps }: Props) => React.JSX.Element;
 export default ActionButton;

package/dist/esm/components/ActionButton/ActionButton.js

@@ -1,4 +1,4 @@
-var _excluded = ["appearance", "children", "className", "disabled", "inline", "loading", "success"];
+var _excluded = ["appearance", "children", "className", "onClick", "disabled", "inline", "loading", "success"];
 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; }
@@ -25,6 +25,7 @@ var ActionButton = _ref => {
       appearance,
       children,
       className,
+      onClick,
       disabled = null,
       inline = false,
       loading = false,
@@ -103,8 +104,10 @@ var ActionButton = _ref => {
     "is-inline": inline
   });
   var showIcon = showLoader || showSuccess;
+  var isDisabled = disabled === null ? showLoader : disabled;
   var icon = showLoader && "spinner" || showSuccess && "success" || null;
   var iconLight = appearance === "positive" || appearance === "negative";
+  var onClickDisabled = e => e.preventDefault();
 
   // This component uses the base button element instead of the Button component
   // as the button requires a ref and Button would have to be updated to use
@@ -112,8 +115,9 @@ var ActionButton = _ref => {
   // typescript generics.
   return /*#__PURE__*/React.createElement("button", _extends({
     className: buttonClasses,
-    disabled: disabled === null ? showLoader : disabled,
     ref: ref,
+    onClick: isDisabled ? onClickDisabled : onClick,
+    "aria-disabled": isDisabled || undefined,
     style: height && width ? {
       height: "".concat(height, "px"),
       width: "".concat(width, "px")

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.2",
+  "version": "3.9.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {
@@ -81,7 +81,7 @@
     "sass": "1.85.0",
     "sass-loader": "16.0.5",
     "semantic-release": "25.0.2",
-    "storybook": "8.5.6",
+    "storybook": "8.6.15",
     "strip-ansi": "7.1.0",
     "style-loader": "4.0.0",
     "stylelint": "16.14.1",
@@ -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"
   },