@entur/tooltip - npm Package Compare versions

Comparing version 2.4.3 to 2.4.4

CHANGELOG.md

@@ -6,2 +6,8 @@ # Change Log
 
+## [2.4.4](https://bitbucket.org/enturas/design-system/compare/@entur/tooltip@2.4.3...@entur/tooltip@2.4.4) (2020-10-16)
+
+### Bug Fixes
+
+- **popover:** fix event target check for Popovers inside a Shadow DOM ([5ada65f](https://bitbucket.org/enturas/design-system/commits/5ada65f05c2a08ec23085919f8707db59a88dbfd))
+
 ## [2.4.3](https://bitbucket.org/enturas/design-system/compare/@entur/tooltip@2.4.2...@entur/tooltip@2.4.3) (2020-10-09)
@@ -8,0 +14,0 @@

dist/tooltip.cjs.development.js

@@ -301,6 +301,30 @@ 'use strict';
 
+function elementContainsEventTarget(element, event) {
+  if (!element) {
+    return false;
+  }
+
+  if (element.contains(event.target)) {
+    return true;
+  } // For elements inside a Shadow DOM we need to check the composedPath
+
+
+  if (event.composed && event.composedPath) {
+    var contains = event.composedPath().find(function (target) {
+      if (target === window) {
+        return false;
+      }
+
+      return element.contains(target);
+    });
+    return contains ? true : false;
+  }
+
+  return false;
+}
+
 function useOnClickOutside(ref, buttonRef, handler) {
   React__default.useEffect(function () {
     var listener = function listener(event) {
-      if (!ref.current || ref.current.contains(event.target) || !buttonRef.current || buttonRef.current.contains(event.target)) {
+      if (elementContainsEventTarget(ref.current, event) || elementContainsEventTarget(buttonRef.current, event)) {
         return;
@@ -307,0 +331,0 @@ }

dist/tooltip.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("@entur/utils"),r=require("react"),n=e(r),o=require("react-popper"),i=e(require("classnames")),s=require("@entur/icons"),u=require("@entur/button"),a=require("@entur/layout");function c(){return(c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function l(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)t.indexOf(r=i[n])>=0||(o[r]=e[r]);return o}var p=r.createContext(void 0),f=function(){var e=r.useContext(p);if(null==e)throw Error("usePopoverContext must be used within <Popover/>");return e},d=n.forwardRef((function(e,t){var r=e.children,o=f(),s=o.showPopover,u=o.attributes,c=o.styles,l=(0,o.popoverContentProps)({ref:t});return n.createElement(a.Contrast,Object.assign({className:i("eds-popover",{"eds-popover--hidden":!s},"eds-contrast"),style:c.popper,"aria-hidden":!s},u.styles,l),r)}));t.warnAboutMissingStyles("tooltip"),exports.Popover=function(e){var t=e.children,r=e.placement,i=void 0===r?"bottom-start":r,s=n.useState(!1),u=s[0],a=s[1],c=n.useRef(null),l=n.useRef(null),f=o.usePopper(c.current,l.current,{modifiers:[{name:"arrow",enabled:!1},{name:"offset",options:{offset:[0,8]}}],placement:i}),d=f.styles,v=f.attributes,m=f.forceUpdate;n.useEffect((function(){m&&m()}),[u,m]);var b,h,E,g=n.useCallback((function(){return{onClick:function(e){e.preventDefault(),a((function(e){return!e}))},"aria-haspopup":"dialog","aria-expanded":u,ref:c}}),[c,u]);n.useEffect((function(){var e=function(e){b.current&&!b.current.contains(e.target)&&h.current&&!h.current.contains(e.target)&&E()};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),function(){document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e)}}),[b=l,h=c,E=function(){return a(!1)}]);var y={onClick:function(e){e.preventDefault(),a(!1)}},P=n.useCallback((function(){return{role:"dialog","aria-modal":"false",ref:l,onKeyDown:function(e){"Escape"===e.key&&u&&a(!1)}}}),[l,u]);return n.createElement(p.Provider,{value:{showPopover:u,triggerElement:c,contentElement:l,styles:d,attributes:v,popoverContentProps:P,closeButtonProps:y,triggerProps:g}},t)},exports.PopoverCloseButton=function(e){var t=e.children,n=l(e,["children"]),o=f();return r.cloneElement(t,c({},o.closeButtonProps,n))},exports.PopoverContent=d,exports.PopoverTrigger=function(e){var t=e.children,o=f().triggerProps,i=n.Children.only(t);return r.cloneElement(i,o())},exports.Tooltip=function(e){var a,p=e.placement,f=e.content,d=e.children,v=e.className,m=e.isOpen,b=void 0!==m&&m,h=e.disableHoverListener,E=void 0!==h&&h,g=e.disableFocusListener,y=void 0!==g&&g,P=e.showCloseButton,C=void 0===P||P,w=e.variant,x=e.popperModifiers,O=void 0===x?[{name:"offset",options:{offset:[0,10]}}]:x,L=l(e,["placement","content","children","className","isOpen","disableHoverListener","disableFocusListener","showCloseButton","variant","popperModifiers"]),j=r.useState(b||!1),k=j[0],q=j[1];n.useEffect((function(){return function(){clearTimeout(a)}}));var B=t.useRandomId("eds-tooltip");n.useEffect((function(){q(b)}),[b]);var M=p;p.includes("-")&&(p.includes("right")&&(M=p.replace("right","end")),p.includes("left")&&(M=p.replace("left","start")));var N={};return N["aria-describedby"]=B,y||(N.onFocus=function(){return q(!0)},N.onBlur=function(){return q(!1)}),E||(N.onMouseEnter=function(e){return e.persist(),void(a=setTimeout((function(){q(!0)}),150))},N.onMouseLeave=function(){return q(!1),void clearTimeout(a)}),n.createElement(o.Manager,null,n.createElement(o.Reference,null,(function(e){return r.cloneElement(d,c({ref:e.ref},N))})),k&&n.createElement(o.Popper,{modifiers:[{name:"arrow",enabled:!1}].concat(O),placement:M},(function(e){var t=e.ref,r=e.style,o=e.placement;return n.createElement("div",Object.assign({className:i("eds-tooltip",v,"eds-tooltip--"+o,{"eds-tooltip--error":"error"===w}),ref:t,style:r,role:"tooltip",id:B,"data-placement":o},L),f,b&&C&&n.createElement(u.IconButton,{className:"eds-tooltip__close-button",onClick:function(){return q(!1)}},n.createElement(s.CloseIcon,null)))})))};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("@entur/utils"),n=require("react"),r=e(n),o=require("react-popper"),i=e(require("classnames")),s=require("@entur/icons"),u=require("@entur/button"),a=require("@entur/layout");function c(){return(c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function l(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t.indexOf(n=i[r])>=0||(o[n]=e[n]);return o}var p=n.createContext(void 0),f=function(){var e=n.useContext(p);if(null==e)throw Error("usePopoverContext must be used within <Popover/>");return e},d=r.forwardRef((function(e,t){var n=e.children,o=f(),s=o.showPopover,u=o.attributes,c=o.styles,l=(0,o.popoverContentProps)({ref:t});return r.createElement(a.Contrast,Object.assign({className:i("eds-popover",{"eds-popover--hidden":!s},"eds-contrast"),style:c.popper,"aria-hidden":!s},u.styles,l),n)}));function v(e,t){return!(!e||!(e.contains(t.target)||t.composed&&t.composedPath&&t.composedPath().find((function(t){return t!==window&&e.contains(t)}))))}t.warnAboutMissingStyles("tooltip"),exports.Popover=function(e){var t=e.children,n=e.placement,i=void 0===n?"bottom-start":n,s=r.useState(!1),u=s[0],a=s[1],c=r.useRef(null),l=r.useRef(null),f=o.usePopper(c.current,l.current,{modifiers:[{name:"arrow",enabled:!1},{name:"offset",options:{offset:[0,8]}}],placement:i}),d=f.styles,m=f.attributes,h=f.forceUpdate;r.useEffect((function(){h&&h()}),[u,h]);var b,E,P,g=r.useCallback((function(){return{onClick:function(e){e.preventDefault(),a((function(e){return!e}))},"aria-haspopup":"dialog","aria-expanded":u,ref:c}}),[c,u]);r.useEffect((function(){var e=function(e){v(b.current,e)||v(E.current,e)||P()};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),function(){document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e)}}),[b=l,E=c,P=function(){return a(!1)}]);var y={onClick:function(e){e.preventDefault(),a(!1)}},C=r.useCallback((function(){return{role:"dialog","aria-modal":"false",ref:l,onKeyDown:function(e){"Escape"===e.key&&u&&a(!1)}}}),[l,u]);return r.createElement(p.Provider,{value:{showPopover:u,triggerElement:c,contentElement:l,styles:d,attributes:m,popoverContentProps:C,closeButtonProps:y,triggerProps:g}},t)},exports.PopoverCloseButton=function(e){var t=e.children,r=l(e,["children"]),o=f();return n.cloneElement(t,c({},o.closeButtonProps,r))},exports.PopoverContent=d,exports.PopoverTrigger=function(e){var t=e.children,o=f().triggerProps,i=r.Children.only(t);return n.cloneElement(i,o())},exports.Tooltip=function(e){var a,p=e.placement,f=e.content,d=e.children,v=e.className,m=e.isOpen,h=void 0!==m&&m,b=e.disableHoverListener,E=void 0!==b&&b,P=e.disableFocusListener,g=void 0!==P&&P,y=e.showCloseButton,C=void 0===y||y,w=e.variant,x=e.popperModifiers,O=void 0===x?[{name:"offset",options:{offset:[0,10]}}]:x,L=l(e,["placement","content","children","className","isOpen","disableHoverListener","disableFocusListener","showCloseButton","variant","popperModifiers"]),j=n.useState(h||!1),k=j[0],q=j[1];r.useEffect((function(){return function(){clearTimeout(a)}}));var B=t.useRandomId("eds-tooltip");r.useEffect((function(){q(h)}),[h]);var M=p;p.includes("-")&&(p.includes("right")&&(M=p.replace("right","end")),p.includes("left")&&(M=p.replace("left","start")));var N={};return N["aria-describedby"]=B,g||(N.onFocus=function(){return q(!0)},N.onBlur=function(){return q(!1)}),E||(N.onMouseEnter=function(e){return e.persist(),void(a=setTimeout((function(){q(!0)}),150))},N.onMouseLeave=function(){return q(!1),void clearTimeout(a)}),r.createElement(o.Manager,null,r.createElement(o.Reference,null,(function(e){return n.cloneElement(d,c({ref:e.ref},N))})),k&&r.createElement(o.Popper,{modifiers:[{name:"arrow",enabled:!1}].concat(O),placement:M},(function(e){var t=e.ref,n=e.style,o=e.placement;return r.createElement("div",Object.assign({className:i("eds-tooltip",v,"eds-tooltip--"+o,{"eds-tooltip--error":"error"===w}),ref:t,style:n,role:"tooltip",id:B,"data-placement":o},L),f,h&&C&&r.createElement(u.IconButton,{className:"eds-tooltip__close-button",onClick:function(){return q(!1)}},r.createElement(s.CloseIcon,null)))})))};
 //# sourceMappingURL=tooltip.cjs.production.min.js.map

dist/tooltip.esm.js

@@ -294,6 +294,30 @@ import { useRandomId, warnAboutMissingStyles } from '@entur/utils';
 
+function elementContainsEventTarget(element, event) {
+  if (!element) {
+    return false;
+  }
+
+  if (element.contains(event.target)) {
+    return true;
+  } // For elements inside a Shadow DOM we need to check the composedPath
+
+
+  if (event.composed && event.composedPath) {
+    var contains = event.composedPath().find(function (target) {
+      if (target === window) {
+        return false;
+      }
+
+      return element.contains(target);
+    });
+    return contains ? true : false;
+  }
+
+  return false;
+}
+
 function useOnClickOutside(ref, buttonRef, handler) {
   React.useEffect(function () {
     var listener = function listener(event) {
-      if (!ref.current || ref.current.contains(event.target) || !buttonRef.current || buttonRef.current.contains(event.target)) {
+      if (elementContainsEventTarget(ref.current, event) || elementContainsEventTarget(buttonRef.current, event)) {
         return;
@@ -300,0 +324,0 @@ }

package.json

 {
   "name": "@entur/tooltip",
-  "version": "2.4.3",
+  "version": "2.4.4",
   "license": "EUPL-1.2",
@@ -34,3 +34,3 @@ "main": "dist/index.js",
     "@entur/button": "^2.3.4",
-    "@entur/icons": "^1.13.1",
+    "@entur/icons": "^1.14.0",
     "@entur/layout": "^1.8.1",
@@ -41,3 +41,3 @@ "@entur/utils": "^0.3.0",
   },
-  "gitHead": "eac1b4d7beec09ac6b5eb132e25dc999b68abe08"
+  "gitHead": "f83ca230c1a287afbec524dd81942cb8702e4c5d"
 }

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

117290

increased by3.72%

Lines of code

821

increased by4.72%

Dependency changes

• Updated@entur/icons@^1.14.0