@atlaskit/tooltip 20.13.0 → 20.14.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/tooltip
 
+## 20.14.0
+
+### Minor Changes
+
+- [`9cb76d1d2b1a0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9cb76d1d2b1a0) -
+  Adds `UNSAFE_shouldRenderToParent` prop behind the
+  `platform_dst_nav4_side_nav_resize_tooltip_feedback` feature gate. When enabled the tooltip will
+  be rendered as a sibling instead of in a portal.
+
 ## 20.13.0
 
 ### Minor Changes

package/dist/cjs/tooltip.js

@@ -33,7 +33,7 @@ var tooltipZIndex = _constants.layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "0.0.0-development"
+  packageVersion: "20.13.0"
 };
 
 // Inverts motion direction
@@ -92,7 +92,9 @@ function Tooltip(_ref) {
     isScreenReaderAnnouncementDisabled = _ref$isScreenReaderAn === void 0 ? false : _ref$isScreenReaderAn,
     shortcut = _ref.shortcut,
     _ref$UNSAFE_shouldAlw = _ref.UNSAFE_shouldAlwaysFadeIn,
-    shouldAlwaysFadeIn = _ref$UNSAFE_shouldAlw === void 0 ? false : _ref$UNSAFE_shouldAlw;
+    shouldAlwaysFadeIn = _ref$UNSAFE_shouldAlw === void 0 ? false : _ref$UNSAFE_shouldAlw,
+    _ref$UNSAFE_shouldRen = _ref.UNSAFE_shouldRenderToParent,
+    UNSAFE_shouldRenderToParent = _ref$UNSAFE_shouldRen === void 0 ? false : _ref$UNSAFE_shouldRen;
   // Not using a gate for this check. When the gate is disabled `mouse-y` and `mouse-x` are treated as `mouse`.
   var isMousePosition = position === 'mouse' || position === 'mouse-y' || position === 'mouse-x';
   var tooltipPosition = isMousePosition ? mousePosition : position;
@@ -503,6 +505,7 @@ function Tooltip(_ref) {
     hidden: true,
     id: tooltipIdForHiddenContent
   }, typeof content === 'function' ? content({}) : content) : null;
+  var PopperWrapper = UNSAFE_shouldRenderToParent && (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? _react.Fragment : TooltipPortal;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, typeof children === 'function' ?
   /*#__PURE__*/
   // once we deprecate the wrapped approach, we can put the aria
@@ -523,9 +526,7 @@ function Tooltip(_ref) {
      * - Should `role="presentation"` only be used if `shouldRenderHiddenContent == false`?
      */,
     role: "presentation"
-  }), children, hiddenContent), shouldRenderTooltipPopup ? /*#__PURE__*/_react.default.createElement(_portal.default, {
-    zIndex: tooltipZIndex
-  }, /*#__PURE__*/_react.default.createElement(_popper.Popper, {
+  }), children, hiddenContent), shouldRenderTooltipPopup ? /*#__PURE__*/_react.default.createElement(PopperWrapper, null, /*#__PURE__*/_react.default.createElement(_popper.Popper, {
     placement: tooltipPosition,
     referenceElement: getReferenceElement(),
     strategy: strategy
@@ -572,4 +573,10 @@ function Tooltip(_ref) {
     }));
   })) : null);
 }
-var _default = exports.default = Tooltip;
+var _default = exports.default = Tooltip;
+var TooltipPortal = function TooltipPortal(_ref7) {
+  var children = _ref7.children;
+  return /*#__PURE__*/_react.default.createElement(_portal.default, {
+    zIndex: tooltipZIndex
+  }, children);
+};

package/dist/es2019/tooltip.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { Fragment, useCallback, useEffect, useRef, useState } from '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: "0.0.0-development"
+  packageVersion: "20.13.0"
 };
 
 // Inverts motion direction
@@ -64,7 +64,8 @@ function Tooltip({
   ignoreTooltipPointerEvents = false,
   isScreenReaderAnnouncementDisabled = false,
   shortcut,
-  UNSAFE_shouldAlwaysFadeIn: shouldAlwaysFadeIn = false
+  UNSAFE_shouldAlwaysFadeIn: shouldAlwaysFadeIn = false,
+  UNSAFE_shouldRenderToParent = false
 }) {
   // Not using a gate for this check. When the gate is disabled `mouse-y` and `mouse-x` are treated as `mouse`.
   const isMousePosition = position === 'mouse' || position === 'mouse-y' || position === 'mouse-x';
@@ -476,6 +477,7 @@ function Tooltip({
     hidden: true,
     id: tooltipIdForHiddenContent
   }, typeof content === 'function' ? content({}) : content) : null;
+  const PopperWrapper = UNSAFE_shouldRenderToParent && fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? Fragment : TooltipPortal;
   return /*#__PURE__*/React.createElement(React.Fragment, null, typeof children === 'function' ?
   /*#__PURE__*/
   // once we deprecate the wrapped approach, we can put the aria
@@ -497,9 +499,7 @@ function Tooltip({
      * - Should `role="presentation"` only be used if `shouldRenderHiddenContent == false`?
      */,
     role: "presentation"
-  }), children, hiddenContent), shouldRenderTooltipPopup ? /*#__PURE__*/React.createElement(Portal, {
-    zIndex: tooltipZIndex
-  }, /*#__PURE__*/React.createElement(Popper, {
+  }), children, hiddenContent), shouldRenderTooltipPopup ? /*#__PURE__*/React.createElement(PopperWrapper, null, /*#__PURE__*/React.createElement(Popper, {
     placement: tooltipPosition,
     referenceElement: getReferenceElement(),
     strategy: strategy
@@ -551,4 +551,11 @@ function Tooltip({
     }) : content)));
   })) : null);
 }
-export default Tooltip;
+export default Tooltip;
+const TooltipPortal = ({
+  children
+}) => {
+  return /*#__PURE__*/React.createElement(Portal, {
+    zIndex: tooltipZIndex
+  }, children);
+};

package/dist/esm/tooltip.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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 React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import { usePlatformLeafSyntheticEventHandler } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
@@ -24,7 +24,7 @@ var tooltipZIndex = layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "0.0.0-development"
+  packageVersion: "20.13.0"
 };
 
 // Inverts motion direction
@@ -83,7 +83,9 @@ function Tooltip(_ref) {
     isScreenReaderAnnouncementDisabled = _ref$isScreenReaderAn === void 0 ? false : _ref$isScreenReaderAn,
     shortcut = _ref.shortcut,
     _ref$UNSAFE_shouldAlw = _ref.UNSAFE_shouldAlwaysFadeIn,
-    shouldAlwaysFadeIn = _ref$UNSAFE_shouldAlw === void 0 ? false : _ref$UNSAFE_shouldAlw;
+    shouldAlwaysFadeIn = _ref$UNSAFE_shouldAlw === void 0 ? false : _ref$UNSAFE_shouldAlw,
+    _ref$UNSAFE_shouldRen = _ref.UNSAFE_shouldRenderToParent,
+    UNSAFE_shouldRenderToParent = _ref$UNSAFE_shouldRen === void 0 ? false : _ref$UNSAFE_shouldRen;
   // Not using a gate for this check. When the gate is disabled `mouse-y` and `mouse-x` are treated as `mouse`.
   var isMousePosition = position === 'mouse' || position === 'mouse-y' || position === 'mouse-x';
   var tooltipPosition = isMousePosition ? mousePosition : position;
@@ -494,6 +496,7 @@ function Tooltip(_ref) {
     hidden: true,
     id: tooltipIdForHiddenContent
   }, typeof content === 'function' ? content({}) : content) : null;
+  var PopperWrapper = UNSAFE_shouldRenderToParent && fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? Fragment : TooltipPortal;
   return /*#__PURE__*/React.createElement(React.Fragment, null, typeof children === 'function' ?
   /*#__PURE__*/
   // once we deprecate the wrapped approach, we can put the aria
@@ -514,9 +517,7 @@ function Tooltip(_ref) {
      * - Should `role="presentation"` only be used if `shouldRenderHiddenContent == false`?
      */,
     role: "presentation"
-  }), children, hiddenContent), shouldRenderTooltipPopup ? /*#__PURE__*/React.createElement(Portal, {
-    zIndex: tooltipZIndex
-  }, /*#__PURE__*/React.createElement(Popper, {
+  }), children, hiddenContent), shouldRenderTooltipPopup ? /*#__PURE__*/React.createElement(PopperWrapper, null, /*#__PURE__*/React.createElement(Popper, {
     placement: tooltipPosition,
     referenceElement: getReferenceElement(),
     strategy: strategy
@@ -563,4 +564,10 @@ function Tooltip(_ref) {
     }));
   })) : null);
 }
-export default Tooltip;
+export default Tooltip;
+var TooltipPortal = function TooltipPortal(_ref7) {
+  var children = _ref7.children;
+  return /*#__PURE__*/React.createElement(Portal, {
+    zIndex: tooltipZIndex
+  }, children);
+};

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, shortcut, UNSAFE_shouldAlwaysFadeIn: shouldAlwaysFadeIn, }: 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, UNSAFE_shouldAlwaysFadeIn: shouldAlwaysFadeIn, UNSAFE_shouldRenderToParent, }: TooltipProps): React.JSX.Element;
 export default Tooltip;

package/dist/types/types.d.ts

@@ -146,4 +146,10 @@ export interface TooltipProps {
      * is already visible.
      */
     UNSAFE_shouldAlwaysFadeIn?: boolean;
+    /**
+     * When enabled, the tooltip will be rendered as a sibling to the trigger element instead of being portaled to the document body.
+     *
+     * This is an experimental prop and may be removed at any time. It is not yet intended for public use.
+     */
+    UNSAFE_shouldRenderToParent?: boolean;
 }

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, shortcut, UNSAFE_shouldAlwaysFadeIn: shouldAlwaysFadeIn, }: 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, UNSAFE_shouldAlwaysFadeIn: shouldAlwaysFadeIn, UNSAFE_shouldRenderToParent, }: TooltipProps): React.JSX.Element;
 export default Tooltip;

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

@@ -146,4 +146,10 @@ export interface TooltipProps {
      * is already visible.
      */
     UNSAFE_shouldAlwaysFadeIn?: boolean;
+    /**
+     * When enabled, the tooltip will be rendered as a sibling to the trigger element instead of being portaled to the document body.
+     *
+     * This is an experimental prop and may be removed at any time. It is not yet intended for public use.
+     */
+    UNSAFE_shouldRenderToParent?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tooltip",
-	"version": "20.13.0",
+	"version": "20.14.0",
 	"description": "A tooltip describes an interactive element on mouse hover or keyboard focus.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"