@atlaskit/tooltip 20.4.8 → 20.5.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/tooltip
 
+## 20.5.0
+
+### Minor Changes
+
+- [`4afb88f83d688`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4afb88f83d688) -
+  Tooltip now includes support for displaying keyboard shortcuts via the `shortcut` prop. This prop
+  is currently behind the `platform-dst-tooltip-shortcuts` feature flag. Example usage:
+
+  ```tsx
+  <Tooltip content="Collapse sidebar" shortcut={['Ctrl', '[']}>
+  ```
+
 ## 20.4.8
 
 ### Patch Changes

package/dist/cjs/tooltip-container.compiled.css

@@ -5,15 +5,17 @@
 ._1bto1l2s{text-overflow:ellipsis}
 ._1e02ze3t{inset-inline-start:var(--ds-space-0,0)}
 ._1i4q1hna{overflow-wrap:break-word}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
 ._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
 ._1reo15vq{overflow-x:hidden}
+._85i51b66{padding-block-end:var(--ds-space-050,4px)}
 ._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
-._bfhkpioe{background-color:var(--_yr7xfv)}
+._bfhkgkf6{background-color:var(--ds-background-neutral-bold,#172b4d)}
 ._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
 ._o5721q9c{white-space:nowrap}
 ._p12f1pna{max-width:420px}
 ._p12fp3fh{max-width:15pc}
 ._slp31hna{word-wrap:break-word}
-._syaz1i9p{color:var(--_ywovvi)}
+._syaz15cr{color:var(--ds-text-inverse,#fff)}
 ._vchhusvi{box-sizing:border-box}
 ._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}

package/dist/cjs/tooltip-container.js

@@ -11,14 +11,14 @@ require("./tooltip-container.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _colors = require("@atlaskit/theme/colors");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _tooltipPrimitive = _interopRequireDefault(require("./tooltip-primitive"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-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; }
-var baseStyles = null;
-var truncateStyles = null;
+var styles = {
+  base: "_2rkofajl _11c8dcr7 _vchhusvi _p12fp3fh _bfhkgkf6 _syaz15cr _152tze3t _1e02ze3t _1i4q1hna _85i5v77o _1q51v77o _y4ti12x7 _bozg12x7 _slp31hna",
+  baseRefreshedPadding: "_1q511b66 _85i51b66",
+  truncate: "_1reo15vq _18m915vq _p12f1pna _1bto1l2s _o5721q9c"
+};
 
 /**
  * Used as the default tooltip container component for the exported `Tooltip` component.
@@ -33,23 +33,22 @@ var TooltipContainer = /*#__PURE__*/(0, _react.forwardRef)(function TooltipConta
     testId = _ref.testId,
     onMouseOut = _ref.onMouseOut,
     onMouseOver = _ref.onMouseOver,
-    id = _ref.id;
+    id = _ref.id,
+    shortcut = _ref.shortcut;
   return /*#__PURE__*/React.createElement(_tooltipPrimitive.default, {
     ref: ref
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
-
+    style: style
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: (0, _runtime.ax)(["_2rkofajl _11c8dcr7 _vchhusvi _p12fp3fh _bfhkpioe _syaz1i9p _152tze3t _1e02ze3t _1i4q1hna _85i5v77o _1q51v77o _y4ti12x7 _bozg12x7 _slp31hna", truncate && "_1reo15vq _18m915vq _p12f1pna _1bto1l2s _o5721q9c", className]),
+    ,
+    className: (0, _runtime.ax)([styles.base, (0, _platformFeatureFlags.fg)('platform-dst-tooltip-shortcuts') && styles.baseRefreshedPadding, truncate && styles.truncate, className]),
     placement: placement,
     testId: testId,
     id: id,
     onMouseOut: onMouseOut,
     onMouseOver: onMouseOver,
-    style: _objectSpread(_objectSpread({}, style), {}, {
-      "--_yr7xfv": (0, _runtime.ix)("var(--ds-background-neutral-bold, ".concat(_colors.N800, ")")),
-      "--_ywovvi": (0, _runtime.ix)("var(--ds-text-inverse, ".concat(_colors.N0, ")"))
-    })
+    shortcut: shortcut
   }, children);
 });
 TooltipContainer.displayName = 'TooltipContainer';

package/dist/cjs/tooltip-primitive.js

@@ -10,6 +10,8 @@ require("./tooltip-primitive.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _tooltipShortcut = require("./tooltip-shortcut");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var primitiveStyles = null;
 
@@ -24,7 +26,8 @@ var TooltipPrimitive = /*#__PURE__*/(0, _react.forwardRef)(function TooltipPrimi
     testId = _ref.testId,
     onMouseOut = _ref.onMouseOut,
     onMouseOver = _ref.onMouseOver,
-    id = _ref.id;
+    id = _ref.id,
+    shortcut = _ref.shortcut;
   return /*#__PURE__*/React.createElement("div", {
     ref: ref
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
@@ -44,7 +47,9 @@ var TooltipPrimitive = /*#__PURE__*/(0, _react.forwardRef)(function TooltipPrimi
     "data-placement": placement,
     "data-testid": testId,
     id: id
-  }, children));
+  }, children, shortcut && (0, _platformFeatureFlags.fg)('platform-dst-tooltip-shortcuts') && /*#__PURE__*/React.createElement(_tooltipShortcut.TooltipShortcut, {
+    shortcut: shortcut
+  })));
 });
 TooltipPrimitive.displayName = 'TooltipPrimitive';
 var _default = exports.default = TooltipPrimitive;

