Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-popper

Package Overview
Dependencies
Maintainers
2
Versions
72
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-popper - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

lib/cjs/usePopper.js

2

dist/index.umd.min.js

@@ -1,1 +0,1 @@

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("util"),require("react"),require("@popperjs/core")):"function"==typeof define&&define.amd?define(["exports","util","react","@popperjs/core"],e):e((t=t||self).ReactPopper={},t.util,t.React,t.Popper)}(this,function(t,e,o,n){"use strict";function p(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function i(){return(i=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(t[o]=r[o])}return t}).apply(this,arguments)}function r(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}function f(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}e=e&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e;function a(t){var e=c.call(t),r="[object Arguments]"===e;return r=r||"[object Array]"!==e&&null!==t&&"object"==typeof t&&"number"==typeof t.length&&0<=t.length&&"[object Function]"===c.call(t.callee)}var u,c=Object.prototype.toString;if(!Object.keys){var l=Object.prototype.hasOwnProperty,s=Object.prototype.toString,d=a,y=Object.prototype.propertyIsEnumerable,b=!y.call({toString:null},"toString"),g=y.call(function(){},"prototype"),h=["toString","toLocaleString","valueOf","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","constructor"],m=function(t){var e=t.constructor;return e&&e.prototype===t},v={$applicationCache:!0,$console:!0,$external:!0,$frame:!0,$frameElement:!0,$frames:!0,$innerHeight:!0,$innerWidth:!0,$onmozfullscreenchange:!0,$onmozfullscreenerror:!0,$outerHeight:!0,$outerWidth:!0,$pageXOffset:!0,$pageYOffset:!0,$parent:!0,$scrollLeft:!0,$scrollTop:!0,$scrollX:!0,$scrollY:!0,$self:!0,$webkitIndexedDB:!0,$webkitStorageInfo:!0,$window:!0},S=function(){if("undefined"==typeof window)return!1;for(var t in window)try{if(!v["$"+t]&&l.call(window,t)&&null!==window[t]&&"object"==typeof window[t])try{m(window[t])}catch(t){return!0}}catch(t){return!0}return!1}();u=function(t){var e=null!==t&&"object"==typeof t,r="[object Function]"===s.call(t),o=d(t),n=e&&"[object String]"===s.call(t),p=[];if(!e&&!r&&!o)throw new TypeError("Object.keys called on a non-object");var i=g&&r;if(n&&0<t.length&&!l.call(t,0))for(var a=0;a<t.length;++a)p.push(String(a));if(o&&0<t.length)for(var f=0;f<t.length;++f)p.push(String(f));else for(var u in t)i&&"prototype"===u||!l.call(t,u)||p.push(String(u));if(b)for(var c=function(t){if("undefined"==typeof window||!S)return m(t);try{return m(t)}catch(t){return!1}}(t),y=0;y<h.length;++y)c&&"constructor"===h[y]||!l.call(t,h[y])||p.push(h[y]);return p}}var j=u,P=Array.prototype.slice,A=Object.keys,O=A?function(t){return A(t)}:j,w=Object.keys;O.shim=function(){Object.keys?function(){var t=Object.keys(arguments);return t&&t.length===arguments.length}(1,2)||(Object.keys=function(t){return a(t)?w(P.call(t)):w(t)}):Object.keys=O;return Object.keys||O};function E(t){return!(x&&t&&"object"==typeof t&&Symbol.toStringTag in t)&&"[object Arguments]"===k.call(t)}function I(t){return!!E(t)||null!==t&&"object"==typeof t&&"number"==typeof t.length&&0<=t.length&&"[object Array]"!==k.call(t)&&"[object Function]"===k.call(t.callee)}var M=O,x="function"==typeof Symbol&&"symbol"==typeof Symbol.toStringTag,k=Object.prototype.toString,R=function(){return E(arguments)}();E.isLegacyArguments=I;function N(t){return t!=t}function U(t,e,r,o){var n;e in t&&("function"!=typeof(n=o)||"[object Function]"!==J.call(n)||!o())||(Y?X(t,e,{configurable:!0,enumerable:!1,value:r,writable:!0}):t[e]=r)}function W(t,e){var r=2<arguments.length?arguments[2]:{},o=M(e);G&&(o=V.call(o,Object.getOwnPropertySymbols(e)));for(var n=0;n<o.length;n+=1)U(t,o[n],e[o[n]],r[o[n]])}var F=R?E:I,D=function(t,e){return 0===t&&0===e?1/t==1/e:t===e||!(!N(t)||!N(e))},$=Array.prototype.slice,T=Object.prototype.toString,B=Function.prototype.bind||function(e){var r=this;if("function"!=typeof r||"[object Function]"!==T.call(r))throw new TypeError("Function.prototype.bind called on incompatible "+r);for(var o,n=$.call(arguments,1),t=Math.max(0,r.length-n.length),p=[],i=0;i<t;i++)p.push("$"+i);if(o=Function("binder","return function ("+p.join(",")+"){ return binder.apply(this,arguments); }")(function(){if(this instanceof o){var t=r.apply(this,n.concat($.call(arguments)));return Object(t)===t?t:this}return r.apply(e,n.concat($.call(arguments)))}),r.prototype){var a=function(){};a.prototype=r.prototype,o.prototype=new a,a.prototype=null}return o},C=B.call(Function.call,Object.prototype.hasOwnProperty),_=RegExp.prototype.exec,q=Object.getOwnPropertyDescriptor,H=Object.prototype.toString,L="function"==typeof Symbol&&"symbol"==typeof Symbol.toStringTag,z=function(t){if(!t||"object"!=typeof t)return!1;if(!L)return"[object RegExp]"===H.call(t);var e=q(t,"lastIndex");return!(!e||!C(e,"value"))&&function(t){try{var e=t.lastIndex;return t.lastIndex=0,_.call(t),!0}catch(t){return!1}finally{t.lastIndex=e}}(t)},G="function"==typeof Symbol&&"symbol"==typeof Symbol("foo"),J=Object.prototype.toString,V=Array.prototype.concat,X=Object.defineProperty,Y=X&&function(){var t={};try{for(var e in X(t,"x",{enumerable:!1,value:t}),t)return!1;return t.x===t}catch(t){return!1}}();W.supportsDescriptors=!!Y;var K=W,Q="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};function Z(t,e){return t(e={exports:{}},e.exports),e.exports}function tt(){if("function"!=typeof Symbol||"function"!=typeof Object.getOwnPropertySymbols)return!1;if("symbol"==typeof Symbol.iterator)return!0;var t={},e=Symbol("test"),r=Object(e);if("string"==typeof e)return!1;if("[object Symbol]"!==Object.prototype.toString.call(e))return!1;if("[object Symbol]"!==Object.prototype.toString.call(r))return!1;for(e in t[e]=42,t)return!1;if("function"==typeof Object.keys&&0!==Object.keys(t).length)return!1;if("function"==typeof Object.getOwnPropertyNames&&0!==Object.getOwnPropertyNames(t).length)return!1;var o=Object.getOwnPropertySymbols(t);if(1!==o.length||o[0]!==e)return!1;if(!Object.prototype.propertyIsEnumerable.call(t,e))return!1;if("function"==typeof Object.getOwnPropertyDescriptor){var n=Object.getOwnPropertyDescriptor(t,e);if(42!==n.value||!0!==n.enumerable)return!1}return!0}function et(){return"function"==typeof ot&&("function"==typeof Symbol&&("symbol"==typeof ot("foo")&&("symbol"==typeof Symbol("bar")&&tt())))}var rt,ot=Q.Symbol,nt=TypeError,pt=Object.getOwnPropertyDescriptor;if(pt)try{pt({},"")}catch(t){pt=null}function it(){throw new nt}function at(t,e){if("string"!=typeof t||0===t.length)throw new TypeError("intrinsic name must be a non-empty string");if(1<arguments.length&&"boolean"!=typeof e)throw new TypeError('"allowMissing" argument must be a boolean');for(var n,r=(n=[],dt(t,bt,function(t,e,r,o){n[n.length]=r?dt(o,gt,"$1"):e||t}),n),o=function(t,e){if(!(t in st))throw new SyntaxError("intrinsic "+t+" does not exist!");if(void 0===st[t]&&!e)throw new nt("intrinsic "+t+" exists, but is not available. Please file an issue!");return st[t]}("%"+(0<r.length?r[0]:"")+"%",e),p=1;p<r.length;p+=1)if(null!=o)if(pt&&p+1>=r.length){var i=pt(o,r[p]);if(!(e||r[p]in o))throw new nt("base intrinsic for "+t+" exists, but the property is not available.");o=i?i.get||i.value:o[r[p]]}else o=o[r[p]];return o}function ft(){return B.apply(vt,arguments)}var ut=pt?function(){try{return it}catch(t){try{return pt(arguments,"callee").get}catch(t){return it}}}():it,ct=et(),yt=Object.getPrototypeOf||function(t){return t.__proto__},lt="undefined"==typeof Uint8Array?rt:yt(Uint8Array),st={"%Array%":Array,"%ArrayBuffer%":"undefined"==typeof ArrayBuffer?rt:ArrayBuffer,"%ArrayBufferPrototype%":"undefined"==typeof ArrayBuffer?rt:ArrayBuffer.prototype,"%ArrayIteratorPrototype%":ct?yt([][Symbol.iterator]()):rt,"%ArrayPrototype%":Array.prototype,"%ArrayProto_entries%":Array.prototype.entries,"%ArrayProto_forEach%":Array.prototype.forEach,"%ArrayProto_keys%":Array.prototype.keys,"%ArrayProto_values%":Array.prototype.values,"%AsyncFromSyncIteratorPrototype%":rt,"%AsyncFunction%":void 0,"%AsyncFunctionPrototype%":rt,"%AsyncGenerator%":rt,"%AsyncGeneratorFunction%":void 0,"%AsyncGeneratorPrototype%":rt,"%AsyncIteratorPrototype%":rt,"%Atomics%":"undefined"==typeof Atomics?rt:Atomics,"%Boolean%":Boolean,"%BooleanPrototype%":Boolean.prototype,"%DataView%":"undefined"==typeof DataView?rt:DataView,"%DataViewPrototype%":"undefined"==typeof DataView?rt:DataView.prototype,"%Date%":Date,"%DatePrototype%":Date.prototype,"%decodeURI%":decodeURI,"%decodeURIComponent%":decodeURIComponent,"%encodeURI%":encodeURI,"%encodeURIComponent%":encodeURIComponent,"%Error%":Error,"%ErrorPrototype%":Error.prototype,"%eval%":eval,"%EvalError%":EvalError,"%EvalErrorPrototype%":EvalError.prototype,"%Float32Array%":"undefined"==typeof Float32Array?rt:Float32Array,"%Float32ArrayPrototype%":"undefined"==typeof Float32Array?rt:Float32Array.prototype,"%Float64Array%":"undefined"==typeof Float64Array?rt:Float64Array,"%Float64ArrayPrototype%":"undefined"==typeof Float64Array?rt:Float64Array.prototype,"%Function%":Function,"%FunctionPrototype%":Function.prototype,"%Generator%":rt,"%GeneratorFunction%":void 0,"%GeneratorPrototype%":rt,"%Int8Array%":"undefined"==typeof Int8Array?rt:Int8Array,"%Int8ArrayPrototype%":"undefined"==typeof Int8Array?rt:Int8Array.prototype,"%Int16Array%":"undefined"==typeof Int16Array?rt:Int16Array,"%Int16ArrayPrototype%":"undefined"==typeof Int16Array?rt:Int8Array.prototype,"%Int32Array%":"undefined"==typeof Int32Array?rt:Int32Array,"%Int32ArrayPrototype%":"undefined"==typeof Int32Array?rt:Int32Array.prototype,"%isFinite%":isFinite,"%isNaN%":isNaN,"%IteratorPrototype%":ct?yt(yt([][Symbol.iterator]())):rt,"%JSON%":"object"==typeof JSON?JSON:rt,"%JSONParse%":"object"==typeof JSON?JSON.parse:rt,"%Map%":"undefined"==typeof Map?rt:Map,"%MapIteratorPrototype%":"undefined"!=typeof Map&&ct?yt((new Map)[Symbol.iterator]()):rt,"%MapPrototype%":"undefined"==typeof Map?rt:Map.prototype,"%Math%":Math,"%Number%":Number,"%NumberPrototype%":Number.prototype,"%Object%":Object,"%ObjectPrototype%":Object.prototype,"%ObjProto_toString%":Object.prototype.toString,"%ObjProto_valueOf%":Object.prototype.valueOf,"%parseFloat%":parseFloat,"%parseInt%":parseInt,"%Promise%":"undefined"==typeof Promise?rt:Promise,"%PromisePrototype%":"undefined"==typeof Promise?rt:Promise.prototype,"%PromiseProto_then%":"undefined"==typeof Promise?rt:Promise.prototype.then,"%Promise_all%":"undefined"==typeof Promise?rt:Promise.all,"%Promise_reject%":"undefined"==typeof Promise?rt:Promise.reject,"%Promise_resolve%":"undefined"==typeof Promise?rt:Promise.resolve,"%Proxy%":"undefined"==typeof Proxy?rt:Proxy,"%RangeError%":RangeError,"%RangeErrorPrototype%":RangeError.prototype,"%ReferenceError%":ReferenceError,"%ReferenceErrorPrototype%":ReferenceError.prototype,"%Reflect%":"undefined"==typeof Reflect?rt:Reflect,"%RegExp%":RegExp,"%RegExpPrototype%":RegExp.prototype,"%Set%":"undefined"==typeof Set?rt:Set,"%SetIteratorPrototype%":"undefined"!=typeof Set&&ct?yt((new Set)[Symbol.iterator]()):rt,"%SetPrototype%":"undefined"==typeof Set?rt:Set.prototype,"%SharedArrayBuffer%":"undefined"==typeof SharedArrayBuffer?rt:SharedArrayBuffer,"%SharedArrayBufferPrototype%":"undefined"==typeof SharedArrayBuffer?rt:SharedArrayBuffer.prototype,"%String%":String,"%StringIteratorPrototype%":ct?yt(""[Symbol.iterator]()):rt,"%StringPrototype%":String.prototype,"%Symbol%":ct?Symbol:rt,"%SymbolPrototype%":ct?Symbol.prototype:rt,"%SyntaxError%":SyntaxError,"%SyntaxErrorPrototype%":SyntaxError.prototype,"%ThrowTypeError%":ut,"%TypedArray%":lt,"%TypedArrayPrototype%":lt?lt.prototype:rt,"%TypeError%":nt,"%TypeErrorPrototype%":nt.prototype,"%Uint8Array%":"undefined"==typeof Uint8Array?rt:Uint8Array,"%Uint8ArrayPrototype%":"undefined"==typeof Uint8Array?rt:Uint8Array.prototype,"%Uint8ClampedArray%":"undefined"==typeof Uint8ClampedArray?rt:Uint8ClampedArray,"%Uint8ClampedArrayPrototype%":"undefined"==typeof Uint8ClampedArray?rt:Uint8ClampedArray.prototype,"%Uint16Array%":"undefined"==typeof Uint16Array?rt:Uint16Array,"%Uint16ArrayPrototype%":"undefined"==typeof Uint16Array?rt:Uint16Array.prototype,"%Uint32Array%":"undefined"==typeof Uint32Array?rt:Uint32Array,"%Uint32ArrayPrototype%":"undefined"==typeof Uint32Array?rt:Uint32Array.prototype,"%URIError%":URIError,"%URIErrorPrototype%":URIError.prototype,"%WeakMap%":"undefined"==typeof WeakMap?rt:WeakMap,"%WeakMapPrototype%":"undefined"==typeof WeakMap?rt:WeakMap.prototype,"%WeakSet%":"undefined"==typeof WeakSet?rt:WeakSet,"%WeakSetPrototype%":"undefined"==typeof WeakSet?rt:WeakSet.prototype},dt=B.call(Function.call,String.prototype.replace),bt=/[^%.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|%$))/g,gt=/\\(\\)?/g,ht=at("%Function%"),mt=ht.apply,vt=ht.call;ft.apply=function(){return B.apply(mt,arguments)};function St(){if(null!=this&&this!==Pt(this))throw new At("RegExp.prototype.flags getter called on non-object");var t="";return this.global&&(t+="g"),this.ignoreCase&&(t+="i"),this.multiline&&(t+="m"),this.dotAll&&(t+="s"),this.unicode&&(t+="u"),this.sticky&&(t+="y"),t}function jt(){if(!Ot)throw new Et("RegExp.prototype.flags requires a true ES5 environment that supports property descriptors");if("gim"===/a/gim.flags){var t=wt(RegExp.prototype,"flags");if(t&&"function"==typeof t.get&&"boolean"==typeof/a/.dotAll)return t.get}return St}var Pt=Object,At=TypeError,Ot=K.supportsDescriptors,wt=Object.getOwnPropertyDescriptor,Et=TypeError,It=K.supportsDescriptors,Mt=Object.getOwnPropertyDescriptor,xt=Object.defineProperty,kt=TypeError,Rt=Object.getPrototypeOf,Nt=/a/,Ut=ft(St);K(Ut,{getPolyfill:jt,implementation:St,shim:function(){if(!It||!Rt)throw new kt("RegExp.prototype.flags requires a true ES5 environment that supports property descriptors");var t=jt(),e=Rt(Nt),r=Mt(e,"flags");return r&&r.get===t||xt(e,"flags",{configurable:!0,enumerable:!1,get:t}),t}});function Wt(t){return"string"==typeof t||"object"==typeof t&&(Vt?function(t){try{return Gt.call(t),!0}catch(t){return!1}}(t):"[object String]"===Jt.call(t))}function Ft(t){return"number"==typeof t||"object"==typeof t&&(Kt?function(t){try{return Xt.call(t),!0}catch(t){return!1}}(t):"[object Number]"===Yt.call(t))}function Dt(t){return"boolean"==typeof t||null!==t&&"object"==typeof t&&(te&&Symbol.toStringTag in t?function(t){try{return Qt.call(t),!0}catch(t){return!1}}(t):"[object Boolean]"===Zt.call(t))}function $t(t,e){var r=at(t,!!e);return"function"==typeof r&&ne(t,".prototype.")?ft(r):r}var Tt,Bt=Ut,Ct={}.toString,_t=Array.isArray||function(t){return"[object Array]"==Ct.call(t)},qt=Date.prototype.getDay,Ht=Object.prototype.toString,Lt="function"==typeof Symbol&&"symbol"==typeof Symbol.toStringTag,zt=function(t){return"object"==typeof t&&null!==t&&(Lt?function(t){try{return qt.call(t),!0}catch(t){return!1}}(t):"[object Date]"===Ht.call(t))},Gt=String.prototype.valueOf,Jt=Object.prototype.toString,Vt="function"==typeof Symbol&&"symbol"==typeof Symbol.toStringTag,Xt=Number.prototype.toString,Yt=Object.prototype.toString,Kt="function"==typeof Symbol&&"symbol"==typeof Symbol.toStringTag,Qt=Boolean.prototype.toString,Zt=Object.prototype.toString,te="function"==typeof Symbol&&"symbol"==typeof Symbol.toStringTag,ee=Z(function(t){var r=Object.prototype.toString;if(et()){var o=Symbol.prototype.toString,n=/^Symbol\(.*\)$/;t.exports=function(t){if("symbol"==typeof t)return!0;if("[object Symbol]"!==r.call(t))return!1;try{return"symbol"==typeof(e=t).valueOf()&&n.test(o.call(e))}catch(t){return!1}var e}}else t.exports=function(){return!1}}),re=Z(function(t){if("function"==typeof BigInt){var e=BigInt.prototype.valueOf;t.exports=function(t){return null!=t&&"boolean"!=typeof t&&"string"!=typeof t&&"number"!=typeof t&&"symbol"!=typeof t&&"function"!=typeof t&&("bigint"==typeof t||function(t){try{return e.call(t),!0}catch(t){}return!1}(t))}}else t.exports=function(){return!1}}),oe=function(t){return null==t||"object"!=typeof t&&"function"!=typeof t?null:Wt(t)?"String":Ft(t)?"Number":Dt(t)?"Boolean":ee(t)?"Symbol":re(t)?"BigInt":void 0},ne=ft(at("String.prototype.indexOf")),pe="function"==typeof Map&&Map.prototype?Map:null,ie="function"==typeof Set&&Set.prototype?Set:null;pe||(Tt=function(){return!1});var ae=pe?Map.prototype.has:null,fe=ie?Set.prototype.has:null;Tt||ae||(Tt=function(){return!1});var ue,ce=Tt||function(t){if(!t||"object"!=typeof t)return!1;try{if(ae.call(t),fe)try{fe.call(t)}catch(t){return!0}return t instanceof pe}catch(t){}return!1},ye="function"==typeof Map&&Map.prototype?Map:null,le="function"==typeof Set&&Set.prototype?Set:null;le||(ue=function(){return!1});var se=ye?Map.prototype.has:null,de=le?Set.prototype.has:null;ue||de||(ue=function(){return!1});var be,ge=ue||function(t){if(!t||"object"!=typeof t)return!1;try{if(de.call(t),se)try{se.call(t)}catch(t){return!0}return t instanceof le}catch(t){}return!1},he="function"==typeof WeakMap&&WeakMap.prototype?WeakMap:null,me="function"==typeof WeakSet&&WeakSet.prototype?WeakSet:null;he||(be=function(){return!1});var ve=he?he.prototype.has:null,Se=me?me.prototype.has:null;be||ve||(be=function(){return!1});function je(r,t,o,n){var e,p=t||{};if(Xe(p,"quoteStyle")&&"single"!==p.quoteStyle&&"double"!==p.quoteStyle)throw new TypeError('option "quoteStyle" must be "single" or "double"');if(void 0===r)return"undefined";if(null===r)return"null";if("boolean"==typeof r)return r?"true":"false";if("string"==typeof r)return e=p,ze(r.replace(/(['\\])/g,"\\$1").replace(/[\x00-\x1f]/g,Ke),"single",e);if("number"==typeof r)return 0===r?0<1/0/r?"0":"-0":String(r);if("bigint"==typeof r)return String(r)+"n";var i,a=void 0===p.depth?5:p.depth;if(void 0===o&&(o=0),a<=o&&0<a&&"object"==typeof r)return"[Object]";if(void 0===n)n=[];else if(0<=function(t,e){if(t.indexOf)return t.indexOf(e);for(var r=0,o=t.length;r<o;r++)if(t[r]===e)return r;return-1}(n,r))return"[Circular]";function f(t,e){return e&&(n=n.slice()).push(e),je(t,p,o+1,n)}if("function"==typeof r){var u=function(t){if(t.name)return t.name;var e=_e.call(t,/^function\s*([\w$]+)/);if(e)return e[1];return null}(r);return"[Function"+(u?": "+u:"")+"]"}if(Je(r)){var c=Symbol.prototype.toString.call(r);return"object"==typeof r?Qe(c):c}if(function(t){if(!t||"object"!=typeof t)return;if("undefined"!=typeof HTMLElement&&t instanceof HTMLElement)return 1;return"string"==typeof t.nodeName&&"function"==typeof t.getAttribute}(r)){for(var y="<"+String(r.nodeName).toLowerCase(),l=r.attributes||[],s=0;s<l.length;s++)y+=" "+l[s].name+"="+ze((i=l[s].value,String(i).replace(/"/g,"&quot;")),"double",p);return y+=">",r.childNodes&&r.childNodes.length&&(y+="..."),y+="</"+String(r.nodeName).toLowerCase()+">"}if(Ge(r))return 0===r.length?"[]":"[ "+er(r,f).join(", ")+" ]";if("[object Error]"===Ye(r)){var d=er(r,f);return 0===d.length?"["+String(r)+"]":"{ ["+String(r)+"] "+d.join(", ")+" }"}if("object"==typeof r){if(Le&&"function"==typeof r[Le])return r[Le]();if("function"==typeof r.inspect)return r.inspect()}if(function(t){if(!Re||!t||"object"!=typeof t)return;try{Re.call(t);try{Fe.call(t)}catch(t){return 1}return t instanceof Map}catch(t){}return}(r)){var b=[];return Ne.call(r,function(t,e){b.push(f(e,r)+" => "+f(t,r))}),tr("Map",Re.call(r),b)}if(function(t){if(!Fe||!t||"object"!=typeof t)return;try{Fe.call(t);try{Re.call(t)}catch(t){return 1}return t instanceof Set}catch(t){}return}(r)){var g=[];return De.call(r,function(t){g.push(f(t,r))}),tr("Set",Fe.call(r),g)}if(function(t){if(!$e||!t||"object"!=typeof t)return;try{$e.call(t,$e);try{Te.call(t,Te)}catch(t){return 1}return t instanceof WeakMap}catch(t){}return}(r))return Ze("WeakMap");if(function(t){if(!Te||!t||"object"!=typeof t)return;try{Te.call(t,Te);try{$e.call(t,$e)}catch(t){return 1}return t instanceof WeakSet}catch(t){}return}(r))return Ze("WeakSet");if("[object Number]"===Ye(r))return Qe(f(Number(r)));if("[object BigInt]"===Ye(r))return Qe(f(qe.call(r)));if("[object Boolean]"===Ye(r))return Qe(Be.call(r));if("[object String]"===Ye(r))return Qe(f(String(r)));if("[object Date]"===Ye(r)||"[object RegExp]"===Ye(r))return String(r);var h=er(r,f);return 0===h.length?"{}":"{ "+h.join(", ")+" }"}var Pe=be||function(t){if(!t||"object"!=typeof t)return!1;try{if(ve.call(t,ve),Se)try{Se.call(t,Se)}catch(t){return!0}return t instanceof he}catch(t){}return!1},Ae=Z(function(t){var e,r="function"==typeof WeakMap&&WeakMap.prototype?WeakMap:null,o="function"==typeof WeakSet&&WeakSet.prototype?WeakSet:null;r||(e=function(){return!1});var n=r?r.prototype.has:null,p=o?o.prototype.has:null;e||p||(t.exports=function(){return!1}),t.exports=e||function(t){if(!t||"object"!=typeof t)return!1;try{if(p.call(t,p),n)try{n.call(t,n)}catch(t){return!0}return t instanceof o}catch(t){}return!1}}),Oe=function(t){if(t&&"object"==typeof t){if(ce(t))return"Map";if(ge(t))return"Set";if(Pe(t))return"WeakMap";if(Ae(t))return"WeakSet"}return!1},we={}.toString,Ee=Array.isArray||function(t){return"[object Array]"==we.call(t)},Ie=Z(function(t){if(et()||tt()){var e=Symbol.iterator;t.exports=function(t){return null!=t&&void 0!==t[e]?t[e]():F(t)?Array.prototype[e].call(t):void 0}}else{var n=Ee,p=Wt,r=at,o=r("%Map%",!0),i=r("%Set%",!0),a=$t,f=a("Array.prototype.push"),u=a("String.prototype.charCodeAt"),c=a("String.prototype.slice"),y=function(r){var o=0;return{next:function(){var t,e=o>=r.length;return e||(t=r[o],o+=1),{done:e,value:t}}}},l=function(r){if(n(r)||F(r))return y(r);if(p(r)){var o=0;return{next:function(){var t=function(t,e){if(t.length<=e+1)return e+1;var r=u(t,e);if(r<55296||56319<r)return e+1;var o=u(t,e+1);return o<56320||57343<o?e+1:e+2}(r,o),e=c(r,o,t);return{done:(o=t)>r.length,value:e}}}}};if(o||i){var s=ce,d=ge,b=a("Map.prototype.forEach",!0),g=a("Set.prototype.forEach",!0);if("undefined"==typeof process||!process.versions||!process.versions.node)var h=a("Map.prototype.iterator",!0),m=a("Set.prototype.iterator",!0),v=function(t){var e=!1;return{next:function(){try{return{done:e,value:e?void 0:t.next()}}catch(t){return{done:e=!0,value:void 0}}}}};var S=a("Map.prototype.@@iterator",!0)||a("Map.prototype._es6-shim iterator_",!0),j=a("Set.prototype.@@iterator",!0)||a("Set.prototype._es6-shim iterator_",!0);t.exports=function(t){return function(t){if(s(t)){if(h)return v(h(t));if(S)return S(t);if(b){var r=[];return b(t,function(t,e){f(r,[e,t])}),y(r)}}if(d(t)){if(m)return v(m(t));if(j)return j(t);if(g){var e=[];return g(t,function(t){f(e,t)}),y(e)}}}(t)||l(t)}}else t.exports=l}}),Me=e.inspect,xe="function"==typeof Map&&Map.prototype,ke=Object.getOwnPropertyDescriptor&&xe?Object.getOwnPropertyDescriptor(Map.prototype,"size"):null,Re=xe&&ke&&"function"==typeof ke.get?ke.get:null,Ne=xe&&Map.prototype.forEach,Ue="function"==typeof Set&&Set.prototype,We=Object.getOwnPropertyDescriptor&&Ue?Object.getOwnPropertyDescriptor(Set.prototype,"size"):null,Fe=Ue&&We&&"function"==typeof We.get?We.get:null,De=Ue&&Set.prototype.forEach,$e="function"==typeof WeakMap&&WeakMap.prototype?WeakMap.prototype.has:null,Te="function"==typeof WeakSet&&WeakSet.prototype?WeakSet.prototype.has:null,Be=Boolean.prototype.valueOf,Ce=Object.prototype.toString,_e=String.prototype.match,qe="function"==typeof BigInt?BigInt.prototype.valueOf:null,He=Me.custom,Le=He&&Je(He)?He:null;function ze(t,e,r){var o="double"===(r.quoteStyle||e)?'"':"'";return o+t+o}function Ge(t){return"[object Array]"===Ye(t)}function Je(t){return"[object Symbol]"===Ye(t)}var Ve=Object.prototype.hasOwnProperty||function(t){return t in this};function Xe(t,e){return Ve.call(t,e)}function Ye(t){return Ce.call(t)}function Ke(t){var e=t.charCodeAt(0),r={8:"b",9:"t",10:"n",12:"f",13:"r"}[e];return r?"\\"+r:"\\x"+(e<16?"0":"")+e.toString(16)}function Qe(t){return"Object("+t+")"}function Ze(t){return t+" { ? }"}function tr(t,e,r){return t+" ("+e+") {"+r.join(", ")+"}"}function er(t,e){var r=Ge(t),o=[];if(r){o.length=t.length;for(var n=0;n<t.length;n++)o[n]=Xe(t,n)?e(t[n],t):""}for(var p in t)Xe(t,p)&&(r&&String(Number(p))===p&&p<t.length||(/[^\w$]/.test(p)?o.push(e(p,t)+": "+e(t[p],t)):o.push(p+": "+e(t[p],t))));return o}function rr(){var r,o,n,e={assert:function(t){if(!e.has(t))throw new or("Side channel does not contain "+je(t))},get:function(t){if(nr&&t&&("object"==typeof t||"function"==typeof t)){if(r)return ar(r,t)}else if(pr){if(o)return cr(o,t)}else if(n)return function(t,e){for(var r=0;r<t.length;r+=1)if(t[r].key===e)return t[r].value}(n,t)},has:function(t){if(nr&&t&&("object"==typeof t||"function"==typeof t)){if(r)return ur(r,t)}else if(pr){if(o)return lr(o,t)}else if(n)return function(t,e){for(var r=0;r<t.length;r+=1)if(t[r].key===e)return!0;return!1}(n,t);return!1},set:function(t,e){nr&&t&&("object"==typeof t||"function"==typeof t)?(r=r||new nr,fr(r,t,e)):pr?(o=o||new pr,yr(o,t,e)):function(t,e,r){for(var o=0;o<t.length;o+=1)if(t[o].key===e)return t[o].value=r;ir(t,{key:e,value:r})}(n=n||[],t,e)}};return e}var or=at("%TypeError%"),nr=at("%WeakMap%",!0),pr=at("%Map%",!0),ir=$t("Array.prototype.push"),ar=$t("WeakMap.prototype.get",!0),fr=$t("WeakMap.prototype.set",!0),ur=$t("WeakMap.prototype.has",!0),cr=$t("Map.prototype.get",!0),yr=$t("Map.prototype.set",!0),lr=$t("Map.prototype.has",!0),sr=$t("Date.prototype.getTime"),dr=Object.getPrototypeOf,br=$t("Object.prototype.toString"),gr=at("%Set%",!0),hr=$t("Map.prototype.has",!0),mr=$t("Map.prototype.get",!0),vr=$t("Map.prototype.size",!0),Sr=$t("Set.prototype.add",!0),jr=$t("Set.prototype.delete",!0),Pr=$t("Set.prototype.has",!0),Ar=$t("Set.prototype.size",!0);function Or(t,e,r,o){for(var n,p=Ie(t);(n=p.next())&&!n.done;)if(Mr(e,n.value,r,o))return jr(t,n.value),1}function wr(t){return void 0===t?null:"object"!=typeof t?"symbol"!=typeof t&&("string"!=typeof t&&"number"!=typeof t||+t==+t):void 0}function Er(t,e,r,o,n){var p=wr(r);if(null!=p)return p;var i=mr(e,p);return(void 0!==i||hr(e,p))&&Mr(o,i,!1,n)&&(!hr(t,p)&&Mr(o,i,!1,n))}function Ir(t,e,r,o,n,p){for(var i,a,f=Ie(t);(i=f.next())&&!i.done;)if(Mr(r,a=i.value,n,p)&&Mr(o,mr(e,a),n,p))return jr(t,a),1}function Mr(t,e,r,o){var n=r||{};if(n.strict?D(t,e):t===e)return!0;if(oe(t)!==oe(e))return!1;if(!t||!e||"object"!=typeof t&&"object"!=typeof e)return!(!1===t&&e||t&&!1===e)&&(n.strict?D(t,e):t==e);var p,i=o.has(t),a=o.has(e);if(i&&a){if(o.get(t)===o.get(e))return!0}else p={};return i||o.set(t,p),a||o.set(e,p),function(t,e,r,o){var n,p;if(typeof t!=typeof e)return!1;if(null==t||null==e)return!1;if(t.prototype!==e.prototype)return!1;if(br(t)!==br(e))return!1;if(F(t)!==F(e))return!1;var i=_t(t),a=_t(e);if(i!==a)return!1;var f=t instanceof Error,u=e instanceof Error;if(f!=u)return!1;if((f||u)&&(t.name!==e.name||t.message!==e.message))return!1;var c=z(t),y=z(e);if(c!==y)return!1;if((c||y)&&(t.source!==e.source||Bt(t)!==Bt(e)))return!1;var l=zt(t),s=zt(e);if(l!==s)return!1;if((l||s)&&sr(t)!==sr(e))return!1;if(r.strict&&dr&&dr(t)!==dr(e))return!1;var d=xr(t),b=xr(e);if(d!==b)return!1;if(d||b){if(t.length!==e.length)return!1;for(n=0;n<t.length;n++)if(t[n]!==e[n])return!1;return!0}if(typeof t!=typeof e)return!1;try{var g=M(t),h=M(e)}catch(t){return!1}if(g.length!==h.length)return!1;for(g.sort(),h.sort(),n=g.length-1;0<=n;n--)if(g[n]!=h[n])return!1;for(n=g.length-1;0<=n;n--)if(p=g[n],!Mr(t[p],e[p],r,o))return!1;var m=Oe(t),v=Oe(e);return m===v&&("Set"!==m&&"Set"!==v?"Map"!==m||function(t,e,r,o){if(vr(t)!==vr(e))return!1;var n,p,i,a,f,u,c=Ie(t),y=Ie(e);for(;(n=c.next())&&!n.done;)if(a=n.value[0],f=n.value[1],a&&"object"==typeof a)i=i||new gr,Sr(i,a);else if(void 0===(u=mr(e,a))&&!hr(e,a)||!Mr(f,u,r.strict,o)){if(r.strict)return!1;if(!Er(t,e,a,f,o))return!1;i=i||new gr,Sr(i,a)}if(i){for(;(p=y.next())&&!p.done;)if(a=p.value[0],f=p.value[1],a&&"object"==typeof a){if(!Ir(i,t,a,f,r.strict,o))return!1}else if(!(r.strict||t.has(a)&&Mr(mr(t,a),f,!1,o)||Ir(i,t,a,f,!1,o)))return!1;return 0===Ar(i)}return!0}(t,e,r,o):function(t,e,r,o){if(Ar(t)!==Ar(e))return!1;var n,p,i,a=Ie(t),f=Ie(e);for(;(n=a.next())&&!n.done;)if(n.value&&"object"==typeof n.value)i=i||new gr,Sr(i,n.value);else if(!Pr(e,n.value)){if(r.strict)return!1;if(u=t,c=e,y=n.value,!(null!=(l=wr(y))?l:Pr(c,l)&&!Pr(u,l)))return!1;i=i||new gr,Sr(i,n.value)}var u,c,y,l;if(i){for(;(p=f.next())&&!p.done;)if(p.value&&"object"==typeof p.value){if(!Or(i,p.value,r.strict,o))return!1}else if(!r.strict&&!Pr(t,p.value)&&!Or(i,p.value,r.strict,o))return!1;return 0===Ar(i)}return!0}(t,e,r,o))}(t,e,n,o)}function xr(t){return!(!t||"object"!=typeof t||"number"!=typeof t.length)&&("function"==typeof t.copy&&"function"==typeof t.slice&&!(0<t.length&&"number"!=typeof t[0]))}function kr(t){return Array.isArray(t)?t[0]:t}function Rr(t){if("function"==typeof t){for(var e=arguments.length,r=new Array(1<e?e-1:0),o=1;o<e;o++)r[o-1]=arguments[o];return t.apply(void 0,r)}}function Nr(t,e){if("function"==typeof t)return Rr(t,e);null!=t&&(t.current=e)}var Ur=o.createContext(),Wr=o.createContext(),Fr=function(n){function t(){for(var e,t=arguments.length,r=new Array(t),o=0;o<t;o++)r[o]=arguments[o];return p(f(e=n.call.apply(n,[this].concat(r))||this),"referenceNode",void 0),p(f(e),"setReferenceNode",function(t){t&&e.referenceNode!==t&&(e.referenceNode=t,e.forceUpdate())}),e}r(t,n);var e=t.prototype;return e.componentWillUnmount=function(){this.referenceNode=null},e.render=function(){return o.createElement(Ur.Provider,{value:this.referenceNode},o.createElement(Wr.Provider,{value:this.setReferenceNode},this.props.children))},t}(o.Component),Dr={top:0,left:0,opacity:0,pointerEvents:"none"},$r={},Tr=function(o){function t(){for(var a,t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];return p(f(a=o.call.apply(o,[this].concat(e))||this),"state",{placement:void 0,styles:void 0,isReferenceHidden:void 0,hasPopperEscaped:void 0}),p(f(a),"popperInstance",void 0),p(f(a),"popperNode",null),p(f(a),"arrowNode",null),p(f(a),"setPopperNode",function(t){t&&a.popperNode!==t&&(Nr(a.props.innerRef,t),a.popperNode=t,a.updatePopperInstance())}),p(f(a),"setArrowNode",function(t){a.arrowNode=t}),p(f(a),"updateStateModifier",{name:"reactPopperState",enabled:!0,phase:"write",fn:function(t){var e,r,o=t.state,n=o.placement,p=o.styles,i=o.modifiersData;i.hide&&(e=i.hide.isReferenceHidden,r=i.hide.hasPopperEscaped),a.setState({placement:n,styles:p,isReferenceHidden:e,hasPopperEscaped:r})}}),p(f(a),"getOptions",function(){var t=a.props.modifiers,e=void 0===t?[]:t,r=e.find(function(t){return"arrow"===t.name});return{placement:a.props.placement,strategy:a.props.strategy,modifiers:[].concat(e.filter(function(t){return"arrow"!==t.name}),[{name:"arrow",enabled:!!a.arrowNode,options:i({},r&&r.options,{element:a.arrowNode})},{name:"applyStyles",enabled:!1},a.updateStateModifier]),onFirstUpdate:a.props.onFirstUpdate}}),p(f(a),"getPopperStyle",function(){var t=i({},Dr,{position:"fixed"===a.props.strategy?"fixed":"absolute"});return a.popperNode&&a.state.styles?a.state.styles.popper:t}),p(f(a),"getArrowStyle",function(){return a.arrowNode&&a.state.styles?a.state.styles.arrow:$r}),p(f(a),"destroyPopperInstance",function(){a.popperInstance&&(a.popperInstance.destroy(),a.popperInstance=null)}),p(f(a),"updatePopperInstance",function(){a.destroyPopperInstance();var t=f(a).popperNode,e=a.props.referenceElement;e&&t&&(a.popperInstance=n.createPopper(e,t,a.getOptions()))}),p(f(a),"update",function(){return a.popperInstance?a.popperInstance.update():Promise.resolve(null)}),a}r(t,o);var e=t.prototype;return e.componentDidUpdate=function(t,e){var r,o;this.props.referenceElement!==t.referenceElement&&this.updatePopperInstance(),this.props.placement===t.placement&&this.props.strategy===t.strategy&&(r=this.props.modifiers,o=t.modifiers,Mr(r,o,{strict:!0},rr()))||this.popperInstance&&this.popperInstance.setOptions(this.getOptions()),e.placement!==this.state.placement&&this.update()},e.componentWillUnmount=function(){Nr(this.props.innerRef,null),this.destroyPopperInstance()},e.render=function(){var t=this.state,e=t.placement,r=t.isReferenceHidden,o=t.hasPopperEscaped;return kr(this.props.children)({ref:this.setPopperNode,style:this.getPopperStyle(),placement:e,isReferenceHidden:r,hasPopperEscaped:o,update:this.update,forceUpdate:this.popperInstance?this.popperInstance.forceUpdate:null,arrowProps:{ref:this.setArrowNode,style:this.getArrowStyle()}})},t}(o.Component);p(Tr,"defaultProps",{placement:"bottom",strategy:"absolute",modifiers:[],referenceElement:void 0});var Br=function(){},Cr=function(n){function t(){for(var e,t=arguments.length,r=new Array(t),o=0;o<t;o++)r[o]=arguments[o];return p(f(e=n.call.apply(n,[this].concat(r))||this),"refHandler",function(t){Nr(e.props.innerRef,t),Rr(e.props.setReferenceNode,t)}),e}r(t,n);var e=t.prototype;return e.componentWillUnmount=function(){Nr(this.props.innerRef,null)},e.render=function(){return Br(Boolean(this.props.setReferenceNode)),kr(this.props.children)({ref:this.refHandler})},t}(o.Component);t.Manager=Fr,t.Popper=function(t){var e=t.referenceElement,r=function(t,e){if(null==t)return{};var r,o,n={},p=Object.keys(t);for(o=0;o<p.length;o++)r=p[o],0<=e.indexOf(r)||(n[r]=t[r]);return n}(t,["referenceElement"]);return o.createElement(Ur.Consumer,null,function(t){return o.createElement(Tr,{referenceElement:void 0!==e?e:t,children:r.children,innerRef:r.innerRef,modifiers:r.modifiers,placement:r.placement,strategy:r.strategy,onFirstUpdate:r.onFirstUpdate})})},t.Reference=function(e){return o.createElement(Wr.Consumer,null,function(t){return o.createElement(Cr,{setReferenceNode:t,innerRef:e.innerRef,children:e.children})})},Object.defineProperty(t,"__esModule",{value:!0})});
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("@popperjs/core")):"function"==typeof define&&define.amd?define(["exports","react","@popperjs/core"],t):t((e=e||self).ReactPopper={},e.React,e.Popper)}(this,(function(e,t,r){"use strict";var n=t.createContext(),u=t.createContext();var o=function(e){return Array.isArray(e)?e[0]:e},i=function(e){if("function"==typeof e){for(var t=arguments.length,r=new Array(t>1?t-1:0),n=1;n<t;n++)r[n-1]=arguments[n];return e.apply(void 0,r)}},a=function(e,t){if("function"==typeof e)return i(e,t);null!=e&&(e.current=t)},f=function(e){return e.reduce((function(e,t){var r=t[0],n=t[1];return e[r]=n,e}),{})},c="undefined"!=typeof window&&window.document&&window.document.createElement?t.useLayoutEffect:t.useEffect,s="undefined"!=typeof Element,l="function"==typeof Map,p="function"==typeof Set,d="function"==typeof ArrayBuffer;var y=function(e,t){try{return function e(t,r){if(t===r)return!0;if(t&&r&&"object"==typeof t&&"object"==typeof r){if(t.constructor!==r.constructor)return!1;var n,u,o,i;if(Array.isArray(t)){if((n=t.length)!=r.length)return!1;for(u=n;0!=u--;)if(!e(t[u],r[u]))return!1;return!0}if(l&&t instanceof Map&&r instanceof Map){if(t.size!==r.size)return!1;for(i=t.entries();!(u=i.next()).done;)if(!r.has(u.value[0]))return!1;for(i=t.entries();!(u=i.next()).done;)if(!e(u.value[1],r.get(u.value[0])))return!1;return!0}if(p&&t instanceof Set&&r instanceof Set){if(t.size!==r.size)return!1;for(i=t.entries();!(u=i.next()).done;)if(!r.has(u.value[0]))return!1;return!0}if(d&&ArrayBuffer.isView(t)&&ArrayBuffer.isView(r)){if((n=t.length)!=r.length)return!1;for(u=n;0!=u--;)if(t[u]!==r[u])return!1;return!0}if(t.constructor===RegExp)return t.source===r.source&&t.flags===r.flags;if(t.valueOf!==Object.prototype.valueOf)return t.valueOf()===r.valueOf();if(t.toString!==Object.prototype.toString)return t.toString()===r.toString();if((n=(o=Object.keys(t)).length)!==Object.keys(r).length)return!1;for(u=n;0!=u--;)if(!Object.prototype.hasOwnProperty.call(r,o[u]))return!1;if(s&&t instanceof Element)return!1;for(u=n;0!=u--;)if(!("_owner"===o[u]&&t.$$typeof||e(t[o[u]],r[o[u]])))return!1;return!0}return t!=t&&r!=r}(e,t)}catch(e){if((e.message||"").match(/stack|recursion/i))return console.warn("react-fast-compare cannot handle circular refs"),!1;throw e}},m=[],v=function(e,n,u){void 0===u&&(u={});var o=t.useRef(null),i={onFirstUpdate:u.onFirstUpdate,placement:u.placement||"bottom",strategy:u.strategy||"absolute",modifiers:u.modifiers||m},a=t.useState({styles:{popper:{position:i.strategy||"absolute",left:"0",top:"0"}},attributes:{}}),s=a[0],l=a[1],p=t.useMemo((function(){return{name:"updateState",enabled:!0,phase:"write",fn:function(e){var t=e.state,r=Object.keys(t.elements);l({styles:f(r.map((function(e){return[e,t.styles[e]||{}]}))),attributes:f(r.map((function(e){return[e,t.attributes[e]]})))})},requires:["computeStyles"]}}),[l]),d=t.useMemo((function(){var e={onFirstUpdate:i.onFirstUpdate,placement:i.placement||"bottom",strategy:i.strategy||"absolute",modifiers:[].concat(i.modifiers,[p,{name:"applyStyles",enabled:!1}])};return y(o.current,e)?o.current||e:(o.current=e,e)}),[i.onFirstUpdate,i.placement,i.strategy,i.modifiers,p]),v=t.useRef(),b=t.useMemo((function(){return u.createPopper||r.createPopper}),[u.createPopper]);return c((function(){var t=null;return null!=e&&null!=n&&(t=b(e,n,d),v.current=t),function(){null!=t&&t.destroy(),v.current=null}}),[e,n,b]),c((function(){v.current&&v.current.setOptions(d)}),[d]),{state:v.current?v.current.state:null,styles:s.styles,attributes:s.attributes,update:v.current?v.current.update:null,forceUpdate:v.current?v.current.forceUpdate:null}},b=function(){},g=function(){return Promise.resolve(null)},h=[];e.Manager=function(e){var r=e.children,o=t.useState(null),i=o[0],a=o[1];return t.useEffect((function(){return function(){a(null)}}),[a]),t.createElement(n.Provider,{value:i},t.createElement(u.Provider,{value:a},r))},e.Popper=function(e){var r=e.placement,u=void 0===r?"bottom":r,i=e.strategy,f=void 0===i?"absolute":i,c=e.modifiers,s=void 0===c?h:c,l=e.referenceElement,p=e.onFirstUpdate,d=e.innerRef,y=e.children,m=t.useContext(n),w=t.useState(null),E=w[0],P=w[1],S=t.useState(null),O=S[0],j=S[1];t.useEffect((function(){return a(d,E)}),[d,E]);var x=t.useMemo((function(){return{placement:u,strategy:f,onFirstUpdate:p,modifiers:[].concat(s,[{name:"arrow",enabled:null!=O,options:{element:O}}])}}),[u,f,p,s,O]),U=v(l||m,E,x),M=U.state,R=U.styles,A=U.forceUpdate,F=U.update,k=t.useMemo((function(){return{ref:P,style:R.popper,placement:M?M.placement:u,hasPopperEscaped:M&&M.modifiersData.hide?M.modifiersData.hide.hasPopperEscaped:null,isReferenceHidden:M&&M.modifiersData.hide?M.modifiersData.hide.isReferenceHidden:null,arrowProps:{style:R.arrow,ref:j},forceUpdate:A||b,update:F||g}}),[P,j,u,M,R,F,A]);return o(y)(k)},e.Reference=function(e){var r=e.children,n=e.innerRef,f=t.useContext(u),c=t.useCallback((function(e){a(n,e),i(f,e)}),[n,f]);return t.useEffect((function(){return function(){return a(n,null)}})),t.useEffect((function(){}),[f]),o(r)({ref:c})},e.usePopper=v,Object.defineProperty(e,"__esModule",{value:!0})}));
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {

@@ -10,10 +8,8 @@ value: true

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = require("react");
var _react = _interopRequireDefault(require("react"));
var _ = require("..");
// Please remember to update also the TypeScript test files that can
// be found under `/typings/tests` please. Thanks! 🤗
function _extends() { _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; }; return _extends.apply(this, arguments); }
var Test = function Test() {

@@ -47,3 +43,3 @@ var _React$createElement;

ref: ref,
style: (0, _extends2["default"])({}, style, {
style: _extends({}, style, {
opacity: isReferenceHidden || hasPopperEscaped ? 0 : 1

@@ -50,0 +46,0 @@ }),

"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {

@@ -11,3 +9,3 @@ value: true

get: function get() {
return _Popper["default"];
return _Popper.Popper;
}

@@ -18,3 +16,3 @@ });

get: function get() {
return _Manager["default"];
return _Manager.Manager;
}

@@ -25,10 +23,18 @@ });

