@atlaskit/tooltip 20.0.4 → 20.0.6

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/tooltip
 
+## 20.0.6
+
+### Patch Changes
+
+- [#141620](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/141620)
+  [`2a925938dea16`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2a925938dea16) -
+  [ux] Check focus-visible before showing tooltip on focus events
+
+## 20.0.5
+
+### Patch Changes
+
+- [#134955](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/134955)
+  [`ba294ad0536de`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ba294ad0536de) -
+  An onClose listener is being provided to the experimental open layer observer.
+- Updated dependencies
+
 ## 20.0.4
 
 ### Patch Changes

package/dist/cjs/tooltip.js

@@ -17,6 +17,7 @@ var _useCloseOnEscapePress = _interopRequireDefault(require("@atlaskit/ds-lib/us
 var _useStableRef = _interopRequireDefault(require("@atlaskit/ds-lib/use-stable-ref"));
 var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
 var _motion = require("@atlaskit/motion");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popper = require("@atlaskit/popper");
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 var _constants = require("@atlaskit/theme/constants");
@@ -33,7 +34,7 @@ var tooltipZIndex = _constants.layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "20.0.4"
+  packageVersion: "20.0.6"
 };
 
 // Inverts motion direction
@@ -374,6 +375,17 @@ function Tooltip(_ref) {
     }
   }, []);
   var onFocus = (0, _react.useCallback)(function () {
+    // Check if focus-visible
+    // Prevents tooltips from showing when focus is not visible,
+    // i.e., when focus is moved onto tooltip trigger inside a popup on open
+    try {
+      if (targetRef.current && !targetRef.current.matches(':focus-visible') && (0, _platformFeatureFlags.fg)('platform-tooltip-focus-visible')) {
+        return;
+      }
+    } catch (_) {
+      // Ignore errors from environments that don't support :focus-visible
+    }
+
     // TODO: this does not play well with `hideTooltipOnMouseDown`
     // as "focus" will occur after the "mousedown".
     tryShowTooltip({
@@ -400,14 +412,30 @@ function Tooltip(_ref) {
   var shouldRenderTooltipPopup = state !== 'hide' && Boolean(content);
   var shouldRenderHiddenContent = !isScreenReaderAnnouncementDisabled && shouldRenderTooltipPopup;
   var shouldRenderTooltipChildren = state !== 'hide' && state !== 'fade-out';
+  var handleOpenLayerObserverCloseSignal = (0, _react.useCallback)(function () {
+    var _apiRef$current4;
+    (_apiRef$current4 = apiRef.current) === null || _apiRef$current4 === void 0 || _apiRef$current4.requestHide({
+      isImmediate: true
+    });
+  }, []);
   (0, _openLayerObserver.useNotifyOpenLayerObserver)({
-    isOpen: shouldRenderTooltipPopup
+    // Layer is only visually open if both the tooltip popup (container) and children are rendered.
+    isOpen: shouldRenderTooltipPopup && ((0, _platformFeatureFlags.fg)('platform_dst_open_layer_observer_close_layers') ? shouldRenderTooltipChildren : true),
+    /**
+     * We don't strictly need to provide an onClose callback at this time, as there is
+     * already code that handles hiding the tooltip when a drag is started (and the only
+     * usage right now is closing all layers when the user resizes the side nav).
+     *
+     * However, for future-proofing and semantic reasons, it makes sense to close the tooltip
+     * whenever the open layer observer requests a close.
+     */
+    onClose: handleOpenLayerObserverCloseSignal
   });
   var getReferenceElement = function getReferenceElement() {
-    var _apiRef$current4;
-    if (position === 'mouse' && (_apiRef$current4 = apiRef.current) !== null && _apiRef$current4 !== void 0 && _apiRef$current4.mousePosition) {
-      var _apiRef$current5;
-      return (_apiRef$current5 = apiRef.current) === null || _apiRef$current5 === void 0 ? void 0 : _apiRef$current5.mousePosition;
+    var _apiRef$current5;
+    if (position === 'mouse' && (_apiRef$current5 = apiRef.current) !== null && _apiRef$current5 !== void 0 && _apiRef$current5.mousePosition) {
+      var _apiRef$current6;
+      return (_apiRef$current6 = apiRef.current) === null || _apiRef$current6 === void 0 ? void 0 : _apiRef$current6.mousePosition;
     }
     return targetRef.current || undefined;
   };

package/dist/es2019/tooltip.js

@@ -7,6 +7,7 @@ import useCloseOnEscapePress from '@atlaskit/ds-lib/use-close-on-escape-press';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
 import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Popper } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
@@ -19,7 +20,7 @@ const tooltipZIndex = layers.tooltip();
 const analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "20.0.4"
+  packageVersion: "20.0.6"
 };
 
 // Inverts motion direction
@@ -349,6 +350,17 @@ function Tooltip({
     }
   }, []);
   const onFocus = useCallback(() => {
+    // Check if focus-visible
+    // Prevents tooltips from showing when focus is not visible,
+    // i.e., when focus is moved onto tooltip trigger inside a popup on open
+    try {
+      if (targetRef.current && !targetRef.current.matches(':focus-visible') && fg('platform-tooltip-focus-visible')) {
+        return;
+      }
+    } catch (_) {
+      // Ignore errors from environments that don't support :focus-visible
+    }
+
     // TODO: this does not play well with `hideTooltipOnMouseDown`
     // as "focus" will occur after the "mousedown".
     tryShowTooltip({
@@ -375,14 +387,30 @@ function Tooltip({
   const shouldRenderTooltipPopup = state !== 'hide' && Boolean(content);
   const shouldRenderHiddenContent = !isScreenReaderAnnouncementDisabled && shouldRenderTooltipPopup;
   const shouldRenderTooltipChildren = state !== 'hide' && state !== 'fade-out';
+  const handleOpenLayerObserverCloseSignal = useCallback(() => {
+    var _apiRef$current4;
+    (_apiRef$current4 = apiRef.current) === null || _apiRef$current4 === void 0 ? void 0 : _apiRef$current4.requestHide({
+      isImmediate: true
+    });
+  }, []);
   useNotifyOpenLayerObserver({
-    isOpen: shouldRenderTooltipPopup
+    // Layer is only visually open if both the tooltip popup (container) and children are rendered.
+    isOpen: shouldRenderTooltipPopup && (fg('platform_dst_open_layer_observer_close_layers') ? shouldRenderTooltipChildren : true),
+    /**
+     * We don't strictly need to provide an onClose callback at this time, as there is
+     * already code that handles hiding the tooltip when a drag is started (and the only
+     * usage right now is closing all layers when the user resizes the side nav).
+     *
+     * However, for future-proofing and semantic reasons, it makes sense to close the tooltip
+     * whenever the open layer observer requests a close.
+     */
+    onClose: handleOpenLayerObserverCloseSignal
   });
   const getReferenceElement = () => {
-    var _apiRef$current4;
-    if (position === 'mouse' && (_apiRef$current4 = apiRef.current) !== null && _apiRef$current4 !== void 0 && _apiRef$current4.mousePosition) {
-      var _apiRef$current5;
-      return (_apiRef$current5 = apiRef.current) === null || _apiRef$current5 === void 0 ? void 0 : _apiRef$current5.mousePosition;
+    var _apiRef$current5;
+    if (position === 'mouse' && (_apiRef$current5 = apiRef.current) !== null && _apiRef$current5 !== void 0 && _apiRef$current5.mousePosition) {
+      var _apiRef$current6;
+      return (_apiRef$current6 = apiRef.current) === null || _apiRef$current6 === void 0 ? void 0 : _apiRef$current6.mousePosition;
     }
     return targetRef.current || undefined;
   };

package/dist/esm/tooltip.js

@@ -11,6 +11,7 @@ import useCloseOnEscapePress from '@atlaskit/ds-lib/use-close-on-escape-press';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
 import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Popper } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
@@ -23,7 +24,7 @@ var tooltipZIndex = layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "20.0.4"
+  packageVersion: "20.0.6"
 };
 
 // Inverts motion direction
@@ -364,6 +365,17 @@ function Tooltip(_ref) {
     }
   }, []);
   var onFocus = useCallback(function () {
+    // Check if focus-visible
+    // Prevents tooltips from showing when focus is not visible,
+    // i.e., when focus is moved onto tooltip trigger inside a popup on open
+    try {
+      if (targetRef.current && !targetRef.current.matches(':focus-visible') && fg('platform-tooltip-focus-visible')) {
+        return;
+      }
+    } catch (_) {
+      // Ignore errors from environments that don't support :focus-visible
+    }
+
     // TODO: this does not play well with `hideTooltipOnMouseDown`
     // as "focus" will occur after the "mousedown".
     tryShowTooltip({
@@ -390,14 +402,30 @@ function Tooltip(_ref) {
   var shouldRenderTooltipPopup = state !== 'hide' && Boolean(content);
   var shouldRenderHiddenContent = !isScreenReaderAnnouncementDisabled && shouldRenderTooltipPopup;
   var shouldRenderTooltipChildren = state !== 'hide' && state !== 'fade-out';
+  var handleOpenLayerObserverCloseSignal = useCallback(function () {
+    var _apiRef$current4;
+    (_apiRef$current4 = apiRef.current) === null || _apiRef$current4 === void 0 || _apiRef$current4.requestHide({
+      isImmediate: true
+    });
+  }, []);
   useNotifyOpenLayerObserver({
-    isOpen: shouldRenderTooltipPopup
+    // Layer is only visually open if both the tooltip popup (container) and children are rendered.
+    isOpen: shouldRenderTooltipPopup && (fg('platform_dst_open_layer_observer_close_layers') ? shouldRenderTooltipChildren : true),
+    /**
+     * We don't strictly need to provide an onClose callback at this time, as there is
+     * already code that handles hiding the tooltip when a drag is started (and the only
+     * usage right now is closing all layers when the user resizes the side nav).
+     *
+     * However, for future-proofing and semantic reasons, it makes sense to close the tooltip
+     * whenever the open layer observer requests a close.
+     */
+    onClose: handleOpenLayerObserverCloseSignal
   });
   var getReferenceElement = function getReferenceElement() {
-    var _apiRef$current4;
-    if (position === 'mouse' && (_apiRef$current4 = apiRef.current) !== null && _apiRef$current4 !== void 0 && _apiRef$current4.mousePosition) {
-      var _apiRef$current5;
-      return (_apiRef$current5 = apiRef.current) === null || _apiRef$current5 === void 0 ? void 0 : _apiRef$current5.mousePosition;
+    var _apiRef$current5;
+    if (position === 'mouse' && (_apiRef$current5 = apiRef.current) !== null && _apiRef$current5 !== void 0 && _apiRef$current5.mousePosition) {
+      var _apiRef$current6;
+      return (_apiRef$current6 = apiRef.current) === null || _apiRef$current6 === void 0 ? void 0 : _apiRef$current6.mousePosition;
     }
     return targetRef.current || undefined;
   };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tooltip",
-	"version": "20.0.4",
+	"version": "20.0.6",
 	"description": "A tooltip is a floating, non-actionable label used to explain a user interface element or feature.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -43,12 +43,13 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.0.0",
 		"@atlaskit/ds-lib": "^4.0.0",
-		"@atlaskit/layering": "^2.0.0",
+		"@atlaskit/layering": "^2.1.0",
 		"@atlaskit/motion": "^5.1.0",
+		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popper": "^7.0.0",
 		"@atlaskit/portal": "^5.1.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tokens": "^4.5.0",
+		"@atlaskit/tokens": "^4.8.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3",
 		"@emotion/react": "^11.7.1",
@@ -59,17 +60,17 @@
 		"react-dom": "^18.2.0"
 	},
 	"devDependencies": {
-		"@af/accessibility-testing": "^2.0.0",
-		"@af/integration-testing": "^0.5.0",
-		"@af/visual-regression": "^1.3.0",
-		"@atlaskit/button": "^21.1.0",
+		"@af/accessibility-testing": "workspace:^",
+		"@af/integration-testing": "workspace:^",
+		"@af/visual-regression": "workspace:^",
+		"@atlaskit/button": "^23.0.0",
 		"@atlaskit/css": "^0.10.0",
 		"@atlaskit/docs": "^10.0.0",
-		"@atlaskit/icon": "^25.0.0",
-		"@atlaskit/link": "^3.0.0",
-		"@atlaskit/primitives": "^14.2.0",
+		"@atlaskit/icon": "^25.6.0",
+		"@atlaskit/link": "^3.1.0",
+		"@atlaskit/primitives": "^14.4.0",
 		"@atlaskit/section-message": "^8.2.0",
-		"@atlaskit/ssr": "^0.4.0",
+		"@atlassian/ssr-tests": "^0.2.0",
 		"@testing-library/react": "^13.4.0",
 		"react-dom": "^18.2.0",
 		"tiny-invariant": "^1.2.0",
@@ -99,5 +100,13 @@
 			]
 		}
 	},
-	"homepage": "https://atlassian.design/components/tooltip/"
+	"homepage": "https://atlassian.design/components/tooltip/",
+	"platform-feature-flags": {
+		"platform_dst_open_layer_observer_close_layers": {
+			"type": "boolean"
+		},
+		"platform-tooltip-focus-visible": {
+			"type": "boolean"
+		}
+	}
 }