@canonical/react-components 0.33.0 → 0.34.2

package/dist/__mocks__/nanoid.d.ts

@@ -0,0 +1 @@
+export declare const nanoid: () => string;

package/dist/__mocks__/nanoid.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.nanoid = void 0;
+var id = 0;
+beforeEach(function () {
+  id = 0;
+});
+
+var nanoid = function nanoid() {
+  id++;
+  return "mock-nanoid-".concat(id);
+};
+
+exports.nanoid = nanoid;

package/dist/components/Chip/Chip.d.ts

@@ -43,6 +43,6 @@ export declare type Props = PropsWithSpread<{
      * The value of the chip.
      */
     value: string;
-}, HTMLProps<HTMLSpanElement>>;
+}, HTMLProps<HTMLButtonElement>>;
 declare const Chip: ({ appearance, lead, onClick, onDismiss, quoteValue, selected, subString, value, ...props }: Props) => JSX.Element;
 export default Chip;

package/dist/components/Chip/Chip.js

@@ -71,27 +71,28 @@ var Chip = function Chip(_ref) {
     }
   }));
 
-  var chipClassName = (0, _classnames.default)((_classNames = {}, _defineProperty(_classNames, "p-chip--".concat(appearance), !!appearance), _defineProperty(_classNames, "p-chip", !appearance), _classNames));
+  var chipClassName = (0, _classnames.default)((_classNames = {}, _defineProperty(_classNames, "p-chip--".concat(appearance), !!appearance), _defineProperty(_classNames, "p-chip", !appearance), _classNames), props.className);
 
   if (onDismiss) {
-    return /*#__PURE__*/_react.default.createElement("span", _extends({
-      className: chipClassName,
-      "aria-pressed": selected
-    }, props), chipContent, /*#__PURE__*/_react.default.createElement("button", {
+    return /*#__PURE__*/_react.default.createElement("span", _extends({}, props, {
+      className: chipClassName
+    }), chipContent, /*#__PURE__*/_react.default.createElement("button", {
       className: "p-chip__dismiss",
-      onClick: onDismiss
+      onClick: onDismiss,
+      type: "button"
     }, /*#__PURE__*/_react.default.createElement("i", {
       className: "p-icon--close"
     }, "Dismiss")));
   } else {
-    return /*#__PURE__*/_react.default.createElement("button", {
-      className: chipClassName,
+    return /*#__PURE__*/_react.default.createElement("button", _extends({}, props, {
       "aria-pressed": selected,
+      className: chipClassName,
       onClick: onClick,
       onKeyDown: function onKeyDown(e) {
         return _onKeyDown(e);
-      }
-    }, chipContent);
+      },
+      type: "button"
+    }), chipContent);
   }
 };
 

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

@@ -28,10 +28,18 @@ export declare type Props = {
      * Help text to show below the field.
      */
     help?: ReactNode;
+    /**
+     * An id to give to the help element.
+     */
+    helpId?: string;
     /**
      * 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.
      */
@@ -56,6 +64,10 @@ export declare type Props = {
      * The content for success validation.
      */
     success?: ReactNode;
+    /**
+     * An id to give to the caution, error or success element.
+     */
+    validationId?: string;
 };
-declare const Field: ({ caution, children, className, error, forId, help, isSelect, label, labelClassName, labelFirst, required, stacked, success, }: Props) => JSX.Element;
+declare const Field: ({ caution, children, className, error, forId, help, helpId, isSelect, isTickElement, label, labelClassName, labelFirst, required, stacked, success, validationId, }: Props) => JSX.Element;
 export default Field;

package/dist/components/Field/Field.js

@@ -15,20 +15,27 @@ var _Col = _interopRequireDefault(require("../Col"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var generateHelp = function generateHelp(help) {
-  return help && /*#__PURE__*/_react.default.createElement("p", {
-    className: "p-form-help-text"
-  }, help);
+var generateHelpText = function generateHelpText(_ref) {
+  var help = _ref.help,
+      helpId = _ref.helpId,
+      isTickElement = _ref.isTickElement;
+  return help ? /*#__PURE__*/_react.default.createElement("p", {
+    className: (0, _classnames.default)("p-form-help-text", {
+      "is-tick-element": isTickElement
+    }),
+    id: helpId
+  }, help) : null;
 };
 
-var generateError = function generateError(error, caution, success) {
+var generateError = function generateError(error, caution, success, validationId) {
   if (!error && !caution && !success) {
     return null;
   }
 
   var messageType = error && "Error" || caution && "Caution" || success && "Success";
   return /*#__PURE__*/_react.default.createElement("p", {
-    className: "p-form-validation__message"
+    className: "p-form-validation__message",
+    id: validationId
   }, /*#__PURE__*/_react.default.createElement("strong", null, messageType, ":"), " ", error || caution || success);
 };
 
@@ -52,31 +59,61 @@ var generateLabel = function generateLabel(forId, required, label, labelClassNam
   return labelNode;
 };
 
-var generateContent = function generateContent(isSelect, children, labelFirst, labelNode, help, error, caution, success) {
+var generateContent = function generateContent(_ref2) {
+  var isSelect = _ref2.isSelect,
+      children = _ref2.children,
+      labelFirst = _ref2.labelFirst,
+      labelNode = _ref2.labelNode,
+      help = _ref2.help,
+      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), generateError(error, caution, success));
+  }, children) : children, !labelFirst && labelNode, generateHelpText({
+    helpId: helpId,
+    help: help,
+    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,
-      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;
+var Field = function Field(_ref3) {
+  var caution = _ref3.caution,
+      children = _ref3.children,
+      className = _ref3.className,
+      error = _ref3.error,
+      forId = _ref3.forId,
+      help = _ref3.help,
+      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);
+  var content = generateContent({
+    isSelect: isSelect,
+    isTickElement: isTickElement,
+    children: children,
+    labelFirst: labelFirst,
+    labelNode: labelNode,
+    help: help,
+    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.js

@@ -17,6 +17,8 @@ var _CheckboxInput = _interopRequireDefault(require("../CheckboxInput"));
 
 var _RadioInput = _interopRequireDefault(require("../RadioInput"));
 
+var _hooks = require("../../hooks");
+
 var _excluded = ["caution", "className", "error", "help", "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); }
@@ -27,6 +29,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign || 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(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 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; }
@@ -49,6 +57,19 @@ var Input = function Input(_ref) {
 
   var inputRef = (0, _react.useRef)(null);
   var fieldLabel = !["checkbox", "radio"].includes(type) ? label : "";
+  var validationId = (0, _hooks.useId)();
+  var helpId = (0, _hooks.useId)();
+  var hasError = !!error;
+
+  var commonProps = _objectSpread({
+    "aria-describedby": help ? helpId : null,
+    "aria-errormessage": hasError ? validationId : null,
+    "aria-invalid": hasError,
+    id: id,
+    label: label,
+    required: required
+  }, inputProps);
+
   (0, _react.useEffect)(function () {
     if (takeFocus) {
       inputRef.current.focus();
@@ -58,27 +79,20 @@ var Input = function Input(_ref) {
 
   if (type === "checkbox") {
     input = /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, _extends({
-      id: id,
       label: label,
-      labelClassName: labelClassName,
-      required: required
-    }, inputProps));
+      labelClassName: labelClassName
+    }, commonProps));
   } else if (type === "radio") {
     input = /*#__PURE__*/_react.default.createElement(_RadioInput.default, _extends({
-      id: id,
       label: label,
-      labelClassName: labelClassName,
-      required: required
-    }, inputProps));
+      labelClassName: labelClassName
+    }, commonProps));
   } else {
     input = /*#__PURE__*/_react.default.createElement("input", _extends({
       className: (0, _classnames.default)("p-form-validation__input", className),
-      id: id,
       ref: inputRef,
-      required: required,
-      type: type,
-      "aria-invalid": !!error
-    }, inputProps));
+      type: type
+    }, commonProps));
   }
 
   return /*#__PURE__*/_react.default.createElement(_Field.default, {
@@ -87,11 +101,14 @@ var Input = function Input(_ref) {
     error: error,
     forId: id,
     help: help,
+    helpId: helpId,
+    isTickElement: type === "checkbox" || type === "radio",
     label: fieldLabel,
     labelClassName: labelClassName,
     required: required,
     stacked: stacked,
-    success: success
+    success: success,
+    validationId: validationId
   }, input);
 };
 

package/dist/components/PaginationItem/PaginationItem.js

@@ -22,7 +22,8 @@ var PaginationItem = function PaginationItem(_ref) {
     className: (0, _classnames.default)("p-pagination__link", {
       "is-active": isActive
     }),
-    onClick: onClick
+    onClick: onClick,
+    "aria-current": isActive ? "page" : undefined
   }, number));
 };
 

package/dist/components/PasswordToggle/PasswordToggle.js

@@ -17,6 +17,8 @@ var _Field = _interopRequireDefault(require("../Field"));
 
 var _Label = _interopRequireDefault(require("../Label"));
 
+var _hooks = require("../../hooks");
+
 var _excluded = ["caution", "className", "error", "help", "id", "label", "readOnly", "required", "success", "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); }
@@ -62,6 +64,10 @@ var PasswordToggle = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
       isPassword = _useState2[0],
       setIsPassword = _useState2[1];
 
+  var validationId = (0, _hooks.useId)();
+  var helpId = (0, _hooks.useId)();
+  var hasError = !!error;
+
   var togglePassword = function togglePassword() {
     if (isPassword) {
       setIsPassword(false);
@@ -75,8 +81,10 @@ var PasswordToggle = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     className: wrapperClassName,
     error: error,
     help: help,
+    helpId: helpId,
     required: required,
-    success: success
+    success: success,
+    validationId: validationId
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "p-form-password-toggle"
   }, /*#__PURE__*/_react.default.createElement(_Label.default, {
@@ -97,11 +105,14 @@ var PasswordToggle = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
   }, isPassword ? "Show" : "Hide"), /*#__PURE__*/_react.default.createElement("i", {
     className: isPassword ? "p-icon--show" : "p-icon--hide"
   }))), /*#__PURE__*/_react.default.createElement("input", _extends({
+    "aria-describedby": help ? helpId : null,
+    "aria-errormessage": hasError ? validationId : null,
+    "aria-invalid": hasError,
     className: (0, _classnames.default)("p-form-validation__input", className),
     id: id,
+    readOnly: readOnly,
     ref: ref,
-    type: isPassword ? "password" : "text",
-    readOnly: readOnly
+    type: isPassword ? "password" : "text"
   }, inputProps)));
 });
 