get: function get() {
return _Reference["default"];
return _Reference.Reference;
}
});
Object.defineProperty(exports, "usePopper", {
enumerable: true,
get: function get() {
return _usePopper.usePopper;
}
});
var _Popper = _interopRequireDefault(require("./Popper"));
var _Popper = require("./Popper");
var _Manager = _interopRequireDefault(require("./Manager"));
var _Manager = require("./Manager");
var _Reference = _interopRequireDefault(require("./Reference"));
var _Reference = require("./Reference");
var _usePopper = require("./usePopper");
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.ManagerReferenceNodeSetterContext = exports.ManagerReferenceNodeContext = void 0;
exports.Manager = Manager;
exports.ManagerReferenceNodeSetterContext = exports.ManagerReferenceNodeContext = void 0;
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var React = require("react");
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var React = _interopRequireWildcard(require("react"));
function _createSuper(Derived) { return function () { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
var ManagerReferenceNodeContext = React.createContext();

@@ -33,43 +16,19 @@ exports.ManagerReferenceNodeContext = ManagerReferenceNodeContext;

var Manager = /*#__PURE__*/function (_React$Component) {
(0, _inheritsLoose2["default"])(Manager, _React$Component);
function Manager(_ref) {
var children = _ref.children;
var _super = _createSuper(Manager);
var _React$useState = React.useState(null),
referenceNode = _React$useState[0],
setReferenceNode = _React$useState[1];
function Manager() {
var _this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "referenceNode", void 0);
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setReferenceNode", function (newReferenceNode) {
if (newReferenceNode && _this.referenceNode !== newReferenceNode) {
_this.referenceNode = newReferenceNode;
_this.forceUpdate();
}
});
return _this;
}
var _proto = Manager.prototype;
_proto.componentWillUnmount = function componentWillUnmount() {
this.referenceNode = null;
};
_proto.render = function render() {
return /*#__PURE__*/React.createElement(ManagerReferenceNodeContext.Provider, {
value: this.referenceNode
}, /*#__PURE__*/React.createElement(ManagerReferenceNodeSetterContext.Provider, {
value: this.setReferenceNode
}, this.props.children));
};
return Manager;
}(React.Component);
exports["default"] = Manager;
React.useEffect(function () {
return function () {
setReferenceNode(null);
};
}, [setReferenceNode]);
return /*#__PURE__*/React.createElement(ManagerReferenceNodeContext.Provider, {
value: referenceNode
}, /*#__PURE__*/React.createElement(ManagerReferenceNodeSetterContext.Provider, {
value: setReferenceNode
}, children));
}
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = Popper;
exports.InnerPopper = void 0;
exports.Popper = Popper;
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var React = require("react");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _deepEqual = _interopRequireDefault(require("deep-equal"));
var React = _interopRequireWildcard(require("react"));
var _core = require("@popperjs/core");
var _Manager = require("./Manager");

