@canonical/react-components 3.8.3 → 3.9.1

package/dist/components/Textarea/Textarea.js

@@ -7,10 +7,18 @@ exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _Field = _interopRequireDefault(require("../Field"));
+const _excluded = ["caution", "className", "error", "grow", "help", "id", "label", "labelClassName", "onKeyUp", "onControlEnter", "required", "stacked", "style", "success", "takeFocus", "wrapperClassName"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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; }
 /**
  * The props for the Textarea component.
  */
@@ -23,24 +31,24 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 const Textarea = _ref => {
   var _props$value;
   let {
-    caution,
-    className,
-    error,
-    grow = false,
-    help,
-    id,
-    label,
-    labelClassName,
-    onKeyUp,
-    onControlEnter,
-    required,
-    stacked,
-    style,
-    success,
-    takeFocus = false,
-    wrapperClassName,
-    ...props
-  } = _ref;
+      caution,
+      className,
+      error,
+      grow = false,
+      help,
+      id,
+      label,
+      labelClassName,
+      onKeyUp,
+      onControlEnter,
+      required,
+      stacked,
+      style,
+      success,
+      takeFocus = false,
+      wrapperClassName
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   const textareaRef = (0, _react.useRef)(null);
   const validationId = (0, _react.useId)();
   const helpId = (0, _react.useId)();
@@ -102,13 +110,12 @@ const Textarea = _ref => {
       }
     },
     ref: textareaRef,
-    style: grow && {
+    style: grow && _objectSpread({
       minHeight: "5rem",
       resize: "none",
       overflow: "hidden",
-      boxSizing: "border-box",
-      ...style
-    } || style,
+      boxSizing: "border-box"
+    }, style) || style,
     required: required
   }, props, {
     value: (_props$value = props.value) !== null && _props$value !== void 0 ? _props$value : innerValue

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

@@ -30,4 +30,9 @@ export declare const Overlay: {
         children: string;
     };
     render: (args: CardProps) => React.JSX.Element;
+    parameters: {
+        percy: {
+            waitForTimeout: number;
+        };
+    };
 };

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

@@ -44,5 +44,10 @@ export var Overlay = {
   }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
     size: 6,
     emptyLarge: 7
-  }, /*#__PURE__*/React.createElement(Card, args))))
+  }, /*#__PURE__*/React.createElement(Card, args)))),
+  parameters: {
+    percy: {
+      waitForTimeout: 1000 // Wait for 1 second before taking a snapshot to allow the image to load
+    }
+  }
 };

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/dist/esm/components/Strip/Strip.stories.js

@@ -75,7 +75,12 @@ export var ImageStrip = {
     src: "https://assets.ubuntu.com/v1/9c74eb2d-logo-canonical-white.svg",
     alt: "Placeholder"
   }))))),
-  name: "Image strip"
+  name: "Image strip",
+  parameters: {
+    percy: {
+      waitForTimeout: 1000 // Wait for 1 second before taking a snapshot to allow the image to load
+    }
+  }
 };
 export var BorderedStrip = {
   render: () => /*#__PURE__*/React.createElement(Strip, {

package/dist/external/useSSR.js

@@ -4,6 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.weAreServer = exports.useSSR = exports.Device = void 0;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 /**
  * This is a reference implementation of the useSSR hook from use-ssr: https://github.com/iamthesiz/use-ssr/blob/master/useSSR.ts
  * The license for the content in this file is goverened by the original project's license: https://github.com/iamthesiz/use-ssr/blob/master/license.md
@@ -31,10 +36,7 @@ const assign = function () {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];
   }
-  return args.reduce((acc, obj) => ({
-    ...acc,
-    ...obj
-  }), {});
+  return args.reduce((acc, obj) => _objectSpread(_objectSpread({}, acc), obj), {});
 };
 const values = obj => Object.keys(obj).map(key => obj[key]);
 const toArrayObject = () => assign((values(SSRObject), SSRObject));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "3.8.3",
+  "version": "3.9.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {
@@ -16,6 +16,9 @@
     "!dist/testing",
     "!dist/setupTests.js"
   ],
+  "sideEffects": [
+    "**/*.scss"
+  ],
   "repository": {
     "type": "git",
     "url": "git@github.com:canonical/react-components.git"
@@ -25,66 +28,66 @@
   },
   "homepage": "https://canonical.github.io/react-components",
   "devDependencies": {
-    "@babel/cli": "7.26.4",
-    "@babel/eslint-parser": "7.26.8",
-    "@babel/plugin-transform-class-properties": "7.25.9",
-    "@babel/preset-env": "7.26.9",
-    "@babel/preset-react": "7.26.3",
-    "@babel/preset-typescript": "7.26.0",
-    "@eslint/compat": "1.2.6",
-    "@eslint/eslintrc": "3.2.0",
-    "@eslint/js": "9.20.0",
-    "@percy/cli": "1.30.7",
-    "@percy/storybook": "6.0.3",
+    "@babel/cli": "7.28.6",
+    "@babel/eslint-parser": "7.28.6",
+    "@babel/plugin-transform-class-properties": "7.28.6",
+    "@babel/preset-env": "7.28.6",
+    "@babel/preset-react": "7.28.5",
+    "@babel/preset-typescript": "7.28.5",
+    "@eslint/compat": "1.4.1",
+    "@eslint/eslintrc": "3.3.3",
+    "@eslint/js": "9.39.2",
+    "@percy/cli": "1.31.8",
+    "@percy/storybook": "6.0.4",
     "@semantic-release/changelog": "6.0.3",
     "@semantic-release/git": "10.0.1",
-    "@storybook/addon-a11y": "8.5.6",
-    "@storybook/addon-essentials": "8.5.6",
-    "@storybook/addon-interactions": "8.5.6",
-    "@storybook/addon-links": "8.5.6",
-    "@storybook/addon-onboarding": "8.5.6",
-    "@storybook/addon-webpack5-compiler-babel": "3.0.5",
-    "@storybook/blocks": "8.5.6",
-    "@storybook/react": "8.5.6",
-    "@storybook/react-webpack5": "8.5.6",
-    "@testing-library/cypress": "10.0.3",
-    "@testing-library/dom": "10.4.0",
-    "@testing-library/jest-dom": "6.6.3",
-    "@testing-library/react": "16.2.0",
+    "@storybook/addon-a11y": "8.6.15",
+    "@storybook/addon-essentials": "8.6.14",
+    "@storybook/addon-interactions": "8.6.14",
+    "@storybook/addon-links": "8.6.15",
+    "@storybook/addon-onboarding": "8.6.15",
+    "@storybook/addon-webpack5-compiler-babel": "3.0.6",
+    "@storybook/blocks": "8.6.14",
+    "@storybook/react": "8.6.15",
+    "@storybook/react-webpack5": "8.6.15",
+    "@testing-library/cypress": "10.1.0",
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/react": "16.3.1",
     "@testing-library/user-event": "14.6.1",
     "babel-jest": "29.7.0",
     "babel-loader": "9.2.1",
     "babel-plugin-module-resolver": "5.0.2",
     "babel-plugin-typescript-to-proptypes": "2.1.0",
-    "concurrently": "9.1.2",
+    "concurrently": "9.2.1",
     "css-loader": "7.1.2",
-    "cypress": "14.0.3",
+    "cypress": "14.5.4",
     "deepmerge": "4.3.1",
-    "eslint": "9.20.1",
-    "eslint-config-prettier": "10.0.1",
-    "eslint-plugin-cypress": "4.1.0",
+    "eslint": "9.39.2",
+    "eslint-config-prettier": "10.1.8",
+    "eslint-plugin-cypress": "4.3.0",
     "eslint-plugin-flowtype": "8.0.3",
-    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-import": "2.32.0",
     "eslint-plugin-jsx-a11y": "6.10.2",
-    "eslint-plugin-prettier": "5.2.3",
-    "eslint-plugin-react": "7.37.4",
-    "eslint-plugin-react-hooks": "5.1.0",
-    "eslint-plugin-storybook": "0.11.3",
-    "eslint-plugin-testing-library": "7.1.1",
-    "formik": "2.4.6",
+    "eslint-plugin-prettier": "5.5.5",
+    "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-react-hooks": "5.2.0",
+    "eslint-plugin-storybook": "0.12.0",
+    "eslint-plugin-testing-library": "7.15.4",
+    "formik": "2.4.9",
     "jest": "29.7.0",
     "npm-package-json-lint": "8.0.0",
-    "prettier": "3.5.1",
-    "react": "19.0.0",
+    "prettier": "3.8.0",
+    "react": "19.2.3",
     "react-docgen-typescript-loader": "3.7.2",
-    "react-dom": "19.0.0",
-    "sass": "1.85.0",
-    "sass-loader": "16.0.5",
+    "react-dom": "19.2.3",
+    "sass": "1.97.2",
+    "sass-loader": "16.0.6",
     "semantic-release": "25.0.2",
     "storybook": "8.6.15",
-    "strip-ansi": "7.1.0",
+    "strip-ansi": "7.1.2",
     "style-loader": "4.0.0",
-    "stylelint": "16.14.1",
+    "stylelint": "16.26.1",
     "stylelint-config-prettier": "9.0.5",
     "stylelint-config-recommended-scss": "14.1.0",
     "stylelint-order": "6.0.4",
@@ -93,13 +96,13 @@
     "tsc-alias": "1.8.10",
     "typescript": "5.7.3",
     "typescript-eslint": "8.24.1",
-    "vanilla-framework": "4.38.0",
+    "vanilla-framework": "4.44.0",
     "wait-on": "8.0.2",
-    "webpack": "5.98.0"
+    "webpack": "5.105.0"
   },
   "dependencies": {
     "@types/jest": "29.5.14",
-    "@types/node": "20.17.19",
+    "@types/node": "20.19.30",
     "@types/react": "19.0.10",
     "@types/react-dom": "19.0.4",
     "@types/react-table": "7.7.20",