package/dist/components/Select/Select.js

@@ -13,6 +13,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _Field = _interopRequireDefault(require("../Field"));
 
+var _hooks = require("../../hooks");
+
 var _excluded = ["label", "value"],
     _excluded2 = ["caution", "className", "error", "help", "id", "label", "labelClassName", "onChange", "options", "required", "stacked", "success", "takeFocus", "wrapperClassName"];
 
@@ -59,6 +61,9 @@ var Select = function Select(_ref2) {
       selectProps = _objectWithoutProperties(_ref2, _excluded2);
 
   var selectRef = (0, _react.useRef)(null);
+  var validationId = (0, _hooks.useId)();
+  var helpId = (0, _hooks.useId)();
+  var hasError = !!error;
   (0, _react.useEffect)(function () {
     if (takeFocus) {
       selectRef.current.focus();
@@ -70,13 +75,18 @@ var Select = function Select(_ref2) {
     error: error,
     forId: id,
     help: help,
+    helpId: helpId,
     isSelect: true,
     label: label,
     labelClassName: labelClassName,
     required: required,
     stacked: stacked,
-    success: success
+    success: success,
+    validationId: validationId
   }, /*#__PURE__*/_react.default.createElement("select", _extends({
+    "aria-describedby": help ? helpId : null,
+    "aria-errormessage": hasError ? validationId : null,
+    "aria-invalid": hasError,
     className: (0, _classnames.default)("p-form-validation__input", className),
     id: id,
     onChange: function onChange(evt) {

package/dist/components/Slider/Slider.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Field = _interopRequireDefault(require("../Field"));
 
+var _hooks = require("../../hooks");
+
 var _excluded = ["caution", "disabled", "error", "help", "id", "inputDisabled", "label", "max", "min", "onChange", "required", "showInput"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -45,6 +47,9 @@ var Slider = function Slider(_ref) {
       showInput = _ref$showInput === void 0 ? false : _ref$showInput,
       inputProps = _objectWithoutProperties(_ref, _excluded);
 
+  var validationId = (0, _hooks.useId)();
+  var helpId = (0, _hooks.useId)();
+  var hasError = !!error;
   var style = {};
 
   if ((_navigator = navigator) !== null && _navigator !== void 0 && (_navigator$userAgent = _navigator.userAgent) !== null && _navigator$userAgent !== void 0 && _navigator$userAgent.includes("AppleWebKit")) {
@@ -61,11 +66,16 @@ var Slider = function Slider(_ref) {
     caution: caution,
     error: error,
     help: help,
+    helpId: helpId,
     label: label,
-    required: required
+    required: required,
+    validationId: validationId
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "p-slider__wrapper"
   }, /*#__PURE__*/_react.default.createElement("input", _extends({
+    "aria-describedby": help ? helpId : null,
+    "aria-errormessage": hasError ? validationId : null,
+    "aria-invalid": hasError,
     disabled: disabled,
     id: id,
     max: max,
@@ -75,6 +85,9 @@ var Slider = function Slider(_ref) {
     style: style,
     type: "range"
   }, inputProps)), showInput && /*#__PURE__*/_react.default.createElement("input", _extends({
+    "aria-describedby": help ? helpId : null,
+    "aria-errormessage": hasError ? validationId : null,
+    "aria-invalid": hasError,
     className: "p-slider__input",
     disabled: disabled || inputDisabled,
     max: max,

package/dist/components/Textarea/Textarea.js

@@ -13,6 +13,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _Field = _interopRequireDefault(require("../Field"));
 
+var _hooks = require("../../hooks");
+
 var _excluded = ["caution", "className", "error", "grow", "help", "id", "label", "labelClassName", "onKeyUp", "required", "stacked", "style", "success", "takeFocus", "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); }
@@ -54,6 +56,9 @@ var Textarea = function Textarea(_ref) {
       props = _objectWithoutProperties(_ref, _excluded);
 
   var textareaRef = (0, _react.useRef)(null);
+  var validationId = (0, _hooks.useId)();
+  var helpId = (0, _hooks.useId)();
+  var hasError = !!error;
   (0, _react.useEffect)(function () {
     if (takeFocus) {
       textareaRef.current.focus();
@@ -65,12 +70,17 @@ var Textarea = function Textarea(_ref) {
     error: error,
     forId: id,
     help: help,
+    helpId: helpId,
     label: label,
     labelClassName: labelClassName,
     required: required,
     stacked: stacked,
-    success: success
+    success: success,
+    validationId: validationId
   }, /*#__PURE__*/_react.default.createElement("textarea", _extends({
+    "aria-describedby": help ? helpId : null,
+    "aria-errormessage": hasError ? validationId : null,
+    "aria-invalid": hasError,
     className: (0, _classnames.default)("p-form-validation__input", className),
     id: id,
     onKeyUp: function onKeyUp(evt) {

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,20 @@ 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 handleBlur = function handleBlur(e) {
+    var _messageRef$current;
+
+    if (e.relatedTarget ? !((_messageRef$current = messageRef.current) !== null && _messageRef$current !== void 0 && _messageRef$current.contains(e.relatedTarget)) : e.target !== messageRef.current) {
+      closePortal();
+    }
+  };
+
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, message ? /*#__PURE__*/_react.default.createElement("span", {
     className: className,
-    onBlur: closePortal,
+    onBlur: handleBlur,
     onFocus: openPortal,
-    onMouseOut: closePortal,
+    onMouseOut: handleBlur,
     onMouseOver: openPortal
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: positionElementClassName,
@@ -222,13 +244,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.33.0",
+  "version": "0.34.2",
   "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",