@entur/tooltip - npm Package Compare versions

Comparing version 2.0.6 to 2.1.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [2.1.0](https://bitbucket.org/enturas/design-system/compare/@entur/tooltip@2.0.6...@entur/tooltip@2.1.0) (2020-05-20)
+
+### Bug Fixes
+
+- reduce tooltip min width ([69f1188](https://bitbucket.org/enturas/design-system/commits/69f118809747cade635c2cfa1b6e62eeece2f607))
+- update tooltip component for breaking change in dependency ([1601ab7](https://bitbucket.org/enturas/design-system/commits/1601ab79945a0a049ab25fa7d429a019ad454dee))
+
+### Features
+
+- **popover:** add popover component ([b692c95](https://bitbucket.org/enturas/design-system/commits/b692c95c08cfc20368e9eda082bcb235339718d2))
+
 ## [2.0.6](https://bitbucket.org/enturas/design-system/compare/@entur/tooltip@2.0.5...@entur/tooltip@2.0.6) (2020-04-27)
@@ -8,0 +19,0 @@

dist/index.d.ts

 import './index.scss';
 export * from './Tooltip';
+export * from './Popover';

dist/tooltip.cjs.development.js

@@ -105,10 +105,11 @@ 'use strict';
   }), showTooltip && React__default.createElement(reactPopper.Popper, {
-    modifiers: {
-      arrow: {
-        enabled: false
-      },
-      offset: {
-        offset: '0, 10'
+    modifiers: [{
+      name: 'arrow',
+      enabled: false
+    }, {
+      name: 'offset',
+      options: {
+        offset: [0, 10]
       }
-    },
+    }],
     placement: popperPlacement
@@ -135,5 +136,151 @@ }, function (_ref3) {
 
+var PopoverContext =
+/*#__PURE__*/
+React.createContext(undefined);
+
+var usePopoverContext = function usePopoverContext() {
+  var context = React.useContext(PopoverContext);
+
+  if (context == null) {
+    throw Error('usePopoverContext must be used within <Popover/>');
+  }
+
+  return context;
+};
+
+var Popover = function Popover(_ref) {
+  var children = _ref.children,
+      _ref$placement = _ref.placement,
+      placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement;
+
+  var _React$useState = React__default.useState(false),
+      showPopover = _React$useState[0],
+      setShowPopover = _React$useState[1];
+
+  var triggerElement = React__default.useRef(null);
+  var contentElement = React__default.useRef(null);
+
+  var _usePopper = reactPopper.usePopper(triggerElement.current, contentElement.current, {
+    modifiers: [{
+      name: 'arrow',
+      enabled: false
+    }, {
+      name: 'offset',
+      options: {
+        offset: [0, 8]
+      }
+    }],
+    placement: placement
+  }),
+      styles = _usePopper.styles,
+      attributes = _usePopper.attributes;
+
+  var buttonProps = {
+    onClick: function onClick() {
+      setShowPopover(function (prev) {
+        return !prev;
+      });
+    },
+    'aria-haspopup': 'dialog',
+    'aria-expanded': showPopover
+  };
+  useOnClickOutside(contentElement, triggerElement, function () {
+    return setShowPopover(false);
+  });
+  var closeButtonProps = {
+    onClick: function onClick() {
+      setShowPopover(false);
+    }
+  };
+  var contentProps = {
+    role: 'dialog',
+    'aria-modal': 'false',
+    ref: contentElement,
+    onKeyDown: function onKeyDown(event) {
+      if (event.key === 'Escape') {
+        showPopover && setShowPopover(false);
+      }
+    }
+  };
+  var contextValue = {
+    showPopover: showPopover,
+    triggerElement: triggerElement,
+    contentElement: contentElement,
+    styles: styles,
+    attributes: attributes,
+    buttonProps: buttonProps,
+    contentProps: contentProps,
+    closeButtonProps: closeButtonProps
+  };
+  return React__default.createElement(PopoverContext.Provider, {
+    value: contextValue
+  }, children);
+};
+var PopoverTrigger = function PopoverTrigger(_ref2) {
+  var children = _ref2.children;
+
+  var _usePopoverContext = usePopoverContext(),
+      buttonProps = _usePopoverContext.buttonProps,
+      triggerElement = _usePopoverContext.triggerElement;
+
+  return React.cloneElement(children, _extends({
+    ref: triggerElement
+  }, buttonProps));
+};
+var PopoverCloseButton = function PopoverCloseButton(_ref3) {
+  var children = _ref3.children,
+      rest = _objectWithoutPropertiesLoose(_ref3, ["children"]);
+
+  var _usePopoverContext2 = usePopoverContext(),
+      closeButtonProps = _usePopoverContext2.closeButtonProps;
+
+  return React.cloneElement(children, _extends({}, closeButtonProps, {}, rest));
+};
+var PopoverContent =
+/*#__PURE__*/
+React__default.forwardRef(function (_ref4, ref) {
+  var children = _ref4.children;
+
+  var _usePopoverContext3 = usePopoverContext(),
+      showPopover = _usePopoverContext3.showPopover,
+      attributes = _usePopoverContext3.attributes,
+      styles = _usePopoverContext3.styles,
+      contentProps = _usePopoverContext3.contentProps;
+
+  return React__default.createElement("div", Object.assign({
+    className: classNames('eds-popover', {
+      'eds-popover--hidden': !showPopover
+    }),
+    ref: ref,
+    style: styles.popper,
+    "aria-hidden": !showPopover
+  }, attributes.styles, contentProps), children);
+});
+
+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)) {
+        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');
 
+exports.Popover = Popover;
+exports.PopoverCloseButton = PopoverCloseButton;
+exports.PopoverContent = PopoverContent;
+exports.PopoverTrigger = PopoverTrigger;
 exports.Tooltip = Tooltip;
 //# sourceMappingURL=tooltip.cjs.development.js.map

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"),n=require("react"),r=e(n),o=require("react-popper"),l=e(require("classnames")),u=require("@entur/icons"),c=require("@entur/button");function i(){return(i=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)}t.warnAboutMissingStyles("tooltip"),exports.Tooltip=function(e){var a=e.placement,s=e.content,f=e.children,p=e.className,d=e.isOpen,m=void 0!==d&&d,v=function(e,t){if(null==e)return{};var n,r,o={},l=Object.keys(e);for(r=0;r<l.length;r++)t.indexOf(n=l[r])>=0||(o[n]=e[n]);return o}(e,["placement","content","children","className","isOpen"]),b=n.useState(m||!1),y=b[0],E=b[1],O=t.useRandomId("eds-tooltip");r.useEffect((function(){E(m)}),[m]);var g=a;a.includes("-")&&(a.includes("right")&&(g=a.replace("right","end")),a.includes("left")&&(g=a.replace("left","start")));var h={"aria-describedby":O};return m||(h.onMouseLeave=function(){return E(!1)},h.onMouseEnter=function(){return E(!0)},h.onFocus=function(){return E(!0)},h.onBlur=function(){return E(!1)}),r.createElement(o.Manager,null,r.createElement(o.Reference,null,(function(e){return n.cloneElement(f,i({ref:e.ref},h))})),y&&r.createElement(o.Popper,{modifiers:{arrow:{enabled:!1},offset:{offset:"0, 10"}},placement:g},(function(e){var t=e.ref,n=e.style,o=e.placement;return r.createElement("div",Object.assign({className:l("eds-tooltip",p,"eds-tooltip--"+o),ref:t,style:n,role:"tooltip",id:O,"data-placement":o},v),s,m&&r.createElement(c.IconButton,{className:"eds-tooltip__close-button",onClick:function(){return E(!1)}},r.createElement(u.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"),u=e(require("classnames")),s=require("@entur/icons"),c=require("@entur/button");function i(){return(i=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 a(e,t){if(null==e)return{};var n,r,o={},u=Object.keys(e);for(r=0;r<u.length;r++)t.indexOf(n=u[r])>=0||(o[n]=e[n]);return o}var l=n.createContext(void 0),p=function(){var e=n.useContext(l);if(null==e)throw Error("usePopoverContext must be used within <Popover/>");return e},f=r.forwardRef((function(e,t){var n=e.children,o=p(),s=o.showPopover,c=o.attributes,i=o.styles,a=o.contentProps;return r.createElement("div",Object.assign({className:u("eds-popover",{"eds-popover--hidden":!s}),ref:t,style:i.popper,"aria-hidden":!s},c.styles,a),n)}));t.warnAboutMissingStyles("tooltip"),exports.Popover=function(e){var t,n,u,s=e.children,c=e.placement,i=void 0===c?"bottom-start":c,a=r.useState(!1),p=a[0],f=a[1],d=r.useRef(null),m=r.useRef(null),v=o.usePopper(d.current,m.current,{modifiers:[{name:"arrow",enabled:!1},{name:"offset",options:{offset:[0,8]}}],placement:i}),E=v.styles,h=v.attributes,b={onClick:function(){f((function(e){return!e}))},"aria-haspopup":"dialog","aria-expanded":p};return r.useEffect((function(){var e=function(e){t.current&&!t.current.contains(e.target)&&n.current&&!n.current.contains(e.target)&&u()};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),function(){document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e)}}),[t=m,n=d,u=function(){return f(!1)}]),r.createElement(l.Provider,{value:{showPopover:p,triggerElement:d,contentElement:m,styles:E,attributes:h,buttonProps:b,contentProps:{role:"dialog","aria-modal":"false",ref:m,onKeyDown:function(e){"Escape"===e.key&&p&&f(!1)}},closeButtonProps:{onClick:function(){f(!1)}}}},s)},exports.PopoverCloseButton=function(e){var t=e.children,r=a(e,["children"]),o=p();return n.cloneElement(t,i({},o.closeButtonProps,{},r))},exports.PopoverContent=f,exports.PopoverTrigger=function(e){var t=e.children,r=p();return n.cloneElement(t,i({ref:r.triggerElement},r.buttonProps))},exports.Tooltip=function(e){var l=e.placement,p=e.content,f=e.children,d=e.className,m=e.isOpen,v=void 0!==m&&m,E=a(e,["placement","content","children","className","isOpen"]),h=n.useState(v||!1),b=h[0],g=h[1],P=t.useRandomId("eds-tooltip");r.useEffect((function(){g(v)}),[v]);var y=l;l.includes("-")&&(l.includes("right")&&(y=l.replace("right","end")),l.includes("left")&&(y=l.replace("left","start")));var w={"aria-describedby":P};return v||(w.onMouseLeave=function(){return g(!1)},w.onMouseEnter=function(){return g(!0)},w.onFocus=function(){return g(!0)},w.onBlur=function(){return g(!1)}),r.createElement(o.Manager,null,r.createElement(o.Reference,null,(function(e){return n.cloneElement(f,i({ref:e.ref},w))})),b&&r.createElement(o.Popper,{modifiers:[{name:"arrow",enabled:!1},{name:"offset",options:{offset:[0,10]}}],placement:y},(function(e){var t=e.ref,n=e.style,o=e.placement;return r.createElement("div",Object.assign({className:u("eds-tooltip",d,"eds-tooltip--"+o),ref:t,style:n,role:"tooltip",id:P,"data-placement":o},E),p,v&&r.createElement(c.IconButton,{className:"eds-tooltip__close-button",onClick:function(){return g(!1)}},r.createElement(s.CloseIcon,null)))})))};
 //# sourceMappingURL=tooltip.cjs.production.min.js.map

dist/tooltip.esm.js

 import { useRandomId, warnAboutMissingStyles } from '@entur/utils';
-import React, { useState, cloneElement } from 'react';
-import { Manager, Reference, Popper } from 'react-popper';
+import React, { useState, cloneElement, createContext, useContext } from 'react';
+import { Manager, Reference, Popper, usePopper } from 'react-popper';
 import classNames from 'classnames';
@@ -98,10 +98,11 @@ import { CloseIcon } from '@entur/icons';
   }), showTooltip && React.createElement(Popper, {
-    modifiers: {
-      arrow: {
-        enabled: false
-      },
-      offset: {
-        offset: '0, 10'
+    modifiers: [{
+      name: 'arrow',
+      enabled: false
+    }, {
+      name: 'offset',
+      options: {
+        offset: [0, 10]
       }
-    },
+    }],
     placement: popperPlacement
@@ -128,5 +129,147 @@ }, function (_ref3) {
 
+var PopoverContext =
+/*#__PURE__*/
+createContext(undefined);
+
+var usePopoverContext = function usePopoverContext() {
+  var context = useContext(PopoverContext);
+
+  if (context == null) {
+    throw Error('usePopoverContext must be used within <Popover/>');
+  }
+
+  return context;
+};
+
+var Popover = function Popover(_ref) {
+  var children = _ref.children,
+      _ref$placement = _ref.placement,
+      placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement;
+
+  var _React$useState = React.useState(false),
+      showPopover = _React$useState[0],
+      setShowPopover = _React$useState[1];
+
+  var triggerElement = React.useRef(null);
+  var contentElement = React.useRef(null);
+
+  var _usePopper = usePopper(triggerElement.current, contentElement.current, {
+    modifiers: [{
+      name: 'arrow',
+      enabled: false
+    }, {
+      name: 'offset',
+      options: {
+        offset: [0, 8]
+      }
+    }],
+    placement: placement
+  }),
+      styles = _usePopper.styles,
+      attributes = _usePopper.attributes;
+
+  var buttonProps = {
+    onClick: function onClick() {
+      setShowPopover(function (prev) {
+        return !prev;
+      });
+    },
+    'aria-haspopup': 'dialog',
+    'aria-expanded': showPopover
+  };
+  useOnClickOutside(contentElement, triggerElement, function () {
+    return setShowPopover(false);
+  });
+  var closeButtonProps = {
+    onClick: function onClick() {
+      setShowPopover(false);
+    }
+  };
+  var contentProps = {
+    role: 'dialog',
+    'aria-modal': 'false',
+    ref: contentElement,
+    onKeyDown: function onKeyDown(event) {
+      if (event.key === 'Escape') {
+        showPopover && setShowPopover(false);
+      }
+    }
+  };
+  var contextValue = {
+    showPopover: showPopover,
+    triggerElement: triggerElement,
+    contentElement: contentElement,
+    styles: styles,
+    attributes: attributes,
+    buttonProps: buttonProps,
+    contentProps: contentProps,
+    closeButtonProps: closeButtonProps
+  };
+  return React.createElement(PopoverContext.Provider, {
+    value: contextValue
+  }, children);
+};
+var PopoverTrigger = function PopoverTrigger(_ref2) {
+  var children = _ref2.children;
+
+  var _usePopoverContext = usePopoverContext(),
+      buttonProps = _usePopoverContext.buttonProps,
+      triggerElement = _usePopoverContext.triggerElement;
+
+  return cloneElement(children, _extends({
+    ref: triggerElement
+  }, buttonProps));
+};
+var PopoverCloseButton = function PopoverCloseButton(_ref3) {
+  var children = _ref3.children,
+      rest = _objectWithoutPropertiesLoose(_ref3, ["children"]);
+
+  var _usePopoverContext2 = usePopoverContext(),
+      closeButtonProps = _usePopoverContext2.closeButtonProps;
+
+  return cloneElement(children, _extends({}, closeButtonProps, {}, rest));
+};
+var PopoverContent =
+/*#__PURE__*/
+React.forwardRef(function (_ref4, ref) {
+  var children = _ref4.children;
+
+  var _usePopoverContext3 = usePopoverContext(),
+      showPopover = _usePopoverContext3.showPopover,
+      attributes = _usePopoverContext3.attributes,
+      styles = _usePopoverContext3.styles,
+      contentProps = _usePopoverContext3.contentProps;
+
+  return React.createElement("div", Object.assign({
+    className: classNames('eds-popover', {
+      'eds-popover--hidden': !showPopover
+    }),
+    ref: ref,
+    style: styles.popper,
+    "aria-hidden": !showPopover
+  }, attributes.styles, contentProps), children);
+});
+
+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)) {
+        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');
 
-export { Tooltip };
+export { Popover, PopoverCloseButton, PopoverContent, PopoverTrigger, Tooltip };
 //# sourceMappingURL=tooltip.esm.js.map

package.json

 {
   "name": "@entur/tooltip",
-  "version": "2.0.6",
+  "version": "2.1.0",
   "license": "EUPL-1.2",
@@ -30,12 +30,12 @@ "main": "dist/index.js",
   "devDependencies": {
-    "@entur/tokens": "^1.3.1"
+    "@entur/tokens": "^1.3.2"
   },
   "dependencies": {
-    "@entur/button": "^2.2.7",
-    "@entur/icons": "^1.5.1",
-    "@entur/utils": "^0.2.5",
-    "@popperjs/core": "^2.1.0",
-    "react-popper": "^1.3.7"
+    "@entur/button": "^2.2.8",
+    "@entur/icons": "^1.5.2",
+    "@entur/utils": "^0.2.6",
+    "@popperjs/core": "2.4.0",
+    "react-popper": "^2.2.3"
   },
-  "gitHead": "777a5b79981b35fa8b83188863d07352d810f4ac"
+  "gitHead": "025a468a21e0f9d91acb7e43dc2658445a62490d"
 }

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

89738

increased by63%

Number of package files

15

increased by7.14%

Lines of code

565

increased by70.18%

Dependency changes

• + Added@popperjs/core@2.4.0(transitive)

• + Addedreact-fast-compare@3.2.2(transitive)

• + Addedreact-popper@2.3.0(transitive)

• - Removed@babel/runtime@7.26.0(transitive)

• - Removed@hypnosphi/create-react-context@0.3.1(transitive)

• - Removed@popperjs/core@2.11.8(transitive)

• - Removedcall-bind@1.0.7(transitive)

• - Removeddeep-equal@1.1.2(transitive)

• - Removeddefine-data-property@1.1.4(transitive)

• - Removeddefine-properties@1.2.1(transitive)

• - Removedes-define-property@1.0.0(transitive)

• - Removedes-errors@1.3.0(transitive)

• - Removedfunction-bind@1.1.2(transitive)

• - Removedfunctions-have-names@1.2.3(transitive)

• - Removedget-intrinsic@1.2.4(transitive)

• - Removedgopd@1.1.0(transitive)

• - Removedgud@1.0.0(transitive)

• - Removedhas-property-descriptors@1.0.2(transitive)

• - Removedhas-proto@1.1.0(transitive)

• - Removedhas-symbols@1.1.0(transitive)

• - Removedhas-tostringtag@1.0.2(transitive)

• - Removedhasown@2.0.2(transitive)

• - Removedis-arguments@1.1.1(transitive)

• - Removedis-date-object@1.0.5(transitive)

• - Removedis-regex@1.2.0(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedobject-is@1.1.6(transitive)

• - Removedobject-keys@1.1.1(transitive)

• - Removedpopper.js@1.16.1(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact@17.0.2(transitive)

• - Removedreact-is@16.13.1(transitive)

• - Removedreact-popper@1.3.11(transitive)

• - Removedregenerator-runtime@0.14.1(transitive)

• - Removedregexp.prototype.flags@1.5.3(transitive)

• - Removedset-function-length@1.2.2(transitive)

• - Removedset-function-name@2.0.2(transitive)

• - Removedtyped-styles@0.0.7(transitive)

• Updated@entur/button@^2.2.8

• Updated@entur/icons@^1.5.2

• Updated@entur/utils@^0.2.6

• Updated@popperjs/core@2.4.0

• Updatedreact-popper@^2.2.3