@canonical/react-components 0.34.0 → 0.35.0

package/dist/components/Field/Field.d.ts

@@ -28,6 +28,10 @@ export declare type Props = {
      * Help text to show below the field.
      */
     help?: ReactNode;
+    /**
+     * Optional class(es) to pass to the help text element.
+     */
+    helpClassName?: ReactNode;
     /**
      * An id to give to the help element.
      */
@@ -36,6 +40,10 @@ export declare type Props = {
      * Whether the component is wrapping a select element.
      */
     isSelect?: boolean;
+    /**
+     * Whether the component is wrapping a checkbox or radio element.
+     */
+    isTickElement?: boolean;
     /**
      * The label for the field.
      */
@@ -65,5 +73,5 @@ export declare type Props = {
      */
     validationId?: string;
 };
-declare const Field: ({ caution, children, className, error, forId, help, helpId, isSelect, label, labelClassName, labelFirst, required, stacked, success, validationId, }: Props) => JSX.Element;
+declare const Field: ({ caution, children, className, error, forId, help, helpClassName, helpId, isSelect, isTickElement, label, labelClassName, labelFirst, required, stacked, success, validationId, }: Props) => JSX.Element;
 export default Field;

package/dist/components/Field/Field.js

@@ -15,11 +15,17 @@ var _Col = _interopRequireDefault(require("../Col"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var generateHelp = function generateHelp(help, helpId) {
-  return help && /*#__PURE__*/_react.default.createElement("p", {
-    className: "p-form-help-text",
+var generateHelpText = function generateHelpText(_ref) {
+  var help = _ref.help,
+      helpId = _ref.helpId,
+      helpClassName = _ref.helpClassName,
+      isTickElement = _ref.isTickElement;
+  return help ? /*#__PURE__*/_react.default.createElement("p", {
+    className: (0, _classnames.default)("p-form-help-text", helpClassName, {
+      "is-tick-element": isTickElement
+    }),
     id: helpId
-  }, help);
+  }, help) : null;
 };
 
 var generateError = function generateError(error, caution, success, validationId) {
@@ -54,33 +60,65 @@ var generateLabel = function generateLabel(forId, required, label, labelClassNam
   return labelNode;
 };
 
-var generateContent = function generateContent(isSelect, children, labelFirst, labelNode, help, error, caution, success, validationId, helpId) {
+var generateContent = function generateContent(_ref2) {
+  var isSelect = _ref2.isSelect,
+      children = _ref2.children,
+      labelFirst = _ref2.labelFirst,
+      labelNode = _ref2.labelNode,
+      help = _ref2.help,
+      helpClassName = _ref2.helpClassName,
+      error = _ref2.error,
+      caution = _ref2.caution,
+      success = _ref2.success,
+      validationId = _ref2.validationId,
+      helpId = _ref2.helpId,
+      isTickElement = _ref2.isTickElement;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "p-form__control u-clearfix"
   }, isSelect ? /*#__PURE__*/_react.default.createElement("div", {
     className: "p-form-validation__select-wrapper"
-  }, children) : children, !labelFirst && labelNode, generateHelp(help, helpId), generateError(error, caution, success, validationId));
+  }, children) : children, !labelFirst && labelNode, generateHelpText({
+    helpId: helpId,
+    help: help,
+    helpClassName: helpClassName,
+    isTickElement: isTickElement
+  }), generateError(error, caution, success, validationId));
 };
 
-var Field = function Field(_ref) {
-  var caution = _ref.caution,
-      children = _ref.children,
-      className = _ref.className,
-      error = _ref.error,
-      forId = _ref.forId,
-      help = _ref.help,
-      helpId = _ref.helpId,
-      isSelect = _ref.isSelect,
-      label = _ref.label,
-      labelClassName = _ref.labelClassName,
-      _ref$labelFirst = _ref.labelFirst,
-      labelFirst = _ref$labelFirst === void 0 ? true : _ref$labelFirst,
-      required = _ref.required,
-      stacked = _ref.stacked,
-      success = _ref.success,
-      validationId = _ref.validationId;
+var Field = function Field(_ref3) {
+  var caution = _ref3.caution,
+      children = _ref3.children,
+      className = _ref3.className,
+      error = _ref3.error,
+      forId = _ref3.forId,
+      help = _ref3.help,
+      helpClassName = _ref3.helpClassName,
+      helpId = _ref3.helpId,
+      isSelect = _ref3.isSelect,
+      isTickElement = _ref3.isTickElement,
+      label = _ref3.label,
+      labelClassName = _ref3.labelClassName,
+      _ref3$labelFirst = _ref3.labelFirst,
+      labelFirst = _ref3$labelFirst === void 0 ? true : _ref3$labelFirst,
+      required = _ref3.required,
+      stacked = _ref3.stacked,
+      success = _ref3.success,
+      validationId = _ref3.validationId;
   var labelNode = generateLabel(forId, required, label, labelClassName, stacked);
-  var content = generateContent(isSelect, children, labelFirst, labelNode, help, error, caution, success, validationId, helpId);
+  var content = generateContent({
+    isSelect: isSelect,
+    isTickElement: isTickElement,
+    children: children,
+    labelFirst: labelFirst,
+    labelNode: labelNode,
+    help: help,
+    helpClassName: helpClassName,
+    error: error,
+    caution: caution,
+    success: success,
+    validationId: validationId,
+    helpId: helpId
+  });
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)("p-form__group", "p-form-validation", className, {
       "is-error": error,

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

@@ -20,6 +20,10 @@ export declare type Props = PropsWithSpread<{
      * Help text to show below the field.
      */
     help?: ReactNode;
+    /**
+     * Optional class(es) to pass to the help text element.
+     */
+    helpClassName?: ReactNode;
     /**
      * The id of the input.
      */
@@ -53,5 +57,5 @@ export declare type Props = PropsWithSpread<{
      */
     wrapperClassName?: string;
 }, InputHTMLAttributes<HTMLInputElement>>;
-declare const Input: ({ caution, className, error, help, id, label, labelClassName, required, stacked, success, takeFocus, type, wrapperClassName, ...inputProps }: Props) => JSX.Element;
+declare const Input: ({ caution, className, error, help, helpClassName, id, label, labelClassName, required, stacked, success, takeFocus, type, wrapperClassName, ...inputProps }: Props) => JSX.Element;
 export default Input;

package/dist/components/Input/Input.js

@@ -19,7 +19,7 @@ var _RadioInput = _interopRequireDefault(require("../RadioInput"));
 
 var _hooks = require("../../hooks");
 
-var _excluded = ["caution", "className", "error", "help", "id", "label", "labelClassName", "required", "stacked", "success", "takeFocus", "type", "wrapperClassName"];
+var _excluded = ["caution", "className", "error", "help", "helpClassName", "id", "label", "labelClassName", "required", "stacked", "success", "takeFocus", "type", "wrapperClassName"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -44,6 +44,7 @@ var Input = function Input(_ref) {
       className = _ref.className,
       error = _ref.error,
       help = _ref.help,
+      helpClassName = _ref.helpClassName,
       id = _ref.id,
       label = _ref.label,
       labelClassName = _ref.labelClassName,
@@ -101,7 +102,9 @@ var Input = function Input(_ref) {
     error: error,
     forId: id,
     help: help,
+    helpClassName: helpClassName,
     helpId: helpId,
+    isTickElement: type === "checkbox" || type === "radio",
     label: fieldLabel,
     labelClassName: labelClassName,
     required: required,

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 import type { WindowFitment } from "../../hooks";
-import type { ClassName } from "../../types";
+import type { ClassName, ValueOf } from "../../types";
 export declare type CSSPosition = "static" | "absolute" | "fixed" | "relative" | "sticky" | "initial" | "inherit";
 export declare type PositionStyle = {
     left: number;
@@ -8,7 +8,17 @@ export declare type PositionStyle = {
     position: CSSPosition;
     top: number;
 };
-export declare type Position = "btm-center" | "btm-left" | "btm-right" | "left" | "right" | "top-center" | "top-left" | "top-right";
+export declare const position: {
+    readonly btmCenter: "btm-center";
+    readonly btmLeft: "btm-left";
+    readonly btmRight: "btm-right";
+    readonly left: "left";
+    readonly right: "right";
+    readonly topCenter: "top-center";
+    readonly topLeft: "top-left";
+    readonly topRight: "top-right";
+};
+export declare type Position = ValueOf<typeof position>;
 export declare type Props = {
     /**
      * Whether the tooltip should adjust to fit in the screen.

package/dist/components/Tooltip/Tooltip.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.adjustForWindow = void 0;
+exports.position = exports.default = exports.adjustForWindow = void 0;
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -33,6 +33,18 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+var position = {
+  btmCenter: "btm-center",
+  btmLeft: "btm-left",
+  btmRight: "btm-right",
+  left: "left",
+  right: "right",
+  topCenter: "top-center",
+  topLeft: "top-left",
+  topRight: "top-right"
+};
+exports.position = position;
+
 var getPositionStyle = function getPositionStyle(pos, wrapperNode) {
   if (!wrapperNode) {
     return null;
@@ -187,6 +199,7 @@ var Tooltip = function Tooltip(_ref) {
       isOpen = _usePortal.isOpen,
       Portal = _usePortal.Portal;
 
+  var tooltipId = (0, _hooks.useId)();
   (0, _react.useEffect)(function () {
     if (isOpen && !followMouse && wrapperRef.current) {
       // Position the tooltip when it becomes visible.
@@ -210,11 +223,49 @@ var Tooltip = function Tooltip(_ref) {
   (0, _hooks.useListener)(wrapperRef.current, mouseHandler, "mousemove", true, followMouse && isOpen); // Handle adjusting the position of the tooltip so that it remains on screen.
 
   (0, _hooks.useWindowFitment)(messageRef.current, wrapperRef.current, onUpdateWindowFitment, 20, isOpen, autoAdjust && followMouse);
+  var handleKeyPress = (0, _react.useCallback)(function (event) {
+    if (event.key === "Escape") {
+      closePortal();
+    }
+  }, [closePortal]);
+  (0, _react.useEffect)(function () {
+    window.addEventListener("keypress", handleKeyPress);
+    return function () {
+      window.removeEventListener("keypress", handleKeyPress);
+    };
+  }, [handleKeyPress]);
+
+  var handleBlur = function handleBlur(e) {
+    var _wrapperRef$current, _messageRef$current;
+
+    // do not close if the focus is within the tooltip wrapper
+    if (wrapperRef !== null && wrapperRef !== void 0 && (_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.contains(document.activeElement)) {
+      return;
+    }
+
+    if (e.relatedTarget ? !((_messageRef$current = messageRef.current) !== null && _messageRef$current !== void 0 && _messageRef$current.contains(e.relatedTarget)) : e.target !== messageRef.current) {
+      closePortal();
+    }
+  };
+
+  var handleClick = function handleClick(e) {
+    var _messageRef$current2;
+
+    // ignore clicks within the tooltip message
+    if ((_messageRef$current2 = messageRef.current) !== null && _messageRef$current2 !== void 0 && _messageRef$current2.contains(e.target)) {
+      return;
+    }
+
+    e.target.focus();
+    openPortal();
+  };
+
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, message ? /*#__PURE__*/_react.default.createElement("span", {
     className: className,
-    onBlur: closePortal,
+    onBlur: handleBlur,
+    onClick: handleClick,
     onFocus: openPortal,
-    onMouseOut: closePortal,
+    onMouseOut: handleBlur,
     onMouseOver: openPortal
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: positionElementClassName,
@@ -222,13 +273,21 @@ var Tooltip = function Tooltip(_ref) {
     style: {
       display: "inline-block"
     }
-  }, children), isOpen && /*#__PURE__*/_react.default.createElement(Portal, null, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)("p-tooltip--".concat(adjustedPosition), "is-detached", tooltipClassName),
+  }, _react.default.Children.map(children, function (child) {
+    return child && /*#__PURE__*/_react.default.isValidElement(child) ? /*#__PURE__*/_react.default.cloneElement(child, {
+      "aria-describedby": tooltipId
+    }) : child;
+  })), /*#__PURE__*/_react.default.createElement(Portal, null, /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)("p-tooltip--".concat(adjustedPosition), "is-detached", {
+      "u-off-screen": !isOpen
+    }, tooltipClassName),
     "data-testid": "tooltip-portal",
     style: positionStyle
   }, /*#__PURE__*/_react.default.createElement("span", {
+    role: "tooltip",
     className: "p-tooltip__message",
-    ref: messageRef
+    ref: messageRef,
+    id: tooltipId
   }, message)))) : /*#__PURE__*/_react.default.createElement("span", {
     className: className
   }, children));

package/dist/components/Tooltip/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./Tooltip";
+export { default, position } from "./Tooltip";
 export type { Props as TooltipProps } from "./Tooltip";

package/dist/components/Tooltip/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +11,15 @@ Object.defineProperty(exports, "default", {
     return _Tooltip.default;
   }
 });
+Object.defineProperty(exports, "position", {
+  enumerable: true,
+  get: function get() {
+    return _Tooltip.position;
+  }
+});
+
+var _Tooltip = _interopRequireWildcard(require("./Tooltip"));
 
-var _Tooltip = _interopRequireDefault(require("./Tooltip"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.34.0",
+  "version": "0.35.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "Huw Wilkins <huw.wilkins@canonical.com>",
@@ -25,35 +25,35 @@
     "@babel/cli": "7.17.6",
     "@babel/eslint-parser": "7.17.0",
     "@babel/preset-typescript": "7.16.7",
-    "@percy/cli": "1.0.0-beta.76",
-    "@percy/storybook": "4.1.0",
-    "@storybook/addon-a11y": "6.4.19",
-    "@storybook/addon-controls": "6.4.19",
-    "@storybook/addon-docs": "6.4.19",
-    "@storybook/addons": "6.4.19",
-    "@storybook/react": "6.4.19",
-    "@storybook/theming": "6.4.19",
+    "@percy/cli": "1.0.5",
+    "@percy/storybook": "4.2.0",
+    "@storybook/addon-a11y": "6.4.20",
+    "@storybook/addon-controls": "6.4.20",
+    "@storybook/addon-docs": "6.4.20",
+    "@storybook/addons": "6.4.20",
+    "@storybook/react": "6.4.20",
+    "@storybook/theming": "6.4.20",
     "@testing-library/cypress": "8.0.2",
-    "@testing-library/dom": "8.11.3",
-    "@testing-library/jest-dom": "5.16.2",
-    "@testing-library/react": "12.1.3",
+    "@testing-library/dom": "8.12.0",
+    "@testing-library/jest-dom": "5.16.3",
+    "@testing-library/react": "12.1.4",
     "@testing-library/react-hooks": "7.0.2",
     "@testing-library/user-event": "13.5.0",
-    "@typescript-eslint/eslint-plugin": "5.13.0",
-    "@typescript-eslint/parser": "5.13.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "0.6.6",
+    "@typescript-eslint/eslint-plugin": "5.18.0",
+    "@typescript-eslint/parser": "5.18.0",
+    "@wojtekmaj/enzyme-adapter-react-17": "0.6.7",
     "babel-jest": "27.5.1",
-    "babel-loader": "8.2.3",
+    "babel-loader": "8.2.4",
     "babel-plugin-module-resolver": "4.1.0",
     "babel-plugin-typescript-to-proptypes": "2.0.0",
-    "concurrently": "7.0.0",
+    "concurrently": "7.1.0",
     "css-loader": "5.2.7",
-    "cypress": "9.5.1",
+    "cypress": "9.5.3",
     "deepmerge": "4.2.2",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
     "enzyme-to-json": "3.6.2",
-    "eslint": "8.10.0",
+    "eslint": "8.12.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-config-react-app": "7.0.0",
     "eslint-plugin-cypress": "2.12.1",
@@ -61,37 +61,37 @@
     "eslint-plugin-import": "2.25.4",
     "eslint-plugin-jsx-a11y": "6.5.1",
     "eslint-plugin-prettier": "4.0.0",
-    "eslint-plugin-react": "7.29.2",
-    "eslint-plugin-react-hooks": "4.3.0",
-    "eslint-plugin-testing-library": "5.0.5",
+    "eslint-plugin-react": "7.29.4",
+    "eslint-plugin-react-hooks": "4.4.0",
+    "eslint-plugin-testing-library": "5.2.1",
     "jest": "27.5.1",
     "npm-package-json-lint": "5.4.2",
-    "prettier": "2.5.1",
+    "prettier": "2.6.2",
     "react": "17.0.2",
     "react-docgen-typescript-loader": "3.7.2",
     "react-dom": "17.0.2",
-    "sass": "1.49.9",
+    "sass": "1.49.11",
     "sass-loader": "10.2.1",
     "style-loader": "2.0.0",
-    "stylelint": "14.5.3",
+    "stylelint": "14.6.1",
     "stylelint-config-prettier": "9.0.3",
     "stylelint-config-recommended-scss": "5.0.2",
     "stylelint-order": "5.0.0",
     "stylelint-prettier": "2.0.0",
-    "ts-jest": "27.1.3",
-    "tsc-alias": "1.6.3",
-    "typescript": "4.6.2",
-    "vanilla-framework": "3.1.1",
+    "ts-jest": "27.1.4",
+    "tsc-alias": "1.6.5",
+    "typescript": "4.6.3",
+    "vanilla-framework": "3.2.0",
     "wait-on": "5.3.0"
   },
   "dependencies": {
     "@types/jest": "27.4.1",
     "@types/node": "16.11.26",
-    "@types/react": "17.0.39",
-    "@types/react-dom": "17.0.13",
-    "@types/react-table": "7.7.9",
+    "@types/react": "17.0.43",
+    "@types/react-dom": "17.0.14",
+    "@types/react-table": "7.7.10",
     "classnames": "2.3.1",
-    "nanoid": "3.3.1",
+    "nanoid": "3.3.2",
     "prop-types": "15.8.1",
     "react-table": "7.7.0",
     "react-useportal": "1.0.16"
@@ -102,7 +102,7 @@
   "peerDependencies": {
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "vanilla-framework": "3.1.1"
+    "vanilla-framework": "3.2.0"
   },
   "scripts": {
     "build": "rm -rf dist && yarn build-local; yarn build-declaration",
@@ -125,8 +125,8 @@
     "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:-9009} && cypress run --env port=${PORT:-9009}",
-    "cypress:run": "cypress run",
-    "cypress:open": "cypress open"
+    "cypress:run": "cypress run --env port=${PORT:-9009}",
+    "cypress:open": "cypress open --env port=${PORT:-9009}"
   },
   "eslintConfig": {
     "extends": "react-app"