@@ -37,214 +14,75 @@

function _createSuper(Derived) { return function () { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
var _usePopper2 = require("./usePopper");
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
var NOOP = function NOOP() {
return void 0;
};
var initialPopperStyle = {
top: 0,
left: 0,
opacity: 0,
pointerEvents: 'none'
var NOOP_PROMISE = function NOOP_PROMISE() {
return Promise.resolve(null);
};
var initialArrowStyle = {};
var InnerPopper = /*#__PURE__*/function (_React$Component) {
(0, _inheritsLoose2["default"])(InnerPopper, _React$Component);
var EMPTY_MODIFIERS = [];
var _super = _createSuper(InnerPopper);
function Popper(_ref) {
var _ref$placement = _ref.placement,
placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
_ref$strategy = _ref.strategy,
strategy = _ref$strategy === void 0 ? 'absolute' : _ref$strategy,
_ref$modifiers = _ref.modifiers,
modifiers = _ref$modifiers === void 0 ? EMPTY_MODIFIERS : _ref$modifiers,
referenceElement = _ref.referenceElement,
onFirstUpdate = _ref.onFirstUpdate,
innerRef = _ref.innerRef,
children = _ref.children;
var referenceNode = React.useContext(_Manager.ManagerReferenceNodeContext);
function InnerPopper() {
var _this;
var _React$useState = React.useState(null),
popperElement = _React$useState[0],
setPopperElement = _React$useState[1];
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
var _React$useState2 = React.useState(null),
arrowElement = _React$useState2[0],
setArrowElement = _React$useState2[1];
_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
placement: undefined,
styles: undefined,
isReferenceHidden: undefined,
hasPopperEscaped: undefined
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "popperInstance", void 0);
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "popperNode", null);
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "arrowNode", null);
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setPopperNode", function (popperNode) {
if (!popperNode || _this.popperNode === popperNode) return;
(0, _utils.setRef)(_this.props.innerRef, popperNode);
_this.popperNode = popperNode;
_this.updatePopperInstance();
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setArrowNode", function (arrowNode) {
_this.arrowNode = arrowNode;
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "updateStateModifier", {
name: 'reactPopperState',
enabled: true,
phase: 'write',
fn: function fn(_ref) {
var state = _ref.state;
var placement = state.placement,
styles = state.styles,
modifiersData = state.modifiersData;
var isReferenceHidden;
var hasPopperEscaped;
if (modifiersData.hide) {
isReferenceHidden = modifiersData.hide.isReferenceHidden;
hasPopperEscaped = modifiersData.hide.hasPopperEscaped;
React.useEffect(function () {
return (0, _utils.setRef)(innerRef, popperElement);
}, [innerRef, popperElement]);
var options = React.useMemo(function () {
return {
placement: placement,
strategy: strategy,
onFirstUpdate: onFirstUpdate,
modifiers: [].concat(modifiers, [{
name: 'arrow',
enabled: arrowElement != null,
options: {
element: arrowElement
}
}])
};
}, [placement, strategy, onFirstUpdate, modifiers, arrowElement]);
_this.setState({
placement: placement,
styles: styles,
isReferenceHidden: isReferenceHidden,
hasPopperEscaped: hasPopperEscaped
});
}
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getOptions", function () {
var _this$props$modifiers = _this.props.modifiers,
modifiers = _this$props$modifiers === void 0 ? [] : _this$props$modifiers;
var arrowModifier = modifiers.find(function (modifier) {
return modifier.name === 'arrow';
});
return {
placement: _this.props.placement,
strategy: _this.props.strategy,
modifiers: [].concat(modifiers.filter(function (modifier) {
return modifier.name !== 'arrow';
}), [{
name: 'arrow',
enabled: !!_this.arrowNode,
options: (0, _extends2["default"])({}, arrowModifier && arrowModifier.options, {
element: _this.arrowNode
})
}, {
name: 'applyStyles',
enabled: false
}, _this.updateStateModifier]),
onFirstUpdate: _this.props.onFirstUpdate
};
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getPopperStyle", function () {
var computedInitialStyle = (0, _extends2["default"])({}, initialPopperStyle, {
position: _this.props.strategy === 'fixed' ? 'fixed' : 'absolute'
});
return !_this.popperNode || !_this.state.styles ? computedInitialStyle : _this.state.styles.popper;
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getArrowStyle", function () {
return !_this.arrowNode || !_this.state.styles ? initialArrowStyle : _this.state.styles.arrow;
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "destroyPopperInstance", function () {
if (!_this.popperInstance) return;
var _usePopper = (0, _usePopper2.usePopper)(referenceElement || referenceNode, popperElement, options),
state = _usePopper.state,
styles = _usePopper.styles,
forceUpdate = _usePopper.forceUpdate,
update = _usePopper.update;
_this.popperInstance.destroy();
_this.popperInstance = null;
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "updatePopperInstance", function () {
_this.destroyPopperInstance();
var _assertThisInitialize = (0, _assertThisInitialized2["default"])(_this),
popperNode = _assertThisInitialize.popperNode;
var referenceElement = _this.props.referenceElement;
if (!referenceElement || !popperNode) return;
_this.popperInstance = (0, _core.createPopper)(referenceElement, popperNode, _this.getOptions());
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "update", function () {
if (_this.popperInstance) {
return _this.popperInstance.update();
} else {
return Promise.resolve(null);
}
});
return _this;
}
var _proto = InnerPopper.prototype;
_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
// If the Popper.js reference element has changed, update the instance (destroy + create)
if (this.props.referenceElement !== prevProps.referenceElement) {
this.updatePopperInstance();
} // If the Popper.js options have changed, set options
if (this.props.placement !== prevProps.placement || this.props.strategy !== prevProps.strategy || !(0, _deepEqual["default"])(this.props.modifiers, prevProps.modifiers, {
strict: true
})) {
// develop only check that modifiers isn't being updated needlessly
if (process.env.NODE_ENV === "development") {
if (this.props.modifiers !== prevProps.modifiers && this.props.modifiers != null && prevProps.modifiers != null && (0, _utils.shallowEqual)(this.props.modifiers, prevProps.modifiers)) {
console.warn("'modifiers' prop reference updated even though all values appear the same.\nConsider memoizing the 'modifiers' object to avoid needless rendering.");
}
}
if (this.popperInstance) {
this.popperInstance.setOptions(this.getOptions());
}
} // A placement difference in state means popper determined a new placement
// apart from the props value. By the time the popper element is rendered with
// the new position Popper has already measured it, if the place change triggers
// a size change it will result in a misaligned popper. So we schedule an update to be sure.
if (prevState.placement !== this.state.placement) {
this.update();
}
};
_proto.componentWillUnmount = function componentWillUnmount() {
(0, _utils.setRef)(this.props.innerRef, null);
this.destroyPopperInstance();
};
_proto.render = function render() {
var _this$state = this.state,
placement = _this$state.placement,
isReferenceHidden = _this$state.isReferenceHidden,
hasPopperEscaped = _this$state.hasPopperEscaped;
return (0, _utils.unwrapArray)(this.props.children)({
ref: this.setPopperNode,
style: this.getPopperStyle(),
placement: placement,
isReferenceHidden: isReferenceHidden,
hasPopperEscaped: hasPopperEscaped,
update: this.update,
forceUpdate: this.popperInstance ? this.popperInstance.forceUpdate : null,
var childrenProps = React.useMemo(function () {
return {
ref: setPopperElement,
style: styles.popper,
placement: state ? state.placement : placement,
hasPopperEscaped: state && state.modifiersData.hide ? state.modifiersData.hide.hasPopperEscaped : null,
isReferenceHidden: state && state.modifiersData.hide ? state.modifiersData.hide.isReferenceHidden : null,
arrowProps: {
ref: this.setArrowNode,
style: this.getArrowStyle()
}
});
};
return InnerPopper;
}(React.Component);
exports.InnerPopper = InnerPopper;
(0, _defineProperty2["default"])(InnerPopper, "defaultProps", {
placement: 'bottom',
strategy: 'absolute',
modifiers: [],
referenceElement: undefined
});
function Popper(_ref2) {
var referenceElement = _ref2.referenceElement,
props = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, ["referenceElement"]);
return /*#__PURE__*/React.createElement(_Manager.ManagerReferenceNodeContext.Consumer, null, function (referenceNode) {
return /*#__PURE__*/React.createElement(InnerPopper, {
referenceElement: referenceElement !== undefined ? referenceElement : referenceNode,
children: props.children,
innerRef: props.innerRef,
modifiers: props.modifiers,
placement: props.placement,
strategy: props.strategy,
onFirstUpdate: props.onFirstUpdate
});
});
style: styles.arrow,
ref: setArrowElement
},
forceUpdate: forceUpdate || NOOP,
update: update || NOOP_PROMISE
};
}, [setPopperElement, setArrowElement, placement, state, styles, update, forceUpdate]);
return (0, _utils.unwrapArray)(children)(childrenProps);
}
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = Reference;
exports.Reference = Reference;
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var React = require("react");
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _warning = require("warning");
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var React = _interopRequireWildcard(require("react"));
var _warning = _interopRequireDefault(require("warning"));
var _Manager = require("./Manager");

@@ -30,50 +16,22 @@

function _createSuper(Derived) { return function () { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
function Reference(_ref) {
var children = _ref.children,
innerRef = _ref.innerRef;
var setReferenceNode = React.useContext(_Manager.ManagerReferenceNodeSetterContext);
var refHandler = React.useCallback(function (node) {
(0, _utils.setRef)(innerRef, node);
(0, _utils.safeInvoke)(setReferenceNode, node);
}, [innerRef, setReferenceNode]); // ran on unmount
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
var InnerReference = /*#__PURE__*/function (_React$Component) {
(0, _inheritsLoose2["default"])(InnerReference, _React$Component);
var _super = _createSuper(InnerReference);
function InnerReference() {
var _this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "refHandler", function (node) {
(0, _utils.setRef)(_this.props.innerRef, node);
(0, _utils.safeInvoke)(_this.props.setReferenceNode, node);
});
return _this;
}
var _proto = InnerReference.prototype;
_proto.componentWillUnmount = function componentWillUnmount() {
(0, _utils.setRef)(this.props.innerRef, null);
};
_proto.render = function render() {
(0, _warning["default"])(Boolean(this.props.setReferenceNode), '`Reference` should not be used outside of a `Manager` component.');
return (0, _utils.unwrapArray)(this.props.children)({
ref: this.refHandler
});
};
return InnerReference;
}(React.Component);
function Reference(props) {
return /*#__PURE__*/React.createElement(_Manager.ManagerReferenceNodeSetterContext.Consumer, null, function (setReferenceNode) {
return /*#__PURE__*/React.createElement(InnerReference, {
setReferenceNode: setReferenceNode,
innerRef: props.innerRef,
children: props.children
});
React.useEffect(function () {
return function () {
return (0, _utils.setRef)(innerRef, null);
};
});
React.useEffect(function () {
(0, _warning["default"])(Boolean(setReferenceNode), '`Reference` should not be used outside of a `Manager` component.');
}, [setReferenceNode]);
return (0, _utils.unwrapArray)(children)({
ref: refHandler
});
}

@@ -6,4 +6,6 @@ "use strict";

});
exports.setRef = exports.shallowEqual = exports.safeInvoke = exports.unwrapArray = void 0;
exports.useIsomorphicLayoutEffect = exports.fromEntries = exports.setRef = exports.safeInvoke = exports.unwrapArray = void 0;
var React = require("react");
/**

@@ -25,3 +27,3 @@ * Takes an argument and if it's an array, returns the first item in the array,

var safeInvoke = function safeInvoke(fn) {
if (typeof fn === "function") {
if (typeof fn === 'function') {
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {

@@ -35,4 +37,3 @@ args[_key - 1] = arguments[_key];

/**
* Does a shallow equality check of two objects by comparing the reference
* equality of each value.
* Sets a ref using either a ref callback or a ref object
*/

@@ -43,25 +44,5 @@

var shallowEqual = function shallowEqual(objA, objB) {
if (objA.length !== objB.length) {
return false;
}
for (var i = 0; i < objB.length; i++) {
if (objA[i] !== objB[i]) {
return false;
}
}
return true;
};
/**
* Sets a ref using either a ref callback or a ref object
*/
exports.shallowEqual = shallowEqual;
var setRef = function setRef(ref, node) {
// if its a function call it
if (typeof ref === "function") {
if (typeof ref === 'function') {
return safeInvoke(ref, node);

@@ -73,3 +54,24 @@ } // otherwise we should treat it as a ref object

};
/**
* Simple ponyfill for Object.fromEntries
*/
exports.setRef = setRef;
exports.setRef = setRef;
var fromEntries = function fromEntries(entries) {
return entries.reduce(function (acc, _ref) {
var key = _ref[0],
value = _ref[1];
acc[key] = value;
return acc;
}, {});
};
/**
* Small wrapper around `useLayoutEffect` to get rid of the warning on SSR envs
*/
exports.fromEntries = fromEntries;
var useIsomorphicLayoutEffect = typeof window !== 'undefined' && window.document && window.document.createElement ? React.useLayoutEffect : React.useEffect;
exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;

@@ -1,2 +0,3 @@

import _extends from "@babel/runtime/helpers/extends";
function _extends() { _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; }; return _extends.apply(this, arguments); }
// Please remember to update also the TypeScript test files that can

@@ -3,0 +4,0 @@ // be found under `/typings/tests` please. Thanks! 🤗

// Public components
import Popper from './Popper';
import Manager from './Manager';
import Reference from './Reference';
export { Popper, Manager, Reference }; // Public types
import { Popper } from './Popper';
import { Manager } from './Manager';
import { Reference } from './Reference';
import { usePopper } from './usePopper';
export { Popper, Manager, Reference, usePopper }; // Public types

@@ -1,59 +0,21 @@

import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function _createSuper(Derived) { return function () { var Super = _getPrototypeOf(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
import * as React from 'react';
export var ManagerReferenceNodeContext = React.createContext();
export var ManagerReferenceNodeSetterContext = React.createContext();
export function Manager(_ref) {
var children = _ref.children;
var Manager = /*#__PURE__*/function (_React$Component) {
_inheritsLoose(Manager, _React$Component);
var _React$useState = React.useState(null),
referenceNode = _React$useState[0],
setReferenceNode = _React$useState[1];
var _super = _createSuper(Manager);
function Manager() {
var _this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
_defineProperty(_assertThisInitialized(_this), "referenceNode", void 0);
_defineProperty(_assertThisInitialized(_this), "setReferenceNode", function (newReferenceNode) {
if (newReferenceNode && _this.referenceNode !== newReferenceNode) {
_this.referenceNode = newReferenceNode;
_this.forceUpdate();
}
});
return _this;
}
var _proto = Manager.prototype;
_proto.componentWillUnmount = function componentWillUnmount() {
this.referenceNode = null;
};
_proto.render = function render() {
return /*#__PURE__*/React.createElement(ManagerReferenceNodeContext.Provider, {
value: this.referenceNode
}, /*#__PURE__*/React.createElement(ManagerReferenceNodeSetterContext.Provider, {
value: this.setReferenceNode
}, this.props.children));
};
return Manager;
}(React.Component);
export { Manager as default };
React.useEffect(function () {
return function () {
setReferenceNode(null);
};
}, [setReferenceNode]);
return /*#__PURE__*/React.createElement(ManagerReferenceNodeContext.Provider, {
value: referenceNode
}, /*#__PURE__*/React.createElement(ManagerReferenceNodeSetterContext.Provider, {
value: setReferenceNode
}, children));
}

@@ -1,240 +0,76 @@

import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/extends";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function _createSuper(Derived) { return function () { var Super = _getPrototypeOf(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
import deepEqual from "deep-equal";
import * as React from 'react';
import { createPopper } from '@popperjs/core';
import { ManagerReferenceNodeContext } from './Manager';
import { unwrapArray, setRef, shallowEqual } from './utils';
var initialPopperStyle = {
top: 0,
left: 0,
opacity: 0,
pointerEvents: 'none'
import { unwrapArray, setRef } from './utils';
import { usePopper } from './usePopper';
var NOOP = function NOOP() {
return void 0;
};
var initialArrowStyle = {};
export var InnerPopper = /*#__PURE__*/function (_React$Component) {
_inheritsLoose(InnerPopper, _React$Component);
var _super = _createSuper(InnerPopper);
var NOOP_PROMISE = function NOOP_PROMISE() {
return Promise.resolve(null);
};
function InnerPopper() {
var _this;
var EMPTY_MODIFIERS = [];
export function Popper(_ref) {
var _ref$placement = _ref.placement,
placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
_ref$strategy = _ref.strategy,
strategy = _ref$strategy === void 0 ? 'absolute' : _ref$strategy,
_ref$modifiers = _ref.modifiers,
modifiers = _ref$modifiers === void 0 ? EMPTY_MODIFIERS : _ref$modifiers,
referenceElement = _ref.referenceElement,
onFirstUpdate = _ref.onFirstUpdate,
innerRef = _ref.innerRef,
children = _ref.children;
var referenceNode = React.useContext(ManagerReferenceNodeContext);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
var _React$useState = React.useState(null),
popperElement = _React$useState[0],
setPopperElement = _React$useState[1];
_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
var _React$useState2 = React.useState(null),
arrowElement = _React$useState2[0],
setArrowElement = _React$useState2[1];
_defineProperty(_assertThisInitialized(_this), "state", {
placement: undefined,
styles: undefined,
isReferenceHidden: undefined,
hasPopperEscaped: undefined
});
_defineProperty(_assertThisInitialized(_this), "popperInstance", void 0);
_defineProperty(_assertThisInitialized(_this), "popperNode", null);
_defineProperty(_assertThisInitialized(_this), "arrowNode", null);
_defineProperty(_assertThisInitialized(_this), "setPopperNode", function (popperNode) {
if (!popperNode || _this.popperNode === popperNode) return;
setRef(_this.props.innerRef, popperNode);
_this.popperNode = popperNode;
_this.updatePopperInstance();
});
_defineProperty(_assertThisInitialized(_this), "setArrowNode", function (arrowNode) {
_this.arrowNode = arrowNode;
});
_defineProperty(_assertThisInitialized(_this), "updateStateModifier", {
name: 'reactPopperState',
enabled: true,
phase: 'write',
fn: function fn(_ref) {
var state = _ref.state;
var placement = state.placement,
styles = state.styles,
modifiersData = state.modifiersData;
var isReferenceHidden;
var hasPopperEscaped;
if (modifiersData.hide) {
isReferenceHidden = modifiersData.hide.isReferenceHidden;
hasPopperEscaped = modifiersData.hide.hasPopperEscaped;
React.useEffect(function () {
return setRef(innerRef, popperElement);
}, [innerRef, popperElement]);
var options = React.useMemo(function () {
return {
placement: placement,
strategy: strategy,
onFirstUpdate: onFirstUpdate,
modifiers: [].concat(modifiers, [{
name: 'arrow',
enabled: arrowElement != null,
options: {
element: arrowElement
}
}])
};
}, [placement, strategy, onFirstUpdate, modifiers, arrowElement]);
_this.setState({
placement: placement,
styles: styles,
isReferenceHidden: isReferenceHidden,
hasPopperEscaped: hasPopperEscaped
});
}
});
var _usePopper = usePopper(referenceElement || referenceNode, popperElement, options),
state = _usePopper.state,
styles = _usePopper.styles,
forceUpdate = _usePopper.forceUpdate,
update = _usePopper.update;
_defineProperty(_assertThisInitialized(_this), "getOptions", function () {
var _this$props$modifiers = _this.props.modifiers,
modifiers = _this$props$modifiers === void 0 ? [] : _this$props$modifiers;
var arrowModifier = modifiers.find(function (modifier) {
return modifier.name === 'arrow';
});
return {
placement: _this.props.placement,
strategy: _this.props.strategy,
modifiers: [].concat(modifiers.filter(function (modifier) {
return modifier.name !== 'arrow';
}), [{
name: 'arrow',
enabled: !!_this.arrowNode,
options: _extends({}, arrowModifier && arrowModifier.options, {
element: _this.arrowNode
})
}, {
name: 'applyStyles',
enabled: false
}, _this.updateStateModifier]),
onFirstUpdate: _this.props.onFirstUpdate
};
});
_defineProperty(_assertThisInitialized(_this), "getPopperStyle", function () {
var computedInitialStyle = _extends({}, initialPopperStyle, {
position: _this.props.strategy === 'fixed' ? 'fixed' : 'absolute'
});
return !_this.popperNode || !_this.state.styles ? computedInitialStyle : _this.state.styles.popper;
});
_defineProperty(_assertThisInitialized(_this), "getArrowStyle", function () {
return !_this.arrowNode || !_this.state.styles ? initialArrowStyle : _this.state.styles.arrow;
});
_defineProperty(_assertThisInitialized(_this), "destroyPopperInstance", function () {
if (!_this.popperInstance) return;
_this.popperInstance.destroy();
_this.popperInstance = null;
});
_defineProperty(_assertThisInitialized(_this), "updatePopperInstance", function () {
_this.destroyPopperInstance();
var _assertThisInitialize = _assertThisInitialized(_this),
popperNode = _assertThisInitialize.popperNode;
var referenceElement = _this.props.referenceElement;
if (!referenceElement || !popperNode) return;
_this.popperInstance = createPopper(referenceElement, popperNode, _this.getOptions());
});
_defineProperty(_assertThisInitialized(_this), "update", function () {
if (_this.popperInstance) {
return _this.popperInstance.update();
} else {
return Promise.resolve(null);
}
});
return _this;
}
var _proto = InnerPopper.prototype;
_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
// If the Popper.js reference element has changed, update the instance (destroy + create)
if (this.props.referenceElement !== prevProps.referenceElement) {
this.updatePopperInstance();
} // If the Popper.js options have changed, set options
if (this.props.placement !== prevProps.placement || this.props.strategy !== prevProps.strategy || !deepEqual(this.props.modifiers, prevProps.modifiers, {
strict: true
})) {
// develop only check that modifiers isn't being updated needlessly
if (process.env.NODE_ENV === "development") {
if (this.props.modifiers !== prevProps.modifiers && this.props.modifiers != null && prevProps.modifiers != null && shallowEqual(this.props.modifiers, prevProps.modifiers)) {
console.warn("'modifiers' prop reference updated even though all values appear the same.\nConsider memoizing the 'modifiers' object to avoid needless rendering.");
}
}
if (this.popperInstance) {
this.popperInstance.setOptions(this.getOptions());
}
} // A placement difference in state means popper determined a new placement
// apart from the props value. By the time the popper element is rendered with
// the new position Popper has already measured it, if the place change triggers
// a size change it will result in a misaligned popper. So we schedule an update to be sure.
if (prevState.placement !== this.state.placement) {
this.update();
}
};
_proto.componentWillUnmount = function componentWillUnmount() {
setRef(this.props.innerRef, null);
this.destroyPopperInstance();
};
_proto.render = function render() {
var _this$state = this.state,
placement = _this$state.placement,
isReferenceHidden = _this$state.isReferenceHidden,
hasPopperEscaped = _this$state.hasPopperEscaped;
return unwrapArray(this.props.children)({
ref: this.setPopperNode,
style: this.getPopperStyle(),
placement: placement,
isReferenceHidden: isReferenceHidden,
hasPopperEscaped: hasPopperEscaped,
update: this.update,
forceUpdate: this.popperInstance ? this.popperInstance.forceUpdate : null,
var childrenProps = React.useMemo(function () {
return {
ref: setPopperElement,
style: styles.popper,
placement: state ? state.placement : placement,
hasPopperEscaped: state && state.modifiersData.hide ? state.modifiersData.hide.hasPopperEscaped : null,
isReferenceHidden: state && state.modifiersData.hide ? state.modifiersData.hide.isReferenceHidden : null,
arrowProps: {
ref: this.setArrowNode,
style: this.getArrowStyle()
}
});
};
return InnerPopper;
}(React.Component);
_defineProperty(InnerPopper, "defaultProps", {
placement: 'bottom',
strategy: 'absolute',
modifiers: [],
referenceElement: undefined
});
export default function Popper(_ref2) {
var referenceElement = _ref2.referenceElement,
props = _objectWithoutPropertiesLoose(_ref2, ["referenceElement"]);
return /*#__PURE__*/React.createElement(ManagerReferenceNodeContext.Consumer, null, function (referenceNode) {
return /*#__PURE__*/React.createElement(InnerPopper, {
referenceElement: referenceElement !== undefined ? referenceElement : referenceNode,
children: props.children,
innerRef: props.innerRef,
modifiers: props.modifiers,
placement: props.placement,
strategy: props.strategy,
onFirstUpdate: props.onFirstUpdate
});
});
style: styles.arrow,
ref: setArrowElement
},
forceUpdate: forceUpdate || NOOP,
update: update || NOOP_PROMISE
};
}, [setPopperElement, setArrowElement, placement, state, styles, update, forceUpdate]);
return unwrapArray(children)(childrenProps);
}

@@ -1,11 +0,1 @@

import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function _createSuper(Derived) { return function () { var Super = _getPrototypeOf(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
import * as React from 'react';

@@ -15,49 +5,22 @@ import warning from 'warning';

import { safeInvoke, unwrapArray, setRef } from './utils';
export function Reference(_ref) {
var children = _ref.children,
innerRef = _ref.innerRef;
var setReferenceNode = React.useContext(ManagerReferenceNodeSetterContext);
var refHandler = React.useCallback(function (node) {
setRef(innerRef, node);
safeInvoke(setReferenceNode, node);
}, [innerRef, setReferenceNode]); // ran on unmount
var InnerReference = /*#__PURE__*/function (_React$Component) {
_inheritsLoose(InnerReference, _React$Component);
var _super = _createSuper(InnerReference);
function InnerReference() {
var _this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
_defineProperty(_assertThisInitialized(_this), "refHandler", function (node) {
setRef(_this.props.innerRef, node);
safeInvoke(_this.props.setReferenceNode, node);
});
return _this;
}
var _proto = InnerReference.prototype;
_proto.componentWillUnmount = function componentWillUnmount() {
setRef(this.props.innerRef, null);
};
_proto.render = function render() {
warning(Boolean(this.props.setReferenceNode), '`Reference` should not be used outside of a `Manager` component.');
return unwrapArray(this.props.children)({
ref: this.refHandler
});
};
return InnerReference;
}(React.Component);
export default function Reference(props) {
return /*#__PURE__*/React.createElement(ManagerReferenceNodeSetterContext.Consumer, null, function (setReferenceNode) {
return /*#__PURE__*/React.createElement(InnerReference, {
setReferenceNode: setReferenceNode,
innerRef: props.innerRef,
children: props.children
});
React.useEffect(function () {
return function () {
return setRef(innerRef, null);
};
});
React.useEffect(function () {
warning(Boolean(setReferenceNode), '`Reference` should not be used outside of a `Manager` component.');
}, [setReferenceNode]);
return unwrapArray(children)({
ref: refHandler
});
}

@@ -0,1 +1,3 @@

import * as React from 'react';
/**

@@ -14,3 +16,3 @@ * Takes an argument and if it's an array, returns the first item in the array,

export var safeInvoke = function safeInvoke(fn) {
if (typeof fn === "function") {
if (typeof fn === 'function') {
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {

@@ -24,20 +26,2 @@ args[_key - 1] = arguments[_key];

/**
* Does a shallow equality check of two objects by comparing the reference
* equality of each value.
*/
export var shallowEqual = function shallowEqual(objA, objB) {
if (objA.length !== objB.length) {
return false;
}
for (var i = 0; i < objB.length; i++) {
if (objA[i] !== objB[i]) {
return false;
}
}
return true;
};
/**
* Sets a ref using either a ref callback or a ref object

@@ -48,3 +32,3 @@ */

// if its a function call it
if (typeof ref === "function") {
if (typeof ref === 'function') {
return safeInvoke(ref, node);

@@ -55,2 +39,19 @@ } // otherwise we should treat it as a ref object

}
};
};
/**
* Simple ponyfill for Object.fromEntries
*/
export var fromEntries = function fromEntries(entries) {
return entries.reduce(function (acc, _ref) {
var key = _ref[0],
value = _ref[1];
acc[key] = value;
return acc;
}, {});
};
/**
* Small wrapper around `useLayoutEffect` to get rid of the warning on SSR envs
*/
export var useIsomorphicLayoutEffect = typeof window !== 'undefined' && window.document && window.document.createElement ? React.useLayoutEffect : React.useEffect;
{
"name": "react-popper",
"version": "2.1.0",
"version": "2.2.0",
"description": "Official library to use Popper on React projects",

@@ -42,5 +42,2 @@ "license": "MIT",

"<rootDir>jest.setup.js"
],
"snapshotSerializers": [
"enzyme-to-json/serializer"
]

@@ -69,14 +66,10 @@ },

"dependencies": {
"@babel/runtime": "^7.9.2",
"deep-equal": "^2.0.1",
"prop-types": "^15.6.1",
"react-fast-compare": "^3.0.1",
"warning": "^4.0.2"
},
"devDependencies": {
"@atomico/rollup-plugin-sizes": "^1.1.3",
"@babel/cli": "^7.8.4",
"@babel/core": "^7.9.0",
"@babel/plugin-external-helpers": "^7.8.3",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-transform-modules-commonjs": "^7.9.0",
"@babel/plugin-transform-runtime": "^7.9.0",
"@babel/polyfill": "^7.8.7",

@@ -86,6 +79,10 @@ "@babel/preset-env": "^7.9.0",

"@babel/preset-react": "^7.9.4",
"@babel/preset-stage-2": "^7.8.3",
"@emotion/core": "^10.0.28",
"@emotion/styled": "^10.0.27",
"@popperjs/core": "^2.1.1",
"@popperjs/core": "^2.2.1",
"@rollup/plugin-commonjs": "^11.0.2",
"@rollup/plugin-node-resolve": "^7.1.1",
"@rollup/plugin-replace": "^2.3.1",
"@testing-library/react": "^10.0.2",
"@testing-library/react-hooks": "^3.2.1",
"@types/react": "^16.9.29",

@@ -95,5 +92,2 @@ "babel-eslint": "^10.1.0",

"cross-env": "^7.0.2",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"enzyme-to-json": "^3.4.4",
"eslint": "^6.8.0",

@@ -105,3 +99,4 @@ "eslint-config-prettier": "^6.10.1",

"eslint-plugin-react": "^7.19.0",
"flow-bin": "^0.121.0",
"eslint-plugin-react-hooks": "^3.0.0",
"flow-bin": "^0.122.0",
"flow-copy-source": "^2.0.9",

@@ -117,13 +112,9 @@ "gh-pages": "^2.2.0",

"react-spring": "^8.0.27",
"recompose": "^0.30.0",
"react-test-renderer": "^16.13.1",
"rimraf": "^3.0.2",
"rollup": "^2.3.1",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-replace": "^2.2.0",
"rollup-plugin-size-snapshot": "^0.11.0",
"rollup-plugin-uglify": "^6.0.4",
"rollup-plugin-terser": "^5.3.0",
"typescript": "^3.8.3"
}
}

@@ -1,2 +0,2 @@

## React Popper
# React Popper

@@ -10,7 +10,8 @@ [![Build Status](https://travis-ci.org/popperjs/react-popper.svg?branch=master)](https://travis-ci.org/popperjs/react-popper)

React wrapper around [Popper.js](https://popper.js.org).
React wrapper around [Popper](https://popper.js.org).
**important note:** popper.js is **not** a tooltip library, it's a _positioning engine_ to be used to build features such as (but not restricted to) tooltips.
**important note:** Popper is **not** a tooltip library, it's a _positioning
engine_ to be used to build features such as (but not restricted to) tooltips.
## Install
# Install

@@ -25,3 +26,4 @@ Via package managers:

**Note:** `@popperjs/core` must be installed in your project in order for `react-popper` to work.
**Note:** `@popperjs/core` must be installed in your project in order for
`react-popper` to work.

@@ -34,9 +36,50 @@ Via `script` tag (UMD library exposed as `ReactPopper`):

## Usage
# Usage
> Using `react-popper@0.x`? You can find its documentation [clicking here](https://github.com/souporserious/react-popper/tree/v0.x)
> Using `react-popper@0.x`? You can find its documentation
> [clicking here](https://github.com/souporserious/react-popper/tree/v0.x)
Example:
`react-popper` provides two different APIs to help consume it:
## React Hooks
The `usePopper` hook can be used to quickly initialize a Popper, it requires a
basic understanding of how the
[React Hooks](https://reactjs.org/docs/hooks-overview.html) work.
```jsx
import { useState } from 'react';
import { usePopper } from 'react-popper';
const Example = () => {
const [referenceElement, setReferenceElement] = useState(null);
const [popperElement, setPopperElement] = useState(null);
const [arrowElement, setArrowElement] = useState(null);
const { styles, attributes } = usePopper(referenceElement, popperElement, {
modifiers: [{ name: 'arrow', options: { element: arrowElement } }],
});
return (
<>
<button type="button" ref={setReferenceElement}>
Reference element
</button>
<div ref={setPopperElement} style={styles.popper} {...attributes.popper}>
Popper element
<div ref={setArrowElement} style={styles.arrow} />
</div>
</>
);
};
```
## Render Props
The `Manager`, `Reference` and `Popper` render-props components offer an
alternative API to initialize a Popper instance, they require a basic
understanding of how the
[React Render Props](https://reactjs.org/docs/render-props.html) work.
```jsx
import { Manager, Reference, Popper } from 'react-popper';

@@ -65,16 +108,57 @@

`react-popper` makes use of a React pattern called **"render prop"**, if you are not
familiar with it, please read more [on the official React documentation](https://reactjs.org/docs/render-props.html).
## API documentation
> Using React <=15 or Preact? The components created with them don't support to return
> [fragments](https://reactjs.org/docs/fragments.html), this means that you will need to
> wrap `<Reference />` and `<Popper />` into a single, common, `<div />` to make `react-popper` work.
### Hooks
### API documentation
The `usePopper` hook provides an API almost identical to the ones of
[`createPopper`](https://popper.js.org/docs/v2/constructors/#createpopper)
constructor.
The `Manager` component is a simple wrapper that needs to surround all the other `react-popper` components in order
to make them communicate with each others.
Rather than returning a Popper instance, it will return an object containing the
following properties:
The `Popper` component accepts the properties `children`, `placement`, `modifiers` and `strategy`.
##### `styles`
The `styles` property is an object, its properties are `popper`, and `arrow`.
The two properties are a
[`CSSStyleDeclaration` interface](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration)
describing the necessary CSS properties needed to properly position the two
elements.
You can directly assign the value of the two properties to the React `style`
property of your components.
```js
<div style={styles.popper} />
```
##### `attributes`
Similar to `styles`, the `attributes` object lists the `popper` and `arrow` HTML
attributes, by default, only `popper` will hold some attributes (e.g.
`data-popper-placement`), but more generically, any HTML attribute described by
the Popper documentation will be available inside these properties.
The easiest way to consume their values is by destructuring them directly onto
your React component.
```js
<div {...attributes.popper} />
```
##### `update`, `forceUpdate`, and `state`
These properties match the ones described in the
[Popper docs](https://popper.js.org/docs/v2/constructors/#types), the only
difference is that they can be `null` if Popper isn't yet been initialized or
has been destroyed.
### Render Props
The `Manager` component is a simple wrapper that needs to surround all the other
`react-popper` components in order to make them communicate with each others.
The `Popper` component accepts the properties `children`, `placement`,
`modifiers` and `strategy`.
```jsx

@@ -109,15 +193,32 @@ <Popper

A function (render prop) that takes as argument an object containing the following properties:
A function (render prop) that takes as argument an object containing the
following properties:
- **`ref`**: used to retrieve the [React refs](https://reactjs.org/docs/refs-and-the-dom.html) of the **popper** element.
- **`style`**: contains the necessary CSS styles (React CSS properties) which are computed by Popper.js to correctly position the **popper** element.
- **`placement`**: describes the placement of your popper after Popper.js has applied all the modifiers
that may have flipped or altered the originally provided `placement` property. You can use this to alter the
style of the popper and or of the arrow according to the definitive placement. For instance, you can use this
property to orient the arrow to the right direction.
- **`isReferenceHidden`**: a boolean signifying the reference element is fully clipped and hidden from view.
- **`hasPopperEscaped`**: a boolean signifying the popper escapes the reference element's boundary (and so it appears detached).
- **`update`**: a function you can ask Popper to recompute your tooltip's position . It will directly call the [Popper#update](https://popper.js.org/docs/v2/lifecycle/#manual-update) method.
- **`arrowProps`**: an object, containing `style` and `ref` properties that are identical to the
ones provided as the first and second arguments of `children`, but relative to the **arrow** element. The `style` property contains `left` and `top` offset values, which are used to center the arrow within the popper. These values can be merged with further custom styling and positioning. See [the demo](https://github.com/FezVrasta/react-popper/blob/8994933c430e48ab62e71495be71e4f440b48a5a/demo/styles.js#L100) for an example.
- **`ref`**: used to retrieve the
[React refs](https://reactjs.org/docs/refs-and-the-dom.html) of the **popper**
element.
- **`style`**: contains the necessary CSS styles (React CSS properties) which
are computed by Popper.js to correctly position the **popper** element.
- **`placement`**: describes the placement of your popper after Popper.js has
applied all the modifiers that may have flipped or altered the originally
provided `placement` property. You can use this to alter the style of the
popper and or of the arrow according to the definitive placement. For
instance, you can use this property to orient the arrow to the right
direction.
- **`isReferenceHidden`**: a boolean signifying the reference element is fully
clipped and hidden from view.
- **`hasPopperEscaped`**: a boolean signifying the popper escapes the reference
element's boundary (and so it appears detached).
- **`update`**: a function you can ask Popper to recompute your tooltip's
position . It will directly call the
[Popper#update](https://popper.js.org/docs/v2/lifecycle/#manual-update)
method.
- **`arrowProps`**: an object, containing `style` and `ref` properties that are
identical to the ones provided as the first and second arguments of
`children`, but relative to the **arrow** element. The `style` property
contains `left` and `top` offset values, which are used to center the arrow
within the popper. These values can be merged with further custom styling and
positioning. See
[the demo](https://github.com/FezVrasta/react-popper/blob/8994933c430e48ab62e71495be71e4f440b48a5a/demo/styles.js#L100)
for an example.

@@ -138,3 +239,4 @@ ##### `innerRef`

One of the accepted placement values listed in the [Popper.js documentation](https://popper.js.org/popper-documentation.html#Popper.placements).
One of the accepted placement values listed in the
[Popper.js documentation](https://popper.js.org/popper-documentation.html#Popper.placements).
Your popper is going to be placed according to the value of this property.

@@ -145,3 +247,6 @@ Defaults to `bottom`.

Describes the positioning strategy to use. By default, it is `absolute`, which in the simplest cases does not require repositioning of the popper. If your reference element is in a `fixed` container, use the `fixed` strategy. [Read More](https://popper.js.org/docs/v2/constructors/#strategy)
Describes the positioning strategy to use. By default, it is `absolute`, which
in the simplest cases does not require repositioning of the popper. If your
reference element is in a `fixed` container, use the `fixed` strategy.
[Read More](https://popper.js.org/docs/v2/constructors/#strategy)

@@ -154,15 +259,19 @@ ##### `modifiers`

An object containing custom settings for the [Popper.js modifiers](https://popper.js.org/docs/v2/modifiers/).
You can use this property to override their settings or to inject your custom ones.
An object containing custom settings for the
[Popper.js modifiers](https://popper.js.org/docs/v2/modifiers/).
You can use this property to override their settings or to inject your custom
ones.
## Usage with `ReactDOM.createPortal`
Popper.js is smart enough to work even if the **popper** and **reference** elements aren't
in the same DOM context.
This means that you can use [`ReactDOM.createPortal`](https://reactjs.org/docs/portals.html)
(or any pre React 16 alternative) to move the popper component somewhere else in the DOM.
Popper.js is smart enough to work even if the **popper** and **reference**
elements aren't in the same DOM context.
This means that you can use
[`ReactDOM.createPortal`](https://reactjs.org/docs/portals.html) (or any pre
React 16 alternative) to move the popper component somewhere else in the DOM.
This can be useful if you want to position a tooltip inside an `overflow: hidden` container
that you want to make overflow. Please note that you can also try the `positionFixed` strategy
to obtain a similar effect with less hassle.
This can be useful if you want to position a tooltip inside an
`overflow: hidden` container that you want to make overflow. Please note that
you can also try the `positionFixed` strategy to obtain a similar effect with
less hassle.

@@ -197,7 +306,13 @@ ```jsx

Whenever you need to position a popper based on some arbitrary coordinates, you can provide `Popper` with a `referenceElement` property that is going to be used in place of the `referenceProps.getRef` React ref.
Whenever you need to position a popper based on some arbitrary coordinates, you
can provide `Popper` with a `referenceElement` property that is going to be used
in place of the `referenceProps.getRef` React ref.
The `referenceElement` property must be an object with an interface compatible with an `HTMLElement` as described in the [Popper.js virtualElement documentation](https://popper.js.org/docs/v2/virtual-elements/), this implies that you may also provide a real HTMLElement if needed.
The `referenceElement` property must be an object with an interface compatible
with an `HTMLElement` as described in the
[Popper.js virtualElement documentation](https://popper.js.org/docs/v2/virtual-elements/),
this implies that you may also provide a real HTMLElement if needed.
If `referenceElement` is defined, it will take precedence over any `referenceProps.ref` provided refs.
If `referenceElement` is defined, it will take precedence over any
`referenceProps.ref` provided refs.

@@ -243,4 +358,4 @@ ```jsx

You can find the exported Flow types in `src/index.js`, and the
TypeScript definitions in `typings/react-popper.d.ts`.
You can find the exported Flow types in `src/index.js`, and the TypeScript
definitions in `typings/react-popper.d.ts`.

@@ -247,0 +362,0 @@ ## Running Locally

@@ -1,3 +0,3 @@

import * as React from "react";
import * as PopperJS from "@popperjs/core";
import * as React from 'react';
import * as PopperJS from '@popperjs/core';

@@ -7,3 +7,3 @@ interface ManagerProps {

}
export class Manager extends React.Component<ManagerProps, {}> { }
export class Manager extends React.Component<ManagerProps, {}> {}

@@ -21,3 +21,3 @@ interface ReferenceChildrenProps {

}
export class Reference extends React.Component<ReferenceProps, {}> { }
export class Reference extends React.Component<ReferenceProps, {}> {}

@@ -34,6 +34,7 @@ export interface PopperArrowProps {

placement: PopperJS.Placement;
isReferenceHidden?: boolean,
hasPopperEscaped?: boolean,
isReferenceHidden?: boolean;
hasPopperEscaped?: boolean;
update: () => Promise<null | Partial<PopperJS.State>>;
forceUpdate: () => Partial<PopperJS.State>;
arrowProps: PopperArrowProps;

@@ -49,4 +50,18 @@ }

referenceElement?: HTMLElement | PopperJS.VirtualElement;
onFirstUpdate?: (state: Partial<PopperJS.State>) => void
onFirstUpdate?: (state: Partial<PopperJS.State>) => void;
}
export class Popper extends React.Component<PopperProps, {}> { }
export class Popper extends React.Component<PopperProps, {}> {}
export function usePopper(
referenceElement?: Element | null,
popperElement?: HTMLElement | null,
options?: Partial<PopperJS.Options> & {
createPopper?: typeof PopperJS.createPopper;
}
): {
styles: { [key: string]: React.CSSProperties };
attributes: { [key: string]: { [key: string]: string } };
state: PopperJS.State;
update: Pick<PopperJS.Instance, 'update'>;
forceUpdate: Pick<PopperJS.Instance, 'forceUpdate'>;
};

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc