@zendeskgarden/react-tooltips
Advanced tools
Comparing version 4.3.0-beta.a1d273c8 to 4.3.0
@@ -6,4 +6,4 @@ # Change Log | ||
<a name="4.3.0-beta.a1d273c8"></a> | ||
# [4.3.0-beta.a1d273c8](https://github.com/zendeskgarden/react-components/compare/@zendeskgarden/react-tooltips@4.2.3...@zendeskgarden/react-tooltips@4.3.0-beta.a1d273c8) (2018-07-19) | ||
<a name="4.3.0"></a> | ||
# [4.3.0](https://github.com/zendeskgarden/react-components/compare/@zendeskgarden/react-tooltips@4.2.10...@zendeskgarden/react-tooltips@4.3.0) (2018-08-08) | ||
@@ -13,3 +13,3 @@ | ||
* **tooltips:** remove div wrapper from TooltipContainer ([a1d273c](https://github.com/zendeskgarden/react-components/commit/a1d273c)) | ||
* **tooltips:** add zIndex prop to TooltipContainer ([#76](https://github.com/zendeskgarden/react-components/issues/76)) ([67022a8](https://github.com/zendeskgarden/react-components/commit/67022a8)) | ||
@@ -19,2 +19,58 @@ | ||
<a name="4.2.10"></a> | ||
## [4.2.10](https://github.com/zendeskgarden/react-components/compare/@zendeskgarden/react-tooltips@4.2.9...@zendeskgarden/react-tooltips@4.2.10) (2018-08-08) | ||
**Note:** Version bump only for package @zendeskgarden/react-tooltips | ||
<a name="4.2.9"></a> | ||
## [4.2.9](https://github.com/zendeskgarden/react-components/compare/@zendeskgarden/react-tooltips@4.2.8...@zendeskgarden/react-tooltips@4.2.9) (2018-08-07) | ||
**Note:** Version bump only for package @zendeskgarden/react-tooltips | ||
<a name="4.2.8"></a> | ||
## [4.2.8](https://github.com/zendeskgarden/react-components/compare/@zendeskgarden/react-tooltips@4.2.7...@zendeskgarden/react-tooltips@4.2.8) (2018-08-07) | ||
**Note:** Version bump only for package @zendeskgarden/react-tooltips | ||
<a name="4.2.7"></a> | ||
## [4.2.7](https://github.com/zendeskgarden/react-components/compare/@zendeskgarden/react-tooltips@4.2.6...@zendeskgarden/react-tooltips@4.2.7) (2018-07-30) | ||
**Note:** Version bump only for package @zendeskgarden/react-tooltips | ||
<a name="4.2.6"></a> | ||
## [4.2.6](https://github.com/zendeskgarden/react-components/compare/@zendeskgarden/react-tooltips@4.2.5...@zendeskgarden/react-tooltips@4.2.6) (2018-07-27) | ||
**Note:** Version bump only for package @zendeskgarden/react-tooltips | ||
<a name="4.2.5"></a> | ||
## [4.2.5](https://github.com/zendeskgarden/react-components/compare/@zendeskgarden/react-tooltips@4.2.4...@zendeskgarden/react-tooltips@4.2.5) (2018-07-25) | ||
**Note:** Version bump only for package @zendeskgarden/react-tooltips | ||
<a name="4.2.4"></a> | ||
## [4.2.4](https://github.com/zendeskgarden/react-components/compare/@zendeskgarden/react-tooltips@4.2.3...@zendeskgarden/react-tooltips@4.2.4) (2018-07-25) | ||
**Note:** Version bump only for package @zendeskgarden/react-tooltips | ||
<a name="4.2.3"></a> | ||
@@ -21,0 +77,0 @@ ## [4.2.3](https://github.com/zendeskgarden/react-components/compare/@zendeskgarden/react-tooltips@4.2.2...@zendeskgarden/react-tooltips@4.2.3) (2018-07-18) |
@@ -90,3 +90,3 @@ /*! | ||
/******/ // Load entry module and return exports | ||
/******/ return __webpack_require__(__webpack_require__.s = 20); | ||
/******/ return __webpack_require__(__webpack_require__.s = 10); | ||
/******/ }) | ||
@@ -108,12 +108,12 @@ /************************************************************************/ | ||
/* 2 */ | ||
/***/ (function(module, exports, __webpack_require__) { | ||
/***/ (function(module, exports) { | ||
// extracted by mini-css-extract-plugin | ||
module.exports = {"c-tooltip":"index__c-tooltip___WMDsn","c-arrow":"index__c-arrow___3WD9K","c-tooltip--extra-large":"index__c-tooltip--extra-large___qP957","c-tooltip--large":"index__c-tooltip--large___1Uvk6","c-tooltip--medium":"index__c-tooltip--medium___yU6Fh","c-tooltip__paragraph":"index__c-tooltip__paragraph___2g87i","c-tooltip__title":"index__c-tooltip__title___9DRRo","is-rtl":"index__is-rtl___3pWaV","c-tooltip--light":"index__c-tooltip--light___3HyTy"}; | ||
module.exports = require("prop-types"); | ||
/***/ }), | ||
/* 3 */ | ||
/***/ (function(module, exports) { | ||
/***/ (function(module, exports, __webpack_require__) { | ||
module.exports = require("prop-types"); | ||
// extracted by mini-css-extract-plugin | ||
module.exports = {"c-tooltip":"index__c-tooltip___WMDsn","c-arrow":"index__c-arrow___3WD9K","c-tooltip--extra-large":"index__c-tooltip--extra-large___qP957","c-tooltip--large":"index__c-tooltip--large___1Uvk6","c-tooltip--medium":"index__c-tooltip--medium___yU6Fh","c-tooltip__paragraph":"index__c-tooltip__paragraph___2g87i","c-tooltip__title":"index__c-tooltip__title___9DRRo","is-rtl":"index__is-rtl___3pWaV","c-tooltip--light":"index__c-tooltip--light___3HyTy"}; | ||
@@ -135,7 +135,7 @@ /***/ }), | ||
var _propTypes = __webpack_require__(3); | ||
var _propTypes = __webpack_require__(2); | ||
var _propTypes2 = _interopRequireDefault(_propTypes); | ||
var _classnames = __webpack_require__(6); | ||
var _classnames = __webpack_require__(8); | ||
@@ -146,7 +146,7 @@ var _classnames2 = _interopRequireDefault(_classnames); | ||
var _cssArrows = __webpack_require__(14); | ||
var _cssArrows = __webpack_require__(16); | ||
var _cssArrows2 = _interopRequireDefault(_cssArrows); | ||
var _cssTooltips = __webpack_require__(2); | ||
var _cssTooltips = __webpack_require__(3); | ||
@@ -215,3 +215,3 @@ var _cssTooltips2 = _interopRequireDefault(_cssTooltips); | ||
'data-garden-id': COMPONENT_ID, | ||
'data-garden-version': "4.2.3", | ||
'data-garden-version': "4.3.0", | ||
className: function className(props) { | ||
@@ -247,102 +247,8 @@ var _classNames; | ||
/* 5 */ | ||
/***/ (function(module, exports, __webpack_require__) { | ||
/***/ (function(module, exports) { | ||
"use strict"; | ||
module.exports = require("react"); | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
var _styledComponents = __webpack_require__(0); | ||
var _styledComponents2 = _interopRequireDefault(_styledComponents); | ||
var _propTypes = __webpack_require__(3); | ||
var _propTypes2 = _interopRequireDefault(_propTypes); | ||
var _classnames = __webpack_require__(6); | ||
var _classnames2 = _interopRequireDefault(_classnames); | ||
var _cssTooltips = __webpack_require__(2); | ||
var _cssTooltips2 = _interopRequireDefault(_cssTooltips); | ||
var _reactTheming = __webpack_require__(1); | ||
var _TooltipView = __webpack_require__(4); | ||
var _TooltipView2 = _interopRequireDefault(_TooltipView); | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
/** | ||
* Copyright Zendesk, Inc. | ||
* | ||
* Use of this source code is governed under the Apache License, Version 2.0 | ||
* found at http://www.apache.org/licenses/LICENSE-2.0. | ||
*/ | ||
var COMPONENT_ID = 'tooltip.light_tooltip'; | ||
var SIZE = { | ||
SMALL: 'small', | ||
MEDIUM: 'medium', | ||
LARGE: 'large', | ||
EXTRA_LARGE: 'extra-large' | ||
}; | ||
var PLACEMENT = { | ||
TOP: 'top', | ||
TOP_START: 'top-start', | ||
TOP_END: 'top-end', | ||
RIGHT: 'right', | ||
RIGHT_START: 'right-start', | ||
RIGHT_END: 'right-end', | ||
BOTTOM: 'bottom', | ||
BOTTOM_START: 'bottom-start', | ||
BOTTOM_END: 'bottom-end', | ||
LEFT: 'left', | ||
LEFT_START: 'left-start', | ||
LEFT_END: 'left-end' | ||
}; | ||
/** | ||
* Accepts all `<div>` props | ||
*/ | ||
var LightTooltip = (0, _styledComponents2.default)(_TooltipView2.default).attrs({ | ||
'data-garden-id': COMPONENT_ID, | ||
'data-garden-version': "4.2.3", | ||
className: (0, _classnames2.default)(_cssTooltips2.default['c-tooltip--light']) | ||
}).withConfig({ | ||
displayName: 'LightTooltip' | ||
})(['', ';'], function (props) { | ||
return (0, _reactTheming.retrieveTheme)(COMPONENT_ID, props); | ||
}); | ||
LightTooltip.propTypes = { | ||
arrow: _propTypes2.default.bool, | ||
size: _propTypes2.default.oneOf([SIZE.SMALL, SIZE.MEDIUM, SIZE.LARGE, SIZE.EXTRA_LARGE]), | ||
/** All valid [Popper.JS Placements](https://popper.js.org/popper-documentation.html#Popper.placements) */ | ||
placement: _propTypes2.default.oneOf([PLACEMENT.TOP, PLACEMENT.TOP_START, PLACEMENT.TOP_END, PLACEMENT.RIGHT, PLACEMENT.RIGHT_START, PLACEMENT.RIGHT_END, PLACEMENT.BOTTOM, PLACEMENT.BOTTOM_START, PLACEMENT.BOTTOM_END, PLACEMENT.LEFT, PLACEMENT.LEFT_START, PLACEMENT.LEFT_END]) | ||
}; | ||
LightTooltip.defaultProps = { | ||
arrow: true, | ||
size: SIZE.LARGE | ||
}; | ||
/** @component */ | ||
exports.default = LightTooltip; | ||
/***/ }), | ||
/* 6 */ | ||
/***/ (function(module, exports) { | ||
module.exports = require("classnames"); | ||
/***/ }), | ||
/* 7 */ | ||
/***/ (function(module, exports, __webpack_require__) { | ||
@@ -359,94 +265,9 @@ | ||
exports.getPopperPlacement = getPopperPlacement; | ||
exports.getRtlPopperPlacement = getRtlPopperPlacement; | ||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | ||
/** | ||
* Copyright Zendesk, Inc. | ||
* | ||
* Use of this source code is governed under the Apache License, Version 2.0 | ||
* found at http://www.apache.org/licenses/LICENSE-2.0. | ||
*/ | ||
var SHARED_PLACEMENTS = { | ||
AUTO: 'auto', | ||
TOP: 'top', | ||
TOP_START: 'top-start', | ||
TOP_END: 'top-end', | ||
BOTTOM: 'bottom', | ||
BOTTOM_START: 'bottom-start', | ||
BOTTOM_END: 'bottom-end' | ||
}; | ||
var GARDEN_PLACEMENTS = exports.GARDEN_PLACEMENTS = _extends({}, SHARED_PLACEMENTS, { | ||
END: 'end', | ||
END_TOP: 'end-top', | ||
END_BOTTOM: 'end-bottom', | ||
START: 'start', | ||
START_TOP: 'start-top', | ||
START_BOTTOM: 'start-bottom' | ||
}); | ||
var POPPER_PLACEMENTS = exports.POPPER_PLACEMENTS = _extends({}, SHARED_PLACEMENTS, { | ||
RIGHT: 'right', | ||
RIGHT_START: 'right-start', | ||
RIGHT_END: 'right-end', | ||
LEFT: 'left', | ||
LEFT_START: 'left-start', | ||
LEFT_END: 'left-end' | ||
}); | ||
/** | ||
* Convert Garden RTL aware placement to Popper.JS valid placement | ||
* @param {String} gardenPlacement | ||
*/ | ||
function getPopperPlacement(gardenPlacement) { | ||
var _extends2; | ||
var sharedPlacements = Object.values(SHARED_PLACEMENTS).reduce(function (acc, item) { | ||
acc[item] = item; | ||
return acc; | ||
}, {}); | ||
var GARDEN_POPPER_MAPPINGS = _extends({}, sharedPlacements, (_extends2 = {}, _defineProperty(_extends2, GARDEN_PLACEMENTS.END, POPPER_PLACEMENTS.RIGHT), _defineProperty(_extends2, GARDEN_PLACEMENTS.END_TOP, POPPER_PLACEMENTS.RIGHT_START), _defineProperty(_extends2, GARDEN_PLACEMENTS.END_BOTTOM, POPPER_PLACEMENTS.RIGHT_END), _defineProperty(_extends2, GARDEN_PLACEMENTS.START, POPPER_PLACEMENTS.LEFT), _defineProperty(_extends2, GARDEN_PLACEMENTS.START_TOP, POPPER_PLACEMENTS.LEFT_START), _defineProperty(_extends2, GARDEN_PLACEMENTS.START_BOTTOM, POPPER_PLACEMENTS.LEFT_END), _extends2)); | ||
return GARDEN_POPPER_MAPPINGS[gardenPlacement]; | ||
} | ||
/** | ||
* Convert Garden RTL aware placement to RTL equivalent Popper.JS placement | ||
* @param {String} gardenPlacement | ||
*/ | ||
function getRtlPopperPlacement(gardenPlacement) { | ||
var _RTL_PLACEMENT_MAPPIN; | ||
var RTL_PLACEMENT_MAPPINGS = (_RTL_PLACEMENT_MAPPIN = {}, _defineProperty(_RTL_PLACEMENT_MAPPIN, POPPER_PLACEMENTS.LEFT, POPPER_PLACEMENTS.RIGHT), _defineProperty(_RTL_PLACEMENT_MAPPIN, POPPER_PLACEMENTS.LEFT_START, POPPER_PLACEMENTS.RIGHT_START), _defineProperty(_RTL_PLACEMENT_MAPPIN, POPPER_PLACEMENTS.LEFT_END, POPPER_PLACEMENTS.RIGHT_END), _defineProperty(_RTL_PLACEMENT_MAPPIN, POPPER_PLACEMENTS.TOP_START, POPPER_PLACEMENTS.TOP_END), _defineProperty(_RTL_PLACEMENT_MAPPIN, POPPER_PLACEMENTS.TOP_END, POPPER_PLACEMENTS.TOP_START), _defineProperty(_RTL_PLACEMENT_MAPPIN, POPPER_PLACEMENTS.RIGHT, POPPER_PLACEMENTS.LEFT), _defineProperty(_RTL_PLACEMENT_MAPPIN, POPPER_PLACEMENTS.RIGHT_START, POPPER_PLACEMENTS.LEFT_START), _defineProperty(_RTL_PLACEMENT_MAPPIN, POPPER_PLACEMENTS.RIGHT_END, POPPER_PLACEMENTS.LEFT_END), _defineProperty(_RTL_PLACEMENT_MAPPIN, POPPER_PLACEMENTS.BOTTOM_START, POPPER_PLACEMENTS.BOTTOM_END), _defineProperty(_RTL_PLACEMENT_MAPPIN, POPPER_PLACEMENTS.BOTTOM_END, POPPER_PLACEMENTS.BOTTOM_START), _RTL_PLACEMENT_MAPPIN); | ||
var popperPlacement = getPopperPlacement(gardenPlacement); | ||
return RTL_PLACEMENT_MAPPINGS[popperPlacement] || popperPlacement; | ||
} | ||
/***/ }), | ||
/* 8 */ | ||
/***/ (function(module, exports, __webpack_require__) { | ||
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; | ||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | ||
var _react = __webpack_require__(9); | ||
var _react = __webpack_require__(5); | ||
var _react2 = _interopRequireDefault(_react); | ||
var _propTypes = __webpack_require__(3); | ||
var _propTypes = __webpack_require__(2); | ||
@@ -459,7 +280,7 @@ var _propTypes2 = _interopRequireDefault(_propTypes); | ||
var _reactPopper = __webpack_require__(18); | ||
var _reactPopper = __webpack_require__(12); | ||
var _reactPortal = __webpack_require__(17); | ||
var _reactPortal = __webpack_require__(13); | ||
var _renderFragment = __webpack_require__(16); | ||
var _renderFragment = __webpack_require__(14); | ||
@@ -497,4 +318,14 @@ var _renderFragment2 = _interopRequireDefault(_renderFragment); | ||
displayName: 'TooltipContainer__TooltipWrapper' | ||
})(['&[aria-hidden=\'true\']{display:none;}']); | ||
})(['z-index:', ';&[aria-hidden=\'true\']{display:none;}'], function (props) { | ||
return props.zIndex; | ||
}); | ||
/** | ||
* Due to Popper.JS needing a reference to a component we provide a simple wrapper | ||
* to ensure the correct reference is provided. | ||
*/ | ||
var TriggerWrapper = _styledComponents2.default.div.withConfig({ | ||
displayName: 'TooltipContainer__TriggerWrapper' | ||
})(['display:inline-block;']); | ||
var TooltipContainer = function (_ControlledComponent) { | ||
@@ -629,3 +460,4 @@ _inherits(TooltipContainer, _ControlledComponent); | ||
popperModifiers = _props.popperModifiers, | ||
appendToBody = _props.appendToBody; | ||
appendToBody = _props.appendToBody, | ||
zIndex = _props.zIndex; | ||
@@ -647,9 +479,12 @@ var _getControlledState = this.getControlledState(), | ||
return trigger && trigger({ | ||
getTriggerProps: function getTriggerProps(props) { | ||
return _this2.getTriggerProps(_extends({}, props)); | ||
}, | ||
ref: targetProps.ref, | ||
isVisible: isVisible | ||
}); | ||
return _react2.default.createElement( | ||
TriggerWrapper, | ||
{ innerRef: targetProps.ref }, | ||
trigger && trigger({ | ||
getTriggerProps: function getTriggerProps(props) { | ||
return _this2.getTriggerProps(_extends({}, props)); | ||
}, | ||
isVisible: isVisible | ||
}) | ||
); | ||
} | ||
@@ -676,3 +511,4 @@ ), | ||
style: popperProps.style, | ||
'aria-hidden': !isVisible | ||
'aria-hidden': !isVisible, | ||
zIndex: zIndex | ||
}, | ||
@@ -744,5 +580,8 @@ render({ | ||
* @param {Function} renderProps.isVisible - Whether the Tooltip is currently visible | ||
* @param {Function} renderProps.ref - Callback to retrieve the trigger elements ref | ||
*/ | ||
trigger: _propTypes2.default.func | ||
trigger: _propTypes2.default.func, | ||
/** | ||
* The z-index of the popper.js placement container | ||
*/ | ||
zIndex: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]) | ||
}; | ||
@@ -757,9 +596,3 @@ TooltipContainer.defaultProps = { | ||
/***/ }), | ||
/* 9 */ | ||
/***/ (function(module, exports) { | ||
module.exports = require("react"); | ||
/***/ }), | ||
/* 10 */ | ||
/* 7 */ | ||
/***/ (function(module, exports, __webpack_require__) { | ||
@@ -774,41 +607,84 @@ | ||
var _styledComponents = __webpack_require__(0); | ||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; | ||
var _styledComponents2 = _interopRequireDefault(_styledComponents); | ||
exports.getPopperPlacement = getPopperPlacement; | ||
exports.getRtlPopperPlacement = getRtlPopperPlacement; | ||
var _cssTooltips = __webpack_require__(2); | ||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | ||
var _cssTooltips2 = _interopRequireDefault(_cssTooltips); | ||
/** | ||
* Copyright Zendesk, Inc. | ||
* | ||
* Use of this source code is governed under the Apache License, Version 2.0 | ||
* found at http://www.apache.org/licenses/LICENSE-2.0. | ||
*/ | ||
var _reactTheming = __webpack_require__(1); | ||
var SHARED_PLACEMENTS = { | ||
AUTO: 'auto', | ||
TOP: 'top', | ||
TOP_START: 'top-start', | ||
TOP_END: 'top-end', | ||
BOTTOM: 'bottom', | ||
BOTTOM_START: 'bottom-start', | ||
BOTTOM_END: 'bottom-end' | ||
}; | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
var GARDEN_PLACEMENTS = exports.GARDEN_PLACEMENTS = _extends({}, SHARED_PLACEMENTS, { | ||
END: 'end', | ||
END_TOP: 'end-top', | ||
END_BOTTOM: 'end-bottom', | ||
START: 'start', | ||
START_TOP: 'start-top', | ||
START_BOTTOM: 'start-bottom' | ||
}); | ||
var COMPONENT_ID = 'tooltip.paragraph'; | ||
var POPPER_PLACEMENTS = exports.POPPER_PLACEMENTS = _extends({}, SHARED_PLACEMENTS, { | ||
RIGHT: 'right', | ||
RIGHT_START: 'right-start', | ||
RIGHT_END: 'right-end', | ||
LEFT: 'left', | ||
LEFT_START: 'left-start', | ||
LEFT_END: 'left-end' | ||
}); | ||
/** | ||
* Accepts all `<div>` props | ||
* Convert Garden RTL aware placement to Popper.JS valid placement | ||
* @param {String} gardenPlacement | ||
*/ | ||
function getPopperPlacement(gardenPlacement) { | ||
var _extends2; | ||
var sharedPlacements = Object.values(SHARED_PLACEMENTS).reduce(function (acc, item) { | ||
acc[item] = item; | ||
return acc; | ||
}, {}); | ||
var GARDEN_POPPER_MAPPINGS = _extends({}, sharedPlacements, (_extends2 = {}, _defineProperty(_extends2, GARDEN_PLACEMENTS.END, POPPER_PLACEMENTS.RIGHT), _defineProperty(_extends2, GARDEN_PLACEMENTS.END_TOP, POPPER_PLACEMENTS.RIGHT_START), _defineProperty(_extends2, GARDEN_PLACEMENTS.END_BOTTOM, POPPER_PLACEMENTS.RIGHT_END), _defineProperty(_extends2, GARDEN_PLACEMENTS.START, POPPER_PLACEMENTS.LEFT), _defineProperty(_extends2, GARDEN_PLACEMENTS.START_TOP, POPPER_PLACEMENTS.LEFT_START), _defineProperty(_extends2, GARDEN_PLACEMENTS.START_BOTTOM, POPPER_PLACEMENTS.LEFT_END), _extends2)); | ||
return GARDEN_POPPER_MAPPINGS[gardenPlacement]; | ||
} | ||
/** | ||
* Copyright Zendesk, Inc. | ||
* | ||
* Use of this source code is governed under the Apache License, Version 2.0 | ||
* found at http://www.apache.org/licenses/LICENSE-2.0. | ||
* Convert Garden RTL aware placement to RTL equivalent Popper.JS placement | ||
* @param {String} gardenPlacement | ||
*/ | ||
function getRtlPopperPlacement(gardenPlacement) { | ||
var _RTL_PLACEMENT_MAPPIN; | ||
var Paragraph = _styledComponents2.default.div.attrs({ | ||
'data-garden-id': COMPONENT_ID, | ||
'data-garden-version': "4.2.3", | ||
className: _cssTooltips2.default['c-tooltip__paragraph'] | ||
}).withConfig({ | ||
displayName: 'Paragraph' | ||
})(['', ';'], function (props) { | ||
return (0, _reactTheming.retrieveTheme)(COMPONENT_ID, props); | ||
}); | ||
var RTL_PLACEMENT_MAPPINGS = (_RTL_PLACEMENT_MAPPIN = {}, _defineProperty(_RTL_PLACEMENT_MAPPIN, POPPER_PLACEMENTS.LEFT, POPPER_PLACEMENTS.RIGHT), _defineProperty(_RTL_PLACEMENT_MAPPIN, POPPER_PLACEMENTS.LEFT_START, POPPER_PLACEMENTS.RIGHT_START), _defineProperty(_RTL_PLACEMENT_MAPPIN, POPPER_PLACEMENTS.LEFT_END, POPPER_PLACEMENTS.RIGHT_END), _defineProperty(_RTL_PLACEMENT_MAPPIN, POPPER_PLACEMENTS.TOP_START, POPPER_PLACEMENTS.TOP_END), _defineProperty(_RTL_PLACEMENT_MAPPIN, POPPER_PLACEMENTS.TOP_END, POPPER_PLACEMENTS.TOP_START), _defineProperty(_RTL_PLACEMENT_MAPPIN, POPPER_PLACEMENTS.RIGHT, POPPER_PLACEMENTS.LEFT), _defineProperty(_RTL_PLACEMENT_MAPPIN, POPPER_PLACEMENTS.RIGHT_START, POPPER_PLACEMENTS.LEFT_START), _defineProperty(_RTL_PLACEMENT_MAPPIN, POPPER_PLACEMENTS.RIGHT_END, POPPER_PLACEMENTS.LEFT_END), _defineProperty(_RTL_PLACEMENT_MAPPIN, POPPER_PLACEMENTS.BOTTOM_START, POPPER_PLACEMENTS.BOTTOM_END), _defineProperty(_RTL_PLACEMENT_MAPPIN, POPPER_PLACEMENTS.BOTTOM_END, POPPER_PLACEMENTS.BOTTOM_START), _RTL_PLACEMENT_MAPPIN); | ||
/** @component */ | ||
exports.default = Paragraph; | ||
var popperPlacement = getPopperPlacement(gardenPlacement); | ||
return RTL_PLACEMENT_MAPPINGS[popperPlacement] || popperPlacement; | ||
} | ||
/***/ }), | ||
/* 11 */ | ||
/* 8 */ | ||
/***/ (function(module, exports) { | ||
module.exports = require("classnames"); | ||
/***/ }), | ||
/* 9 */ | ||
/***/ (function(module, exports, __webpack_require__) { | ||
@@ -827,4 +703,12 @@ | ||
var _cssTooltips = __webpack_require__(2); | ||
var _propTypes = __webpack_require__(2); | ||
var _propTypes2 = _interopRequireDefault(_propTypes); | ||
var _classnames = __webpack_require__(8); | ||
var _classnames2 = _interopRequireDefault(_classnames); | ||
var _cssTooltips = __webpack_require__(3); | ||
var _cssTooltips2 = _interopRequireDefault(_cssTooltips); | ||
@@ -834,10 +718,9 @@ | ||
var _TooltipView = __webpack_require__(4); | ||
var _TooltipView2 = _interopRequireDefault(_TooltipView); | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
var COMPONENT_ID = 'tooltip.title'; | ||
/** | ||
* Accepts all `<div>` props | ||
*/ | ||
/** | ||
* Copyright Zendesk, Inc. | ||
@@ -849,8 +732,35 @@ * | ||
var Title = _styledComponents2.default.div.attrs({ | ||
var COMPONENT_ID = 'tooltip.light_tooltip'; | ||
var SIZE = { | ||
SMALL: 'small', | ||
MEDIUM: 'medium', | ||
LARGE: 'large', | ||
EXTRA_LARGE: 'extra-large' | ||
}; | ||
var PLACEMENT = { | ||
TOP: 'top', | ||
TOP_START: 'top-start', | ||
TOP_END: 'top-end', | ||
RIGHT: 'right', | ||
RIGHT_START: 'right-start', | ||
RIGHT_END: 'right-end', | ||
BOTTOM: 'bottom', | ||
BOTTOM_START: 'bottom-start', | ||
BOTTOM_END: 'bottom-end', | ||
LEFT: 'left', | ||
LEFT_START: 'left-start', | ||
LEFT_END: 'left-end' | ||
}; | ||
/** | ||
* Accepts all `<div>` props | ||
*/ | ||
var LightTooltip = (0, _styledComponents2.default)(_TooltipView2.default).attrs({ | ||
'data-garden-id': COMPONENT_ID, | ||
'data-garden-version': "4.2.3", | ||
className: _cssTooltips2.default['c-tooltip__title'] | ||
'data-garden-version': "4.3.0", | ||
className: (0, _classnames2.default)(_cssTooltips2.default['c-tooltip--light']) | ||
}).withConfig({ | ||
displayName: 'Title' | ||
displayName: 'LightTooltip' | ||
})(['', ';'], function (props) { | ||
@@ -860,40 +770,113 @@ return (0, _reactTheming.retrieveTheme)(COMPONENT_ID, props); | ||
LightTooltip.propTypes = { | ||
arrow: _propTypes2.default.bool, | ||
size: _propTypes2.default.oneOf([SIZE.SMALL, SIZE.MEDIUM, SIZE.LARGE, SIZE.EXTRA_LARGE]), | ||
/** All valid [Popper.JS Placements](https://popper.js.org/popper-documentation.html#Popper.placements) */ | ||
placement: _propTypes2.default.oneOf([PLACEMENT.TOP, PLACEMENT.TOP_START, PLACEMENT.TOP_END, PLACEMENT.RIGHT, PLACEMENT.RIGHT_START, PLACEMENT.RIGHT_END, PLACEMENT.BOTTOM, PLACEMENT.BOTTOM_START, PLACEMENT.BOTTOM_END, PLACEMENT.LEFT, PLACEMENT.LEFT_START, PLACEMENT.LEFT_END]) | ||
}; | ||
LightTooltip.defaultProps = { | ||
arrow: true, | ||
size: SIZE.LARGE | ||
}; | ||
/** @component */ | ||
exports.default = Title; | ||
exports.default = LightTooltip; | ||
/***/ }), | ||
/* 12 */, | ||
/* 13 */, | ||
/* 14 */ | ||
/* 10 */ | ||
/***/ (function(module, exports, __webpack_require__) { | ||
// extracted by mini-css-extract-plugin | ||
module.exports = {"c-arrow":"index__c-arrow___cuUSh","c-arrow--t":"index__c-arrow--t___1ZWKF","c-arrow--tl":"index__c-arrow--tl___322NF","c-arrow--tr":"index__c-arrow--tr___MeaCx","c-arrow--r":"index__c-arrow--r___1QMUz","c-arrow--rb":"index__c-arrow--rb___1HzLl","c-arrow--rt":"index__c-arrow--rt___1e89v","c-arrow--l":"index__c-arrow--l___1UW5e","c-arrow--lb":"index__c-arrow--lb___1femU","c-arrow--lt":"index__c-arrow--lt___uMq77","c-arrow--b":"index__c-arrow--b___31z-F","c-arrow--bl":"index__c-arrow--bl___Yjbqb","c-arrow--br":"index__c-arrow--br___2cmY-"}; | ||
"use strict"; | ||
/***/ }), | ||
/* 15 */ | ||
/***/ (function(module, exports) { | ||
module.exports = require("@zendeskgarden/react-selection"); | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
/***/ }), | ||
/* 16 */ | ||
/***/ (function(module, exports) { | ||
var _Tooltip = __webpack_require__(11); | ||
module.exports = require("render-fragment"); | ||
Object.defineProperty(exports, 'Tooltip', { | ||
enumerable: true, | ||
get: function get() { | ||
return _interopRequireDefault(_Tooltip).default; | ||
} | ||
}); | ||
/***/ }), | ||
/* 17 */ | ||
/***/ (function(module, exports) { | ||
var _TooltipContainer = __webpack_require__(6); | ||
module.exports = require("react-portal"); | ||
Object.defineProperty(exports, 'TooltipContainer', { | ||
enumerable: true, | ||
get: function get() { | ||
return _interopRequireDefault(_TooltipContainer).default; | ||
} | ||
}); | ||
/***/ }), | ||
/* 18 */ | ||
/***/ (function(module, exports) { | ||
var _LightTooltip = __webpack_require__(9); | ||
module.exports = require("react-popper"); | ||
Object.defineProperty(exports, 'LightTooltip', { | ||
enumerable: true, | ||
get: function get() { | ||
return _interopRequireDefault(_LightTooltip).default; | ||
} | ||
}); | ||
var _TooltipView = __webpack_require__(4); | ||
Object.defineProperty(exports, 'TooltipView', { | ||
enumerable: true, | ||
get: function get() { | ||
return _interopRequireDefault(_TooltipView).default; | ||
} | ||
}); | ||
var _Title = __webpack_require__(19); | ||
Object.defineProperty(exports, 'Title', { | ||
enumerable: true, | ||
get: function get() { | ||
return _interopRequireDefault(_Title).default; | ||
} | ||
}); | ||
var _Paragraph = __webpack_require__(20); | ||
Object.defineProperty(exports, 'Paragraph', { | ||
enumerable: true, | ||
get: function get() { | ||
return _interopRequireDefault(_Paragraph).default; | ||
} | ||
}); | ||
var _gardenPlacements = __webpack_require__(7); | ||
Object.defineProperty(exports, 'GARDEN_PLACEMENTS', { | ||
enumerable: true, | ||
get: function get() { | ||
return _gardenPlacements.GARDEN_PLACEMENTS; | ||
} | ||
}); | ||
Object.defineProperty(exports, 'POPPER_PLACEMENTS', { | ||
enumerable: true, | ||
get: function get() { | ||
return _gardenPlacements.POPPER_PLACEMENTS; | ||
} | ||
}); | ||
Object.defineProperty(exports, 'getPopperPlacement', { | ||
enumerable: true, | ||
get: function get() { | ||
return _gardenPlacements.getPopperPlacement; | ||
} | ||
}); | ||
Object.defineProperty(exports, 'getRtlPopperPlacement', { | ||
enumerable: true, | ||
get: function get() { | ||
return _gardenPlacements.getRtlPopperPlacement; | ||
} | ||
}); | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
/***/ }), | ||
/* 19 */ | ||
/* 11 */ | ||
/***/ (function(module, exports, __webpack_require__) { | ||
@@ -912,16 +895,12 @@ | ||
var _react = __webpack_require__(9); | ||
var _react = __webpack_require__(5); | ||
var _react2 = _interopRequireDefault(_react); | ||
var _propTypes = __webpack_require__(3); | ||
var _propTypes = __webpack_require__(2); | ||
var _propTypes2 = _interopRequireDefault(_propTypes); | ||
var _styledComponents = __webpack_require__(0); | ||
var _TooltipContainer = __webpack_require__(6); | ||
var _styledComponents2 = _interopRequireDefault(_styledComponents); | ||
var _TooltipContainer = __webpack_require__(8); | ||
var _TooltipContainer2 = _interopRequireDefault(_TooltipContainer); | ||
@@ -933,3 +912,3 @@ | ||
var _LightTooltip = __webpack_require__(5); | ||
var _LightTooltip = __webpack_require__(9); | ||
@@ -965,10 +944,2 @@ var _LightTooltip2 = _interopRequireDefault(_LightTooltip); | ||
/** | ||
* Due to Popper.JS needing a reference to a component we provide a simple wrapper | ||
* to ensure the correct reference is provided. | ||
*/ | ||
var TriggerWrapper = _styledComponents2.default.div.withConfig({ | ||
displayName: 'Tooltip__TriggerWrapper' | ||
})(['display:inline-block;']); | ||
var Tooltip = function (_Component) { | ||
@@ -998,3 +969,4 @@ _inherits(Tooltip, _Component); | ||
size = _props.size, | ||
otherProps = _objectWithoutProperties(_props, ['appendToBody', 'id', 'trigger', 'placement', 'eventsEnabled', 'popperModifiers', 'delayMilliseconds', 'type', 'arrow', 'children', 'size']); | ||
zIndex = _props.zIndex, | ||
otherProps = _objectWithoutProperties(_props, ['appendToBody', 'id', 'trigger', 'placement', 'eventsEnabled', 'popperModifiers', 'delayMilliseconds', 'type', 'arrow', 'children', 'size', 'zIndex']); | ||
@@ -1009,14 +981,8 @@ return _react2.default.createElement( | ||
popperModifiers: popperModifiers, | ||
zIndex: zIndex, | ||
delayMilliseconds: delayMilliseconds, | ||
trigger: function trigger(_ref) { | ||
var getTriggerProps = _ref.getTriggerProps, | ||
ref = _ref.ref; | ||
var getTriggerProps = _ref.getTriggerProps; | ||
var triggerElement = (0, _react.cloneElement)(_trigger, getTriggerProps(_trigger.props)); | ||
return _react2.default.createElement( | ||
TriggerWrapper, | ||
{ innerRef: ref }, | ||
triggerElement | ||
); | ||
return (0, _react.cloneElement)(_trigger, getTriggerProps(_trigger.props)); | ||
} | ||
@@ -1063,3 +1029,7 @@ }, | ||
size: _propTypes2.default.oneOf([SIZE.SMALL, SIZE.MEDIUM, SIZE.LARGE, SIZE.EXTRA_LARGE]), | ||
type: _propTypes2.default.oneOf([TYPE.LIGHT, TYPE.DARK]) | ||
type: _propTypes2.default.oneOf([TYPE.LIGHT, TYPE.DARK]), | ||
/** | ||
* The z-index of the popper.js placement container | ||
*/ | ||
zIndex: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]) | ||
}; | ||
@@ -1074,5 +1044,38 @@ Tooltip.defaultProps = { | ||
/***/ }), | ||
/* 20 */ | ||
/* 12 */ | ||
/***/ (function(module, exports) { | ||
module.exports = require("react-popper"); | ||
/***/ }), | ||
/* 13 */ | ||
/***/ (function(module, exports) { | ||
module.exports = require("react-portal"); | ||
/***/ }), | ||
/* 14 */ | ||
/***/ (function(module, exports) { | ||
module.exports = require("render-fragment"); | ||
/***/ }), | ||
/* 15 */ | ||
/***/ (function(module, exports) { | ||
module.exports = require("@zendeskgarden/react-selection"); | ||
/***/ }), | ||
/* 16 */ | ||
/***/ (function(module, exports, __webpack_require__) { | ||
// extracted by mini-css-extract-plugin | ||
module.exports = {"c-arrow":"index__c-arrow___cuUSh","c-arrow--t":"index__c-arrow--t___1ZWKF","c-arrow--tl":"index__c-arrow--tl___322NF","c-arrow--tr":"index__c-arrow--tr___MeaCx","c-arrow--r":"index__c-arrow--r___1QMUz","c-arrow--rb":"index__c-arrow--rb___1HzLl","c-arrow--rt":"index__c-arrow--rt___1e89v","c-arrow--l":"index__c-arrow--l___1UW5e","c-arrow--lb":"index__c-arrow--lb___1femU","c-arrow--lt":"index__c-arrow--lt___uMq77","c-arrow--b":"index__c-arrow--b___31z-F","c-arrow--bl":"index__c-arrow--bl___Yjbqb","c-arrow--br":"index__c-arrow--br___2cmY-"}; | ||
/***/ }), | ||
/* 17 */, | ||
/* 18 */, | ||
/* 19 */ | ||
/***/ (function(module, exports, __webpack_require__) { | ||
"use strict"; | ||
@@ -1085,87 +1088,89 @@ | ||
var _Tooltip = __webpack_require__(19); | ||
var _styledComponents = __webpack_require__(0); | ||
Object.defineProperty(exports, 'Tooltip', { | ||
enumerable: true, | ||
get: function get() { | ||
return _interopRequireDefault(_Tooltip).default; | ||
} | ||
}); | ||
var _styledComponents2 = _interopRequireDefault(_styledComponents); | ||
var _TooltipContainer = __webpack_require__(8); | ||
var _cssTooltips = __webpack_require__(3); | ||
Object.defineProperty(exports, 'TooltipContainer', { | ||
enumerable: true, | ||
get: function get() { | ||
return _interopRequireDefault(_TooltipContainer).default; | ||
} | ||
}); | ||
var _cssTooltips2 = _interopRequireDefault(_cssTooltips); | ||
var _LightTooltip = __webpack_require__(5); | ||
var _reactTheming = __webpack_require__(1); | ||
Object.defineProperty(exports, 'LightTooltip', { | ||
enumerable: true, | ||
get: function get() { | ||
return _interopRequireDefault(_LightTooltip).default; | ||
} | ||
}); | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
var _TooltipView = __webpack_require__(4); | ||
var COMPONENT_ID = 'tooltip.title'; | ||
Object.defineProperty(exports, 'TooltipView', { | ||
enumerable: true, | ||
get: function get() { | ||
return _interopRequireDefault(_TooltipView).default; | ||
} | ||
/** | ||
* Accepts all `<div>` props | ||
*/ | ||
/** | ||
* Copyright Zendesk, Inc. | ||
* | ||
* Use of this source code is governed under the Apache License, Version 2.0 | ||
* found at http://www.apache.org/licenses/LICENSE-2.0. | ||
*/ | ||
var Title = _styledComponents2.default.div.attrs({ | ||
'data-garden-id': COMPONENT_ID, | ||
'data-garden-version': "4.3.0", | ||
className: _cssTooltips2.default['c-tooltip__title'] | ||
}).withConfig({ | ||
displayName: 'Title' | ||
})(['', ';'], function (props) { | ||
return (0, _reactTheming.retrieveTheme)(COMPONENT_ID, props); | ||
}); | ||
var _Title = __webpack_require__(11); | ||
/** @component */ | ||
exports.default = Title; | ||
Object.defineProperty(exports, 'Title', { | ||
enumerable: true, | ||
get: function get() { | ||
return _interopRequireDefault(_Title).default; | ||
} | ||
}); | ||
/***/ }), | ||
/* 20 */ | ||
/***/ (function(module, exports, __webpack_require__) { | ||
var _Paragraph = __webpack_require__(10); | ||
"use strict"; | ||
Object.defineProperty(exports, 'Paragraph', { | ||
enumerable: true, | ||
get: function get() { | ||
return _interopRequireDefault(_Paragraph).default; | ||
} | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
var _gardenPlacements = __webpack_require__(7); | ||
var _styledComponents = __webpack_require__(0); | ||
Object.defineProperty(exports, 'GARDEN_PLACEMENTS', { | ||
enumerable: true, | ||
get: function get() { | ||
return _gardenPlacements.GARDEN_PLACEMENTS; | ||
} | ||
}); | ||
Object.defineProperty(exports, 'POPPER_PLACEMENTS', { | ||
enumerable: true, | ||
get: function get() { | ||
return _gardenPlacements.POPPER_PLACEMENTS; | ||
} | ||
}); | ||
Object.defineProperty(exports, 'getPopperPlacement', { | ||
enumerable: true, | ||
get: function get() { | ||
return _gardenPlacements.getPopperPlacement; | ||
} | ||
}); | ||
Object.defineProperty(exports, 'getRtlPopperPlacement', { | ||
enumerable: true, | ||
get: function get() { | ||
return _gardenPlacements.getRtlPopperPlacement; | ||
} | ||
}); | ||
var _styledComponents2 = _interopRequireDefault(_styledComponents); | ||
var _cssTooltips = __webpack_require__(3); | ||
var _cssTooltips2 = _interopRequireDefault(_cssTooltips); | ||
var _reactTheming = __webpack_require__(1); | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
var COMPONENT_ID = 'tooltip.paragraph'; | ||
/** | ||
* Accepts all `<div>` props | ||
*/ | ||
/** | ||
* Copyright Zendesk, Inc. | ||
* | ||
* Use of this source code is governed under the Apache License, Version 2.0 | ||
* found at http://www.apache.org/licenses/LICENSE-2.0. | ||
*/ | ||
var Paragraph = _styledComponents2.default.div.attrs({ | ||
'data-garden-id': COMPONENT_ID, | ||
'data-garden-version': "4.3.0", | ||
className: _cssTooltips2.default['c-tooltip__paragraph'] | ||
}).withConfig({ | ||
displayName: 'Paragraph' | ||
})(['', ';'], function (props) { | ||
return (0, _reactTheming.retrieveTheme)(COMPONENT_ID, props); | ||
}); | ||
/** @component */ | ||
exports.default = Paragraph; | ||
/***/ }) | ||
/******/ ]))); | ||
//# sourceMappingURL=index.js.map |
@@ -11,3 +11,3 @@ { | ||
}, | ||
"version": "4.3.0-beta.a1d273c8", | ||
"version": "4.3.0", | ||
"main": "./dist/index.js", | ||
@@ -23,3 +23,3 @@ "files": [ | ||
"dependencies": { | ||
"@zendeskgarden/react-selection": "^4.3.1", | ||
"@zendeskgarden/react-selection": "^4.3.3", | ||
"classnames": "^2.2.5", | ||
@@ -38,8 +38,8 @@ "react-popper": "0.8.2", | ||
"devDependencies": { | ||
"@zendeskgarden/css-arrows": "^3.1.1", | ||
"@zendeskgarden/css-tooltips": "^4.0.3", | ||
"@zendeskgarden/react-buttons": "^3.3.7", | ||
"@zendeskgarden/react-textfields": "^3.2.8", | ||
"@zendeskgarden/react-theming": "^3.1.1", | ||
"@zendeskgarden/react-toggles": "^3.2.8" | ||
"@zendeskgarden/css-arrows": "3.1.1", | ||
"@zendeskgarden/css-tooltips": "4.0.5", | ||
"@zendeskgarden/react-buttons": "^3.4.3", | ||
"@zendeskgarden/react-textfields": "^3.2.13", | ||
"@zendeskgarden/react-theming": "^3.1.2", | ||
"@zendeskgarden/react-toggles": "^3.2.13" | ||
}, | ||
@@ -46,0 +46,0 @@ "keywords": [ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
529433
1309
1