@tippyjs/react - npm Package Compare versions

Comparing version 4.0.5 to 4.1.0

dist/tippy-react.esm.js

@@ -129,2 +129,3 @@ import tippy, { createSingleton } from 'tippy.js';
         render = _ref.render,
+        reference = _ref.reference,
         _ref$disabled = _ref.disabled,
@@ -136,3 +137,3 @@ disabled = _ref$disabled === void 0 ? false : _ref$disabled,
         __self = _ref.__self,
-        restOfNativeProps = _objectWithoutPropertiesLoose(_ref, ["children", "content", "visible", "singleton", "render", "disabled", "ignoreAttributes", "__source", "__self"]);
+        restOfNativeProps = _objectWithoutPropertiesLoose(_ref, ["children", "content", "visible", "singleton", "render", "reference", "disabled", "ignoreAttributes", "__source", "__self"]);
 
@@ -211,6 +212,12 @@ var isControlledMode = visible !== undefined;
 
-    var deps = children ? [children.type] : []; // CREATE
+    var deps = [reference].concat(children ? [children.type] : []); // CREATE
 
     useIsomorphicLayoutEffect(function () {
-      var instance = tippy(mutableBox.ref || ssrSafeCreateDiv(), Object.assign({}, computedProps, {
+      var element = reference;
+
+      if (reference && reference.hasOwnProperty('current')) {
+        element = reference.current;
+      }
+
+      var instance = tippy(element || mutableBox.ref || ssrSafeCreateDiv(), Object.assign({}, computedProps, {
         plugins: [classNamePlugin].concat(props.plugins || [])
@@ -217,0 +224,0 @@ }));

dist/tippy-react.umd.js

@@ -133,2 +133,3 @@ (function (global, factory) {
           render = _ref.render,
+          reference = _ref.reference,
           _ref$disabled = _ref.disabled,
@@ -140,3 +141,3 @@ disabled = _ref$disabled === void 0 ? false : _ref$disabled,
           __self = _ref.__self,
-          restOfNativeProps = _objectWithoutPropertiesLoose(_ref, ["children", "content", "visible", "singleton", "render", "disabled", "ignoreAttributes", "__source", "__self"]);
+          restOfNativeProps = _objectWithoutPropertiesLoose(_ref, ["children", "content", "visible", "singleton", "render", "reference", "disabled", "ignoreAttributes", "__source", "__self"]);
 
@@ -215,6 +216,12 @@ var isControlledMode = visible !== undefined;
 
-      var deps = children ? [children.type] : []; // CREATE
+      var deps = [reference].concat(children ? [children.type] : []); // CREATE
 
       useIsomorphicLayoutEffect(function () {
-        var instance = tippy(mutableBox.ref || ssrSafeCreateDiv(), Object.assign({}, computedProps, {
+        var element = reference;
+
+        if (reference && reference.hasOwnProperty('current')) {
+          element = reference.current;
+        }
+
+        var instance = tippy(element || mutableBox.ref || ssrSafeCreateDiv(), Object.assign({}, computedProps, {
           plugins: [classNamePlugin].concat(props.plugins || [])
@@ -221,0 +228,0 @@ }));

dist/tippy-react.umd.min.js

@@ -1,2 +0,2 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("tippy.js"),require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["exports","tippy.js","react","react-dom"],n):n((e=e||self).Tippy={},e.tippy,e.React,e.ReactDOM)}(this,(function(e,n,t,r){"use strict";var i="default"in n?n.default:n,o="default"in t?t.default:t;function c(e,n){if(null==e)return{};var t,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(i[t]=e[t]);return i}var s="undefined"!=typeof window&&"undefined"!=typeof document;function a(e,n){e&&("function"==typeof e&&e(n),{}.hasOwnProperty.call(e,"current")&&(e.current=n))}function u(){return s&&document.createElement("div")}function p(e,n){var t,r;return Object.assign({},n,{popperOptions:Object.assign({},e.popperOptions,n.popperOptions,{modifiers:[].concat(((null==(t=e.popperOptions)?void 0:t.modifiers)||[]).filter((function(e){return e.name.indexOf("tippy")>=0})),(null==(r=n.popperOptions)?void 0:r.modifiers)||[])})})}var d=s?t.useLayoutEffect:t.useEffect;function f(e){var n=t.useRef();return n.current||(n.current="function"==typeof e?e():e),n.current}function l(e,n,t){t.split(/\s+/).forEach((function(t){t&&e.classList[n](t)}))}var v={name:"className",defaultValue:"",fn:function(e){var n=e.popper.firstElementChild,t=function(){var n;return!!(null==(n=e.props.render)?void 0:n.$$tippy)};function r(){e.props.className&&!t()||l(n,"add",e.props.className)}return{onCreate:r,onBeforeUpdate:function(){t()&&l(n,"remove",e.props.className)},onAfterUpdate:r}}};function m(e){return function(n){var i=n.children,s=n.content,l=n.visible,m=n.singleton,h=n.render,b=n.disabled,g=void 0!==b&&b,O=n.ignoreAttributes,y=void 0===O||O,j=(n.__source,n.__self,c(n,["children","content","visible","singleton","render","disabled","ignoreAttributes","__source","__self"])),E=void 0!==l,_=void 0!==m,P=t.useState(!1),D=P[0],R=P[1],S=t.useState({}),k=S[0],w=S[1],H=t.useState(),x=H[0],q=H[1],A=f((function(){return{container:u(),renders:1}})),N=Object.assign({ignoreAttributes:y},j,{content:A.container});E&&(N.trigger="manual",N.hideOnClick=!1),_&&(g=!0);var $=N,C=N.plugins||[];h&&($=Object.assign({},N,{plugins:_?[].concat(C,[{fn:function(){return{onTrigger:function(e,n){var t=m.data.children.find((function(e){return e.instance.reference===n.currentTarget})).content;q(t)}}}}]):C,render:function(){return{popper:A.container}}}));var M=i?[i.type]:[];return d((function(){var n=e(A.ref||u(),Object.assign({},$,{plugins:[v].concat(N.plugins||[])}));return A.instance=n,g&&n.disable(),l&&n.show(),_&&m.hook({instance:n,content:s,props:$}),R(!0),function(){n.destroy(),null==m||m.cleanup(n)}}),M),d((function(){if(1!==A.renders){var e=A.instance;e.setProps(p(e.props,$)),g?e.disable():e.enable(),E&&(l?e.show():e.hide()),_&&m.hook({instance:e,content:s,props:$})}else A.renders++})),d((function(){var e;if(h){var n=A.instance;n.setProps({popperOptions:Object.assign({},n.props.popperOptions,{modifiers:[].concat((null==(e=n.props.popperOptions)?void 0:e.modifiers)||[],[{name:"$$tippyReact",enabled:!0,phase:"beforeWrite",requires:["computeStyles"],fn:function(e){var n,t=e.state,r=null==(n=t.modifiersData)?void 0:n.hide;k.placement===t.placement&&k.referenceHidden===(null==r?void 0:r.isReferenceHidden)&&k.escaped===(null==r?void 0:r.hasPopperEscaped)||w({placement:t.placement,referenceHidden:null==r?void 0:r.isReferenceHidden,escaped:null==r?void 0:r.hasPopperEscaped}),t.attributes.popper={}}}])})})}}),[k.placement,k.referenceHidden,k.escaped].concat(M)),o.createElement(o.Fragment,null,i?t.cloneElement(i,{ref:function(e){A.ref=e,a(i.ref,e)}}):null,D&&r.createPortal(h?h(function(e){var n={"data-placement":e.placement};return e.referenceHidden&&(n["data-reference-hidden"]=""),e.escaped&&(n["data-escaped"]=""),n}(k),x):s,A.container))}}function h(e){return function(n){var r=void 0===n?{}:n,i=r.disabled,o=void 0!==i&&i,s=r.overrides,a=void 0===s?[]:s,u=t.useState(!1),l=u[0],m=u[1],h=f({children:[],renders:1});return d((function(){if(l){var n=h.children,t=h.sourceData;if(t){var r=e(n.map((function(e){return e.instance})),Object.assign({},t.props,{popperOptions:t.instance.props.popperOptions,overrides:a,plugins:[v].concat(t.props.plugins||[])}));return h.instance=r,o&&r.disable(),function(){r.destroy(),h.children=n.filter((function(e){return!e.instance.state.isDestroyed}))}}}else m(!0)}),[l]),d((function(){if(l)if(1!==h.renders){var e=h.children,n=h.instance,t=h.sourceData;if(n&&t){var r=t.props,i=(r.content,c(r,["content"]));n.setProps(p(n,Object.assign({},i,{overrides:a}))),n.setInstances(e.map((function(e){return e.instance}))),o?n.disable():n.enable()}}else h.renders++})),t.useMemo((function(){return[{data:h,hook:function(e){h.sourceData=e},cleanup:function(){h.sourceData=null}},{hook:function(e){h.children.find((function(n){var t=n.instance;return e.instance===t}))||h.children.push(e)},cleanup:function(e){h.children=h.children.filter((function(n){return n.instance!==e}))}}]}),[])}}var b=function(e,n){return t.forwardRef((function(r,i){var s=r.children,u=c(r,["children"]);return o.createElement(e,Object.assign({},n,u),s?t.cloneElement(s,{ref:function(e){a(i,e),a(s.ref,e)}}):null)}))},g=h(n.createSingleton),O=b(m(i));e.tippy=i,e.default=O,e.useSingleton=g,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("tippy.js"),require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["exports","tippy.js","react","react-dom"],n):n((e=e||self).Tippy={},e.tippy,e.React,e.ReactDOM)}(this,(function(e,n,t,r){"use strict";var i="default"in n?n.default:n,o="default"in t?t.default:t;function c(e,n){if(null==e)return{};var t,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(i[t]=e[t]);return i}var a="undefined"!=typeof window&&"undefined"!=typeof document;function s(e,n){e&&("function"==typeof e&&e(n),{}.hasOwnProperty.call(e,"current")&&(e.current=n))}function u(){return a&&document.createElement("div")}function p(e,n){var t,r;return Object.assign({},n,{popperOptions:Object.assign({},e.popperOptions,n.popperOptions,{modifiers:[].concat(((null==(t=e.popperOptions)?void 0:t.modifiers)||[]).filter((function(e){return e.name.indexOf("tippy")>=0})),(null==(r=n.popperOptions)?void 0:r.modifiers)||[])})})}var d=a?t.useLayoutEffect:t.useEffect;function f(e){var n=t.useRef();return n.current||(n.current="function"==typeof e?e():e),n.current}function l(e,n,t){t.split(/\s+/).forEach((function(t){t&&e.classList[n](t)}))}var v={name:"className",defaultValue:"",fn:function(e){var n=e.popper.firstElementChild,t=function(){var n;return!!(null==(n=e.props.render)?void 0:n.$$tippy)};function r(){e.props.className&&!t()||l(n,"add",e.props.className)}return{onCreate:r,onBeforeUpdate:function(){t()&&l(n,"remove",e.props.className)},onAfterUpdate:r}}};function m(e){return function(n){var i=n.children,a=n.content,l=n.visible,m=n.singleton,h=n.render,b=n.reference,g=n.disabled,O=void 0!==g&&g,y=n.ignoreAttributes,j=void 0===y||y,E=(n.__source,n.__self,c(n,["children","content","visible","singleton","render","reference","disabled","ignoreAttributes","__source","__self"])),_=void 0!==l,P=void 0!==m,w=t.useState(!1),D=w[0],R=w[1],S=t.useState({}),k=S[0],H=S[1],x=t.useState(),q=x[0],A=x[1],N=f((function(){return{container:u(),renders:1}})),$=Object.assign({ignoreAttributes:j},E,{content:N.container});_&&($.trigger="manual",$.hideOnClick=!1),P&&(O=!0);var C=$,M=$.plugins||[];h&&(C=Object.assign({},$,{plugins:P?[].concat(M,[{fn:function(){return{onTrigger:function(e,n){var t=m.data.children.find((function(e){return e.instance.reference===n.currentTarget})).content;A(t)}}}}]):M,render:function(){return{popper:N.container}}}));var T=[b].concat(i?[i.type]:[]);return d((function(){var n=b;b&&b.hasOwnProperty("current")&&(n=b.current);var t=e(n||N.ref||u(),Object.assign({},C,{plugins:[v].concat($.plugins||[])}));return N.instance=t,O&&t.disable(),l&&t.show(),P&&m.hook({instance:t,content:a,props:C}),R(!0),function(){t.destroy(),null==m||m.cleanup(t)}}),T),d((function(){if(1!==N.renders){var e=N.instance;e.setProps(p(e.props,C)),O?e.disable():e.enable(),_&&(l?e.show():e.hide()),P&&m.hook({instance:e,content:a,props:C})}else N.renders++})),d((function(){var e;if(h){var n=N.instance;n.setProps({popperOptions:Object.assign({},n.props.popperOptions,{modifiers:[].concat((null==(e=n.props.popperOptions)?void 0:e.modifiers)||[],[{name:"$$tippyReact",enabled:!0,phase:"beforeWrite",requires:["computeStyles"],fn:function(e){var n,t=e.state,r=null==(n=t.modifiersData)?void 0:n.hide;k.placement===t.placement&&k.referenceHidden===(null==r?void 0:r.isReferenceHidden)&&k.escaped===(null==r?void 0:r.hasPopperEscaped)||H({placement:t.placement,referenceHidden:null==r?void 0:r.isReferenceHidden,escaped:null==r?void 0:r.hasPopperEscaped}),t.attributes.popper={}}}])})})}}),[k.placement,k.referenceHidden,k.escaped].concat(T)),o.createElement(o.Fragment,null,i?t.cloneElement(i,{ref:function(e){N.ref=e,s(i.ref,e)}}):null,D&&r.createPortal(h?h(function(e){var n={"data-placement":e.placement};return e.referenceHidden&&(n["data-reference-hidden"]=""),e.escaped&&(n["data-escaped"]=""),n}(k),q):a,N.container))}}function h(e){return function(n){var r=void 0===n?{}:n,i=r.disabled,o=void 0!==i&&i,a=r.overrides,s=void 0===a?[]:a,u=t.useState(!1),l=u[0],m=u[1],h=f({children:[],renders:1});return d((function(){if(l){var n=h.children,t=h.sourceData;if(t){var r=e(n.map((function(e){return e.instance})),Object.assign({},t.props,{popperOptions:t.instance.props.popperOptions,overrides:s,plugins:[v].concat(t.props.plugins||[])}));return h.instance=r,o&&r.disable(),function(){r.destroy(),h.children=n.filter((function(e){return!e.instance.state.isDestroyed}))}}}else m(!0)}),[l]),d((function(){if(l)if(1!==h.renders){var e=h.children,n=h.instance,t=h.sourceData;if(n&&t){var r=t.props,i=(r.content,c(r,["content"]));n.setProps(p(n,Object.assign({},i,{overrides:s}))),n.setInstances(e.map((function(e){return e.instance}))),o?n.disable():n.enable()}}else h.renders++})),t.useMemo((function(){return[{data:h,hook:function(e){h.sourceData=e},cleanup:function(){h.sourceData=null}},{hook:function(e){h.children.find((function(n){var t=n.instance;return e.instance===t}))||h.children.push(e)},cleanup:function(e){h.children=h.children.filter((function(n){return n.instance!==e}))}}]}),[])}}var b=function(e,n){return t.forwardRef((function(r,i){var a=r.children,u=c(r,["children"]);return o.createElement(e,Object.assign({},n,u),a?t.cloneElement(a,{ref:function(e){s(i,e),s(a.ref,e)}}):null)}))},g=h(n.createSingleton),O=b(m(i));e.tippy=i,e.default=O,e.useSingleton=g,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=tippy-react.umd.min.js.map

headless/dist/tippy-react-headless.esm.js

@@ -129,2 +129,3 @@ import tippy, { createSingleton } from 'tippy.js/headless';
         render = _ref.render,
+        reference = _ref.reference,
         _ref$disabled = _ref.disabled,
@@ -136,3 +137,3 @@ disabled = _ref$disabled === void 0 ? false : _ref$disabled,
         __self = _ref.__self,
-        restOfNativeProps = _objectWithoutPropertiesLoose(_ref, ["children", "content", "visible", "singleton", "render", "disabled", "ignoreAttributes", "__source", "__self"]);
+        restOfNativeProps = _objectWithoutPropertiesLoose(_ref, ["children", "content", "visible", "singleton", "render", "reference", "disabled", "ignoreAttributes", "__source", "__self"]);
 
@@ -211,6 +212,12 @@ var isControlledMode = visible !== undefined;
 
-    var deps = children ? [children.type] : []; // CREATE
+    var deps = [reference].concat(children ? [children.type] : []); // CREATE
 
     useIsomorphicLayoutEffect(function () {
-      var instance = tippy(mutableBox.ref || ssrSafeCreateDiv(), Object.assign({}, computedProps, {
+      var element = reference;
+
+      if (reference && reference.hasOwnProperty('current')) {
+        element = reference.current;
+      }
+
+      var instance = tippy(element || mutableBox.ref || ssrSafeCreateDiv(), Object.assign({}, computedProps, {
         plugins: [classNamePlugin].concat(props.plugins || [])
@@ -217,0 +224,0 @@ }));

headless/dist/tippy-react-headless.umd.js

@@ -133,2 +133,3 @@ (function (global, factory) {
           render = _ref.render,
+          reference = _ref.reference,
           _ref$disabled = _ref.disabled,
@@ -140,3 +141,3 @@ disabled = _ref$disabled === void 0 ? false : _ref$disabled,
           __self = _ref.__self,
-          restOfNativeProps = _objectWithoutPropertiesLoose(_ref, ["children", "content", "visible", "singleton", "render", "disabled", "ignoreAttributes", "__source", "__self"]);
+          restOfNativeProps = _objectWithoutPropertiesLoose(_ref, ["children", "content", "visible", "singleton", "render", "reference", "disabled", "ignoreAttributes", "__source", "__self"]);
 
@@ -215,6 +216,12 @@ var isControlledMode = visible !== undefined;
 
-      var deps = children ? [children.type] : []; // CREATE
+      var deps = [reference].concat(children ? [children.type] : []); // CREATE
 
       useIsomorphicLayoutEffect(function () {
-        var instance = tippy(mutableBox.ref || ssrSafeCreateDiv(), Object.assign({}, computedProps, {
+        var element = reference;
+
+        if (reference && reference.hasOwnProperty('current')) {
+          element = reference.current;
+        }
+
+        var instance = tippy(element || mutableBox.ref || ssrSafeCreateDiv(), Object.assign({}, computedProps, {
           plugins: [classNamePlugin].concat(props.plugins || [])
@@ -221,0 +228,0 @@ }));

headless/dist/tippy-react-headless.umd.min.js

@@ -1,2 +0,2 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("tippy.js/headless"),require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["exports","tippy.js/headless","react","react-dom"],n):n((e=e||self).Tippy={},e.tippy,e.React,e.ReactDOM)}(this,(function(e,n,t,r){"use strict";var i="default"in n?n.default:n,o="default"in t?t.default:t;function c(e,n){if(null==e)return{};var t,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(i[t]=e[t]);return i}var s="undefined"!=typeof window&&"undefined"!=typeof document;function a(e,n){e&&("function"==typeof e&&e(n),{}.hasOwnProperty.call(e,"current")&&(e.current=n))}function u(){return s&&document.createElement("div")}function p(e,n){var t,r;return Object.assign({},n,{popperOptions:Object.assign({},e.popperOptions,n.popperOptions,{modifiers:[].concat(((null==(t=e.popperOptions)?void 0:t.modifiers)||[]).filter((function(e){return e.name.indexOf("tippy")>=0})),(null==(r=n.popperOptions)?void 0:r.modifiers)||[])})})}var d=s?t.useLayoutEffect:t.useEffect;function f(e){var n=t.useRef();return n.current||(n.current="function"==typeof e?e():e),n.current}function l(e,n,t){t.split(/\s+/).forEach((function(t){t&&e.classList[n](t)}))}var v={name:"className",defaultValue:"",fn:function(e){var n=e.popper.firstElementChild,t=function(){var n;return!!(null==(n=e.props.render)?void 0:n.$$tippy)};function r(){e.props.className&&!t()||l(n,"add",e.props.className)}return{onCreate:r,onBeforeUpdate:function(){t()&&l(n,"remove",e.props.className)},onAfterUpdate:r}}};function m(e){return function(n){var i=n.children,s=n.content,l=n.visible,m=n.singleton,h=n.render,b=n.disabled,g=void 0!==b&&b,O=n.ignoreAttributes,y=void 0===O||O,j=(n.__source,n.__self,c(n,["children","content","visible","singleton","render","disabled","ignoreAttributes","__source","__self"])),E=void 0!==l,_=void 0!==m,P=t.useState(!1),D=P[0],R=P[1],S=t.useState({}),k=S[0],w=S[1],H=t.useState(),x=H[0],q=H[1],A=f((function(){return{container:u(),renders:1}})),N=Object.assign({ignoreAttributes:y},j,{content:A.container});E&&(N.trigger="manual",N.hideOnClick=!1),_&&(g=!0);var $=N,C=N.plugins||[];h&&($=Object.assign({},N,{plugins:_?[].concat(C,[{fn:function(){return{onTrigger:function(e,n){var t=m.data.children.find((function(e){return e.instance.reference===n.currentTarget})).content;q(t)}}}}]):C,render:function(){return{popper:A.container}}}));var M=i?[i.type]:[];return d((function(){var n=e(A.ref||u(),Object.assign({},$,{plugins:[v].concat(N.plugins||[])}));return A.instance=n,g&&n.disable(),l&&n.show(),_&&m.hook({instance:n,content:s,props:$}),R(!0),function(){n.destroy(),null==m||m.cleanup(n)}}),M),d((function(){if(1!==A.renders){var e=A.instance;e.setProps(p(e.props,$)),g?e.disable():e.enable(),E&&(l?e.show():e.hide()),_&&m.hook({instance:e,content:s,props:$})}else A.renders++})),d((function(){var e;if(h){var n=A.instance;n.setProps({popperOptions:Object.assign({},n.props.popperOptions,{modifiers:[].concat((null==(e=n.props.popperOptions)?void 0:e.modifiers)||[],[{name:"$$tippyReact",enabled:!0,phase:"beforeWrite",requires:["computeStyles"],fn:function(e){var n,t=e.state,r=null==(n=t.modifiersData)?void 0:n.hide;k.placement===t.placement&&k.referenceHidden===(null==r?void 0:r.isReferenceHidden)&&k.escaped===(null==r?void 0:r.hasPopperEscaped)||w({placement:t.placement,referenceHidden:null==r?void 0:r.isReferenceHidden,escaped:null==r?void 0:r.hasPopperEscaped}),t.attributes.popper={}}}])})})}}),[k.placement,k.referenceHidden,k.escaped].concat(M)),o.createElement(o.Fragment,null,i?t.cloneElement(i,{ref:function(e){A.ref=e,a(i.ref,e)}}):null,D&&r.createPortal(h?h(function(e){var n={"data-placement":e.placement};return e.referenceHidden&&(n["data-reference-hidden"]=""),e.escaped&&(n["data-escaped"]=""),n}(k),x):s,A.container))}}function h(e){return function(n){var r=void 0===n?{}:n,i=r.disabled,o=void 0!==i&&i,s=r.overrides,a=void 0===s?[]:s,u=t.useState(!1),l=u[0],m=u[1],h=f({children:[],renders:1});return d((function(){if(l){var n=h.children,t=h.sourceData;if(t){var r=e(n.map((function(e){return e.instance})),Object.assign({},t.props,{popperOptions:t.instance.props.popperOptions,overrides:a,plugins:[v].concat(t.props.plugins||[])}));return h.instance=r,o&&r.disable(),function(){r.destroy(),h.children=n.filter((function(e){return!e.instance.state.isDestroyed}))}}}else m(!0)}),[l]),d((function(){if(l)if(1!==h.renders){var e=h.children,n=h.instance,t=h.sourceData;if(n&&t){var r=t.props,i=(r.content,c(r,["content"]));n.setProps(p(n,Object.assign({},i,{overrides:a}))),n.setInstances(e.map((function(e){return e.instance}))),o?n.disable():n.enable()}}else h.renders++})),t.useMemo((function(){return[{data:h,hook:function(e){h.sourceData=e},cleanup:function(){h.sourceData=null}},{hook:function(e){h.children.find((function(n){var t=n.instance;return e.instance===t}))||h.children.push(e)},cleanup:function(e){h.children=h.children.filter((function(n){return n.instance!==e}))}}]}),[])}}var b=function(e,n){return t.forwardRef((function(r,i){var s=r.children,u=c(r,["children"]);return o.createElement(e,Object.assign({},n,u),s?t.cloneElement(s,{ref:function(e){a(i,e),a(s.ref,e)}}):null)}))},g=h(n.createSingleton),O=b(m(i),{render:function(){return""}});e.tippy=i,e.default=O,e.useSingleton=g,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("tippy.js/headless"),require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["exports","tippy.js/headless","react","react-dom"],n):n((e=e||self).Tippy={},e.tippy,e.React,e.ReactDOM)}(this,(function(e,n,t,r){"use strict";var i="default"in n?n.default:n,o="default"in t?t.default:t;function c(e,n){if(null==e)return{};var t,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(i[t]=e[t]);return i}var s="undefined"!=typeof window&&"undefined"!=typeof document;function a(e,n){e&&("function"==typeof e&&e(n),{}.hasOwnProperty.call(e,"current")&&(e.current=n))}function u(){return s&&document.createElement("div")}function p(e,n){var t,r;return Object.assign({},n,{popperOptions:Object.assign({},e.popperOptions,n.popperOptions,{modifiers:[].concat(((null==(t=e.popperOptions)?void 0:t.modifiers)||[]).filter((function(e){return e.name.indexOf("tippy")>=0})),(null==(r=n.popperOptions)?void 0:r.modifiers)||[])})})}var d=s?t.useLayoutEffect:t.useEffect;function f(e){var n=t.useRef();return n.current||(n.current="function"==typeof e?e():e),n.current}function l(e,n,t){t.split(/\s+/).forEach((function(t){t&&e.classList[n](t)}))}var v={name:"className",defaultValue:"",fn:function(e){var n=e.popper.firstElementChild,t=function(){var n;return!!(null==(n=e.props.render)?void 0:n.$$tippy)};function r(){e.props.className&&!t()||l(n,"add",e.props.className)}return{onCreate:r,onBeforeUpdate:function(){t()&&l(n,"remove",e.props.className)},onAfterUpdate:r}}};function m(e){return function(n){var i=n.children,s=n.content,l=n.visible,m=n.singleton,h=n.render,b=n.reference,g=n.disabled,O=void 0!==g&&g,y=n.ignoreAttributes,j=void 0===y||y,E=(n.__source,n.__self,c(n,["children","content","visible","singleton","render","reference","disabled","ignoreAttributes","__source","__self"])),_=void 0!==l,P=void 0!==m,w=t.useState(!1),D=w[0],R=w[1],S=t.useState({}),k=S[0],H=S[1],x=t.useState(),q=x[0],A=x[1],N=f((function(){return{container:u(),renders:1}})),$=Object.assign({ignoreAttributes:j},E,{content:N.container});_&&($.trigger="manual",$.hideOnClick=!1),P&&(O=!0);var C=$,M=$.plugins||[];h&&(C=Object.assign({},$,{plugins:P?[].concat(M,[{fn:function(){return{onTrigger:function(e,n){var t=m.data.children.find((function(e){return e.instance.reference===n.currentTarget})).content;A(t)}}}}]):M,render:function(){return{popper:N.container}}}));var T=[b].concat(i?[i.type]:[]);return d((function(){var n=b;b&&b.hasOwnProperty("current")&&(n=b.current);var t=e(n||N.ref||u(),Object.assign({},C,{plugins:[v].concat($.plugins||[])}));return N.instance=t,O&&t.disable(),l&&t.show(),P&&m.hook({instance:t,content:s,props:C}),R(!0),function(){t.destroy(),null==m||m.cleanup(t)}}),T),d((function(){if(1!==N.renders){var e=N.instance;e.setProps(p(e.props,C)),O?e.disable():e.enable(),_&&(l?e.show():e.hide()),P&&m.hook({instance:e,content:s,props:C})}else N.renders++})),d((function(){var e;if(h){var n=N.instance;n.setProps({popperOptions:Object.assign({},n.props.popperOptions,{modifiers:[].concat((null==(e=n.props.popperOptions)?void 0:e.modifiers)||[],[{name:"$$tippyReact",enabled:!0,phase:"beforeWrite",requires:["computeStyles"],fn:function(e){var n,t=e.state,r=null==(n=t.modifiersData)?void 0:n.hide;k.placement===t.placement&&k.referenceHidden===(null==r?void 0:r.isReferenceHidden)&&k.escaped===(null==r?void 0:r.hasPopperEscaped)||H({placement:t.placement,referenceHidden:null==r?void 0:r.isReferenceHidden,escaped:null==r?void 0:r.hasPopperEscaped}),t.attributes.popper={}}}])})})}}),[k.placement,k.referenceHidden,k.escaped].concat(T)),o.createElement(o.Fragment,null,i?t.cloneElement(i,{ref:function(e){N.ref=e,a(i.ref,e)}}):null,D&&r.createPortal(h?h(function(e){var n={"data-placement":e.placement};return e.referenceHidden&&(n["data-reference-hidden"]=""),e.escaped&&(n["data-escaped"]=""),n}(k),q):s,N.container))}}function h(e){return function(n){var r=void 0===n?{}:n,i=r.disabled,o=void 0!==i&&i,s=r.overrides,a=void 0===s?[]:s,u=t.useState(!1),l=u[0],m=u[1],h=f({children:[],renders:1});return d((function(){if(l){var n=h.children,t=h.sourceData;if(t){var r=e(n.map((function(e){return e.instance})),Object.assign({},t.props,{popperOptions:t.instance.props.popperOptions,overrides:a,plugins:[v].concat(t.props.plugins||[])}));return h.instance=r,o&&r.disable(),function(){r.destroy(),h.children=n.filter((function(e){return!e.instance.state.isDestroyed}))}}}else m(!0)}),[l]),d((function(){if(l)if(1!==h.renders){var e=h.children,n=h.instance,t=h.sourceData;if(n&&t){var r=t.props,i=(r.content,c(r,["content"]));n.setProps(p(n,Object.assign({},i,{overrides:a}))),n.setInstances(e.map((function(e){return e.instance}))),o?n.disable():n.enable()}}else h.renders++})),t.useMemo((function(){return[{data:h,hook:function(e){h.sourceData=e},cleanup:function(){h.sourceData=null}},{hook:function(e){h.children.find((function(n){var t=n.instance;return e.instance===t}))||h.children.push(e)},cleanup:function(e){h.children=h.children.filter((function(n){return n.instance!==e}))}}]}),[])}}var b=function(e,n){return t.forwardRef((function(r,i){var s=r.children,u=c(r,["children"]);return o.createElement(e,Object.assign({},n,u),s?t.cloneElement(s,{ref:function(e){a(i,e),a(s.ref,e)}}):null)}))},g=h(n.createSingleton),O=b(m(i),{render:function(){return""}});e.tippy=i,e.default=O,e.useSingleton=g,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=tippy-react-headless.umd.min.js.map

index.d.ts

@@ -6,3 +6,3 @@ import * as React from 'react';
 
-export interface TippyProps extends Omit<Partial<Props>, 'content' | 'render'> {
+export interface TippyProps extends Partial<Omit<Props, 'content' | 'render'>> {
   children?: React.ReactElement<any>;
@@ -14,2 +14,3 @@ content?: Content;
   singleton?: SingletonObject;
+  reference?: React.RefObject<Element> | Element | null;
   render?: (
@@ -16,0 +17,0 @@ attrs: {

package.json

 {
   "name": "@tippyjs/react",
-  "version": "4.0.5",
+  "version": "4.1.0",
   "description": "React component for Tippy.js",
@@ -5,0 +5,0 @@ "main": "dist/tippy-react.umd.js",

README.md

@@ -300,2 +300,23 @@ <div align="center">
 
+### `reference?: React.RefObject | Element`
+
+> Available from `v4.1.0`
+
+If you can't place your reference element as a child inside `<Tippy />`, you can
+use this prop instead. It accepts a React `RefObject` (`.current` property) or a
+plain `Element`.
+
+```jsx
+function App() {
+  const ref = useRef();
+
+  return (
+    <>
+      <button ref={ref} />
+      <Tippy content="Tooltip" reference={ref} />
+    </>
+  );
+}
+```
+
 ### Plugins
@@ -302,0 +323,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

231496

increased by1.71%

Lines of code

1696

increased by1.31%

Number of lines in readme file

447

increased by4.93%

No dependency changes