@atlaskit/tooltip 17.5.17 → 17.6.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/tooltip
 
+## 17.6.1
+
+### Patch Changes
+
+- [`9827dcb82b8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9827dcb82b8) - No-op change to introduce spacing tokens to design system components.
+
+## 17.6.0
+
+### Minor Changes
+
+- [`15f0ad7aaa3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/15f0ad7aaa3) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+
 ## 17.5.17
 
 ### Patch Changes

package/dist/cjs/Tooltip.js

@@ -17,7 +17,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _bindEventListener = require("bind-event-listener");
 
@@ -58,7 +58,7 @@ var tooltipZIndex = _constants.layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "17.5.17"
+  packageVersion: "17.6.1"
 }; // Inverts motion direction
 
 var invertedDirection = {
@@ -407,11 +407,11 @@ function Tooltip(_ref) {
     'aria-describedby': tooltipId,
     'data-testid': testId ? "".concat(testId, "--container") : undefined
   };
-  return (0, _core.jsx)(_react.default.Fragment, null, typeof children === 'function' ? children(tooltipTriggerProps) : (0, _core.jsx)(CastTargetContainer, (0, _extends2.default)({}, tooltipTriggerProps, {
+  return (0, _react2.jsx)(_react.default.Fragment, null, typeof children === 'function' ? children(tooltipTriggerProps) : (0, _react2.jsx)(CastTargetContainer, (0, _extends2.default)({}, tooltipTriggerProps, {
     role: "presentation"
-  }), children), shouldRenderTooltipContainer ? (0, _core.jsx)(_portal.default, {
+  }), children), shouldRenderTooltipContainer ? (0, _react2.jsx)(_portal.default, {
     zIndex: tooltipZIndex
-  }, (0, _core.jsx)(_popper.Popper, {
+  }, (0, _react2.jsx)(_popper.Popper, {
     placement: tooltipPosition,
     referenceElement: getReferenceElement(),
     strategy: strategy
@@ -424,9 +424,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, _core.jsx)(_motion.ExitingPersistence, {
+    return (0, _react2.jsx)(_motion.ExitingPersistence, {
       appear: true
-    }, shouldRenderTooltipChildren && (0, _core.jsx)(_motion.FadeIn, {
+    }, shouldRenderTooltipChildren && (0, _react2.jsx)(_motion.FadeIn, {
       distance: "constant",
       entranceDirection: direction,
       exitDirection: direction,
@@ -435,7 +435,7 @@ function Tooltip(_ref) {
     }, function (_ref5) {
       var className = _ref5.className;
       return (// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-        (0, _core.jsx)(Container, {
+        (0, _react2.jsx)(Container, {
           ref: ref,
           className: "Tooltip ".concat(className),
           style: style,

package/dist/cjs/TooltipContainer.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -20,10 +20,10 @@ var _constants = require("@atlaskit/theme/constants");
 var _TooltipPrimitive = _interopRequireDefault(require("./TooltipPrimitive"));
 
 /** @jsx jsx */
-var baseStyles = (0, _core.css)({
+var baseStyles = (0, _react2.css)({
   boxSizing: 'border-box',
   maxWidth: '240px',
-  padding: '2px 6px',
+  padding: "var(--ds-scale-025, 2px)".concat(" ", "var(--ds-scale-075, 6px)"),
   top: 0,
   left: 0,
   borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
@@ -32,17 +32,17 @@ var baseStyles = (0, _core.css)({
   overflowWrap: 'break-word',
   wordWrap: 'break-word'
 });
-var truncateStyles = (0, _core.css)({
+var truncateStyles = (0, _react2.css)({
   maxWidth: '420px',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
-var lightStyles = (0, _core.css)({
+var lightStyles = (0, _react2.css)({
   backgroundColor: "var(--ds-background-neutral-bold, ".concat(_colors.N800, ")"),
   color: "var(--ds-text-inverse, ".concat(_colors.N0, ")")
 });
-var darkStyles = (0, _core.css)({
+var darkStyles = (0, _react2.css)({
   backgroundColor: "var(--ds-background-neutral-bold, ".concat(_colors.DN0, ")"),
   color: "var(--ds-text-inverse, ".concat(_colors.DN600, ")")
 });
@@ -56,10 +56,10 @@ var TooltipContainer = /*#__PURE__*/(0, _react.forwardRef)(function TooltipConta
       onMouseOut = _ref.onMouseOut,
       onMouseOver = _ref.onMouseOver,
       id = _ref.id;
-  return (0, _core.jsx)(_components.default.Consumer, null, function (_ref2) {
+  return (0, _react2.jsx)(_components.default.Consumer, null, function (_ref2) {
     var mode = _ref2.mode;
     return (// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-      (0, _core.jsx)(_TooltipPrimitive.default, {
+      (0, _react2.jsx)(_TooltipPrimitive.default, {
         ref: ref,
         style: style,
         className: className,

package/dist/cjs/TooltipPrimitive.js

@@ -11,7 +11,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
 
@@ -20,7 +20,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var VAR_PRIMITIVE_ZINDEX = 'tooltipPrimitiveZindex';
-var primitiveStyles = (0, _core.css)({
+var primitiveStyles = (0, _react2.css)({
   zindex: "var(".concat(VAR_PRIMITIVE_ZINDEX, ")"),
   cursor: "default"
 });
@@ -36,11 +36,11 @@ var TooltipPrimitive = /*#__PURE__*/(0, _react.forwardRef)(function TooltipPrimi
 
   var styleWithZIndex = _objectSpread(_objectSpread({}, style), {}, (0, _defineProperty2.default)({}, VAR_PRIMITIVE_ZINDEX, _constants.layers.tooltip()));
 
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     ref: ref,
     style: styleWithZIndex,
     "data-testid": testId ? "".concat(testId, "--wrapper") : undefined
-  }, (0, _core.jsx)("div", {
+  }, (0, _react2.jsx)("div", {
     role: "tooltip",
     className: className,
     onMouseOut: onMouseOut,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/tooltip",
-	"version": "17.5.17",
+	"version": "17.6.1",
 	"sideEffects": false
 }

package/dist/es2019/Tooltip.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
 import { usePlatformLeafSyntheticEventHandler } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
@@ -20,7 +20,7 @@ const tooltipZIndex = layers.tooltip();
 const analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "17.5.17"
+  packageVersion: "17.6.1"
 }; // Inverts motion direction
 
 const invertedDirection = {

package/dist/es2019/TooltipContainer.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { forwardRef } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { DN0, DN600, N0, N800 } from '@atlaskit/theme/colors';
 import GlobalTheme from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
@@ -8,7 +8,7 @@ import TooltipPrimitive from './TooltipPrimitive';
 const baseStyles = css({
   boxSizing: 'border-box',
   maxWidth: '240px',
-  padding: '2px 6px',
+  padding: `${"var(--ds-scale-025, 2px)"} ${"var(--ds-scale-075, 6px)"}`,
   top: 0,
   left: 0,
   borderRadius: `${borderRadius()}px`,

package/dist/es2019/TooltipPrimitive.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { forwardRef } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { layers } from '@atlaskit/theme/constants';
 const VAR_PRIMITIVE_ZINDEX = 'tooltipPrimitiveZindex';
 const primitiveStyles = css({

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/tooltip",
-	"version": "17.5.17",
+	"version": "17.6.1",
 	"sideEffects": false
 }

package/dist/esm/Tooltip.js

@@ -8,7 +8,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 /** @jsx jsx */
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
 import { usePlatformLeafSyntheticEventHandler } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
@@ -26,7 +26,7 @@ var tooltipZIndex = layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "17.5.17"
+  packageVersion: "17.6.1"
 }; // Inverts motion direction
 
 var invertedDirection = {

package/dist/esm/TooltipContainer.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { forwardRef } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { DN0, DN600, N0, N800 } from '@atlaskit/theme/colors';
 import GlobalTheme from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
@@ -8,7 +8,7 @@ import TooltipPrimitive from './TooltipPrimitive';
 var baseStyles = css({
   boxSizing: 'border-box',
   maxWidth: '240px',
-  padding: '2px 6px',
+  padding: "var(--ds-scale-025, 2px)".concat(" ", "var(--ds-scale-075, 6px)"),
   top: 0,
   left: 0,
   borderRadius: "".concat(borderRadius(), "px"),

package/dist/esm/TooltipPrimitive.js

@@ -6,7 +6,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 /** @jsx jsx */
 import { forwardRef } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { layers } from '@atlaskit/theme/constants';
 var VAR_PRIMITIVE_ZINDEX = 'tooltipPrimitiveZindex';
 var primitiveStyles = css({

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/tooltip",
-	"version": "17.5.17",
+	"version": "17.6.1",
 	"sideEffects": false
 }

package/dist/types/Tooltip.d.ts

@@ -1,7 +1,7 @@
 /** @jsx jsx */
-/// <reference types="react" />
+import { jsx } from '@emotion/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.Element;
+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 namespace Tooltip {
     var displayName: string;
 }

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

@@ -1,7 +1,7 @@
-/// <reference types="react" />
 /** @jsx jsx */
+import { jsx } from '@emotion/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.Element;
+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 namespace Tooltip {
     var displayName: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tooltip",
-  "version": "17.5.17",
+  "version": "17.6.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/"
@@ -15,13 +15,15 @@
   "typesVersions": {
     ">=4.0 <4.5": {
       "*": [
-        "dist/types-ts4.0/*"
+        "dist/types-ts4.0/*",
+        "dist/types-ts4.0/index.d.ts"
       ]
     }
   },
   "sideEffects": false,
   "atlaskit:src": "src/index.ts",
   "atlassian": {
+    "disableProductCI": true,
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
@@ -46,7 +48,7 @@
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9",
+    "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
     "react-uid": "^2.2.0"
   },
@@ -57,8 +59,8 @@
   "devDependencies": {
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/section-message": "^6.2.0",
+    "@atlaskit/icon": "^21.11.0",
+    "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
@@ -86,6 +88,7 @@
       "dom-events": "use-bind-event-listener",
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
+      "design-tokens": "spacing",
       "theming": "tokens",
       "deprecation": "no-deprecated-imports",
       "styling": [

package/report.api.md

@@ -1,13 +1,14 @@
-## API Report File for "@atlaskit/tooltip"
+## API Report File for "@atlaskit/tooltip".
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
 
-```ts
-/// <reference types="react" />
+[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
+```ts
 import { ComponentType } from 'react';
 import { CSSProperties } from 'react';
 import { ForwardRefExoticComponent } from 'react';
+import { jsx } from '@emotion/react';
 import { Placement } from '@atlaskit/popper';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
@@ -33,7 +34,7 @@ declare function Tooltip({
   hideTooltipOnMouseDown,
   analyticsContext,
   strategy,
-}: TooltipProps): JSX.Element;
+}: TooltipProps): jsx.JSX.Element;
 
 declare namespace Tooltip {
   var displayName: string;