@atlaskit/tooltip 20.0.5 → 20.1.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/tooltip
 
+## 20.1.0
+
+### Minor Changes
+
+- [#161235](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/161235)
+  [`cfa80fa55b0d6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cfa80fa55b0d6) -
+  The `truncate` prop has been marked as deprecated, as it is inaccessible. It will be be removed in
+  a future release.
+
+## 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

package/dist/cjs/tooltip.js

@@ -34,7 +34,7 @@ var tooltipZIndex = _constants.layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "20.0.5"
+  packageVersion: "20.1.0"
 };
 
 // Inverts motion direction
@@ -375,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({

package/dist/es2019/tooltip.js

@@ -20,7 +20,7 @@ const tooltipZIndex = layers.tooltip();
 const analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "20.0.5"
+  packageVersion: "20.1.0"
 };
 
 // Inverts motion direction
@@ -350,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({

package/dist/esm/tooltip.js

@@ -24,7 +24,7 @@ var tooltipZIndex = layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "20.0.5"
+  packageVersion: "20.1.0"
 };
 
 // Inverts motion direction
@@ -365,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({

package/dist/types/types.d.ts

@@ -104,7 +104,11 @@ export interface TooltipProps {
         ref: React.Ref<HTMLElement>;
     }> | React.ForwardRefExoticComponent<React.PropsWithoutRef<React.AllHTMLAttributes<HTMLElement>> & React.RefAttributes<HTMLElement>>;
     /**
-     * Use this to show only one line of text, and truncate the text when it's too long. We no longer support truncating text in the tooltip as it's inaccessible, and this will be removed in a future release.
+     * Use this to show only one line of text, and truncate the text when it's too long.
+     *
+     * We no longer support truncating text in the tooltip as it's inaccessible, and this prop will be removed in a future release.
+     *
+     * @deprecated
      */
     truncate?: boolean;
     /**

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

@@ -104,7 +104,11 @@ export interface TooltipProps {
         ref: React.Ref<HTMLElement>;
     }> | React.ForwardRefExoticComponent<React.PropsWithoutRef<React.AllHTMLAttributes<HTMLElement>> & React.RefAttributes<HTMLElement>>;
     /**
-     * Use this to show only one line of text, and truncate the text when it's too long. We no longer support truncating text in the tooltip as it's inaccessible, and this will be removed in a future release.
+     * Use this to show only one line of text, and truncate the text when it's too long.
+     *
+     * We no longer support truncating text in the tooltip as it's inaccessible, and this prop will be removed in a future release.
+     *
+     * @deprecated
      */
     truncate?: boolean;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tooltip",
-	"version": "20.0.5",
+	"version": "20.1.0",
 	"description": "A tooltip is a floating, non-actionable label used to explain a user interface element or feature.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -49,7 +49,7 @@
 		"@atlaskit/popper": "^7.0.0",
 		"@atlaskit/portal": "^5.1.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tokens": "^4.5.0",
+		"@atlaskit/tokens": "^4.9.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3",
 		"@emotion/react": "^11.7.1",
@@ -60,15 +60,15 @@
 		"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": "^22.0.0",
+		"@af/accessibility-testing": "workspace:^",
+		"@af/integration-testing": "workspace:^",
+		"@af/visual-regression": "workspace:^",
+		"@atlaskit/button": "^23.2.0",
 		"@atlaskit/css": "^0.10.0",
 		"@atlaskit/docs": "^10.0.0",
-		"@atlaskit/icon": "^25.4.0",
-		"@atlaskit/link": "^3.1.0",
-		"@atlaskit/primitives": "^14.2.0",
+		"@atlaskit/icon": "^26.3.0",
+		"@atlaskit/link": "^3.2.0",
+		"@atlaskit/primitives": "^14.8.0",
 		"@atlaskit/section-message": "^8.2.0",
 		"@atlassian/ssr-tests": "^0.2.0",
 		"@testing-library/react": "^13.4.0",
@@ -104,6 +104,13 @@
 	"platform-feature-flags": {
 		"platform_dst_open_layer_observer_close_layers": {
 			"type": "boolean"
+		},
+		"platform-tooltip-focus-visible": {
+			"type": "boolean"
+		},
+		"platform-component-visual-refresh": {
+			"type": "boolean",
+			"referenceOnly": true
 		}
 	}
 }