@tippyjs/react - npm Package Compare versions

Comparing version 4.2.0 to 4.2.1

dist/tippy-react.esm.js

@@ -248,2 +248,4 @@ import tippy, { createSingleton } from 'tippy.js';
     useIsomorphicLayoutEffect(function () {
+      var _instance$popperInsta;
+
       // Prevent this effect from running on 1st render
@@ -256,4 +258,6 @@ if (mutableBox.renders === 1) {
       var instance = mutableBox.instance;
-      instance.setProps(deepPreserveProps(instance.props, computedProps));
+      instance.setProps(deepPreserveProps(instance.props, computedProps)); // Fixes #264
 
+      (_instance$popperInsta = instance.popperInstance) == null ? void 0 : _instance$popperInsta.forceUpdate();
+
       if (disabled) {
@@ -260,0 +264,0 @@ instance.disable();

dist/tippy-react.umd.js

@@ -252,2 +252,4 @@ (function (global, factory) {
       useIsomorphicLayoutEffect(function () {
+        var _instance$popperInsta;
+
         // Prevent this effect from running on 1st render
@@ -260,4 +262,6 @@ if (mutableBox.renders === 1) {
         var instance = mutableBox.instance;
-        instance.setProps(deepPreserveProps(instance.props, computedProps));
+        instance.setProps(deepPreserveProps(instance.props, computedProps)); // Fixes #264
 
+        (_instance$popperInsta = instance.popperInstance) == null ? void 0 : _instance$popperInsta.forceUpdate();
+
         if (disabled) {
@@ -264,0 +268,0 @@ instance.disable();

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 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,N.instance):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})}));
+!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(){var e;if(1!==N.renders){var n=N.instance;n.setProps(p(n.props,C)),null==(e=n.popperInstance)||e.forceUpdate(),O?n.disable():n.enable(),_&&(l?n.show():n.hide()),P&&m.hook({instance:n,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,N.instance):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

@@ -248,2 +248,4 @@ import tippy, { createSingleton } from 'tippy.js/headless';
     useIsomorphicLayoutEffect(function () {
+      var _instance$popperInsta;
+
       // Prevent this effect from running on 1st render
@@ -256,4 +258,6 @@ if (mutableBox.renders === 1) {
       var instance = mutableBox.instance;
-      instance.setProps(deepPreserveProps(instance.props, computedProps));
+      instance.setProps(deepPreserveProps(instance.props, computedProps)); // Fixes #264
 
+      (_instance$popperInsta = instance.popperInstance) == null ? void 0 : _instance$popperInsta.forceUpdate();
+
       if (disabled) {
@@ -260,0 +264,0 @@ instance.disable();

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

@@ -252,2 +252,4 @@ (function (global, factory) {
       useIsomorphicLayoutEffect(function () {
+        var _instance$popperInsta;
+
         // Prevent this effect from running on 1st render
@@ -260,4 +262,6 @@ if (mutableBox.renders === 1) {
         var instance = mutableBox.instance;
-        instance.setProps(deepPreserveProps(instance.props, computedProps));
+        instance.setProps(deepPreserveProps(instance.props, computedProps)); // Fixes #264
 
+        (_instance$popperInsta = instance.popperInstance) == null ? void 0 : _instance$popperInsta.forceUpdate();
+
         if (disabled) {
@@ -264,0 +268,0 @@ instance.disable();

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.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,N.instance):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})}));
+!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 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(){var e;if(1!==N.renders){var n=N.instance;n.setProps(p(n.props,C)),null==(e=n.popperInstance)||e.forceUpdate(),O?n.disable():n.enable(),_&&(l?n.show():n.hide()),P&&m.hook({instance:n,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,N.instance):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),{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

@@ -22,2 +22,3 @@ import * as React from 'react';
     content?: Content,
+    instance?: Instance
   ) => React.ReactNode;
@@ -24,0 +25,0 @@ }

package.json

 {
   "name": "@tippyjs/react",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "description": "React component for Tippy.js",
@@ -54,3 +54,3 @@ "main": "dist/tippy-react.umd.js",
   "dependencies": {
-    "tippy.js": "^6.2.0"
+    "tippy.js": "^6.3.0"
   },
@@ -57,0 +57,0 @@ "peerDependencies": {

README.md

@@ -10,14 +10,9 @@ <div align="center">
 [Tippy.js](https://github.com/atomiks/tippyjs/) is the complete tooltip,
-popover, dropdown, and menu solution for the web, powered by Popper.js.
+popover, dropdown, and menu solution for the web, powered by Popper.
 
-It is an abstraction over Popper that provides the logic and optionally the
-styling involved in all types of elements that pop out from the flow of the
-document and get overlaid on top of the UI, positioned next to a reference
-element.
+Tippy is an abstraction over Popper that provides common logic involved in all
+types of elements that pop out on top of the UI, positioned next to a target or
+reference element. This is a React wrapper for the core library, providing full
+integration including headless rendering abilities.
 
-This is a lightweight wrapper that lets you use it declaratively in React,
-providing full integration including headless rendering abilities. Tippy has
-virtually no restrictions over Popper, and gives you limitless control while
-providing useful behavior and defaults.
-
 ## 🚀 Installation
@@ -35,4 +30,2 @@
 
-Requires React 16.8+
-
 ## 🖲 Usage
@@ -49,5 +42,3 @@
 
-You can use both of these in conjunction if you'd like though — if so, use the
-default import and set `animation={false}` as a default prop instead of using
-the `/headless` import.
+Both may be used in conjunction.
 
@@ -78,3 +69,3 @@ ### Default Tippy
 
-Default Tippy is very quick to use and setup and "just works" out of the box.
+Default Tippy "just works" out of the box.
 
@@ -87,3 +78,3 @@ ### Headless Tippy
 import React from 'react';
-import Tippy from '@tippyjs/react/headless';
+import Tippy from '@tippyjs/react/headless'; // different import path!
 
@@ -104,4 +95,3 @@ const HeadlessTippy = () => (
 `attrs` is an object containing `data-placement`, `data-reference-hidden`, and
-`data-escaped` attributes. This allows you to conditionally style your tippy if
-necessary.
+`data-escaped` attributes. This allows you to conditionally style your tippy.
 
@@ -113,3 +103,3 @@ #### Headless animation
 
-#### Arrow
+#### Headless arrow
 
@@ -170,12 +160,8 @@ To make Popper position your custom arrow, set a `data-popper-arrow` attribute
 
-#### Note on Headless Tippy in React
+#### Headless root element
 
-The root popper node is abstracted away and gets styled/mutated by Tippy
-internally, so Headless Tippy in React is partially headless. This ensures it
-works correctly with minimal effort on your behalf to render.
+When rendering an element with the `render` prop, you're rendering the inner
+element that the root popper (positioned) node wraps.
 
-When rendering an element with the `render` prop, you're rendering the inner box
-element that the root popper node wraps, which is what gets styled and animated.
-For advanced cases, you can access the parent popper node as `instance.popper`
-in the `onCreate` lifecycle hook.
+For advanced cases you can access the root element via `instance.popper`.
 
@@ -186,4 +172,4 @@ [Here's `moveTransition` with Framer Motion](https://codesandbox.io/s/tippyjs-react-framer-motion-j94mj).
 
-If you want to use a component element as a child, ensure you forward the ref to
-the DOM node:
+If you want to use a component element as a child of the component, ensure you
+forward the ref to the DOM node:
 
@@ -213,5 +199,4 @@ ```jsx
 
-If you're using a library that doesn't `forwardRef` for you, and doesn't give
-access to the ref via `innerRef` or similar, you can use a wrapper `<span>`
-element as a workaround.
+Workaround for old libraries that don't forward the ref is to use a `<span>`
+wrapper tag:
 
@@ -234,9 +219,3 @@ ```jsx
 ```jsx
-<Tippy
-  content="Tooltip"
-  interactive={true}
-  interactiveBorder={20}
-  delay={100}
-  // ...and many more!
->
+<Tippy content="Tooltip" interactive={true} interactiveBorder={20} delay={100}>
   <button>Reference</button>
@@ -250,8 +229,2 @@ </Tippy>
 
-> **Note**: This does not apply if using Headless Tippy, as you can set this on
-> the element yourself.
-
-A React alternative to the `theme` prop. The className gets added to the tooltip
-element's class list as expected, without adding `-theme` as a suffix.
-
 ```jsx
@@ -263,18 +236,7 @@ <Tippy content="Tooltip" className="hello world">
 
-If you're using `styled-components`, the `className` prop allows you to avoid
-global styles with the following technique:
+This allows you to use `styled(Tippy)` or the `css` prop in `styled-components`
+or `emotion`.
 
-```jsx
-const PurpleTippy = styled(Tippy)`
-  background: purple;
+> Note: Does not apply if using Headless Tippy.
 
-  /* Styling the arrow for different placements */
-  &[data-placement^='top'] > .tippy-arrow::before {
-    border-top-color: purple;
-  }
-`;
-```
-
-See [themes](https://atomiks.github.io/tippyjs/v6/themes/) for more information.
-
 ### `disabled?: boolean`
@@ -281,0 +243,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

232657

increased by0.14%

Lines of code

1707

increased by0.59%

Worsened metrics

Number of lines in readme file

409

decreased by-8.5%

Dependency changes

• Updatedtippy.js@^6.3.0