@atlaskit/tooltip 18.9.3 → 19.0.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/tooltip
 
+## 19.0.0
+
+### Major Changes
+
+- [#174355](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/174355)
+  [`d0d1aae2aa428`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d0d1aae2aa428) -
+  Migrated from `@emotion/react` to `@compiled/react` in order to improve performance, align with
+  the rest of the Atlaskit techstack, and support React 18 Streaming SSR. Please note, in order to
+  use this version of `@atlaskit/tooltip`, you will need to ensure that your bundler is configured
+  to handle `.css` imports correctly.
+
+  Most bundlers come with built-in support for `.css` imports, so you may not need to do anything.
+  If you are using a different bundler, please refer to the documentation for that bundler to
+  understand how to handle `.css` imports. For more information on the migration, please refer to
+  [RFC-73 Migrating our components to Compiled CSS-in-JS](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953).
+
+## 18.9.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 18.9.3
 
 ### Patch Changes

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

@@ -0,0 +1,16 @@
+._11c8qk37{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._1yt4nmcz{padding:var(--_a5vo3x)}
+._2rko1sit{border-radius:var(--ds-border-radius,3px)}
+._152tze3t{inset-block-start:var(--ds-space-0,0)}
+._18m915vq{overflow-y:hidden}
+._1bto1l2s{text-overflow:ellipsis}
+._1e02ze3t{inset-inline-start:var(--ds-space-0,0)}
+._1i4q1hna{overflow-wrap:break-word}
+._1reo15vq{overflow-x:hidden}
+._bfhkpioe{background-color:var(--_yr7xfv)}
+._o5721q9c{white-space:nowrap}
+._p12f1pna{max-width:420px}
+._p12fp3fh{max-width:15pc}
+._slp31hna{word-wrap:break-word}
+._syaz1i9p{color:var(--_ywovvi)}
+._vchhusvi{box-sizing:border-box}

package/dist/cjs/tooltip-container.js

@@ -1,40 +1,25 @@
+/* tooltip-container.tsx generated by @compiled/babel-plugin v0.32.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
-var _react2 = require("@emotion/react");
+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 _tooltipPrimitive = _interopRequireDefault(require("./tooltip-primitive"));
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var baseStyles = (0, _react2.css)({
-  boxSizing: 'border-box',
-  maxWidth: '240px',
-  padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-075, 6px)"),
-  backgroundColor: "var(--ds-background-neutral-bold, ".concat(_colors.N800, ")"),
-  borderRadius: "var(--ds-border-radius, 3px)",
-  color: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  insetBlockStart: "var(--ds-space-0, 0px)",
-  insetInlineStart: "var(--ds-space-0, 0px)",
-  overflowWrap: 'break-word',
-  wordWrap: 'break-word'
-});
-var truncateStyles = (0, _react2.css)({
-  maxWidth: '420px',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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;
 
 /**
  * Used as the default tooltip container component for the exported `Tooltip` component.
@@ -50,20 +35,23 @@ var TooltipContainer = /*#__PURE__*/(0, _react.forwardRef)(function TooltipConta
     onMouseOut = _ref.onMouseOut,
     onMouseOver = _ref.onMouseOver,
     id = _ref.id;
-  return (0, _react2.jsx)(_tooltipPrimitive.default, {
+  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: className,
+    className: (0, _runtime.ax)(["_vchhusvi _p12fp3fh _1yt4nmcz _bfhkpioe _2rko1sit _syaz1i9p _11c8qk37 _152tze3t _1e02ze3t _1i4q1hna _slp31hna", truncate && "_p12f1pna _1reo15vq _18m915vq _1bto1l2s _o5721q9c", className]),
     placement: placement,
     testId: testId,
     id: id,
     onMouseOut: onMouseOut,
     onMouseOver: onMouseOver,
-    css: [baseStyles, truncate ? truncateStyles : null]
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      "--_a5vo3x": (0, _runtime.ix)("var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-075, 6px)")),
+      "--_yr7xfv": (0, _runtime.ix)("var(--ds-background-neutral-bold, ".concat(_colors.N800, ")")),
+      "--_ywovvi": (0, _runtime.ix)("var(--ds-text-inverse, ".concat(_colors.N0, ")"))
+    })
   }, children);
 });
 TooltipContainer.displayName = 'TooltipContainer';

package/dist/cjs/tooltip-primitive.js

@@ -45,10 +45,10 @@ var TooltipPrimitive = /*#__PURE__*/(0, _react.forwardRef)(function TooltipPrimi
     ,
     className: className
     // Because the tooltip should not be focusable, there is no reason to have key events.
-    /* eslint-disable jsx-a11y/mouse-events-have-key-events */,
-    onMouseOut: onMouseOut,
-    onMouseOver: onMouseOver
-    /* eslint-enable jsx-a11y/mouse-events-have-key-events */,
+    /* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */,
+    onMouseOut: onMouseOut
+    /* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */,
+    onMouseOver: onMouseOver,
     css: primitiveStyles,
     "data-placement": placement,
     "data-testid": testId,

package/dist/cjs/tooltip.js

@@ -34,7 +34,7 @@ var tooltipZIndex = _constants.layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "18.9.3"
+  packageVersion: "19.0.0"
 };
 
 // Inverts motion direction

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

