@entur/tooltip - npm Package Compare versions

Comparing version 2.6.0 to 2.6.1

dist/tooltip.cjs.development.js

@@ -250,3 +250,3 @@ 'use strict';
   }, [triggerElement, showPopover, setShowPopover, controlled]);
-  useOnClickOutside(contentElement, triggerElement, function () {
+  utils.useOnClickOutside([contentElement, triggerElement], function () {
     return setShowPopover(false);
@@ -335,26 +335,2 @@ });
 
-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 elementContainsElement(parent, child) {
@@ -365,21 +341,2 @@ if (!parent) return false;
 
-function useOnClickOutside(ref, buttonRef, handler) {
-  React__default["default"].useEffect(function () {
-    var listener = function listener(event) {
-      if (elementContainsEventTarget(ref.current, event) || elementContainsEventTarget(buttonRef.current, event)) {
-        return;
-      }
-
-      handler();
-    };
-
-    document.addEventListener('mousedown', listener);
-    document.addEventListener('touchstart', listener);
-    return function () {
-      document.removeEventListener('mousedown', listener);
-      document.removeEventListener('touchstart', listener);
-    };
-  }, [ref, buttonRef, handler]);
-}
-
 utils.warnAboutMissingStyles('tooltip');
@@ -386,0 +343,0 @@

dist/tooltip.cjs.production.min.js

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

dist/tooltip.esm.js

@@ -1,2 +0,2 @@
-import { useRandomId, warnAboutMissingStyles } from '@entur/utils';
+import { useRandomId, useOnClickOutside, warnAboutMissingStyles } from '@entur/utils';
 import React, { useState, cloneElement, createContext, useContext } from 'react';
@@ -241,3 +241,3 @@ import { Manager, Reference, Popper, usePopper } from 'react-popper';
   }, [triggerElement, showPopover, setShowPopover, controlled]);
-  useOnClickOutside(contentElement, triggerElement, function () {
+  useOnClickOutside([contentElement, triggerElement], function () {
     return setShowPopover(false);
@@ -326,26 +326,2 @@ });
 
-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 elementContainsElement(parent, child) {
@@ -356,21 +332,2 @@ if (!parent) return false;
 
-function useOnClickOutside(ref, buttonRef, handler) {
-  React.useEffect(function () {
-    var listener = function listener(event) {
-      if (elementContainsEventTarget(ref.current, event) || elementContainsEventTarget(buttonRef.current, event)) {
-        return;
-      }
-
-      handler();
-    };
-
-    document.addEventListener('mousedown', listener);
-    document.addEventListener('touchstart', listener);
-    return function () {
-      document.removeEventListener('mousedown', listener);
-      document.removeEventListener('touchstart', listener);
-    };
-  }, [ref, buttonRef, handler]);
-}
-
 warnAboutMissingStyles('tooltip');
@@ -377,0 +334,0 @@

package.json

 {
   "name": "@entur/tooltip",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "license": "EUPL-1.2",
@@ -30,11 +30,11 @@ "main": "dist/index.js",
   "dependencies": {
-    "@entur/button": "^2.10.8",
-    "@entur/icons": "^5.4.1",
-    "@entur/layout": "^2.1.15",
+    "@entur/button": "^2.10.9",
+    "@entur/icons": "^5.4.2",
+    "@entur/layout": "^2.1.16",
     "@entur/tokens": "^3.4.4",
-    "@entur/utils": "^0.4.9",
+    "@entur/utils": "^0.5.0",
     "@popperjs/core": "^2.10.1",
     "react-popper": "^2.2.5"
   },
-  "gitHead": "de71e205560a699e2dce301e133966dc9348c459"
+  "gitHead": "36772ae4f2d8375622acff19736c07d15435cb95"
 }

No alert changes

Worsened metrics

Total package byte prevSize

133557

decreased by-6.56%

Lines of code

831

decreased by-7.77%

Dependency changes

• - Removed@entur/utils@0.4.9(transitive)

• Updated@entur/button@^2.10.9

• Updated@entur/icons@^5.4.2

• Updated@entur/layout@^2.1.16

• Updated@entur/utils@^0.5.0