@canonical/react-components 0.23.0 → 0.24.0

package/README.md

@@ -6,7 +6,7 @@ This is a collection of components designed to be the way to consume [Vanilla Fr
 
 See the [component docs](https://canonical-web-and-design.github.io/react-components/) for usage instructions.
 
-![CI](https://github.com/canonical-web-and-design/react-components/workflows/CI/badge.svg?branch=master)
+![CI](https://github.com/canonical-web-and-design/react-components/workflows/CI/badge.svg?branch=main)
 ![Cypress chrome headless](https://github.com/canonical-web-and-design/react-components/workflows/Cypress%20chrome%20headless/badge.svg)
 
 ## Requirements
@@ -36,9 +36,9 @@ Please file any issues at [GitHub](https://github.com/canonical-web-and-design/r
 You might want to:
 
 - [View the source](https://github.com/canonical-web-and-design/react-components) on GitHub.
-- Read about [developing components](https://github.com/canonical-web-and-design/react-components/blob/master/HACKING.md).
-- Find out how to [publish to NPM](https://github.com/canonical-web-and-design/react-components/blob/master/PUBLISH-NPM-PACKAGE.md).
-- Know how to [publish the docs](https://github.com/canonical-web-and-design/react-components/blob/master/PUBLISHING-DOCS.md) to GitHub Pages.
+- Read about [developing components](https://github.com/canonical-web-and-design/react-components/blob/main/HACKING.md).
+- Find out how to [publish to NPM](https://github.com/canonical-web-and-design/react-components/blob/main/PUBLISH-NPM-PACKAGE.md).
+- Know how to [publish the docs](https://github.com/canonical-web-and-design/react-components/blob/main/PUBLISHING-DOCS.md) to GitHub Pages.
 
 ## Developing locally using this repository
 

package/dist/components/Input/Input.d.ts

@@ -13,7 +13,7 @@ export declare type Props = PropsWithSpread<{
      */
     className?: ClassName;
     /**
-     * The content for error validation.
+     * The content for error validation message. Controls the value of aria-invalid attribute.
      */
     error?: ReactNode;
     /**

package/dist/components/Input/Input.js

@@ -64,7 +64,8 @@ var Input = function Input(_ref) {
     className: (0, _classnames.default)("p-form-validation__input", className),
     id: id,
     ref: inputRef,
-    type: type
+    type: type,
+    "aria-invalid": !!error
   }, inputProps)));
 };
 

package/dist/components/Modal/Modal.js

@@ -38,6 +38,7 @@ var Modal = function Modal(_ref) {
   var focusableElementSelectors = 'a[href]:not([tabindex="-1"]), button:not([disabled]), textarea:not([disabled]):not([tabindex="-1"]), input:not([disabled]):not([tabindex="-1"]), select:not([disabled]):not([tabindex="-1"]), area[href]:not([tabindex="-1"]), iframe:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"]), [contentEditable=true]:not([tabindex="-1"])';
   var descriptionId = (0, _react.useRef)((0, _nanoid.nanoid)());
   var titleId = (0, _react.useRef)((0, _nanoid.nanoid)());
+  var shouldClose = (0, _react.useRef)(false);
   var modalRef = (0, _react.useRef)(null);
   var focusableModalElements = (0, _react.useRef)(null);
 
@@ -79,9 +80,31 @@ var Modal = function Modal(_ref) {
       document.removeEventListener("keydown", keyDown);
     };
   });
+
+  var handleContentOnMouseDown = function handleContentOnMouseDown() {
+    shouldClose.current = false;
+  };
+
+  var handleContentOnMouseUp = function handleContentOnMouseUp() {
+    shouldClose.current = false;
+  };
+
+  var handleOverlayOnMouseDown = function handleOverlayOnMouseDown(event) {
+    if (event.target === modalRef.current) {
+      shouldClose.current = true;
+    }
+  };
+
+  var handleOverlayOnClick = function handleOverlayOnClick() {
+    if (shouldClose.current) {
+      close();
+    }
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", _extends({
     className: (0, _classnames.default)("p-modal", className),
-    onClick: close
+    onClick: handleOverlayOnClick,
+    onMouseDown: handleOverlayOnMouseDown
   }, wrapperProps, {
     ref: modalRef
   }), /*#__PURE__*/_react.default.createElement("section", {
@@ -90,9 +113,8 @@ var Modal = function Modal(_ref) {
     "aria-modal": "true",
     "aria-labelledby": titleId.current,
     "aria-describedby": descriptionId.current,
-    onClick: function onClick(evt) {
-      return evt.stopPropagation();
-    }
+    onMouseDown: handleContentOnMouseDown,
+    onMouseUp: handleContentOnMouseUp
   }, !!title && /*#__PURE__*/_react.default.createElement("header", {
     className: "p-modal__header"
   }, /*#__PURE__*/_react.default.createElement("h2", {

package/dist/components/Notification/Notification.js

@@ -83,27 +83,27 @@ var Notification = function Notification(_ref) {
     className: "p-notification__content"
   }, title && /*#__PURE__*/_react.default.createElement("h5", {
     className: "p-notification__title",
-    "data-test": "notification-title"
+    "data-testid": "notification-title"
   }, title), inline && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "\u2002"), /*#__PURE__*/_react.default.createElement("p", {
     className: "p-notification__message"
   }, children), onDismiss && /*#__PURE__*/_react.default.createElement("button", {
     "aria-label": "Close notification",
     className: "p-notification__close",
-    "data-test": "notification-close-button",
+    "data-testid": "notification-close-button",
     onClick: onDismiss
   }, "Close")), showMeta && /*#__PURE__*/_react.default.createElement("div", {
     className: "p-notification__meta",
-    "data-test": "notification-meta"
+    "data-testid": "notification-meta"
   }, timestamp && /*#__PURE__*/_react.default.createElement("span", {
     className: "p-notification__timestamp",
-    "data-test": "notification-timestamp"
+    "data-testid": "notification-timestamp"
   }, timestamp), hasActions ? /*#__PURE__*/_react.default.createElement("div", {
     className: "p-notification__actions"
   }, actions.map(function (action, i) {
     return /*#__PURE__*/_react.default.createElement(_Button.default, {
       appearance: _Button.ButtonAppearance.LINK,
       className: "p-notification__action",
-      "data-test": "notification-action",
+      "data-testid": "notification-action",
       key: "".concat(action.label, "-").concat(i),
       onClick: action.onClick
     }, action.label);

package/dist/components/PasswordToggle/PasswordToggle.d.ts

@@ -87,5 +87,5 @@ declare const PasswordToggle: React.ForwardRefExoticComponent<{
      * Optional class(es) to pass to the wrapping Field component
      */
     wrapperClassName?: string;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "label" | "error" | "readOnly" | "required" | "className" | "id" | "help" | "success" | "caution" | "wrapperClassName"> & React.RefAttributes<HTMLInputElement>>;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "label" | "className" | "error" | "id" | "readOnly" | "required" | "help" | "success" | "caution" | "wrapperClassName"> & React.RefAttributes<HTMLInputElement>>;
 export default PasswordToggle;

package/dist/components/Tabs/Tabs.js

@@ -42,7 +42,7 @@ var Tabs = function Tabs(_ref) {
     }, /*#__PURE__*/_react.default.createElement(Component, _extends({
       "aria-selected": active,
       className: (0, _classnames.default)("p-tabs__link", className),
-      "data-test": "tab-link-".concat(label)
+      "data-testid": "tab-link-".concat(label)
     }, rest), label));
   })));
 };

package/dist/components/Tooltip/Tooltip.js

@@ -226,7 +226,7 @@ var Tooltip = function Tooltip(_ref) {
     }
   }, children), isOpen && /*#__PURE__*/_react.default.createElement(Portal, null, /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _classnames.default)("p-tooltip--".concat(adjustedPosition), "is-detached", tooltipClassName),
-    "data-test": "tooltip-portal",
+    "data-testid": "tooltip-portal",
     style: positionStyle
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "p-tooltip__message",

package/dist/index.d.ts

@@ -22,6 +22,7 @@ export { default as ModularTable } from "./components/ModularTable";
 export { default as Modal } from "./components/Modal";
 export { default as Notification, NotificationSeverity, } from "./components/Notification";
 export { default as Pagination } from "./components/Pagination";
+export { default as PasswordToggle } from "./components/PasswordToggle";
 export { default as RadioInput } from "./components/RadioInput";
 export { default as Row } from "./components/Row";
 export { default as SearchAndFilter } from "./components/SearchAndFilter";

package/dist/index.js

@@ -173,6 +173,12 @@ Object.defineProperty(exports, "Pagination", {
     return _Pagination.default;
   }
 });
+Object.defineProperty(exports, "PasswordToggle", {
+  enumerable: true,
+  get: function get() {
+    return _PasswordToggle.default;
+  }
+});
 Object.defineProperty(exports, "RadioInput", {
   enumerable: true,
   get: function get() {
@@ -318,6 +324,8 @@ var _Notification = _interopRequireWildcard(require("./components/Notification")
 
 var _Pagination = _interopRequireDefault(require("./components/Pagination"));
 
+var _PasswordToggle = _interopRequireDefault(require("./components/PasswordToggle"));
+
 var _RadioInput = _interopRequireDefault(require("./components/RadioInput"));
 
 var _Row = _interopRequireDefault(require("./components/Row"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "Huw Wilkins <huw.wilkins@canonical.com>",
@@ -22,47 +22,48 @@
   },
   "homepage": "/react-components/",
   "devDependencies": {
-    "@babel/cli": "7.14.8",
-    "@babel/preset-typescript": "7.14.5",
+    "@babel/cli": "7.16.0",
+    "@babel/preset-typescript": "7.16.0",
     "@percy/storybook": "3.3.1",
-    "@storybook/addon-a11y": "6.3.2",
-    "@storybook/addon-controls": "6.3.2",
-    "@storybook/addon-docs": "6.3.2",
-    "@storybook/addons": "6.3.2",
-    "@storybook/react": "6.3.2",
-    "@storybook/theming": "6.3.2",
-    "@testing-library/dom": "8.6.0",
+    "@storybook/addon-a11y": "6.3.12",
+    "@storybook/addon-controls": "6.3.12",
+    "@storybook/addon-docs": "6.3.12",
+    "@storybook/addons": "6.3.12",
+    "@storybook/react": "6.3.12",
+    "@storybook/theming": "6.3.12",
+    "@testing-library/cypress": "8.0.2",
+    "@testing-library/dom": "8.11.1",
     "@testing-library/react-hooks": "7.0.2",
-    "@testing-library/user-event": "13.2.1",
-    "@typescript-eslint/eslint-plugin": "4.28.1",
-    "@typescript-eslint/parser": "4.28.1",
-    "@wojtekmaj/enzyme-adapter-react-17": "0.6.3",
+    "@testing-library/user-event": "13.5.0",
+    "@typescript-eslint/eslint-plugin": "4.33.0",
+    "@typescript-eslint/parser": "4.33.0",
+    "@wojtekmaj/enzyme-adapter-react-17": "0.6.5",
     "babel-eslint": "10.1.0",
-    "babel-jest": "27.0.6",
-    "babel-loader": "8.2.2",
+    "babel-jest": "27.3.1",
+    "babel-loader": "8.2.3",
     "babel-plugin-module-resolver": "4.1.0",
     "babel-plugin-typescript-to-proptypes": "1.4.2",
-    "concurrently": "6.2.1",
+    "concurrently": "6.4.0",
     "css-loader": "5.2.7",
-    "cypress": "7.6.0",
+    "cypress": "7.7.0",
     "deepmerge": "4.2.2",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
     "enzyme-to-json": "3.6.2",
-    "eslint": "7.30.0",
+    "eslint": "7.32.0",
     "eslint-config-prettier": "8.3.0",
     "eslint-config-react-app": "6.0.0",
-    "eslint-plugin-cypress": "2.11.3",
-    "eslint-plugin-flowtype": "5.8.2",
-    "eslint-plugin-import": "2.23.4",
-    "eslint-plugin-jsx-a11y": "6.4.1",
+    "eslint-plugin-cypress": "2.12.1",
+    "eslint-plugin-flowtype": "5.10.0",
+    "eslint-plugin-import": "2.25.3",
+    "eslint-plugin-jsx-a11y": "6.5.1",
     "eslint-plugin-prettier": "3.4.1",
-    "eslint-plugin-react": "7.24.0",
-    "eslint-plugin-react-hooks": "4.2.0",
-    "jest": "27.0.6",
+    "eslint-plugin-react": "7.27.1",
+    "eslint-plugin-react-hooks": "4.3.0",
+    "jest": "27.3.1",
     "node-sass": "6.0.1",
-    "npm-package-json-lint": "5.1.0",
-    "prettier": "2.3.2",
+    "npm-package-json-lint": "5.4.2",
+    "prettier": "2.4.1",
     "react": "17.0.2",
     "react-docgen-typescript-loader": "3.7.2",
     "react-dom": "17.0.2",
@@ -73,21 +74,21 @@
     "stylelint-config-standard": "22.0.0",
     "stylelint-order": "4.1.0",
     "stylelint-prettier": "1.2.0",
-    "stylelint-scss": "3.19.0",
-    "ts-jest": "27.0.4",
-    "tsc-alias": "1.3.8",
-    "typescript": "4.3.5",
-    "vanilla-framework": "2.37.0",
+    "stylelint-scss": "3.21.0",
+    "ts-jest": "27.0.7",
+    "tsc-alias": "1.4.1",
+    "typescript": "4.5.2",
+    "vanilla-framework": "2.37.1",
     "wait-on": "5.3.0"
   },
   "dependencies": {
-    "@types/jest": "26.0.24",
-    "@types/node": "14.17.21",
-    "@types/react": "17.0.27",
-    "@types/react-dom": "17.0.9",
-    "@types/react-table": "7.7.6",
+    "@types/jest": "27.0.3",
+    "@types/node": "16.11.9",
+    "@types/react": "17.0.36",
+    "@types/react-dom": "17.0.11",
+    "@types/react-table": "7.7.8",
     "classnames": "2.3.1",
-    "nanoid": "3.1.29",
+    "nanoid": "3.1.30",
     "prop-types": "15.7.2",
     "react-table": "7.7.0",
     "react-useportal": "1.0.14"
@@ -95,7 +96,7 @@
   "peerDependencies": {
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "vanilla-framework": "2.37.0"
+    "vanilla-framework": "2.37.1"
   },
   "scripts": {
     "build": "rm -rf dist && yarn build-local; yarn build-declaration",
@@ -104,7 +105,7 @@
     "build-watch": "yarn run build-local --watch",
     "build-docs": "build-storybook -c .storybook -o docs",
     "clean": "rm -rf node_modules dist .out",
-    "docs": "start-storybook --port ${PORT}",
+    "docs": "start-storybook --port ${PORT:-9009}",
     "link-packages": "yarn install && yarn build && yarn link && cd node_modules/react && yarn link && cd ../react-dom && yarn link",
     "lint-js": "eslint src",
     "lint-style": "stylelint src",
@@ -117,7 +118,7 @@
     "test": "jest",
     "test-cypress": "concurrently 'yarn run docs' 'yarn run cypress:test' -k -s first",
     "unlink-packages": "yarn unlink && cd node_modules/react && yarn unlink && cd ../react-dom && yarn unlink",
-    "cypress:test": "wait-on http://localhost:${PORT} && cypress run --env port=${PORT}",
+    "cypress:test": "wait-on http://localhost:${PORT:-9009} && cypress run --env port=${PORT:-9009}",
     "cypress:run": "cypress run",
     "cypress:open": "cypress open"
   },