@atlaskit/tooltip 18.1.0 → 18.1.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/tooltip
 
+## 18.1.1
+
+### Patch Changes
+
+- [#64251](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/64251) [`92b280e734a7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/92b280e734a7) - Add a hidden tooltip content when tooltip is in a modal for screen reader announcement
+
 ## 18.1.0
 
 ### Minor Changes

package/dist/cjs/Tooltip.js

@@ -10,7 +10,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
 var _bindEventListener = require("bind-event-listener");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
@@ -28,12 +27,12 @@ var _utilities = require("./utilities");
 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 _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; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var tooltipZIndex = _constants.layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "18.1.0"
+  packageVersion: "18.1.1"
 };
 
 // Inverts motion direction
@@ -413,19 +412,25 @@ function Tooltip(_ref) {
       target.removeAttribute('aria-describedby');
     }
   }, [shouldRenderTooltipContainer, tooltipId]);
-  return (0, _react2.jsx)(_react.default.Fragment, null, typeof children === 'function' ?
+  var hiddenContent = /*#__PURE__*/_react.default.createElement("span", {
+    "data-testid": testId ? "".concat(testId, "-hidden") : undefined,
+    hidden: true,
+    id: tooltipId
+  }, typeof content === 'function' ? content({}) : content);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, typeof children === 'function' ?
+  /*#__PURE__*/
   // once we deprecate the wrapped approach, we can put the aria
   // attribute back into the tooltipTriggerProps and make it required
   // instead of optional in `types`
-  children(_objectSpread(_objectSpread({}, tooltipTriggerProps), {}, {
+  _react.default.createElement(_react.default.Fragment, null, children(_objectSpread(_objectSpread({}, tooltipTriggerProps), {}, {
     'aria-describedby': tooltipId,
     ref: setDirectRef
-  })) : (0, _react2.jsx)(CastTargetContainer, (0, _extends2.default)({}, tooltipTriggerProps, {
+  })), shouldRenderTooltipContainer && hiddenContent) : /*#__PURE__*/_react.default.createElement(CastTargetContainer, (0, _extends2.default)({}, tooltipTriggerProps, {
     ref: setImplicitRefFromChildren,
     role: "presentation"
-  }), children), shouldRenderTooltipContainer ? (0, _react2.jsx)(_portal.default, {
+  }), children, shouldRenderTooltipContainer && hiddenContent), shouldRenderTooltipContainer ? /*#__PURE__*/_react.default.createElement(_portal.default, {
     zIndex: tooltipZIndex
-  }, (0, _react2.jsx)(_popper.Popper, {
+  }, /*#__PURE__*/_react.default.createElement(_popper.Popper, {
     placement: tooltipPosition,
     referenceElement: getReferenceElement(),
     strategy: strategy
@@ -438,9 +443,9 @@ function Tooltip(_ref) {
     // E.g. a tooltip's position is on the 'right', it should enter from and exit to the 'left'
     // This gives the effect the tooltip is appearing from the target
     var direction = position === 'mouse' ? undefined : invertedDirection[getDirectionFromPlacement(placement)];
-    return (0, _react2.jsx)(_motion.ExitingPersistence, {
+    return /*#__PURE__*/_react.default.createElement(_motion.ExitingPersistence, {
       appear: true
-    }, shouldRenderTooltipChildren && (0, _react2.jsx)(_motion.FadeIn, {
+    }, shouldRenderTooltipChildren && /*#__PURE__*/_react.default.createElement(_motion.FadeIn, {
       distance: "constant",
       entranceDirection: direction,
       exitDirection: direction,
@@ -448,7 +453,7 @@ function Tooltip(_ref) {
       duration: state === 'show-immediate' ? 0 : _durations.mediumDurationMs
     }, function (_ref6) {
       var className = _ref6.className;
-      return (0, _react2.jsx)(Container, {
+      return /*#__PURE__*/_react.default.createElement(Container, {
         ref: ref
         /**
          * "Tooltip" classname is a hook used by tests to manipulate
@@ -460,8 +465,7 @@ function Tooltip(_ref) {
         placement: tooltipPosition,
         testId: getReferenceElement() ? testId : testId && "".concat(testId, "--unresolved"),
         onMouseOut: onMouseOut,
-        onMouseOver: onMouseOverTooltip,
-        id: tooltipId
+        onMouseOver: onMouseOverTooltip
       }, typeof content === 'function' ? content({
         update: update
       }) : content);

package/dist/es2019/Tooltip.js

@@ -1,8 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-/** @jsx jsx */
-
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
 import { usePlatformLeafSyntheticEventHandler } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
@@ -21,7 +18,7 @@ const tooltipZIndex = layers.tooltip();
 const analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "18.1.0"
+  packageVersion: "18.1.1"
 };
 
 // Inverts motion direction
@@ -391,20 +388,26 @@ function Tooltip({
       target.removeAttribute('aria-describedby');
     }
   }, [shouldRenderTooltipContainer, tooltipId]);
-  return jsx(React.Fragment, null, typeof children === 'function' ?
+  const hiddenContent = /*#__PURE__*/React.createElement("span", {
+    "data-testid": testId ? `${testId}-hidden` : undefined,
+    hidden: true,
+    id: tooltipId
+  }, typeof content === 'function' ? content({}) : content);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, typeof children === 'function' ?
+  /*#__PURE__*/
   // once we deprecate the wrapped approach, we can put the aria
   // attribute back into the tooltipTriggerProps and make it required
   // instead of optional in `types`
-  children({
+  React.createElement(React.Fragment, null, children({
     ...tooltipTriggerProps,
     'aria-describedby': tooltipId,
     ref: setDirectRef
-  }) : jsx(CastTargetContainer, _extends({}, tooltipTriggerProps, {
+  }), shouldRenderTooltipContainer && hiddenContent) : /*#__PURE__*/React.createElement(CastTargetContainer, _extends({}, tooltipTriggerProps, {
     ref: setImplicitRefFromChildren,
     role: "presentation"
-  }), children), shouldRenderTooltipContainer ? jsx(Portal, {
+  }), children, shouldRenderTooltipContainer && hiddenContent), shouldRenderTooltipContainer ? /*#__PURE__*/React.createElement(Portal, {
     zIndex: tooltipZIndex
-  }, jsx(Popper, {
+  }, /*#__PURE__*/React.createElement(Popper, {
     placement: tooltipPosition,
     referenceElement: getReferenceElement(),
     strategy: strategy
@@ -418,9 +421,9 @@ function Tooltip({
     // E.g. a tooltip's position is on the 'right', it should enter from and exit to the 'left'
     // This gives the effect the tooltip is appearing from the target
     const direction = position === 'mouse' ? undefined : invertedDirection[getDirectionFromPlacement(placement)];
-    return jsx(ExitingPersistence, {
+    return /*#__PURE__*/React.createElement(ExitingPersistence, {
       appear: true
-    }, shouldRenderTooltipChildren && jsx(FadeIn, {
+    }, shouldRenderTooltipChildren && /*#__PURE__*/React.createElement(FadeIn, {
       distance: "constant",
       entranceDirection: direction,
       exitDirection: direction,
@@ -428,7 +431,7 @@ function Tooltip({
       duration: state === 'show-immediate' ? 0 : mediumDurationMs
     }, ({
       className
-    }) => jsx(Container, {
+    }) => /*#__PURE__*/React.createElement(Container, {
       ref: ref
       /**
        * "Tooltip" classname is a hook used by tests to manipulate
@@ -440,8 +443,7 @@ function Tooltip({
       placement: tooltipPosition,
       testId: getReferenceElement() ? testId : testId && `${testId}--unresolved`,
       onMouseOut: onMouseOut,
-      onMouseOver: onMouseOverTooltip,
-      id: tooltipId
+      onMouseOver: onMouseOverTooltip
     }, typeof content === 'function' ? content({
       update
     }) : content)));

package/dist/esm/Tooltip.js

@@ -3,10 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-/** @jsx jsx */
-
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
 import { usePlatformLeafSyntheticEventHandler } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
@@ -25,7 +22,7 @@ var tooltipZIndex = layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "18.1.0"
+  packageVersion: "18.1.1"
 };
 
 // Inverts motion direction
@@ -405,19 +402,25 @@ function Tooltip(_ref) {
       target.removeAttribute('aria-describedby');
     }
   }, [shouldRenderTooltipContainer, tooltipId]);
-  return jsx(React.Fragment, null, typeof children === 'function' ?
+  var hiddenContent = /*#__PURE__*/React.createElement("span", {
+    "data-testid": testId ? "".concat(testId, "-hidden") : undefined,
+    hidden: true,
+    id: tooltipId
+  }, typeof content === 'function' ? content({}) : content);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, typeof children === 'function' ?
+  /*#__PURE__*/
   // once we deprecate the wrapped approach, we can put the aria
   // attribute back into the tooltipTriggerProps and make it required
   // instead of optional in `types`
-  children(_objectSpread(_objectSpread({}, tooltipTriggerProps), {}, {
+  React.createElement(React.Fragment, null, children(_objectSpread(_objectSpread({}, tooltipTriggerProps), {}, {
     'aria-describedby': tooltipId,
     ref: setDirectRef
-  })) : jsx(CastTargetContainer, _extends({}, tooltipTriggerProps, {
+  })), shouldRenderTooltipContainer && hiddenContent) : /*#__PURE__*/React.createElement(CastTargetContainer, _extends({}, tooltipTriggerProps, {
     ref: setImplicitRefFromChildren,
     role: "presentation"
-  }), children), shouldRenderTooltipContainer ? jsx(Portal, {
+  }), children, shouldRenderTooltipContainer && hiddenContent), shouldRenderTooltipContainer ? /*#__PURE__*/React.createElement(Portal, {
     zIndex: tooltipZIndex
-  }, jsx(Popper, {
+  }, /*#__PURE__*/React.createElement(Popper, {
     placement: tooltipPosition,
     referenceElement: getReferenceElement(),
     strategy: strategy
@@ -430,9 +433,9 @@ function Tooltip(_ref) {
     // E.g. a tooltip's position is on the 'right', it should enter from and exit to the 'left'
     // This gives the effect the tooltip is appearing from the target
     var direction = position === 'mouse' ? undefined : invertedDirection[getDirectionFromPlacement(placement)];
-    return jsx(ExitingPersistence, {
+    return /*#__PURE__*/React.createElement(ExitingPersistence, {
       appear: true
-    }, shouldRenderTooltipChildren && jsx(FadeIn, {
+    }, shouldRenderTooltipChildren && /*#__PURE__*/React.createElement(FadeIn, {
       distance: "constant",
       entranceDirection: direction,
       exitDirection: direction,
@@ -440,7 +443,7 @@ function Tooltip(_ref) {
       duration: state === 'show-immediate' ? 0 : mediumDurationMs
     }, function (_ref6) {
       var className = _ref6.className;
-      return jsx(Container, {
+      return /*#__PURE__*/React.createElement(Container, {
         ref: ref
         /**
          * "Tooltip" classname is a hook used by tests to manipulate
@@ -452,8 +455,7 @@ function Tooltip(_ref) {
         placement: tooltipPosition,
         testId: getReferenceElement() ? testId : testId && "".concat(testId, "--unresolved"),
         onMouseOut: onMouseOut,
-        onMouseOver: onMouseOverTooltip,
-        id: tooltipId
+        onMouseOver: onMouseOverTooltip
       }, typeof content === 'function' ? content({
         update: update
       }) : content);

package/dist/types/Tooltip.d.ts

@@ -1,7 +1,6 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import { TooltipProps } from './types';
-declare function Tooltip({ children, position, mousePosition, content, truncate, component: Container, tag: TargetContainer, testId, delay, onShow, onHide, hideTooltipOnClick, hideTooltipOnMouseDown, analyticsContext, strategy, }: TooltipProps): jsx.JSX.Element;
+declare function Tooltip({ children, position, mousePosition, content, truncate, component: Container, tag: TargetContainer, testId, delay, onShow, onHide, hideTooltipOnClick, hideTooltipOnMouseDown, analyticsContext, strategy, }: TooltipProps): JSX.Element;
 declare namespace Tooltip {
     var displayName: string;
 }

package/dist/types/types.d.ts

@@ -25,7 +25,7 @@ export interface TooltipProps {
      * This `update` function can be called to manually recalculate the position of the tooltip.
      */
     content: ReactNode | (({ update }: {
-        update: () => void;
+        update?: () => void;
     }) => ReactNode);
     /**
      * Extend `TooltipPrimitive` to create your own tooltip and pass it as component

package/dist/types-ts4.5/Tooltip.d.ts

@@ -1,7 +1,6 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import { TooltipProps } from './types';
-declare function Tooltip({ children, position, mousePosition, content, truncate, component: Container, tag: TargetContainer, testId, delay, onShow, onHide, hideTooltipOnClick, hideTooltipOnMouseDown, analyticsContext, strategy, }: TooltipProps): jsx.JSX.Element;
+declare function Tooltip({ children, position, mousePosition, content, truncate, component: Container, tag: TargetContainer, testId, delay, onShow, onHide, hideTooltipOnClick, hideTooltipOnMouseDown, analyticsContext, strategy, }: TooltipProps): JSX.Element;
 declare namespace Tooltip {
     var displayName: string;
 }

package/dist/types-ts4.5/types.d.ts

@@ -25,7 +25,7 @@ export interface TooltipProps {
      * This `update` function can be called to manually recalculate the position of the tooltip.
      */
     content: ReactNode | (({ update }: {
-        update: () => void;
+        update?: () => void;
     }) => ReactNode);
     /**
      * Extend `TooltipPrimitive` to create your own tooltip and pass it as component

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tooltip",
-  "version": "18.1.0",
+  "version": "18.1.1",
   "description": "A tooltip is a floating, non-actionable label used to explain a user interface element or feature.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -48,7 +48,7 @@
     "@atlaskit/popper": "^5.5.0",
     "@atlaskit/portal": "^4.4.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.30.0",
+    "@atlaskit/tokens": "^1.33.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
@@ -60,7 +60,7 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
-    "@atlaskit/button": "^17.1.0",
+    "@atlaskit/button": "^17.2.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",