@atlaskit/tooltip - npm Package Compare versions

Comparing version 8.1.1 to 8.2.0

CHANGELOG.md

 # @atlaskit/tooltip
 
+## 8.2.0
+- [minor] new prop component to open custom tooltip [3f892d5](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/3f892d5)
+
 ## 8.1.1
@@ -4,0 +7,0 @@ - [patch] Resolved low hanging flow errors in field-base field-text comment icon item and website, $ [007de27](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/007de27)

dist/cjs/components/Tooltip.js

@@ -172,3 +172,4 @@ 'use strict';
           content = _props.content,
-          truncate = _props.truncate;
+          truncate = _props.truncate,
+          component = _props.component;
       var _state = this.state,
@@ -187,3 +188,3 @@ immediatelyHide = _state.immediatelyHide,
       if (!coordinates) {
-        var Measure = truncate ? _styled.TruncatedTooltip : _styled.Tooltip;
+        var MeasurableTooltip = component;
         return _react2.default.createElement(
@@ -193,3 +194,3 @@ _Portal2.default,
           _react2.default.createElement(
-            Measure,
+            MeasurableTooltip,
             {
@@ -206,2 +207,3 @@ innerRef: this.handleMeasureRef,
       var transitionProps = {
+        component: component,
         immediatelyHide: immediatelyHide,
@@ -224,2 +226,3 @@ immediatelyShow: immediatelyShow,
       // - `content` is a valid HTML attribute, but has a different semantic meaning
+      // - `component` is NOT valid and react will warn
       // - `hideTooltipOnClick` is NOT valid and react will warn
@@ -231,2 +234,3 @@ // - `position` is NOT valid and react will warn
           children = _props2.children,
+          component = _props2.component,
           content = _props2.content,
@@ -237,3 +241,3 @@ hideTooltipOnClick = _props2.hideTooltipOnClick,
           Tag = _props2.tag,
-          rest = (0, _objectWithoutProperties3.default)(_props2, ['children', 'content', 'hideTooltipOnClick', 'position', 'truncate', 'tag']);
+          rest = (0, _objectWithoutProperties3.default)(_props2, ['children', 'component', 'content', 'hideTooltipOnClick', 'position', 'truncate', 'tag']);
 
@@ -258,2 +262,3 @@
 Tooltip.defaultProps = {
+  component: _styled.Tooltip,
   position: 'bottom',
@@ -260,0 +265,0 @@ tag: 'div'

dist/cjs/components/Transition.js

@@ -33,4 +33,2 @@ 'use strict';
 
-var _styled = require('../styled');
-
 var _Animation = require('./Animation');
@@ -40,4 +38,2 @@
 
-/* eslint-disable react/prefer-stateless-function */
-
 var Tip = function (_Component) {
@@ -56,2 +52,3 @@ (0, _inherits3.default)(Tip, _Component);
           children = _props.children,
+          component = _props.component,
           coordinates = _props.coordinates,
@@ -70,3 +67,3 @@ immediatelyHide = _props.immediatelyHide,
         {
-          component: truncate ? _styled.TruncatedTooltip : _styled.Tooltip,
+          component: component,
           immediatelyHide: immediatelyHide,
@@ -76,3 +73,4 @@ immediatelyShow: immediatelyShow,
           position: position,
-          style: coordinates
+          style: coordinates,
+          truncate: truncate
         },
@@ -85,2 +83,3 @@ children
 }(_react.Component);
+/* eslint-disable react/prefer-stateless-function */
 
@@ -87,0 +86,0 @@ exports.default = (0, _layerManager.withRenderTarget)({

dist/cjs/index.js

@@ -16,2 +16,11 @@ 'use strict';
 
+var _styled = require('./styled');
+
+Object.defineProperty(exports, 'TooltipPrimitive', {
+  enumerable: true,
+  get: function get() {
+    return _styled.TooltipPrimitive;
+  }
+});
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

dist/cjs/styled.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.Target = exports.TruncatedTooltip = exports.Tooltip = undefined;
+exports.Target = exports.Tooltip = exports.TooltipPrimitive = undefined;
 
@@ -13,5 +13,5 @@ var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');
 
-var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n  background-color: ', ';\n  border-radius: ', 'px;\n  box-sizing: border-box;\n  color: ', ';\n  font-size: 12px;\n  left: 0;\n  line-height: 1.3;\n  max-width: 240px;\n  padding: 2px 6px;\n  pointer-events: none;\n  position: fixed;\n  top: 0;\n  z-index: 1000;\n'], ['\n  background-color: ', ';\n  border-radius: ', 'px;\n  box-sizing: border-box;\n  color: ', ';\n  font-size: 12px;\n  left: 0;\n  line-height: 1.3;\n  max-width: 240px;\n  padding: 2px 6px;\n  pointer-events: none;\n  position: fixed;\n  top: 0;\n  z-index: 1000;\n']),
-    _templateObject2 = (0, _taggedTemplateLiteral3.default)(['\n  ', ';\n'], ['\n  ', ';\n']),
-    _templateObject3 = (0, _taggedTemplateLiteral3.default)(['\n  ', ' max-width: 420px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n'], ['\n  ', ' max-width: 420px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n']),
+var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n        max-width: 420px;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      '], ['\n        max-width: 420px;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      ']),
+    _templateObject2 = (0, _taggedTemplateLiteral3.default)(['\n  z-index: ', ';\n  pointer-events: none;\n  position: fixed;\n'], ['\n  z-index: ', ';\n  pointer-events: none;\n  position: fixed;\n']),
+    _templateObject3 = (0, _taggedTemplateLiteral3.default)(['\n  background-color: ', ';\n  border-radius: ', 'px;\n  box-sizing: border-box;\n  color: ', ';\n  font-size: 12px;\n  left: 0;\n  line-height: 1.3;\n  max-width: 240px;\n  padding: 2px 6px;\n  top: 0;\n  ', ';\n'], ['\n  background-color: ', ';\n  border-radius: ', 'px;\n  box-sizing: border-box;\n  color: ', ';\n  font-size: 12px;\n  left: 0;\n  line-height: 1.3;\n  max-width: 240px;\n  padding: 2px 6px;\n  top: 0;\n  ', ';\n']),
     _templateObject4 = (0, _taggedTemplateLiteral3.default)(['\n  display: inline-block;\n'], ['\n  display: inline-block;\n']);
@@ -36,9 +36,12 @@
 
-var common = (0, _styledComponents.css)(_templateObject, backgroundColor, _theme.borderRadius, textColor);
+var truncate = function truncate(p) {
+  return p.truncate ? (0, _styledComponents.css)(_templateObject) : '';
+};
 
-var Tooltip = exports.Tooltip = _styledComponents2.default.div(_templateObject2, common);
-var TruncatedTooltip = exports.TruncatedTooltip = _styledComponents2.default.div(_templateObject3, common);
+var TooltipPrimitive = exports.TooltipPrimitive = _styledComponents2.default.div(_templateObject2, _theme.layers.tooltip);
 
+var Tooltip = exports.Tooltip = (0, _styledComponents2.default)(TooltipPrimitive)(_templateObject3, backgroundColor, _theme.borderRadius, textColor, truncate);
+
 // The inline-block here is needed to keep the tooltip appearing in the correct position
 // when nested inside a wider parent (see position: relative example).
 var Target = exports.Target = _styledComponents2.default.div(_templateObject4);

dist/esm/components/Tooltip.js

@@ -14,3 +14,3 @@ import _extends from 'babel-runtime/helpers/extends';
 
-import { Tooltip as StyledTooltip, TruncatedTooltip as StyledTruncatedTooltip } from '../styled';
+import { Tooltip as StyledTooltip } from '../styled';
 
@@ -132,3 +132,4 @@ import Portal from './Portal';
           content = _props.content,
-          truncate = _props.truncate;
+          truncate = _props.truncate,
+          component = _props.component;
       var _state = this.state,
@@ -147,3 +148,3 @@ immediatelyHide = _state.immediatelyHide,
       if (!coordinates) {
-        var Measure = truncate ? StyledTruncatedTooltip : StyledTooltip;
+        var MeasurableTooltip = component;
         return React.createElement(
@@ -153,3 +154,3 @@ Portal,
           React.createElement(
-            Measure,
+            MeasurableTooltip,
             {
@@ -166,2 +167,3 @@ innerRef: this.handleMeasureRef,
       var transitionProps = {
+        component: component,
         immediatelyHide: immediatelyHide,
@@ -184,2 +186,3 @@ immediatelyShow: immediatelyShow,
       // - `content` is a valid HTML attribute, but has a different semantic meaning
+      // - `component` is NOT valid and react will warn
       // - `hideTooltipOnClick` is NOT valid and react will warn
@@ -191,2 +194,3 @@ // - `position` is NOT valid and react will warn
           children = _props2.children,
+          component = _props2.component,
           content = _props2.content,
@@ -197,3 +201,3 @@ hideTooltipOnClick = _props2.hideTooltipOnClick,
           Tag = _props2.tag,
-          rest = _objectWithoutProperties(_props2, ['children', 'content', 'hideTooltipOnClick', 'position', 'truncate', 'tag']);
+          rest = _objectWithoutProperties(_props2, ['children', 'component', 'content', 'hideTooltipOnClick', 'position', 'truncate', 'tag']);
 
@@ -218,2 +222,3 @@ return React.createElement(
 Tooltip.defaultProps = {
+  component: StyledTooltip,
   position: 'bottom',
@@ -220,0 +225,0 @@ tag: 'div'

dist/esm/components/Transition.js

@@ -11,3 +11,2 @@ import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
 import { withRenderTarget } from '@atlaskit/layer-manager';
-import { Tooltip, TruncatedTooltip } from '../styled';
 import { Slide } from './Animation';
@@ -29,2 +28,3 @@
           children = _props.children,
+          component = _props.component,
           coordinates = _props.coordinates,
@@ -43,3 +43,3 @@ immediatelyHide = _props.immediatelyHide,
         {
-          component: truncate ? TruncatedTooltip : Tooltip,
+          component: component,
           immediatelyHide: immediatelyHide,
@@ -49,3 +49,4 @@ immediatelyShow: immediatelyShow,
           position: position,
-          style: coordinates
+          style: coordinates,
+          truncate: truncate
         },
@@ -52,0 +53,0 @@ children

dist/esm/index.js

@@ -1,1 +0,2 @@
-export { default } from './components/Tooltip';
+export { default } from './components/Tooltip';
+export { TooltipPrimitive } from './styled';

dist/esm/styled.js

 import _taggedTemplateLiteral from 'babel-runtime/helpers/taggedTemplateLiteral';
 
-var _templateObject = _taggedTemplateLiteral(['\n  background-color: ', ';\n  border-radius: ', 'px;\n  box-sizing: border-box;\n  color: ', ';\n  font-size: 12px;\n  left: 0;\n  line-height: 1.3;\n  max-width: 240px;\n  padding: 2px 6px;\n  pointer-events: none;\n  position: fixed;\n  top: 0;\n  z-index: 1000;\n'], ['\n  background-color: ', ';\n  border-radius: ', 'px;\n  box-sizing: border-box;\n  color: ', ';\n  font-size: 12px;\n  left: 0;\n  line-height: 1.3;\n  max-width: 240px;\n  padding: 2px 6px;\n  pointer-events: none;\n  position: fixed;\n  top: 0;\n  z-index: 1000;\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n  ', ';\n'], ['\n  ', ';\n']),
-    _templateObject3 = _taggedTemplateLiteral(['\n  ', ' max-width: 420px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n'], ['\n  ', ' max-width: 420px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n']),
+var _templateObject = _taggedTemplateLiteral(['\n        max-width: 420px;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      '], ['\n        max-width: 420px;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      ']),
+    _templateObject2 = _taggedTemplateLiteral(['\n  z-index: ', ';\n  pointer-events: none;\n  position: fixed;\n'], ['\n  z-index: ', ';\n  pointer-events: none;\n  position: fixed;\n']),
+    _templateObject3 = _taggedTemplateLiteral(['\n  background-color: ', ';\n  border-radius: ', 'px;\n  box-sizing: border-box;\n  color: ', ';\n  font-size: 12px;\n  left: 0;\n  line-height: 1.3;\n  max-width: 240px;\n  padding: 2px 6px;\n  top: 0;\n  ', ';\n'], ['\n  background-color: ', ';\n  border-radius: ', 'px;\n  box-sizing: border-box;\n  color: ', ';\n  font-size: 12px;\n  left: 0;\n  line-height: 1.3;\n  max-width: 240px;\n  padding: 2px 6px;\n  top: 0;\n  ', ';\n']),
     _templateObject4 = _taggedTemplateLiteral(['\n  display: inline-block;\n'], ['\n  display: inline-block;\n']);
 
 import styled, { css } from 'styled-components';
-import { borderRadius, colors, themed } from '@atlaskit/theme';
+import { borderRadius, colors, themed, layers } from '@atlaskit/theme';
 
@@ -20,9 +20,12 @@ var backgroundColor = themed({
 
-var common = css(_templateObject, backgroundColor, borderRadius, textColor);
+var truncate = function truncate(p) {
+  return p.truncate ? css(_templateObject) : '';
+};
 
-export var Tooltip = styled.div(_templateObject2, common);
-export var TruncatedTooltip = styled.div(_templateObject3, common);
+export var TooltipPrimitive = styled.div(_templateObject2, layers.tooltip);
 
+export var Tooltip = styled(TooltipPrimitive)(_templateObject3, backgroundColor, borderRadius, textColor, truncate);
+
 // The inline-block here is needed to keep the tooltip appearing in the correct position
 // when nested inside a wider parent (see position: relative example).
 export var Target = styled.div(_templateObject4);

dist/package.json

 {
 	"name": "@atlaskit/tooltip",
-	"version": "8.1.0"
+	"version": "8.1.1"
 }

package.json

 {
   "name": "@atlaskit/tooltip",
-  "version": "8.1.1",
+  "version": "8.2.0",
   "description": "A React Component for displaying Tooltips",
@@ -39,2 +39,2 @@ "license": "Apache-2.0",
   ]
-}
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

63959

increased by1.5%

Lines of code

1428

increased by1.64%

No dependency changes