@@ -0,0 +1,16 @@
+._11c8qk37{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._1yt41ppf{padding:var(--ds-space-025,2px) var(--ds-space-075,6px)}
+._2rko1sit{border-radius:var(--ds-border-radius,3px)}
+._152tze3t{inset-block-start:var(--ds-space-0,0)}
+._18m915vq{overflow-y:hidden}
+._1bto1l2s{text-overflow:ellipsis}
+._1e02ze3t{inset-inline-start:var(--ds-space-0,0)}
+._1i4q1hna{overflow-wrap:break-word}
+._1reo15vq{overflow-x:hidden}
+._bfhkgkf6{background-color:var(--ds-background-neutral-bold,#172b4d)}
+._o5721q9c{white-space:nowrap}
+._p12f1pna{max-width:420px}
+._p12fp3fh{max-width:15pc}
+._slp31hna{word-wrap:break-word}
+._syaz15cr{color:var(--ds-text-inverse,#fff)}
+._vchhusvi{box-sizing:border-box}

package/dist/es2019/tooltip-container.js

@@ -1,32 +1,12 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* tooltip-container.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./tooltip-container.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { N0, N800 } from '@atlaskit/theme/colors';
 import TooltipPrimitive from './tooltip-primitive';
-const baseStyles = css({
-  boxSizing: 'border-box',
-  maxWidth: '240px',
-  padding: `${"var(--ds-space-025, 2px)"} ${"var(--ds-space-075, 6px)"}`,
-  backgroundColor: `var(--ds-background-neutral-bold, ${N800})`,
-  borderRadius: "var(--ds-border-radius, 3px)",
-  color: `var(--ds-text-inverse, ${N0})`,
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  insetBlockStart: "var(--ds-space-0, 0px)",
-  insetInlineStart: "var(--ds-space-0, 0px)",
-  overflowWrap: 'break-word',
-  wordWrap: 'break-word'
-});
-const truncateStyles = css({
-  maxWidth: '420px',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-});
+const baseStyles = null;
+const truncateStyles = null;
 
 /**
  * Used as the default tooltip container component for the exported `Tooltip` component.
@@ -43,20 +23,19 @@ const TooltipContainer = /*#__PURE__*/forwardRef(function TooltipContainer({
   onMouseOver,
   id
 }, ref) {
-  return jsx(TooltipPrimitive, {
+  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: className,
+    className: ax(["_vchhusvi _p12fp3fh _1yt41ppf _bfhkgkf6 _2rko1sit _syaz15cr _11c8qk37 _152tze3t _1e02ze3t _1i4q1hna _slp31hna", truncate && "_p12f1pna _1reo15vq _18m915vq _1bto1l2s _o5721q9c", className]),
     placement: placement,
     testId: testId,
     id: id,
     onMouseOut: onMouseOut,
-    onMouseOver: onMouseOver,
-    css: [baseStyles, truncate ? truncateStyles : null]
+    onMouseOver: onMouseOver
   }, children);
 });
 TooltipContainer.displayName = 'TooltipContainer';

package/dist/es2019/tooltip-primitive.js

@@ -42,10 +42,10 @@ const TooltipPrimitive = /*#__PURE__*/forwardRef(function TooltipPrimitive({
     ,
     className: className
     // Because the tooltip should not be focusable, there is no reason to have key events.
-    /* eslint-disable jsx-a11y/mouse-events-have-key-events */,
-    onMouseOut: onMouseOut,
-    onMouseOver: onMouseOver
-    /* eslint-enable jsx-a11y/mouse-events-have-key-events */,
+    /* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */,
+    onMouseOut: onMouseOut
+    /* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */,
+    onMouseOver: onMouseOver,
     css: primitiveStyles,
     "data-placement": placement,
     "data-testid": testId,

package/dist/es2019/tooltip.js

@@ -20,7 +20,7 @@ const tooltipZIndex = layers.tooltip();
 const analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "18.9.3"
+  packageVersion: "19.0.0"
 };
 
 // Inverts motion direction

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

@@ -0,0 +1,16 @@
+._11c8qk37{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._1yt4nmcz{padding:var(--_a5vo3x)}
+._2rko1sit{border-radius:var(--ds-border-radius,3px)}
+._152tze3t{inset-block-start:var(--ds-space-0,0)}
+._18m915vq{overflow-y:hidden}
+._1bto1l2s{text-overflow:ellipsis}
+._1e02ze3t{inset-inline-start:var(--ds-space-0,0)}
+._1i4q1hna{overflow-wrap:break-word}
+._1reo15vq{overflow-x:hidden}
+._bfhkpioe{background-color:var(--_yr7xfv)}
+._o5721q9c{white-space:nowrap}
+._p12f1pna{max-width:420px}
+._p12fp3fh{max-width:15pc}
+._slp31hna{word-wrap:break-word}
+._syaz1i9p{color:var(--_ywovvi)}
+._vchhusvi{box-sizing:border-box}

package/dist/esm/tooltip-container.js

@@ -1,32 +1,15 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* tooltip-container.tsx generated by @compiled/babel-plugin v0.32.2 */
+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';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { N0, N800 } from '@atlaskit/theme/colors';
 import TooltipPrimitive from './tooltip-primitive';
-var baseStyles = css({
-  boxSizing: 'border-box',
-  maxWidth: '240px',
-  padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-075, 6px)"),
-  backgroundColor: "var(--ds-background-neutral-bold, ".concat(N800, ")"),
-  borderRadius: "var(--ds-border-radius, 3px)",
-  color: "var(--ds-text-inverse, ".concat(N0, ")"),
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  insetBlockStart: "var(--ds-space-0, 0px)",
-  insetInlineStart: "var(--ds-space-0, 0px)",
-  overflowWrap: 'break-word',
-  wordWrap: 'break-word'
-});
-var truncateStyles = css({
-  maxWidth: '420px',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-});
+var baseStyles = null;
+var truncateStyles = null;
 
 /**
  * Used as the default tooltip container component for the exported `Tooltip` component.
@@ -42,20 +25,23 @@ var TooltipContainer = /*#__PURE__*/forwardRef(function TooltipContainer(_ref, r
     onMouseOut = _ref.onMouseOut,
     onMouseOver = _ref.onMouseOver,
     id = _ref.id;
-  return jsx(TooltipPrimitive, {
+  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: className,
+    className: ax(["_vchhusvi _p12fp3fh _1yt4nmcz _bfhkpioe _2rko1sit _syaz1i9p _11c8qk37 _152tze3t _1e02ze3t _1i4q1hna _slp31hna", truncate && "_p12f1pna _1reo15vq _18m915vq _1bto1l2s _o5721q9c", className]),
     placement: placement,
     testId: testId,
     id: id,
     onMouseOut: onMouseOut,
     onMouseOver: onMouseOver,
-    css: [baseStyles, truncate ? truncateStyles : null]
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      "--_a5vo3x": ix("var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-075, 6px)")),
+      "--_yr7xfv": ix("var(--ds-background-neutral-bold, ".concat(N800, ")")),
+      "--_ywovvi": ix("var(--ds-text-inverse, ".concat(N0, ")"))
+    })
   }, children);
 });
 TooltipContainer.displayName = 'TooltipContainer';

package/dist/esm/tooltip-primitive.js

@@ -41,10 +41,10 @@ var TooltipPrimitive = /*#__PURE__*/forwardRef(function TooltipPrimitive(_ref, r
     ,
     className: className
     // Because the tooltip should not be focusable, there is no reason to have key events.
-    /* eslint-disable jsx-a11y/mouse-events-have-key-events */,
-    onMouseOut: onMouseOut,
-    onMouseOver: onMouseOver
-    /* eslint-enable jsx-a11y/mouse-events-have-key-events */,
+    /* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */,
+    onMouseOut: onMouseOut
+    /* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */,
+    onMouseOver: onMouseOver,
     css: primitiveStyles,
     "data-placement": placement,
     "data-testid": testId,

package/dist/esm/tooltip.js

@@ -24,7 +24,7 @@ var tooltipZIndex = layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "18.9.3"
+  packageVersion: "19.0.0"
 };
 
 // Inverts motion direction

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tooltip",
-	"version": "18.9.3",
+	"version": "19.0.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/"
@@ -29,7 +29,7 @@
 		"runReact18": true,
 		"website": {
 			"name": "Tooltip",
-			"category": "Components"
+			"category": "Overlays and layering"
 		}
 	},
 	"af:exports": {
@@ -41,15 +41,16 @@
 		"./utilities": "./src/utilities.ts"
 	},
 	"dependencies": {
-		"@atlaskit/analytics-next": "^10.1.0",
-		"@atlaskit/ds-lib": "^3.2.0",
-		"@atlaskit/layering": "^0.8.0",
+		"@atlaskit/analytics-next": "^10.2.0",
+		"@atlaskit/ds-lib": "^3.3.0",
+		"@atlaskit/layering": "^1.0.0",
 		"@atlaskit/motion": "^1.9.0",
 		"@atlaskit/popper": "^6.3.0",
 		"@atlaskit/portal": "^4.9.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^2.2.0",
+		"@atlaskit/tokens": "^2.4.0",
 		"@babel/runtime": "^7.0.0",
+		"@compiled/react": "^0.18.1",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0"
 	},
@@ -61,9 +62,9 @@
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
 		"@atlaskit/button": "^20.3.0",
+		"@atlaskit/css": "^0.7.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/visual-regression": "*",
-		"@emotion/styled": "^11.0.0",
 		"@testing-library/dom": "^10.1.0",
 		"@testing-library/react": "^12.1.5",
 		"@types/react-redux": "^5.0.0",