@canonical/react-components 0.34.2 → 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.
      */
@@ -69,5 +73,5 @@ export declare type Props = {
      */
     validationId?: string;
 };
-declare const Field: ({ caution, children, className, error, forId, help, helpId, isSelect, isTickElement, 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

@@ -18,9 +18,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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", {
+    className: (0, _classnames.default)("p-form-help-text", helpClassName, {
       "is-tick-element": isTickElement
     }),
     id: helpId
@@ -65,6 +66,7 @@ var generateContent = function generateContent(_ref2) {
       labelFirst = _ref2.labelFirst,
       labelNode = _ref2.labelNode,
       help = _ref2.help,
+      helpClassName = _ref2.helpClassName,
       error = _ref2.error,
       caution = _ref2.caution,
       success = _ref2.success,
@@ -78,6 +80,7 @@ var generateContent = function generateContent(_ref2) {
   }, children) : children, !labelFirst && labelNode, generateHelpText({
     helpId: helpId,
     help: help,
+    helpClassName: helpClassName,
     isTickElement: isTickElement
   }), generateError(error, caution, success, validationId));
 };
@@ -89,6 +92,7 @@ var Field = function Field(_ref3) {
       error = _ref3.error,
       forId = _ref3.forId,
       help = _ref3.help,
+      helpClassName = _ref3.helpClassName,
       helpId = _ref3.helpId,
       isSelect = _ref3.isSelect,
       isTickElement = _ref3.isTickElement,
@@ -108,6 +112,7 @@ var Field = function Field(_ref3) {
     labelFirst: labelFirst,
     labelNode: labelNode,
     help: help,
+    helpClassName: helpClassName,
     error: error,
     caution: caution,
     success: success,

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,6 +102,7 @@ var Input = function Input(_ref) {
     error: error,
     forId: id,
     help: help,
+    helpClassName: helpClassName,
     helpId: helpId,
     isTickElement: type === "checkbox" || type === "radio",
     label: fieldLabel,

package/dist/components/Tooltip/Tooltip.js

@@ -223,18 +223,47 @@ 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 _messageRef$current;
+    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: handleBlur,
+    onClick: handleClick,
     onFocus: openPortal,
     onMouseOut: handleBlur,
     onMouseOver: openPortal

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.34.2",
+  "version": "0.35.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "Huw Wilkins <huw.wilkins@canonical.com>",
@@ -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"