package/dist/cjs/tooltip-shortcut.compiled.css

@@ -0,0 +1,12 @@
+._11c81u0j{font:var(--ds-font-code,normal 400 .875em/1 ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}
+._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
+._zulpv77o{gap:var(--ds-space-025,2px)}
+._189ee4h9{border-width:var(--ds-border-width,1px)}
+._1dqonqa1{border-style:solid}
+._1h6d7jlr{border-color:var(--ds-border-bold,#758195)}
+._1e0c1txw{display:flex}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
+._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
+._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
+._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
+._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}

package/dist/cjs/tooltip-shortcut.js

@@ -0,0 +1,33 @@
+/* tooltip-shortcut.tsx generated by @compiled/babel-plugin v0.38.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TooltipShortcut = void 0;
+require("./tooltip-shortcut.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var styles = {
+  shortcutSegmentsContainer: "_zulpv77o _1e0c1txw _1q511b66 _85i5v77o",
+  shortcutSegment: "_11c81u0j _2rkolb4i _1dqonqa1 _189ee4h9 _1h6d7jlr _1q51v77o _85i5v77o _bozg12x7 _y4ti12x7"
+};
+/**
+ * __Tooltip shortcut__
+ *
+ * An internal component that is used to display a keyboard shortcut within a tooltip, showing each key
+ * as a styled segment after the main tooltip content.
+ */
+var TooltipShortcut = exports.TooltipShortcut = function TooltipShortcut(_ref) {
+  var shortcut = _ref.shortcut;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([styles.shortcutSegmentsContainer])
+  }, shortcut.map(function (segment, index) {
+    return /*#__PURE__*/React.createElement("kbd", {
+      key: "".concat(segment, "-").concat(index),
+      className: (0, _runtime.ax)([styles.shortcutSegment])
+    }, segment);
+  }));
+};

package/dist/cjs/tooltip.js

@@ -89,7 +89,8 @@ function Tooltip(_ref) {
     _ref$ignoreTooltipPoi = _ref.ignoreTooltipPointerEvents,
     ignoreTooltipPointerEvents = _ref$ignoreTooltipPoi === void 0 ? false : _ref$ignoreTooltipPoi,
     _ref$isScreenReaderAn = _ref.isScreenReaderAnnouncementDisabled,
-    isScreenReaderAnnouncementDisabled = _ref$isScreenReaderAn === void 0 ? false : _ref$isScreenReaderAn;
+    isScreenReaderAnnouncementDisabled = _ref$isScreenReaderAn === void 0 ? false : _ref$isScreenReaderAn,
+    shortcut = _ref.shortcut;
   var tooltipPosition = position === 'mouse' ? mousePosition : position;
   var onShowHandler = (0, _analyticsNext.usePlatformLeafSyntheticEventHandler)(_objectSpread({
     fn: onShow,
@@ -538,7 +539,8 @@ function Tooltip(_ref) {
         placement: tooltipPosition,
         testId: getReferenceElement() ? testId : testId && "".concat(testId, "--unresolved"),
         onMouseOut: onMouseOut,
-        onMouseOver: onMouseOverTooltip
+        onMouseOver: onMouseOverTooltip,
+        shortcut: shortcut
       }, typeof content === 'function' ? content({
         update: update
       }) : content);

package/dist/es2019/tooltip-container.compiled.css

@@ -5,8 +5,10 @@
 ._1bto1l2s{text-overflow:ellipsis}
 ._1e02ze3t{inset-inline-start:var(--ds-space-0,0)}
 ._1i4q1hna{overflow-wrap:break-word}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
 ._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
 ._1reo15vq{overflow-x:hidden}
+._85i51b66{padding-block-end:var(--ds-space-050,4px)}
 ._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
 ._bfhkgkf6{background-color:var(--ds-background-neutral-bold,#172b4d)}
 ._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}

package/dist/es2019/tooltip-container.js

@@ -3,10 +3,13 @@ import "./tooltip-container.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef } from 'react';
-import { N0, N800 } from '@atlaskit/theme/colors';
+import { fg } from '@atlaskit/platform-feature-flags';
 import TooltipPrimitive from './tooltip-primitive';
-const baseStyles = null;
-const truncateStyles = null;
+const styles = {
+  base: "_2rkofajl _11c8dcr7 _vchhusvi _p12fp3fh _bfhkgkf6 _syaz15cr _152tze3t _1e02ze3t _1i4q1hna _85i5v77o _1q51v77o _y4ti12x7 _bozg12x7 _slp31hna",
+  baseRefreshedPadding: "_1q511b66 _85i51b66",
+  truncate: "_1reo15vq _18m915vq _p12f1pna _1bto1l2s _o5721q9c"
+};
 
 /**
  * Used as the default tooltip container component for the exported `Tooltip` component.
@@ -21,7 +24,8 @@ const TooltipContainer = /*#__PURE__*/forwardRef(function TooltipContainer({
   testId,
   onMouseOut,
   onMouseOver,
-  id
+  id,
+  shortcut
 }, ref) {
   return /*#__PURE__*/React.createElement(TooltipPrimitive, {
     ref: ref
@@ -30,12 +34,13 @@ const TooltipContainer = /*#__PURE__*/forwardRef(function TooltipContainer({
     style: style
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: ax(["_2rkofajl _11c8dcr7 _vchhusvi _p12fp3fh _bfhkgkf6 _syaz15cr _152tze3t _1e02ze3t _1i4q1hna _85i5v77o _1q51v77o _y4ti12x7 _bozg12x7 _slp31hna", truncate && "_1reo15vq _18m915vq _p12f1pna _1bto1l2s _o5721q9c", className]),
+    className: ax([styles.base, fg('platform-dst-tooltip-shortcuts') && styles.baseRefreshedPadding, truncate && styles.truncate, className]),
     placement: placement,
     testId: testId,
     id: id,
     onMouseOut: onMouseOut,
-    onMouseOver: onMouseOver
+    onMouseOver: onMouseOver,
+    shortcut: shortcut
   }, children);
 });
 TooltipContainer.displayName = 'TooltipContainer';

package/dist/es2019/tooltip-primitive.js

@@ -3,6 +3,8 @@ import "./tooltip-primitive.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { TooltipShortcut } from './tooltip-shortcut';
 const primitiveStyles = null;
 
 /**
@@ -16,7 +18,8 @@ const TooltipPrimitive = /*#__PURE__*/forwardRef(function TooltipPrimitive({
   testId,
   onMouseOut,
   onMouseOver,
-  id
+  id,
+  shortcut
 }, ref) {
   return /*#__PURE__*/React.createElement("div", {
     ref: ref
@@ -37,7 +40,9 @@ const TooltipPrimitive = /*#__PURE__*/forwardRef(function TooltipPrimitive({
     "data-placement": placement,
     "data-testid": testId,
     id: id
-  }, children));
+  }, children, shortcut && fg('platform-dst-tooltip-shortcuts') && /*#__PURE__*/React.createElement(TooltipShortcut, {
+    shortcut: shortcut
+  })));
 });
 TooltipPrimitive.displayName = 'TooltipPrimitive';
 export default TooltipPrimitive;

package/dist/es2019/tooltip-shortcut.compiled.css

@@ -0,0 +1,12 @@
+._11c81u0j{font:var(--ds-font-code,normal 400 .875em/1 ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}
+._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
+._zulpv77o{gap:var(--ds-space-025,2px)}
+._189ee4h9{border-width:var(--ds-border-width,1px)}
+._1dqonqa1{border-style:solid}
+._1h6d7jlr{border-color:var(--ds-border-bold,#758195)}
+._1e0c1txw{display:flex}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
+._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
+._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
+._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
+._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}

package/dist/es2019/tooltip-shortcut.js

@@ -0,0 +1,24 @@
+/* tooltip-shortcut.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./tooltip-shortcut.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+const styles = {
+  shortcutSegmentsContainer: "_zulpv77o _1e0c1txw _1q511b66 _85i5v77o",
+  shortcutSegment: "_11c81u0j _2rkolb4i _1dqonqa1 _189ee4h9 _1h6d7jlr _1q51v77o _85i5v77o _bozg12x7 _y4ti12x7"
+};
+/**
+ * __Tooltip shortcut__
+ *
+ * An internal component that is used to display a keyboard shortcut within a tooltip, showing each key
+ * as a styled segment after the main tooltip content.
+ */
+export const TooltipShortcut = ({
+  shortcut
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.shortcutSegmentsContainer])
+  }, shortcut.map((segment, index) => /*#__PURE__*/React.createElement("kbd", {
+    key: `${segment}-${index}`,
+    className: ax([styles.shortcutSegment])
+  }, segment)));
+};

package/dist/es2019/tooltip.js

@@ -62,7 +62,8 @@ function Tooltip({
   analyticsContext,
   strategy = 'fixed',
   ignoreTooltipPointerEvents = false,
-  isScreenReaderAnnouncementDisabled = false
+  isScreenReaderAnnouncementDisabled = false,
+  shortcut
 }) {
   const tooltipPosition = position === 'mouse' ? mousePosition : position;
   const onShowHandler = usePlatformLeafSyntheticEventHandler({
@@ -519,7 +520,8 @@ function Tooltip({
       placement: tooltipPosition,
       testId: getReferenceElement() ? testId : testId && `${testId}--unresolved`,
       onMouseOut: onMouseOut,
-      onMouseOver: onMouseOverTooltip
+      onMouseOver: onMouseOverTooltip,
+      shortcut: shortcut
     }, typeof content === 'function' ? content({
       update
     }) : content)));

package/dist/esm/tooltip-container.compiled.css

@@ -5,15 +5,17 @@
 ._1bto1l2s{text-overflow:ellipsis}
 ._1e02ze3t{inset-inline-start:var(--ds-space-0,0)}
 ._1i4q1hna{overflow-wrap:break-word}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
 ._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
 ._1reo15vq{overflow-x:hidden}
+._85i51b66{padding-block-end:var(--ds-space-050,4px)}
 ._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
-._bfhkpioe{background-color:var(--_yr7xfv)}
+._bfhkgkf6{background-color:var(--ds-background-neutral-bold,#172b4d)}
 ._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
 ._o5721q9c{white-space:nowrap}
 ._p12f1pna{max-width:420px}
 ._p12fp3fh{max-width:15pc}
 ._slp31hna{word-wrap:break-word}
-._syaz1i9p{color:var(--_ywovvi)}
+._syaz15cr{color:var(--ds-text-inverse,#fff)}
 ._vchhusvi{box-sizing:border-box}
 ._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}

package/dist/esm/tooltip-container.js

@@ -1,15 +1,15 @@
 /* tooltip-container.tsx generated by @compiled/babel-plugin v0.38.1 */
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./tooltip-container.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-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; }
 import { forwardRef } from 'react';
-import { N0, N800 } from '@atlaskit/theme/colors';
+import { fg } from '@atlaskit/platform-feature-flags';
 import TooltipPrimitive from './tooltip-primitive';
-var baseStyles = null;
-var truncateStyles = null;
+var styles = {
+  base: "_2rkofajl _11c8dcr7 _vchhusvi _p12fp3fh _bfhkgkf6 _syaz15cr _152tze3t _1e02ze3t _1i4q1hna _85i5v77o _1q51v77o _y4ti12x7 _bozg12x7 _slp31hna",
+  baseRefreshedPadding: "_1q511b66 _85i51b66",
+  truncate: "_1reo15vq _18m915vq _p12f1pna _1bto1l2s _o5721q9c"
+};
 
 /**
  * Used as the default tooltip container component for the exported `Tooltip` component.
@@ -24,23 +24,22 @@ var TooltipContainer = /*#__PURE__*/forwardRef(function TooltipContainer(_ref, r
     testId = _ref.testId,
     onMouseOut = _ref.onMouseOut,
     onMouseOver = _ref.onMouseOver,
-    id = _ref.id;
+    id = _ref.id,
+    shortcut = _ref.shortcut;
   return /*#__PURE__*/React.createElement(TooltipPrimitive, {
     ref: ref
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
-
+    style: style
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: ax(["_2rkofajl _11c8dcr7 _vchhusvi _p12fp3fh _bfhkpioe _syaz1i9p _152tze3t _1e02ze3t _1i4q1hna _85i5v77o _1q51v77o _y4ti12x7 _bozg12x7 _slp31hna", truncate && "_1reo15vq _18m915vq _p12f1pna _1bto1l2s _o5721q9c", className]),
+    ,
+    className: ax([styles.base, fg('platform-dst-tooltip-shortcuts') && styles.baseRefreshedPadding, truncate && styles.truncate, className]),
     placement: placement,
     testId: testId,
     id: id,
     onMouseOut: onMouseOut,
     onMouseOver: onMouseOver,
-    style: _objectSpread(_objectSpread({}, style), {}, {
-      "--_yr7xfv": ix("var(--ds-background-neutral-bold, ".concat(N800, ")")),
-      "--_ywovvi": ix("var(--ds-text-inverse, ".concat(N0, ")"))
-    })
+    shortcut: shortcut
   }, children);
 });
 TooltipContainer.displayName = 'TooltipContainer';

package/dist/esm/tooltip-primitive.js

@@ -3,6 +3,8 @@ import "./tooltip-primitive.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { TooltipShortcut } from './tooltip-shortcut';
 var primitiveStyles = null;
 
 /**
@@ -16,7 +18,8 @@ var TooltipPrimitive = /*#__PURE__*/forwardRef(function TooltipPrimitive(_ref, r
     testId = _ref.testId,
     onMouseOut = _ref.onMouseOut,
     onMouseOver = _ref.onMouseOver,
-    id = _ref.id;
+    id = _ref.id,
+    shortcut = _ref.shortcut;
   return /*#__PURE__*/React.createElement("div", {
     ref: ref
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
@@ -36,7 +39,9 @@ var TooltipPrimitive = /*#__PURE__*/forwardRef(function TooltipPrimitive(_ref, r
     "data-placement": placement,
     "data-testid": testId,
     id: id
-  }, children));
+  }, children, shortcut && fg('platform-dst-tooltip-shortcuts') && /*#__PURE__*/React.createElement(TooltipShortcut, {
+    shortcut: shortcut
+  })));
 });
 TooltipPrimitive.displayName = 'TooltipPrimitive';
 export default TooltipPrimitive;

package/dist/esm/tooltip-shortcut.compiled.css

@@ -0,0 +1,12 @@
+._11c81u0j{font:var(--ds-font-code,normal 400 .875em/1 ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}
+._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
+._zulpv77o{gap:var(--ds-space-025,2px)}
+._189ee4h9{border-width:var(--ds-border-width,1px)}
+._1dqonqa1{border-style:solid}
+._1h6d7jlr{border-color:var(--ds-border-bold,#758195)}
+._1e0c1txw{display:flex}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
+._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
+._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
+._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
+._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}

package/dist/esm/tooltip-shortcut.js

@@ -0,0 +1,25 @@
+/* tooltip-shortcut.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./tooltip-shortcut.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+var styles = {
+  shortcutSegmentsContainer: "_zulpv77o _1e0c1txw _1q511b66 _85i5v77o",
+  shortcutSegment: "_11c81u0j _2rkolb4i _1dqonqa1 _189ee4h9 _1h6d7jlr _1q51v77o _85i5v77o _bozg12x7 _y4ti12x7"
+};
+/**
+ * __Tooltip shortcut__
+ *
+ * An internal component that is used to display a keyboard shortcut within a tooltip, showing each key
+ * as a styled segment after the main tooltip content.
+ */
+export var TooltipShortcut = function TooltipShortcut(_ref) {
+  var shortcut = _ref.shortcut;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.shortcutSegmentsContainer])
+  }, shortcut.map(function (segment, index) {
+    return /*#__PURE__*/React.createElement("kbd", {
+      key: "".concat(segment, "-").concat(index),
+      className: ax([styles.shortcutSegment])
+    }, segment);
+  }));
+};

package/dist/esm/tooltip.js

@@ -80,7 +80,8 @@ function Tooltip(_ref) {
     _ref$ignoreTooltipPoi = _ref.ignoreTooltipPointerEvents,
     ignoreTooltipPointerEvents = _ref$ignoreTooltipPoi === void 0 ? false : _ref$ignoreTooltipPoi,
     _ref$isScreenReaderAn = _ref.isScreenReaderAnnouncementDisabled,
-    isScreenReaderAnnouncementDisabled = _ref$isScreenReaderAn === void 0 ? false : _ref$isScreenReaderAn;
+    isScreenReaderAnnouncementDisabled = _ref$isScreenReaderAn === void 0 ? false : _ref$isScreenReaderAn,
+    shortcut = _ref.shortcut;
   var tooltipPosition = position === 'mouse' ? mousePosition : position;
   var onShowHandler = usePlatformLeafSyntheticEventHandler(_objectSpread({
     fn: onShow,
@@ -529,7 +530,8 @@ function Tooltip(_ref) {
         placement: tooltipPosition,
         testId: getReferenceElement() ? testId : testId && "".concat(testId, "--unresolved"),
         onMouseOut: onMouseOut,
-        onMouseOver: onMouseOverTooltip
+        onMouseOver: onMouseOverTooltip,
+        shortcut: shortcut
       }, typeof content === 'function' ? content({
         update: update
       }) : content);

package/dist/types/tooltip-primitive.d.ts

@@ -15,6 +15,7 @@ export interface TooltipPrimitiveProps {
     onMouseOver?: (e: React.MouseEvent<HTMLDivElement>) => void;
     onMouseOut?: (e: React.MouseEvent<HTMLDivElement>) => void;
     id?: string;
+    shortcut?: string[];
 }
 /**
  * The lower level component for rendering a tooltip.

package/dist/types/tooltip-shortcut.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+type TooltipShortcutProps = {
+    shortcut: string[];
+};
+/**
+ * __Tooltip shortcut__
+ *
+ * An internal component that is used to display a keyboard shortcut within a tooltip, showing each key
+ * as a styled segment after the main tooltip content.
+ */
+export declare const TooltipShortcut: ({ shortcut }: TooltipShortcutProps) => JSX.Element;
+export {};

package/dist/types/tooltip.d.ts

@@ -5,5 +5,5 @@ import { type TooltipProps } from './types';
  *
  * A tooltip is a floating, non-actionable label used to explain a user interface element or feature.
  */
-declare function Tooltip({ children, position, mousePosition, content, truncate, component: Container, tag: TargetContainer, testId, delay, onShow, onHide, canAppear, hideTooltipOnClick, hideTooltipOnMouseDown, analyticsContext, strategy, ignoreTooltipPointerEvents, isScreenReaderAnnouncementDisabled, }: TooltipProps): React.JSX.Element;
+declare function Tooltip({ children, position, mousePosition, content, truncate, component: Container, tag: TargetContainer, testId, delay, onShow, onHide, canAppear, hideTooltipOnClick, hideTooltipOnMouseDown, analyticsContext, strategy, ignoreTooltipPointerEvents, isScreenReaderAnnouncementDisabled, shortcut, }: TooltipProps): React.JSX.Element;
 export default Tooltip;

package/dist/types/types.d.ts

@@ -132,4 +132,12 @@ export interface TooltipProps {
      * Use this to define the strategy of popper.
      */
     strategy?: 'absolute' | 'fixed' | undefined;
+    /**
+     * Display a keyboard shortcut in the tooltip.
+     *
+     * Keys will be displayed as individual keyboard key segments after the tooltip content.
+     *
+     * This prop requires the `platform-dst-tooltip-shortcuts` feature flag to be enabled.
+     */
+    shortcut?: string[];
 }

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

@@ -15,6 +15,7 @@ export interface TooltipPrimitiveProps {
     onMouseOver?: (e: React.MouseEvent<HTMLDivElement>) => void;
     onMouseOut?: (e: React.MouseEvent<HTMLDivElement>) => void;
     id?: string;
+    shortcut?: string[];
 }
 /**
  * The lower level component for rendering a tooltip.

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

@@ -0,0 +1,15 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+type TooltipShortcutProps = {
+    shortcut: string[];
+};
+/**
+ * __Tooltip shortcut__
+ *
+ * An internal component that is used to display a keyboard shortcut within a tooltip, showing each key
+ * as a styled segment after the main tooltip content.
+ */
+export declare const TooltipShortcut: ({ shortcut }: TooltipShortcutProps) => JSX.Element;
+export {};

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

@@ -5,5 +5,5 @@ import { type TooltipProps } from './types';
  *
  * A tooltip is a floating, non-actionable label used to explain a user interface element or feature.
  */
-declare function Tooltip({ children, position, mousePosition, content, truncate, component: Container, tag: TargetContainer, testId, delay, onShow, onHide, canAppear, hideTooltipOnClick, hideTooltipOnMouseDown, analyticsContext, strategy, ignoreTooltipPointerEvents, isScreenReaderAnnouncementDisabled, }: TooltipProps): React.JSX.Element;
+declare function Tooltip({ children, position, mousePosition, content, truncate, component: Container, tag: TargetContainer, testId, delay, onShow, onHide, canAppear, hideTooltipOnClick, hideTooltipOnMouseDown, analyticsContext, strategy, ignoreTooltipPointerEvents, isScreenReaderAnnouncementDisabled, shortcut, }: TooltipProps): React.JSX.Element;
 export default Tooltip;

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

@@ -132,4 +132,12 @@ export interface TooltipProps {
      * Use this to define the strategy of popper.
      */
     strategy?: 'absolute' | 'fixed' | undefined;
+    /**
+     * Display a keyboard shortcut in the tooltip.
+     *
+     * Keys will be displayed as individual keyboard key segments after the tooltip content.
+     *
+     * This prop requires the `platform-dst-tooltip-shortcuts` feature flag to be enabled.
+     */
+    shortcut?: string[];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tooltip",
-	"version": "20.4.8",
+	"version": "20.5.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/"
@@ -40,7 +40,7 @@
 		"@atlaskit/popper": "^7.1.0",
 		"@atlaskit/portal": "^5.1.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tokens": "^6.3.0",
+		"@atlaskit/tokens": "^6.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3",
 		"bind-event-listener": "^3.0.0"
@@ -98,6 +98,9 @@
 			"type": "boolean",
 			"referenceOnly": true
 		},
+		"platform-dst-tooltip-shortcuts": {
+			"type": "boolean"
+		},
 		"should-render-to-parent-should-be-true-design-syst": {
 			"type": "boolean"
 		}