@blueprintjs/popover2 - npm Package Compare versions

Comparing version 0.1.2 to 0.2.0

dist/popover2.bundle.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("@blueprintjs/core"),require("tslib"),require("react"),require("classnames"),require("react-popper")):"function"==typeof define&&define.amd?define(["@blueprintjs/core","tslib","react","classnames","react-popper"],t):"object"==typeof exports?exports.Popover2=t(require("@blueprintjs/core"),require("tslib"),require("react"),require("classnames"),require("react-popper")):(e.Blueprint=e.Blueprint||{},e.Blueprint.Popover2=t(e.Blueprint.Core,e.window,e.React,e.classNames,e.ReactPopper))}(window,(function(e,t,n,r,o){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=5)}([function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t){e.exports=r},function(e,t){e.exports=o},function(e,t,n){"use strict";n.r(t),n.d(t,"Classes",(function(){return r})),n.d(t,"Errors",(function(){return o})),n.d(t,"PlacementOptions",(function(){return S})),n.d(t,"Popover2",(function(){return Y})),n.d(t,"Popover2InteractionKind",(function(){return G})),n.d(t,"Tooltip2",(function(){return q}));var r={};n.r(r),n.d(r,"POPOVER2",(function(){return a})),n.d(r,"POPOVER2_ARROW",(function(){return p})),n.d(r,"POPOVER2_BACKDROP",(function(){return l})),n.d(r,"POPOVER2_CAPTURING_DISMISS",(function(){return u})),n.d(r,"POPOVER2_CONTENT",(function(){return c})),n.d(r,"POPOVER2_CONTENT_PLACEMENT",(function(){return d})),n.d(r,"POPOVER2_CONTENT_SIZING",(function(){return f})),n.d(r,"POPOVER2_DISMISS",(function(){return O})),n.d(r,"POPOVER2_DISMISS_OVERRIDE",(function(){return v})),n.d(r,"POPOVER2_OPEN",(function(){return m})),n.d(r,"POPOVER2_TARGET",(function(){return h})),n.d(r,"POPOVER2_TRANSITION_CONTAINER",(function(){return P})),n.d(r,"TOOLTIP2",(function(){return E})),n.d(r,"TOOLTIP2_INDICATOR",(function(){return _}));var o={};n.r(o),n.d(o,"POPOVER2_REQUIRES_TARGET",(function(){return b})),n.d(o,"POPOVER2_HAS_BACKDROP_INTERACTION",(function(){return T})),n.d(o,"POPOVER2_WARN_TOO_MANY_CHILDREN",(function(){return C})),n.d(o,"POPOVER2_WARN_DOUBLE_TARGET",(function(){return R})),n.d(o,"POPOVER2_WARN_EMPTY_CONTENT",(function(){return I})),n.d(o,"POPOVER2_WARN_HAS_BACKDROP_INLINE",(function(){return N})),n.d(o,"POPOVER2_WARN_UNCONTROLLED_ONINTERACTION",(function(){return y}));var s=n(0),i=s.Classes.getClassNamespace(),a=i+"-popover2",p=a+"-arrow",l=a+"-backdrop",u=a+"-capturing-dismiss",c=a+"-content",d=a+"-placement",f=c+"-sizing",O=a+"-dismiss",v=O+"-override",m=a+"-open",h=a+"-target",P=a+"-transition-container",E=i+"-tooltip2",_=E+"-indicator",g="[Blueprint]",b=g+" <Popover2> requires renderTarget prop or a child element.",T=g+' <Popover2 hasBackdrop={true}> requires interactionKind="click".',C=g+" <Popover2> supports only one child which is rendered as its target; additional children are ignored.",R=g+" <Popover2> with children ignores renderTarget prop; use either prop or children.",I=g+" Disabling <Popover2> with empty/whitespace content...",N=g+" <Popover2 usePortal={false}> ignores hasBackdrop",y=g+" <Popover2> onInteraction is ignored when uncontrolled.",A=["top","bottom","right","left"],S=[].concat(A,["auto"]).reduce((function(e,t){return e.concat([t,t+"-start",t+"-end"])}),[]),D=n(1),w=n(3),M=n.n(w),j=n(2),L=n(4);function V(e){return e.split("-")[0]}function k(e){return-1!==["left","right"].indexOf(e)}function K(e){switch(e){case"top":return"bottom";case"left":return"right";case"bottom":return"top";default:return"left"}}function x(e){switch(e.split("-")[1]){case"start":return"left";case"end":return"right";default:return"center"}}function B(e,t){var n=V(e);if(void 0===t)return k(n)?K(n)+" "+x(n):x(n)+" "+K(n);return k(n)?K(n)+" "+(parseInt(t.top,10)+15)+"px":parseInt(t.left,10)+15+"px "+K(n)}function F(e){if(null==e)return 0;switch(V(e)){case"top":return-90;case"left":return 180;case"bottom":return 90;default:return 0}}function H(e){switch(V(e)){case"top":return{bottom:-11};case"left":return{right:-11};case"bottom":return{top:-11};default:return{left:-11}}}var U=function(e){var t=e.arrowProps,n=t.ref,r=t.style,o=e.placement;return j.createElement("div",{className:p,"data-popper-arrow":!0,ref:n,style:Object(D.__assign)(Object(D.__assign)({},r),H(o))},j.createElement("svg",{viewBox:"0 0 30 30",style:{transform:"rotate("+F(o)+"deg)"}},j.createElement("path",{className:p+"-border",d:"M8.11 6.302c1.015-.936 1.887-2.922 1.887-4.297v26c0-1.378-.868-3.357-1.888-4.297L.925 17.09c-1.237-1.14-1.233-3.034 0-4.17L8.11 6.302z"}),j.createElement("path",{className:p+"-fill",d:"M8.787 7.036c1.22-1.125 2.21-3.376 2.21-5.03V0v30-2.005c0-1.654-.983-3.9-2.21-5.03l-7.183-6.616c-.81-.746-.802-1.96 0-2.7l7.183-6.614z"})))};U.displayName=s.DISPLAYNAME_PREFIX+".Popover2Arrow";var q=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.popover=null,t}return Object(D.__extends)(t,e),t.prototype.render=function(){var e,t=this,n=this.props,r=n.children,o=n.intent,i=n.popoverClassName,a=Object(D.__rest)(n,["children","intent","popoverClassName"]),p=M()(E,((e={})[s.Classes.MINIMAL]=this.props.minimal,e),s.Classes.intentClass(o),i);return j.createElement(Y,Object(D.__assign)({interactionKind:G.HOVER_TARGET_ONLY,modifiers:{arrow:{enabled:!this.props.minimal},offset:{options:{offset:[0,11]}}}},a,{autoFocus:!1,canEscapeKeyClose:!1,enforceFocus:!1,lazy:!0,popoverClassName:p,portalContainer:this.props.portalContainer,ref:function(e){return t.popover=e}}),r)},t.prototype.reposition=function(){null!=this.popover&&this.popover.reposition()},t.displayName=s.DISPLAYNAME_PREFIX+".Tooltip2",t.defaultProps={hoverCloseDelay:0,hoverOpenDelay:100,minimal:!1,transitionDuration:100},t}(j.PureComponent),G={CLICK:"click",CLICK_TARGET_ONLY:"click-target",HOVER:"hover",HOVER_TARGET_ONLY:"hover-target"},Y=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.popoverRef=s.Utils.createReactRef(),t.state={hasDarkParent:!1,isOpen:t.getIsOpen(t.props)},t.popoverElement=null,t.targetElement=null,t.refHandlers={popover:function(e){var n,r;t.popoverElement=e,null===(r=(n=t.props).popoverRef)||void 0===r||r.call(n,e)},target:function(e){return t.targetElement=e}},t.isMouseInTargetOrPopover=!1,t.lostFocusOnSamePage=!0,t.isControlled=function(){return void 0!==t.props.isOpen},t.isArrowEnabled=function(){var e,n;return!t.props.minimal&&!1!==(null===(n=null===(e=t.props.modifiers)||void 0===e?void 0:e.arrow)||void 0===n?void 0:n.enabled)},t.isHoverInteractionKind=function(){return t.props.interactionKind===G.HOVER||t.props.interactionKind===G.HOVER_TARGET_ONLY},t.reposition=function(){var e;return null===(e=t.popperScheduleUpdate)||void 0===e?void 0:e.call(t)},t.renderTarget=function(e){var n,r,o=e.ref,i=t.props,a=i.children,p=i.className,l=i.fill,u=i.openOnTargetFocus,c=i.renderTarget,d=t.state.isOpen,f=t.isControlled(),O=t.isHoverInteractionKind(),v=t.props.targetTagName;l&&(v="div"),Object(s.isRefCallback)(o)&&(o=Object(s.combineRefs)(o,t.refHandlers.target));var P,E=O?{onBlur:t.handleTargetBlur,onFocus:t.handleTargetFocus,onMouseEnter:t.handleMouseEnter,onMouseLeave:t.handleMouseLeave}:{onClick:t.handleTargetClick},_=Object(D.__assign)({className:M()(p,h,(n={},n[m]=d,n[s.Classes.ACTIVE]=!f&&d&&!O,n)),ref:o,tabIndex:u&&O?0:void 0},E);if(void 0!==c)P=c(Object(D.__assign)(Object(D.__assign)({},_),{isOpen:d}));else{var g=s.Utils.ensureElement(j.Children.toArray(a)[0]);if(void 0===g)return null;var b=g.props.tabIndex;null!=b&&(_.tabIndex=b);var T=((r={})[s.Classes.ACTIVE]=d&&!f&&!O,r[s.Classes.FILL]=l,r),C=j.cloneElement(g,{className:M()(g.props.className,T),disabled:!(!d||!s.Utils.isElementOfType(g,q))||g.props.disabled});P=j.createElement(v,_,C)}return j.createElement(s.ResizeSensor,{onResize:t.reposition},P)},t.renderPopover=function(e){var n,r=t.props,o=r.interactionKind,i=r.usePortal,p=t.state.isOpen,f=B(e.placement,t.isArrowEnabled()?e.arrowProps.style:void 0);t.popperScheduleUpdate=e.update;var O={onClick:t.handlePopoverClick};(o===G.HOVER||!i&&o===G.HOVER_TARGET_ONLY)&&(O.onMouseEnter=t.handleMouseEnter,O.onMouseLeave=t.handleMouseLeave);var v=V(e.placement),m=M()(a,((n={})[s.Classes.DARK]=t.props.inheritDarkTheme&&t.state.hasDarkParent,n[s.Classes.MINIMAL]=t.props.minimal,n[u]=t.props.captureDismiss,n),d+"-"+v,t.props.popoverClassName);return j.createElement(s.Overlay,{autoFocus:t.props.autoFocus,backdropClassName:l,backdropProps:t.props.backdropProps,canEscapeKeyClose:t.props.canEscapeKeyClose,canOutsideClickClose:t.props.interactionKind===G.CLICK,className:t.props.portalClassName,enforceFocus:t.props.enforceFocus,hasBackdrop:t.props.hasBackdrop,isOpen:p,onClose:t.handleOverlayClose,onClosed:t.props.onClosed,onClosing:t.props.onClosing,onOpened:t.props.onOpened,onOpening:t.props.onOpening,transitionDuration:t.props.transitionDuration,transitionName:a,usePortal:t.props.usePortal,portalContainer:t.props.portalContainer},j.createElement("div",{className:P,ref:e.ref,style:e.style},j.createElement(s.ResizeSensor,{onResize:t.reposition},j.createElement("div",Object(D.__assign)({className:m,style:{transformOrigin:f},ref:t.popoverRef},O),t.isArrowEnabled()&&j.createElement(U,{arrowProps:e.arrowProps,placement:e.placement}),j.createElement("div",{className:c},t.props.content)))))},t.handleTargetFocus=function(e){if(t.props.openOnTargetFocus&&t.isHoverInteractionKind()){if(null==e.relatedTarget&&!t.lostFocusOnSamePage)return;t.handleMouseEnter(e)}},t.handleTargetBlur=function(e){t.props.openOnTargetFocus&&t.isHoverInteractionKind()&&(null==e.relatedTarget||t.isElementInPopover(e.relatedTarget)||t.handleMouseLeave(e)),t.lostFocusOnSamePage=null!=e.relatedTarget},t.handleMouseEnter=function(e){t.isMouseInTargetOrPopover=!0,t.props.usePortal||!t.isElementInPopover(e.target)||t.props.interactionKind!==G.HOVER_TARGET_ONLY||t.props.openOnTargetFocus?t.props.disabled||t.setOpenState(!0,e,t.props.hoverOpenDelay):t.handleMouseLeave(e)},t.handleMouseLeave=function(e){t.isMouseInTargetOrPopover=!1,t.setTimeout((function(){t.isMouseInTargetOrPopover||t.setOpenState(!1,e,t.props.hoverCloseDelay)}))},t.handlePopoverClick=function(e){var n=e.target,r=n.closest("."+a),o=r===t.popoverRef.current,i=null==r?void 0:r.classList.contains(u),p=n.closest("."+O+", ."+v),l=null!=p&&p.classList.contains(O),c=null!=n.closest(":disabled, ."+s.Classes.DISABLED);!l||c||i&&!o||t.setOpenState(!1,e)},t.handleOverlayClose=function(e){if(null!==t.targetElement&&void 0!==e){var n=e.target;(!s.Utils.elementIsOrContains(t.targetElement,n)||e.nativeEvent instanceof KeyboardEvent)&&t.setOpenState(!1,e)}},t.handleTargetClick=function(e){t.props.disabled||t.isElementInPopover(e.target)||(null==t.props.isOpen?t.setState((function(e){return{isOpen:!e.isOpen}})):t.setOpenState(!t.props.isOpen,e))},t}return Object(D.__extends)(t,e),t.prototype.getIsOpen=function(e){var t;return!e.disabled&&(null!==(t=e.isOpen)&&void 0!==t?t:e.defaultIsOpen)},t.prototype.render=function(){var e=this.props,t=e.disabled,n=e.content,r=this.state.isOpen;return null==n||"string"==typeof n&&""===n.trim()?(t||!1===r||s.Utils.isNodeEnv("production")||console.warn(I),this.renderTarget({ref:z})):j.createElement(L.Manager,null,j.createElement(L.Reference,null,this.renderTarget),j.createElement(L.Popper,{innerRef:this.refHandlers.popover,placement:this.props.placement,strategy:"absolute",modifiers:this.computePopperModifiers()},this.renderPopover))},t.prototype.componentDidMount=function(){this.updateDarkParent()},t.prototype.componentDidUpdate=function(t,n){e.prototype.componentDidUpdate.call(this,t,n),this.updateDarkParent();var r=this.getIsOpen(this.props);null!=this.props.isOpen&&r!==this.state.isOpen?(this.setOpenState(r),this.setState({isOpen:r})):this.props.disabled&&this.state.isOpen&&null==this.props.isOpen&&this.setOpenState(!1)},t.prototype.validateProps=function(e){null==e.isOpen&&null!=e.onInteraction&&console.warn(y),e.hasBackdrop&&!e.usePortal&&console.warn(N),e.hasBackdrop&&e.interactionKind!==G.CLICK&&console.warn(T);var t=j.Children.count(e.children),n=void 0!==e.renderTarget;0!==t||n||console.warn(b),t>1&&console.warn(C),t>0&&n&&console.warn(R)},t.prototype.computePopperModifiers=function(){var e,t,n,r,o=this.props.modifiers;return[Object(D.__assign)({enabled:this.isArrowEnabled(),name:"arrow"},null==o?void 0:o.arrow),Object(D.__assign)(Object(D.__assign)({name:"computeStyles"},null==o?void 0:o.computeStyles),{options:Object(D.__assign)({adaptive:!0,gpuAcceleration:!1},null===(e=null==o?void 0:o.computeStyles)||void 0===e?void 0:e.options)}),Object(D.__assign)(Object(D.__assign)({enabled:this.isArrowEnabled(),name:"offset"},null==o?void 0:o.offset),{options:Object(D.__assign)({offset:[0,15]},null===(t=null==o?void 0:o.offset)||void 0===t?void 0:t.options)}),Object(D.__assign)(Object(D.__assign)({name:"flip"},null==o?void 0:o.flip),{options:Object(D.__assign)({boundary:this.props.boundary},null===(n=null==o?void 0:o.flip)||void 0===n?void 0:n.options)}),Object(D.__assign)(Object(D.__assign)({name:"preventOverflow"},null==o?void 0:o.preventOverflow),{options:Object(D.__assign)({boundary:this.props.boundary},null===(r=null==o?void 0:o.preventOverflow)||void 0===r?void 0:r.options)})]},t.prototype.setOpenState=function(e,t,n){var r,o,s,i,a,p=this;null===(r=this.cancelOpenTimeout)||void 0===r||r.call(this),void 0!==n&&n>0?this.cancelOpenTimeout=this.setTimeout((function(){return p.setOpenState(e,t)}),n):(null==this.props.isOpen?this.setState({isOpen:e}):null===(s=(o=this.props).onInteraction)||void 0===s||s.call(o,e,t),e||null===(a=(i=this.props).onClose)||void 0===a||a.call(i,t))},t.prototype.updateDarkParent=function(){if(this.props.usePortal&&this.state.isOpen){var e=null!=this.targetElement&&null!=this.targetElement.closest("."+s.Classes.DARK);this.setState({hasDarkParent:e})}},t.prototype.isElementInPopover=function(e){return null!=this.popoverElement&&this.popoverElement.contains(e)},t.displayName=s.DISPLAYNAME_PREFIX+".Popover2",t.defaultProps={boundary:"clippingParents",captureDismiss:!1,defaultIsOpen:!1,disabled:!1,fill:!1,hasBackdrop:!1,hoverCloseDelay:300,hoverOpenDelay:150,inheritDarkTheme:!0,interactionKind:G.CLICK,minimal:!1,openOnTargetFocus:!0,placement:"auto",renderTarget:void 0,targetTagName:"span",transitionDuration:300,usePortal:!0},t}(s.AbstractPureComponent2);function z(){}}])}));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("@blueprintjs/core"),require("tslib"),require("react"),require("classnames"),require("react-popper")):"function"==typeof define&&define.amd?define(["@blueprintjs/core","tslib","react","classnames","react-popper"],t):"object"==typeof exports?exports.Popover2=t(require("@blueprintjs/core"),require("tslib"),require("react"),require("classnames"),require("react-popper")):(e.Blueprint=e.Blueprint||{},e.Blueprint.Popover2=t(e.Blueprint.Core,e.window,e.React,e.classNames,e.ReactPopper))}(window,(function(e,t,n,r,o){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=5)}([function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t){e.exports=r},function(e,t){e.exports=o},function(e,t,n){"use strict";n.r(t),n.d(t,"Classes",(function(){return r})),n.d(t,"Errors",(function(){return o})),n.d(t,"PlacementOptions",(function(){return A})),n.d(t,"Popover2",(function(){return Y})),n.d(t,"Popover2InteractionKind",(function(){return G})),n.d(t,"Tooltip2",(function(){return q}));var r={};n.r(r),n.d(r,"POPOVER2",(function(){return a})),n.d(r,"POPOVER2_ARROW",(function(){return p})),n.d(r,"POPOVER2_BACKDROP",(function(){return l})),n.d(r,"POPOVER2_CAPTURING_DISMISS",(function(){return u})),n.d(r,"POPOVER2_CONTENT",(function(){return c})),n.d(r,"POPOVER2_CONTENT_PLACEMENT",(function(){return d})),n.d(r,"POPOVER2_CONTENT_SIZING",(function(){return f})),n.d(r,"POPOVER2_DISMISS",(function(){return O})),n.d(r,"POPOVER2_DISMISS_OVERRIDE",(function(){return v})),n.d(r,"POPOVER2_OPEN",(function(){return m})),n.d(r,"POPOVER2_TARGET",(function(){return h})),n.d(r,"POPOVER2_TRANSITION_CONTAINER",(function(){return P})),n.d(r,"TOOLTIP2",(function(){return E})),n.d(r,"TOOLTIP2_INDICATOR",(function(){return _}));var o={};n.r(o),n.d(o,"POPOVER2_REQUIRES_TARGET",(function(){return b})),n.d(o,"POPOVER2_HAS_BACKDROP_INTERACTION",(function(){return C})),n.d(o,"POPOVER2_WARN_TOO_MANY_CHILDREN",(function(){return T})),n.d(o,"POPOVER2_WARN_DOUBLE_TARGET",(function(){return R})),n.d(o,"POPOVER2_WARN_EMPTY_CONTENT",(function(){return I})),n.d(o,"POPOVER2_WARN_HAS_BACKDROP_INLINE",(function(){return y})),n.d(o,"POPOVER2_WARN_UNCONTROLLED_ONINTERACTION",(function(){return N}));var s=n(0),i=s.Classes.getClassNamespace(),a=i+"-popover2",p=a+"-arrow",l=a+"-backdrop",u=a+"-capturing-dismiss",c=a+"-content",d=a+"-placement",f=c+"-sizing",O=a+"-dismiss",v=O+"-override",m=a+"-open",h=a+"-target",P=a+"-transition-container",E=i+"-tooltip2",_=E+"-indicator",g="[Blueprint]",b=g+" <Popover2> requires renderTarget prop or a child element.",C=g+' <Popover2 hasBackdrop={true}> requires interactionKind="click".',T=g+" <Popover2> supports only one child which is rendered as its target; additional children are ignored.",R=g+" <Popover2> with children ignores renderTarget prop; use either prop or children.",I=g+" Disabling <Popover2> with empty/whitespace content...",y=g+" <Popover2 usePortal={false}> ignores hasBackdrop",N=g+" <Popover2> onInteraction is ignored when uncontrolled.",S=["top","bottom","right","left"],A=[].concat(S,["auto"]).reduce((function(e,t){return e.concat([t,t+"-start",t+"-end"])}),[]),D=n(1),M=n(3),w=n.n(M),L=n(2),j=n(4);function V(e){return e.split("-")[0]}function k(e){return-1!==["left","right"].indexOf(e)}function K(e){switch(e){case"top":return"bottom";case"left":return"right";case"bottom":return"top";default:return"left"}}function x(e){switch(e.split("-")[1]){case"start":return"left";case"end":return"right";default:return"center"}}function B(e,t){var n=V(e);if(void 0===t)return k(n)?K(n)+" "+x(n):x(n)+" "+K(n);return k(n)?K(n)+" "+(parseInt(t.top,10)+15)+"px":parseInt(t.left,10)+15+"px "+K(n)}function F(e){if(null==e)return 0;switch(V(e)){case"top":return-90;case"left":return 180;case"bottom":return 90;default:return 0}}function H(e){switch(V(e)){case"top":return{bottom:-11};case"left":return{right:-11};case"bottom":return{top:-11};default:return{left:-11}}}var U=function(e){var t=e.arrowProps,n=t.ref,r=t.style,o=e.placement;return L.createElement("div",{className:p,"data-popper-arrow":!0,ref:n,style:Object(D.__assign)(Object(D.__assign)({},r),H(o))},L.createElement("svg",{viewBox:"0 0 30 30",style:{transform:"rotate("+F(o)+"deg)"}},L.createElement("path",{className:p+"-border",d:"M8.11 6.302c1.015-.936 1.887-2.922 1.887-4.297v26c0-1.378-.868-3.357-1.888-4.297L.925 17.09c-1.237-1.14-1.233-3.034 0-4.17L8.11 6.302z"}),L.createElement("path",{className:p+"-fill",d:"M8.787 7.036c1.22-1.125 2.21-3.376 2.21-5.03V0v30-2.005c0-1.654-.983-3.9-2.21-5.03l-7.183-6.616c-.81-.746-.802-1.96 0-2.7l7.183-6.614z"})))};U.displayName=s.DISPLAYNAME_PREFIX+".Popover2Arrow";var q=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.popover=null,t}return Object(D.__extends)(t,e),t.prototype.render=function(){var e,t=this,n=this.props,r=n.children,o=n.intent,i=n.popoverClassName,a=Object(D.__rest)(n,["children","intent","popoverClassName"]),p=w()(E,((e={})[s.Classes.MINIMAL]=this.props.minimal,e),s.Classes.intentClass(o),i);return L.createElement(Y,Object(D.__assign)({interactionKind:G.HOVER_TARGET_ONLY,modifiers:{arrow:{enabled:!this.props.minimal},offset:{options:{offset:[0,11]}}}},a,{autoFocus:!1,canEscapeKeyClose:!1,enforceFocus:!1,lazy:!0,popoverClassName:p,portalContainer:this.props.portalContainer,ref:function(e){return t.popover=e}}),r)},t.prototype.reposition=function(){null!=this.popover&&this.popover.reposition()},t.displayName=s.DISPLAYNAME_PREFIX+".Tooltip2",t.defaultProps={hoverCloseDelay:0,hoverOpenDelay:100,minimal:!1,transitionDuration:100},t}(L.PureComponent),G={CLICK:"click",CLICK_TARGET_ONLY:"click-target",HOVER:"hover",HOVER_TARGET_ONLY:"hover-target"},Y=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.popoverRef=s.Utils.createReactRef(),t.state={hasDarkParent:!1,isOpen:t.getIsOpen(t.props)},t.popoverElement=null,t.targetElement=null,t.refHandlers={popover:function(e){var n,r;t.popoverElement=e,null===(r=(n=t.props).popoverRef)||void 0===r||r.call(n,e)},target:function(e){return t.targetElement=e}},t.isMouseInTargetOrPopover=!1,t.lostFocusOnSamePage=!0,t.isControlled=function(){return void 0!==t.props.isOpen},t.isArrowEnabled=function(){var e,n;return!t.props.minimal&&!1!==(null===(n=null===(e=t.props.modifiers)||void 0===e?void 0:e.arrow)||void 0===n?void 0:n.enabled)},t.isHoverInteractionKind=function(){return t.props.interactionKind===G.HOVER||t.props.interactionKind===G.HOVER_TARGET_ONLY},t.reposition=function(){var e;return null===(e=t.popperScheduleUpdate)||void 0===e?void 0:e.call(t)},t.renderTarget=function(e){var n,r,o=e.ref,i=t.props,a=i.children,p=i.className,l=i.fill,u=i.openOnTargetFocus,c=i.renderTarget,d=t.state.isOpen,f=t.isControlled(),O=t.isHoverInteractionKind(),v=t.props.targetTagName;l&&(v="div"),Object(s.isRefCallback)(o)&&(o=Object(s.combineRefs)(o,t.refHandlers.target));var P,E=O?{onBlur:t.handleTargetBlur,onFocus:t.handleTargetFocus,onMouseEnter:t.handleMouseEnter,onMouseLeave:t.handleMouseLeave}:{onClick:t.handleTargetClick},_=Object(D.__assign)({className:w()(p,h,(n={},n[m]=d,n[s.Classes.ACTIVE]=!f&&d&&!O,n)),ref:o,tabIndex:u&&O?0:void 0},E);if(void 0!==c)P=c(Object(D.__assign)(Object(D.__assign)({},_),{isOpen:d}));else{var g=s.Utils.ensureElement(L.Children.toArray(a)[0]);if(void 0===g)return null;var b=g.props.tabIndex;null!=b&&(_.tabIndex=b);var C=((r={})[s.Classes.ACTIVE]=d&&!f&&!O,r[s.Classes.FILL]=l,r),T=L.cloneElement(g,{className:w()(g.props.className,C),disabled:!(!d||!s.Utils.isElementOfType(g,q))||g.props.disabled,tabIndex:void 0!==_.tabIndex?-1:void 0});P=L.createElement(v,_,T)}return L.createElement(s.ResizeSensor,{onResize:t.reposition},P)},t.renderPopover=function(e){var n,r=t.props,o=r.interactionKind,i=r.usePortal,p=t.state.isOpen,f=B(e.placement,t.isArrowEnabled()?e.arrowProps.style:void 0);t.popperScheduleUpdate=e.update;var O={onClick:t.handlePopoverClick};(o===G.HOVER||!i&&o===G.HOVER_TARGET_ONLY)&&(O.onMouseEnter=t.handleMouseEnter,O.onMouseLeave=t.handleMouseLeave);var v=V(e.placement),m=w()(a,((n={})[s.Classes.DARK]=t.props.inheritDarkTheme&&t.state.hasDarkParent,n[s.Classes.MINIMAL]=t.props.minimal,n[u]=t.props.captureDismiss,n),d+"-"+v,t.props.popoverClassName);return L.createElement(s.Overlay,{autoFocus:t.props.autoFocus,backdropClassName:l,backdropProps:t.props.backdropProps,canEscapeKeyClose:t.props.canEscapeKeyClose,canOutsideClickClose:t.props.interactionKind===G.CLICK,enforceFocus:t.props.enforceFocus,hasBackdrop:t.props.hasBackdrop,isOpen:p,onClose:t.handleOverlayClose,onClosed:t.props.onClosed,onClosing:t.props.onClosing,onOpened:t.props.onOpened,onOpening:t.props.onOpening,transitionDuration:t.props.transitionDuration,transitionName:a,usePortal:t.props.usePortal,portalClassName:t.props.portalClassName,portalContainer:t.props.portalContainer},L.createElement("div",{className:P,ref:e.ref,style:e.style},L.createElement(s.ResizeSensor,{onResize:t.reposition},L.createElement("div",Object(D.__assign)({className:m,style:{transformOrigin:f},ref:t.popoverRef},O),t.isArrowEnabled()&&L.createElement(U,{arrowProps:e.arrowProps,placement:e.placement}),L.createElement("div",{className:c},t.props.content)))))},t.handleTargetFocus=function(e){if(t.props.openOnTargetFocus&&t.isHoverInteractionKind()){if(null==e.relatedTarget&&!t.lostFocusOnSamePage)return;t.handleMouseEnter(e)}},t.handleTargetBlur=function(e){t.props.openOnTargetFocus&&t.isHoverInteractionKind()&&(null==e.relatedTarget||t.isElementInPopover(e.relatedTarget)||t.handleMouseLeave(e)),t.lostFocusOnSamePage=null!=e.relatedTarget},t.handleMouseEnter=function(e){t.isMouseInTargetOrPopover=!0,t.props.usePortal||!t.isElementInPopover(e.target)||t.props.interactionKind!==G.HOVER_TARGET_ONLY||t.props.openOnTargetFocus?t.props.disabled||t.setOpenState(!0,e,t.props.hoverOpenDelay):t.handleMouseLeave(e)},t.handleMouseLeave=function(e){t.isMouseInTargetOrPopover=!1,t.setTimeout((function(){t.isMouseInTargetOrPopover||t.setOpenState(!1,e,t.props.hoverCloseDelay)}))},t.handlePopoverClick=function(e){var n=e.target,r=n.closest("."+a),o=r===t.popoverRef.current,i=null==r?void 0:r.classList.contains(u),p=n.closest("."+O+", ."+v),l=null==p?void 0:p.classList.contains(O),c=n.closest("."+s.Classes.POPOVER_DISMISS+", ."+s.Classes.POPOVER_DISMISS_OVERRIDE),d=null==c?void 0:c.classList.contains(s.Classes.POPOVER_DISMISS),f=null!=n.closest(":disabled, ."+s.Classes.DISABLED);!l&&!d||f||i&&!o||t.setOpenState(!1,e)},t.handleOverlayClose=function(e){if(null!==t.targetElement&&void 0!==e){var n=e.target;(!s.Utils.elementIsOrContains(t.targetElement,n)||e.nativeEvent instanceof KeyboardEvent)&&t.setOpenState(!1,e)}},t.handleTargetClick=function(e){t.props.disabled||t.isElementInPopover(e.target)||(null==t.props.isOpen?t.setState((function(e){return{isOpen:!e.isOpen}})):t.setOpenState(!t.props.isOpen,e))},t}return Object(D.__extends)(t,e),t.prototype.getIsOpen=function(e){var t;return!e.disabled&&(null!==(t=e.isOpen)&&void 0!==t?t:e.defaultIsOpen)},t.prototype.render=function(){var e=this.props,t=e.disabled,n=e.content,r=this.state.isOpen;return null==n||"string"==typeof n&&""===n.trim()?(t||!1===r||s.Utils.isNodeEnv("production")||console.warn(I),this.renderTarget({ref:z})):L.createElement(j.Manager,null,L.createElement(j.Reference,null,this.renderTarget),L.createElement(j.Popper,{innerRef:this.refHandlers.popover,placement:this.props.placement,strategy:"absolute",modifiers:this.computePopperModifiers()},this.renderPopover))},t.prototype.componentDidMount=function(){this.updateDarkParent()},t.prototype.componentDidUpdate=function(t,n){e.prototype.componentDidUpdate.call(this,t,n),this.updateDarkParent();var r=this.getIsOpen(this.props);null!=this.props.isOpen&&r!==this.state.isOpen?(this.setOpenState(r),this.setState({isOpen:r})):this.props.disabled&&this.state.isOpen&&null==this.props.isOpen&&this.setOpenState(!1)},t.prototype.validateProps=function(e){null==e.isOpen&&null!=e.onInteraction&&console.warn(N),e.hasBackdrop&&!e.usePortal&&console.warn(y),e.hasBackdrop&&e.interactionKind!==G.CLICK&&console.warn(C);var t=L.Children.count(e.children),n=void 0!==e.renderTarget;0!==t||n||console.warn(b),t>1&&console.warn(T),t>0&&n&&console.warn(R)},t.prototype.computePopperModifiers=function(){var e,t,n,r,o=this.props.modifiers;return[Object(D.__assign)({enabled:this.isArrowEnabled(),name:"arrow"},null==o?void 0:o.arrow),Object(D.__assign)(Object(D.__assign)({name:"computeStyles"},null==o?void 0:o.computeStyles),{options:Object(D.__assign)({adaptive:!0,gpuAcceleration:!1},null===(e=null==o?void 0:o.computeStyles)||void 0===e?void 0:e.options)}),Object(D.__assign)(Object(D.__assign)({enabled:this.isArrowEnabled(),name:"offset"},null==o?void 0:o.offset),{options:Object(D.__assign)({offset:[0,15]},null===(t=null==o?void 0:o.offset)||void 0===t?void 0:t.options)}),Object(D.__assign)(Object(D.__assign)({name:"flip"},null==o?void 0:o.flip),{options:Object(D.__assign)({boundary:this.props.boundary,rootBoundary:this.props.rootBoundary},null===(n=null==o?void 0:o.flip)||void 0===n?void 0:n.options)}),Object(D.__assign)(Object(D.__assign)({name:"preventOverflow"},null==o?void 0:o.preventOverflow),{options:Object(D.__assign)({boundary:this.props.boundary,rootBoundary:this.props.rootBoundary},null===(r=null==o?void 0:o.preventOverflow)||void 0===r?void 0:r.options)})]},t.prototype.setOpenState=function(e,t,n){var r,o,s,i,a,p=this;null===(r=this.cancelOpenTimeout)||void 0===r||r.call(this),void 0!==n&&n>0?this.cancelOpenTimeout=this.setTimeout((function(){return p.setOpenState(e,t)}),n):(null==this.props.isOpen?this.setState({isOpen:e}):null===(s=(o=this.props).onInteraction)||void 0===s||s.call(o,e,t),e||null===(a=(i=this.props).onClose)||void 0===a||a.call(i,t))},t.prototype.updateDarkParent=function(){if(this.props.usePortal&&this.state.isOpen){var e=null!=this.targetElement&&null!=this.targetElement.closest("."+s.Classes.DARK);this.setState({hasDarkParent:e})}},t.prototype.isElementInPopover=function(e){return null!=this.popoverElement&&this.popoverElement.contains(e)},t.displayName=s.DISPLAYNAME_PREFIX+".Popover2",t.defaultProps={boundary:"clippingParents",captureDismiss:!1,defaultIsOpen:!1,disabled:!1,fill:!1,hasBackdrop:!1,hoverCloseDelay:300,hoverOpenDelay:150,inheritDarkTheme:!0,interactionKind:G.CLICK,minimal:!1,openOnTargetFocus:!0,placement:"auto",renderTarget:void 0,targetTagName:"span",transitionDuration:300,usePortal:!0},t}(s.AbstractPureComponent2);function z(){}}])}));

