@canonical/react-components 0.52.0 → 0.53.1

package/dist/components/Button/Button.js

@@ -43,19 +43,15 @@ const Button = _ref => {
   const classes = (0, _classnames.default)(appearance ? "p-button--".concat(appearance) : "p-button", {
     "has-icon": hasIcon,
     "is-dense": dense,
-    "is-disabled": Component !== "button" && disabled,
+    "is-disabled": disabled,
     "is-inline": inline,
     "is-small": small
   }, className);
   const onClickDisabled = e => e.preventDefault();
-  const disabledProp = Component === "button" ? {
-    disabled
-  } : {
-    "aria-disabled": disabled
-  };
   return /*#__PURE__*/_react.default.createElement(Component, _extends({
     className: classes,
-    onClick: disabled ? onClickDisabled : onClick
-  }, disabledProp, buttonProps), children);
+    onClick: disabled ? onClickDisabled : onClick,
+    "aria-disabled": disabled || undefined
+  }, buttonProps), children);
 };
 var _default = exports.default = Button;

package/dist/components/EmptyState/EmptyState.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.EmptyState = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
 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); }
@@ -16,10 +17,14 @@ const EmptyState = _ref => {
     ...props
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", _extends({
-    className: className
-  }, props), image, /*#__PURE__*/_react.default.createElement("h2", {
-    className: "p-heading--4"
-  }, title), children);
+    className: (0, _classnames.default)(["row", className])
+  }, props), /*#__PURE__*/_react.default.createElement("div", {
+    className: "u-align--right col-4 col-medium-2 col-small-1"
+  }, image), /*#__PURE__*/_react.default.createElement("div", {
+    className: "u-align--left col-8 col-medium-4 col-small-3"
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "p-heading--4 u-no-margin--bottom"
+  }, title), children));
 };
 exports.EmptyState = EmptyState;
 var _default = exports.default = EmptyState;

package/dist/components/Navigation/Navigation.js

@@ -45,7 +45,7 @@ const generateLogo = (logo, generateLink) => {
     }, icon !== null && icon !== void 0 ? icon : /*#__PURE__*/_react.default.createElement("img", {
       className: "p-navigation__logo-icon",
       src: src,
-      alt: ""
+      alt: "Logo"
     })), /*#__PURE__*/_react.default.createElement("span", {
       className: "p-navigation__logo-title"
     }, title));

package/dist/hooks/useOnClickOutside.d.ts

@@ -2,7 +2,7 @@ import { MutableRefObject, useRef } from "react";
 /**
  * Handle clicks outside an element.
  */