lib/cjs/popover2.js

@@ -132,9 +132,10 @@ "use strict";
             else {
-                var rawTarget = core_1.Utils.ensureElement(React.Children.toArray(children)[0]);
-                if (rawTarget === undefined) {
+                var childTarget = core_1.Utils.ensureElement(React.Children.toArray(children)[0]);
+                if (childTarget === undefined) {
                     return null;
                 }
-                var rawTabIndex = rawTarget.props.tabIndex;
-                if (rawTabIndex != null) {
-                    targetProps.tabIndex = rawTabIndex;
+                // if there is a tabIndex set on the child target, we are going to promote it to the wrapper element
+                var childTargetTabIndex = childTarget.props.tabIndex;
+                if (childTargetTabIndex != null) {
+                    targetProps.tabIndex = childTargetTabIndex;
                 }
@@ -148,6 +149,8 @@ var targetModifierClasses = (_c = {},
                     _c);
-                var clonedTarget = React.cloneElement(rawTarget, {
-                    className: classnames_1.default(rawTarget.props.className, targetModifierClasses),
+                var clonedTarget = React.cloneElement(childTarget, {
+                    className: classnames_1.default(childTarget.props.className, targetModifierClasses),
                     // force disable single Tooltip2 child when popover is open
-                    disabled: isOpen && core_1.Utils.isElementOfType(rawTarget, tooltip2_1.Tooltip2) ? true : rawTarget.props.disabled,
+                    disabled: isOpen && core_1.Utils.isElementOfType(childTarget, tooltip2_1.Tooltip2) ? true : childTarget.props.disabled,
+                    // avoid having two nested elements which are focussable via keyboard navigation
+                    tabIndex: targetProps.tabIndex !== undefined ? -1 : undefined,
                 });
@@ -182,3 +185,3 @@ var wrappedTarget = React.createElement(targetTagName, targetProps, clonedTarget);
                 _a), Classes.POPOVER2_CONTENT_PLACEMENT + "-" + basePlacement, _this.props.popoverClassName);
-            return (React.createElement(core_1.Overlay, { autoFocus: _this.props.autoFocus, backdropClassName: Classes.POPOVER2_BACKDROP, backdropProps: _this.props.backdropProps, canEscapeKeyClose: _this.props.canEscapeKeyClose, canOutsideClickClose: _this.props.interactionKind === exports.Popover2InteractionKind.CLICK, className: _this.props.portalClassName, enforceFocus: _this.props.enforceFocus, hasBackdrop: _this.props.hasBackdrop, isOpen: isOpen, onClose: _this.handleOverlayClose, onClosed: _this.props.onClosed, onClosing: _this.props.onClosing, onOpened: _this.props.onOpened, onOpening: _this.props.onOpening, transitionDuration: _this.props.transitionDuration, transitionName: Classes.POPOVER2, usePortal: _this.props.usePortal, portalContainer: _this.props.portalContainer },
+            return (React.createElement(core_1.Overlay, { autoFocus: _this.props.autoFocus, backdropClassName: Classes.POPOVER2_BACKDROP, backdropProps: _this.props.backdropProps, canEscapeKeyClose: _this.props.canEscapeKeyClose, canOutsideClickClose: _this.props.interactionKind === exports.Popover2InteractionKind.CLICK, enforceFocus: _this.props.enforceFocus, hasBackdrop: _this.props.hasBackdrop, isOpen: isOpen, onClose: _this.handleOverlayClose, onClosed: _this.props.onClosed, onClosing: _this.props.onClosing, onOpened: _this.props.onOpened, onOpening: _this.props.onOpening, transitionDuration: _this.props.transitionDuration, transitionName: Classes.POPOVER2, usePortal: _this.props.usePortal, portalClassName: _this.props.portalClassName, portalContainer: _this.props.portalContainer },
                 React.createElement("div", { className: Classes.POPOVER2_TRANSITION_CONTAINER, ref: popperProps.ref, style: popperProps.style },
@@ -248,5 +251,10 @@ React.createElement(core_1.ResizeSensor, { onResize: _this.reposition },
             var dismissElement = eventTarget.closest("." + Classes.POPOVER2_DISMISS + ", ." + Classes.POPOVER2_DISMISS_OVERRIDE);
-            var shouldDismiss = dismissElement != null && dismissElement.classList.contains(Classes.POPOVER2_DISMISS);
+            var shouldDismiss = dismissElement === null || dismissElement === void 0 ? void 0 : dismissElement.classList.contains(Classes.POPOVER2_DISMISS);
+            // dismiss selectors from the "V1" version of Popover in the core pacakge
+            // we expect these to be rendered by MenuItem, which at this point has no knowledge of Popover2
+            // this can be removed once Popover2 is merged into core in v4.0
+            var dismissElementV1 = eventTarget.closest("." + core_1.Classes.POPOVER_DISMISS + ", ." + core_1.Classes.POPOVER_DISMISS_OVERRIDE);
+            var shouldDismissV1 = dismissElementV1 === null || dismissElementV1 === void 0 ? void 0 : dismissElementV1.classList.contains(core_1.Classes.POPOVER_DISMISS);
             var isDisabled = eventTarget.closest(":disabled, ." + core_1.Classes.DISABLED) != null;
-            if (shouldDismiss && !isDisabled && (!isEventPopoverCapturing || isEventFromSelf)) {
+            if ((shouldDismiss || shouldDismissV1) && !isDisabled && (!isEventPopoverCapturing || isEventFromSelf)) {
                 _this.setOpenState(false, e);
@@ -358,4 +366,4 @@ }
             tslib_1.__assign(tslib_1.__assign({ enabled: this.isArrowEnabled(), name: "offset" }, modifiers === null || modifiers === void 0 ? void 0 : modifiers.offset), { options: tslib_1.__assign({ offset: [0, popover2Arrow_1.POPOVER_ARROW_SVG_SIZE / 2] }, (_b = modifiers === null || modifiers === void 0 ? void 0 : modifiers.offset) === null || _b === void 0 ? void 0 : _b.options) }),
-            tslib_1.__assign(tslib_1.__assign({ name: "flip" }, modifiers === null || modifiers === void 0 ? void 0 : modifiers.flip), { options: tslib_1.__assign({ boundary: this.props.boundary }, (_c = modifiers === null || modifiers === void 0 ? void 0 : modifiers.flip) === null || _c === void 0 ? void 0 : _c.options) }),
-            tslib_1.__assign(tslib_1.__assign({ name: "preventOverflow" }, modifiers === null || modifiers === void 0 ? void 0 : modifiers.preventOverflow), { options: tslib_1.__assign({ boundary: this.props.boundary }, (_d = modifiers === null || modifiers === void 0 ? void 0 : modifiers.preventOverflow) === null || _d === void 0 ? void 0 : _d.options) }),
+            tslib_1.__assign(tslib_1.__assign({ name: "flip" }, modifiers === null || modifiers === void 0 ? void 0 : modifiers.flip), { options: tslib_1.__assign({ boundary: this.props.boundary, rootBoundary: this.props.rootBoundary }, (_c = modifiers === null || modifiers === void 0 ? void 0 : modifiers.flip) === null || _c === void 0 ? void 0 : _c.options) }),
+            tslib_1.__assign(tslib_1.__assign({ name: "preventOverflow" }, modifiers === null || modifiers === void 0 ? void 0 : modifiers.preventOverflow), { options: tslib_1.__assign({ boundary: this.props.boundary, rootBoundary: this.props.rootBoundary }, (_d = modifiers === null || modifiers === void 0 ? void 0 : modifiers.preventOverflow) === null || _d === void 0 ? void 0 : _d.options) }),
         ];
@@ -362,0 +370,0 @@ };

lib/cjs/popover2SharedProps.d.ts

 /// <reference types="react" />
-import { Boundary, Placement, placements, StrictModifiers } from "@popperjs/core";
+import { Boundary, Placement, placements, RootBoundary, StrictModifiers } from "@popperjs/core";
 import { StrictModifier } from "react-popper";
@@ -25,2 +25,4 @@ import { IOverlayableProps, IProps } from "@blueprintjs/core";
      * This is a shorthand for overriding Popper.js modifier options with the `modifiers` prop.
+     *
+     * @see https://popper.js.org/docs/v2/utils/detect-overflow/#boundary
      */
@@ -120,2 +122,9 @@ boundary?: Boundary;
     /**
+     * A root boundary element supplied to the "flip" and "preventOverflow" modifiers.
+     * This is a shorthand for overriding Popper.js modifier options with the `modifiers` prop.
+     *
+     * @see https://popper.js.org/docs/v2/utils/detect-overflow/#rootboundary
+     */
+    rootBoundary?: RootBoundary;
+    /**
      * A space-delimited string of class names applied to the popover element.
@@ -122,0 +131,0 @@ */

lib/esm/popover2.js

@@ -129,9 +129,10 @@ /*
             else {
-                var rawTarget = Utils.ensureElement(React.Children.toArray(children)[0]);
-                if (rawTarget === undefined) {
+                var childTarget = Utils.ensureElement(React.Children.toArray(children)[0]);
+                if (childTarget === undefined) {
                     return null;
                 }
-                var rawTabIndex = rawTarget.props.tabIndex;
-                if (rawTabIndex != null) {
-                    targetProps.tabIndex = rawTabIndex;
+                // if there is a tabIndex set on the child target, we are going to promote it to the wrapper element
+                var childTargetTabIndex = childTarget.props.tabIndex;
+                if (childTargetTabIndex != null) {
+                    targetProps.tabIndex = childTargetTabIndex;
                 }
@@ -145,6 +146,8 @@ var targetModifierClasses = (_c = {},
                     _c);
-                var clonedTarget = React.cloneElement(rawTarget, {
-                    className: classNames(rawTarget.props.className, targetModifierClasses),
+                var clonedTarget = React.cloneElement(childTarget, {
+                    className: classNames(childTarget.props.className, targetModifierClasses),
                     // force disable single Tooltip2 child when popover is open
-                    disabled: isOpen && Utils.isElementOfType(rawTarget, Tooltip2) ? true : rawTarget.props.disabled,
+                    disabled: isOpen && Utils.isElementOfType(childTarget, Tooltip2) ? true : childTarget.props.disabled,
+                    // avoid having two nested elements which are focussable via keyboard navigation
+                    tabIndex: targetProps.tabIndex !== undefined ? -1 : undefined,
                 });
@@ -179,3 +182,3 @@ var wrappedTarget = React.createElement(targetTagName, targetProps, clonedTarget);
                 _a), Classes.POPOVER2_CONTENT_PLACEMENT + "-" + basePlacement, _this.props.popoverClassName);
-            return (React.createElement(Overlay, { autoFocus: _this.props.autoFocus, backdropClassName: Classes.POPOVER2_BACKDROP, backdropProps: _this.props.backdropProps, canEscapeKeyClose: _this.props.canEscapeKeyClose, canOutsideClickClose: _this.props.interactionKind === Popover2InteractionKind.CLICK, className: _this.props.portalClassName, enforceFocus: _this.props.enforceFocus, hasBackdrop: _this.props.hasBackdrop, isOpen: isOpen, onClose: _this.handleOverlayClose, onClosed: _this.props.onClosed, onClosing: _this.props.onClosing, onOpened: _this.props.onOpened, onOpening: _this.props.onOpening, transitionDuration: _this.props.transitionDuration, transitionName: Classes.POPOVER2, usePortal: _this.props.usePortal, portalContainer: _this.props.portalContainer },
+            return (React.createElement(Overlay, { autoFocus: _this.props.autoFocus, backdropClassName: Classes.POPOVER2_BACKDROP, backdropProps: _this.props.backdropProps, canEscapeKeyClose: _this.props.canEscapeKeyClose, canOutsideClickClose: _this.props.interactionKind === Popover2InteractionKind.CLICK, enforceFocus: _this.props.enforceFocus, hasBackdrop: _this.props.hasBackdrop, isOpen: isOpen, onClose: _this.handleOverlayClose, onClosed: _this.props.onClosed, onClosing: _this.props.onClosing, onOpened: _this.props.onOpened, onOpening: _this.props.onOpening, transitionDuration: _this.props.transitionDuration, transitionName: Classes.POPOVER2, usePortal: _this.props.usePortal, portalClassName: _this.props.portalClassName, portalContainer: _this.props.portalContainer },
                 React.createElement("div", { className: Classes.POPOVER2_TRANSITION_CONTAINER, ref: popperProps.ref, style: popperProps.style },
@@ -245,5 +248,10 @@ React.createElement(ResizeSensor, { onResize: _this.reposition },
             var dismissElement = eventTarget.closest("." + Classes.POPOVER2_DISMISS + ", ." + Classes.POPOVER2_DISMISS_OVERRIDE);
-            var shouldDismiss = dismissElement != null && dismissElement.classList.contains(Classes.POPOVER2_DISMISS);
+            var shouldDismiss = dismissElement === null || dismissElement === void 0 ? void 0 : dismissElement.classList.contains(Classes.POPOVER2_DISMISS);
+            // dismiss selectors from the "V1" version of Popover in the core pacakge
+            // we expect these to be rendered by MenuItem, which at this point has no knowledge of Popover2
+            // this can be removed once Popover2 is merged into core in v4.0
+            var dismissElementV1 = eventTarget.closest("." + CoreClasses.POPOVER_DISMISS + ", ." + CoreClasses.POPOVER_DISMISS_OVERRIDE);
+            var shouldDismissV1 = dismissElementV1 === null || dismissElementV1 === void 0 ? void 0 : dismissElementV1.classList.contains(CoreClasses.POPOVER_DISMISS);
             var isDisabled = eventTarget.closest(":disabled, ." + CoreClasses.DISABLED) != null;
-            if (shouldDismiss && !isDisabled && (!isEventPopoverCapturing || isEventFromSelf)) {
+            if ((shouldDismiss || shouldDismissV1) && !isDisabled && (!isEventPopoverCapturing || isEventFromSelf)) {
                 _this.setOpenState(false, e);
@@ -355,4 +363,4 @@ }
             __assign(__assign({ enabled: this.isArrowEnabled(), name: "offset" }, modifiers === null || modifiers === void 0 ? void 0 : modifiers.offset), { options: __assign({ offset: [0, POPOVER_ARROW_SVG_SIZE / 2] }, (_b = modifiers === null || modifiers === void 0 ? void 0 : modifiers.offset) === null || _b === void 0 ? void 0 : _b.options) }),
-            __assign(__assign({ name: "flip" }, modifiers === null || modifiers === void 0 ? void 0 : modifiers.flip), { options: __assign({ boundary: this.props.boundary }, (_c = modifiers === null || modifiers === void 0 ? void 0 : modifiers.flip) === null || _c === void 0 ? void 0 : _c.options) }),
-            __assign(__assign({ name: "preventOverflow" }, modifiers === null || modifiers === void 0 ? void 0 : modifiers.preventOverflow), { options: __assign({ boundary: this.props.boundary }, (_d = modifiers === null || modifiers === void 0 ? void 0 : modifiers.preventOverflow) === null || _d === void 0 ? void 0 : _d.options) }),
+            __assign(__assign({ name: "flip" }, modifiers === null || modifiers === void 0 ? void 0 : modifiers.flip), { options: __assign({ boundary: this.props.boundary, rootBoundary: this.props.rootBoundary }, (_c = modifiers === null || modifiers === void 0 ? void 0 : modifiers.flip) === null || _c === void 0 ? void 0 : _c.options) }),
+            __assign(__assign({ name: "preventOverflow" }, modifiers === null || modifiers === void 0 ? void 0 : modifiers.preventOverflow), { options: __assign({ boundary: this.props.boundary, rootBoundary: this.props.rootBoundary }, (_d = modifiers === null || modifiers === void 0 ? void 0 : modifiers.preventOverflow) === null || _d === void 0 ? void 0 : _d.options) }),
         ];
@@ -359,0 +367,0 @@ };

lib/esm/popover2SharedProps.d.ts

 /// <reference types="react" />
-import { Boundary, Placement, placements, StrictModifiers } from "@popperjs/core";
+import { Boundary, Placement, placements, RootBoundary, StrictModifiers } from "@popperjs/core";
 import { StrictModifier } from "react-popper";
@@ -25,2 +25,4 @@ import { IOverlayableProps, IProps } from "@blueprintjs/core";
      * This is a shorthand for overriding Popper.js modifier options with the `modifiers` prop.
+     *
+     * @see https://popper.js.org/docs/v2/utils/detect-overflow/#boundary
      */
@@ -120,2 +122,9 @@ boundary?: Boundary;
     /**
+     * A root boundary element supplied to the "flip" and "preventOverflow" modifiers.
+     * This is a shorthand for overriding Popper.js modifier options with the `modifiers` prop.
+     *
+     * @see https://popper.js.org/docs/v2/utils/detect-overflow/#rootboundary
+     */
+    rootBoundary?: RootBoundary;
+    /**
      * A space-delimited string of class names applied to the popover element.
@@ -122,0 +131,0 @@ */

lib/esnext/popover2.js

@@ -129,9 +129,10 @@ /*
             else {
-                const rawTarget = Utils.ensureElement(React.Children.toArray(children)[0]);
-                if (rawTarget === undefined) {
+                const childTarget = Utils.ensureElement(React.Children.toArray(children)[0]);
+                if (childTarget === undefined) {
                     return null;
                 }
-                const rawTabIndex = rawTarget.props.tabIndex;
-                if (rawTabIndex != null) {
-                    targetProps.tabIndex = rawTabIndex;
+                // if there is a tabIndex set on the child target, we are going to promote it to the wrapper element
+                const childTargetTabIndex = childTarget.props.tabIndex;
+                if (childTargetTabIndex != null) {
+                    targetProps.tabIndex = childTargetTabIndex;
                 }
@@ -145,6 +146,8 @@ const targetModifierClasses = {
                 };
-                const clonedTarget = React.cloneElement(rawTarget, {
-                    className: classNames(rawTarget.props.className, targetModifierClasses),
+                const clonedTarget = React.cloneElement(childTarget, {
+                    className: classNames(childTarget.props.className, targetModifierClasses),
                     // force disable single Tooltip2 child when popover is open
-                    disabled: isOpen && Utils.isElementOfType(rawTarget, Tooltip2) ? true : rawTarget.props.disabled,
+                    disabled: isOpen && Utils.isElementOfType(childTarget, Tooltip2) ? true : childTarget.props.disabled,
+                    // avoid having two nested elements which are focussable via keyboard navigation
+                    tabIndex: targetProps.tabIndex !== undefined ? -1 : undefined,
                 });
@@ -178,3 +181,3 @@ const wrappedTarget = React.createElement(targetTagName, targetProps, clonedTarget);
             }, `${Classes.POPOVER2_CONTENT_PLACEMENT}-${basePlacement}`, this.props.popoverClassName);
-            return (React.createElement(Overlay, { autoFocus: this.props.autoFocus, backdropClassName: Classes.POPOVER2_BACKDROP, backdropProps: this.props.backdropProps, canEscapeKeyClose: this.props.canEscapeKeyClose, canOutsideClickClose: this.props.interactionKind === Popover2InteractionKind.CLICK, className: this.props.portalClassName, enforceFocus: this.props.enforceFocus, hasBackdrop: this.props.hasBackdrop, isOpen: isOpen, onClose: this.handleOverlayClose, onClosed: this.props.onClosed, onClosing: this.props.onClosing, onOpened: this.props.onOpened, onOpening: this.props.onOpening, transitionDuration: this.props.transitionDuration, transitionName: Classes.POPOVER2, usePortal: this.props.usePortal, portalContainer: this.props.portalContainer },
+            return (React.createElement(Overlay, { autoFocus: this.props.autoFocus, backdropClassName: Classes.POPOVER2_BACKDROP, backdropProps: this.props.backdropProps, canEscapeKeyClose: this.props.canEscapeKeyClose, canOutsideClickClose: this.props.interactionKind === Popover2InteractionKind.CLICK, enforceFocus: this.props.enforceFocus, hasBackdrop: this.props.hasBackdrop, isOpen: isOpen, onClose: this.handleOverlayClose, onClosed: this.props.onClosed, onClosing: this.props.onClosing, onOpened: this.props.onOpened, onOpening: this.props.onOpening, transitionDuration: this.props.transitionDuration, transitionName: Classes.POPOVER2, usePortal: this.props.usePortal, portalClassName: this.props.portalClassName, portalContainer: this.props.portalContainer },
                 React.createElement("div", { className: Classes.POPOVER2_TRANSITION_CONTAINER, ref: popperProps.ref, style: popperProps.style },
@@ -244,5 +247,10 @@ React.createElement(ResizeSensor, { onResize: this.reposition },
             const dismissElement = eventTarget.closest(`.${Classes.POPOVER2_DISMISS}, .${Classes.POPOVER2_DISMISS_OVERRIDE}`);
-            const shouldDismiss = dismissElement != null && dismissElement.classList.contains(Classes.POPOVER2_DISMISS);
+            const shouldDismiss = dismissElement?.classList.contains(Classes.POPOVER2_DISMISS);
+            // dismiss selectors from the "V1" version of Popover in the core pacakge
+            // we expect these to be rendered by MenuItem, which at this point has no knowledge of Popover2
+            // this can be removed once Popover2 is merged into core in v4.0
+            const dismissElementV1 = eventTarget.closest(`.${CoreClasses.POPOVER_DISMISS}, .${CoreClasses.POPOVER_DISMISS_OVERRIDE}`);
+            const shouldDismissV1 = dismissElementV1?.classList.contains(CoreClasses.POPOVER_DISMISS);
             const isDisabled = eventTarget.closest(`:disabled, .${CoreClasses.DISABLED}`) != null;
-            if (shouldDismiss && !isDisabled && (!isEventPopoverCapturing || isEventFromSelf)) {
+            if ((shouldDismiss || shouldDismissV1) && !isDisabled && (!isEventPopoverCapturing || isEventFromSelf)) {
                 this.setOpenState(false, e);
@@ -375,2 +383,3 @@ }
                     boundary: this.props.boundary,
+                    rootBoundary: this.props.rootBoundary,
                     ...modifiers?.flip?.options,
@@ -384,2 +393,3 @@ },
                     boundary: this.props.boundary,
+                    rootBoundary: this.props.rootBoundary,
                     ...modifiers?.preventOverflow?.options,
@@ -386,0 +396,0 @@ },

lib/esnext/popover2SharedProps.d.ts

 /// <reference types="react" />
-import { Boundary, Placement, placements, StrictModifiers } from "@popperjs/core";
+import { Boundary, Placement, placements, RootBoundary, StrictModifiers } from "@popperjs/core";
 import { StrictModifier } from "react-popper";
@@ -25,2 +25,4 @@ import { IOverlayableProps, IProps } from "@blueprintjs/core";
      * This is a shorthand for overriding Popper.js modifier options with the `modifiers` prop.
+     *
+     * @see https://popper.js.org/docs/v2/utils/detect-overflow/#boundary
      */
@@ -120,2 +122,9 @@ boundary?: Boundary;
     /**
+     * A root boundary element supplied to the "flip" and "preventOverflow" modifiers.
+     * This is a shorthand for overriding Popper.js modifier options with the `modifiers` prop.
+     *
+     * @see https://popper.js.org/docs/v2/utils/detect-overflow/#rootboundary
+     */
+    rootBoundary?: RootBoundary;
+    /**
      * A space-delimited string of class names applied to the popover element.
@@ -122,0 +131,0 @@ */

package.json

 {
     "name": "@blueprintjs/popover2",
-    "version": "0.1.2",
+    "version": "0.2.0",
     "description": "Popover2 and dependent components",
@@ -38,3 +38,3 @@ "main": "lib/cjs/index.js",
     "dependencies": {
-        "@blueprintjs/core": "^3.38.1",
+        "@blueprintjs/core": "^3.38.2",
         "@popperjs/core": "^2.5.4",
@@ -41,0 +41,0 @@ "classnames": "^2.2",

src/popover2SharedProps.ts

@@ -17,3 +17,3 @@ /*
 
-import { Boundary, Placement, placements, StrictModifiers } from "@popperjs/core";
+import { Boundary, Placement, placements, RootBoundary, StrictModifiers } from "@popperjs/core";
 import { StrictModifier } from "react-popper";
@@ -47,2 +47,4 @@
      * This is a shorthand for overriding Popper.js modifier options with the `modifiers` prop.
+     *
+     * @see https://popper.js.org/docs/v2/utils/detect-overflow/#boundary
      */
@@ -157,2 +159,10 @@ boundary?: Boundary;
     /**
+     * A root boundary element supplied to the "flip" and "preventOverflow" modifiers.
+     * This is a shorthand for overriding Popper.js modifier options with the `modifiers` prop.
+     *
+     * @see https://popper.js.org/docs/v2/utils/detect-overflow/#rootboundary
+     */
+    rootBoundary?: RootBoundary;
+
+    /**
      * A space-delimited string of class names applied to the popover element.
@@ -159,0 +169,0 @@ */

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

375759

increased by2%

Lines of code

4956

increased by1.54%

Dependency changes

• Updated@blueprintjs/core@^3.38.2