-export declare const useOnClickOutside: <E extends HTMLElement>(elementRef: MutableRefObject<E>, onClickOutside: () => void, { isEnabled }?: {
+export declare const useOnClickOutside: <E extends HTMLElement>(elementRef: ReturnType<typeof useRef<E | null>>, onClickOutside: () => void, { isEnabled }?: {
     isEnabled: boolean;
 }) => void;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.52.0",
+  "version": "0.53.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "Huw Wilkins <huw.wilkins@canonical.com>",
@@ -22,80 +22,80 @@
   },
   "homepage": "https://canonical.github.io/react-components",
   "devDependencies": {
-    "@babel/cli": "7.23.4",
-    "@babel/eslint-parser": "7.23.3",
-    "@babel/preset-typescript": "7.23.3",
-    "@percy/cli": "1.27.6",
-    "@percy/storybook": "5.0.1",
+    "@babel/cli": "7.24.5",
+    "@babel/eslint-parser": "7.24.5",
+    "@babel/preset-typescript": "7.24.1",
+    "@percy/cli": "1.28.5",
+    "@percy/storybook": "5.0.3",
     "@semantic-release/changelog": "6.0.3",
     "@semantic-release/git": "10.0.1",
-    "@storybook/addon-a11y": "7.6.7",
-    "@storybook/addon-essentials": "7.6.7",
-    "@storybook/addon-interactions": "7.6.7",
-    "@storybook/addon-links": "7.6.7",
-    "@storybook/addon-mdx-gfm": "7.6.7",
-    "@storybook/addon-onboarding": "1.0.10",
-    "@storybook/blocks": "7.6.7",
-    "@storybook/react": "7.6.7",
-    "@storybook/react-webpack5": "7.6.7",
+    "@storybook/addon-a11y": "7.6.19",
+    "@storybook/addon-essentials": "7.6.19",
+    "@storybook/addon-interactions": "7.6.19",
+    "@storybook/addon-links": "7.6.19",
+    "@storybook/addon-mdx-gfm": "7.6.19",
+    "@storybook/addon-onboarding": "1.0.11",
+    "@storybook/blocks": "7.6.19",
+    "@storybook/react": "7.6.19",
+    "@storybook/react-webpack5": "7.6.19",
     "@testing-library/cypress": "10.0.1",
-    "@testing-library/dom": "9.3.3",
-    "@testing-library/jest-dom": "6.2.1",
-    "@testing-library/react": "14.1.2",
+    "@testing-library/dom": "10.1.0",
+    "@testing-library/jest-dom": "6.4.5",
+    "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "14.5.2",
     "@types/lodash.isequal": "4",
-    "@typescript-eslint/eslint-plugin": "6.19.1",
-    "@typescript-eslint/parser": "6.19.1",
+    "@typescript-eslint/eslint-plugin": "7.8.0",
+    "@typescript-eslint/parser": "7.8.0",
     "babel-jest": "29.7.0",
     "babel-loader": "9.1.3",
-    "babel-plugin-module-resolver": "5.0.0",
+    "babel-plugin-module-resolver": "5.0.2",
     "babel-plugin-typescript-to-proptypes": "2.1.0",
     "concurrently": "8.2.2",
-    "css-loader": "6.8.1",
-    "cypress": "13.6.3",
+    "css-loader": "7.1.1",
+    "cypress": "13.9.0",
     "deepmerge": "4.3.1",
-    "eslint": "8.56.0",
+    "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-config-react-app": "7.0.1",
-    "eslint-plugin-cypress": "2.15.1",
+    "eslint-plugin-cypress": "3.2.0",
     "eslint-plugin-flowtype": "8.0.3",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-jsx-a11y": "6.8.0",
     "eslint-plugin-prettier": "5.1.3",
-    "eslint-plugin-react": "7.33.2",
-    "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-storybook": "0.6.15",
-    "eslint-plugin-testing-library": "6.2.0",
-    "formik": "2.4.5",
+    "eslint-plugin-react": "7.34.1",
+    "eslint-plugin-react-hooks": "4.6.2",
+    "eslint-plugin-storybook": "0.8.0",
+    "eslint-plugin-testing-library": "6.2.2",
+    "formik": "2.4.6",
     "jest": "29.7.0",
     "npm-package-json-lint": "7.1.0",
-    "prettier": "3.2.4",
-    "react": "18.2.0",
+    "prettier": "3.2.5",
+    "react": "18.3.1",
     "react-docgen-typescript-loader": "3.7.2",
-    "react-dom": "18.2.0",
-    "sass": "1.69.7",
-    "sass-loader": "14.0.0",
-    "semantic-release": "23.0.0",
-    "storybook": "7.6.7",
-    "style-loader": "3.3.3",
-    "stylelint": "16.2.0",
+    "react-dom": "18.3.1",
+    "sass": "1.77.0",
+    "sass-loader": "14.2.1",
+    "semantic-release": "23.0.8",
+    "storybook": "7.6.19",
+    "style-loader": "4.0.0",
+    "stylelint": "16.5.0",
     "stylelint-config-prettier": "9.0.5",
     "stylelint-config-recommended-scss": "14.0.0",
     "stylelint-order": "6.0.4",
     "stylelint-prettier": "5.0.0",
     "ts-jest": "29.1.2",
     "tsc-alias": "1.8.8",
-    "typescript": "5.3.3",
-    "vanilla-framework": "4.9.0",
+    "typescript": "5.4.5",
+    "vanilla-framework": "4.11.0",
     "wait-on": "7.2.0",
-    "webpack": "5.89.0"
+    "webpack": "5.91.0"
   },
   "dependencies": {
-    "@types/jest": "29.5.11",
-    "@types/node": "20.8.5",
-    "@types/react": "18.2.46",
-    "@types/react-dom": "18.2.18",
-    "@types/react-table": "7.7.19",
+    "@types/jest": "29.5.12",
+    "@types/node": "20.12.11",
+    "@types/react": "18.3.1",
+    "@types/react-dom": "18.3.0",
+    "@types/react-table": "7.7.20",
     "classnames": "2.5.1",
     "jest-environment-jsdom": "29.7.0",
     "lodash.isequal": "4.5.0",
@@ -104,10 +104,10 @@
     "react-useportal": "1.0.19"
   },
   "resolutions": {
-    "@types/react": "18.2.46",
-    "@types/react-dom": "18.2.18",
+    "@types/react": "18.3.1",
+    "@types/react-dom": "18.3.0",
     "postcss": "^8.3.11",
-    "jackspeak": "2.1.1"
+    "jackspeak": "2.3.6"
   },
   "peerDependencies": {
     "@types/react": "^17.0.2 || ^18.0.0",