@elvia/elvis-tooltip - npm Package Compare versions

Comparing version 1.0.11 to 1.1.0

CHANGELOG.json

@@ -6,2 +6,15 @@ {
       "date": "07.11.22",
+      "version": "1.1.0",
+      "changelog": [
+        {
+          "type": "new_feature",
+          "changes": [
+            "The tooltip will now update its position if the content of the tooltip changes while it's open.",
+            "The tooltip now has a new prop <span class=\"code-text\">display</span> that allows for setting a custom display property on the trigger element."
+          ]
+        }
+      ]
+    },
+    {
+      "date": "07.11.22",
       "version": "1.0.11",
@@ -8,0 +21,0 @@ "changelog": [

dist/react/js/elvia-tooltip.js

@@ -5,3 +5,3 @@ /*
  */
-"use strict";function _typeof(a){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Tooltip=void 0;var _react=_interopRequireWildcard(require("react")),_reactDom=require("react-dom"),_elvisToolbox=require("@elvia/elvis-toolbox"),_styledComponents=require("./styledComponents"),_mapPosition=require("./mapPosition");function _getRequireWildcardCache(a){if("function"!=typeof WeakMap)return null;var b=new WeakMap,c=new WeakMap;return(_getRequireWildcardCache=function(a){return a?c:b})(a)}function _interopRequireWildcard(a,b){if(!b&&a&&a.__esModule)return a;if(null===a||"object"!==_typeof(a)&&"function"!=typeof a)return{default:a};var c=_getRequireWildcardCache(b);if(c&&c.has(a))return c.get(a);var d={},e=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var f in a)if("default"!=f&&Object.prototype.hasOwnProperty.call(a,f)){var g=e?Object.getOwnPropertyDescriptor(a,f):null;g&&(g.get||g.set)?Object.defineProperty(d,f,g):d[f]=a[f]}return d.default=a,c&&c.set(a,d),d}function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}function _defineProperty(a,b,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}function _slicedToArray(a,b){return _arrayWithHoles(a)||_iterableToArrayLimit(a,b)||_unsupportedIterableToArray(a,b)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(a,b){if(a){if("string"==typeof a)return _arrayLikeToArray(a,b);var c=Object.prototype.toString.call(a).slice(8,-1);return"Object"===c&&a.constructor&&(c=a.constructor.name),"Map"===c||"Set"===c?Array.from(a):"Arguments"===c||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(c)?_arrayLikeToArray(a,b):void 0}}function _arrayLikeToArray(a,b){(null==b||b>a.length)&&(b=a.length);for(var c=0,d=Array(b);c<b;c++)d[c]=a[c];return d}function _iterableToArrayLimit(a,b){var c=null==a?null:"undefined"!=typeof Symbol&&a[Symbol.iterator]||a["@@iterator"];if(null!=c){var d,e,f=[],g=!0,h=!1;try{for(c=c.call(a);!(g=(d=c.next()).done)&&(f.push(d.value),!(b&&f.length===b));g=!0);}catch(a){h=!0,e=a}finally{try{g||null==c["return"]||c["return"]()}finally{if(h)throw e}}return f}}function _arrayWithHoles(a){if(Array.isArray(a))return a}var Tooltip=function(a){var b=a.className,c=a.isDisabled,d=a.inlineStyle,e=a.content,f=void 0===e?"":e,g=a.position,h=void 0===g?"top":g,i=a.showDelay,j=void 0===i?400:i,k=a.trigger,l=a.triggerAreaRef,m=a.webcomponent,n=0,o=(0,_react.useRef)(null),p=(0,_react.useRef)(null),q=(0,_react.useState)(!1),r=_slicedToArray(q,2),s=r[0],t=r[1],u=(0,_react.useState)(h),v=_slicedToArray(u,2),w=v[0],x=v[1],y=(0,_elvisToolbox.useConnectedOverlay)(o,p,{alignWidths:!1,verticalPosition:(0,_mapPosition.mapPositionToVerticalPosition)(h),horizontalPosition:(0,_mapPosition.mapPositionToHorizontalPosition)(h),offset:14}),z=y.isShowing,A=y.setIsShowing,B=y.verticalPosition,C=y.horizontalPosition,D=y.updatePreferredPosition,E=function(){var a=!(0<arguments.length&&void 0!==arguments[0])||arguments[0];(0,_elvisToolbox.isSsr)()?(t(!1),A(!0)):(window.clearTimeout(n),n=window.setTimeout(function(){t(!1),A(!0)},a?j:0))},F=function(){(0,_elvisToolbox.isSsr)()||window.clearTimeout(n),t(!0)};return(0,_react.useEffect)(function(){!m||o.current&&m.getSlot("trigger")&&(o.current.innerHTML="",o.current.appendChild(m.getSlot("trigger")))},[m]),(0,_react.useEffect)(function(){var a=null===l||void 0===l?void 0:l.current;if(a){var b=function(){E()},c=function(){F()};return a.addEventListener("mouseenter",b),a.addEventListener("mouseleave",c),function(){a.removeEventListener("mouseenter",b),a.removeEventListener("mouseleave",c)}}},[l,null===l||void 0===l?void 0:l.current]),(0,_react.useEffect)(function(){var a=h||"top";x(a),D((0,_mapPosition.mapPositionToVerticalPosition)(a),(0,_mapPosition.mapPositionToHorizontalPosition)(a))},[h]),(0,_react.useEffect)(function(){z&&p.current&&null!==m&&void 0!==m&&m.getSlot("content")&&(p.current.innerHTML="",p.current.appendChild(m.getSlot("content")),D())},[z]),(0,_react.useEffect)(function(){var a="top";"left"===C||"right"===C?a=C:"bottom"===B&&(a=B),x(a)},[B,C]),/*#__PURE__*/_react.default.createElement(_react.default.Fragment,null,/*#__PURE__*/_react.default.createElement(_styledComponents.TriggerContainer,{onMouseEnter:function onMouseEnter(){return!(null!==l&&void 0!==l&&l.current)&&E(!0)},onMouseLeave:function onMouseLeave(){return!(null!==l&&void 0!==l&&l.current)&&F()},onFocus:function onFocus(){return!(null!==l&&void 0!==l&&l.current)&&E(!1)},onBlur:function onBlur(){return!(null!==l&&void 0!==l&&l.current)&&F()},ref:o},k),z&&!(void 0!==c&&c)&&(0,_reactDom.createPortal)(/*#__PURE__*/_react.default.createElement(_elvisToolbox.TooltipPopup,{position:w,ref:p,className:null!==b&&void 0!==b?b:"",style:_objectSpread({},d),fadeOut:s,onAnimationEnd:function onAnimationEnd(){s&&A(!1)},"aria-live":"polite"},f),document.body))};exports.Tooltip=Tooltip;var _default=Tooltip;exports.default=_default;
+"use strict";function _typeof(a){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Tooltip=void 0;var _react=_interopRequireWildcard(require("react")),_reactDom=require("react-dom"),_elvisToolbox=require("@elvia/elvis-toolbox"),_styledComponents=require("./styledComponents"),_mapPosition=require("./mapPosition");function _getRequireWildcardCache(a){if("function"!=typeof WeakMap)return null;var b=new WeakMap,c=new WeakMap;return(_getRequireWildcardCache=function(a){return a?c:b})(a)}function _interopRequireWildcard(a,b){if(!b&&a&&a.__esModule)return a;if(null===a||"object"!==_typeof(a)&&"function"!=typeof a)return{default:a};var c=_getRequireWildcardCache(b);if(c&&c.has(a))return c.get(a);var d={},e=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var f in a)if("default"!=f&&Object.prototype.hasOwnProperty.call(a,f)){var g=e?Object.getOwnPropertyDescriptor(a,f):null;g&&(g.get||g.set)?Object.defineProperty(d,f,g):d[f]=a[f]}return d.default=a,c&&c.set(a,d),d}function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}function _defineProperty(a,b,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}function _slicedToArray(a,b){return _arrayWithHoles(a)||_iterableToArrayLimit(a,b)||_unsupportedIterableToArray(a,b)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(a,b){if(a){if("string"==typeof a)return _arrayLikeToArray(a,b);var c=Object.prototype.toString.call(a).slice(8,-1);return"Object"===c&&a.constructor&&(c=a.constructor.name),"Map"===c||"Set"===c?Array.from(a):"Arguments"===c||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(c)?_arrayLikeToArray(a,b):void 0}}function _arrayLikeToArray(a,b){(null==b||b>a.length)&&(b=a.length);for(var c=0,d=Array(b);c<b;c++)d[c]=a[c];return d}function _iterableToArrayLimit(a,b){var c=null==a?null:"undefined"!=typeof Symbol&&a[Symbol.iterator]||a["@@iterator"];if(null!=c){var d,e,f=[],g=!0,h=!1;try{for(c=c.call(a);!(g=(d=c.next()).done)&&(f.push(d.value),!(b&&f.length===b));g=!0);}catch(a){h=!0,e=a}finally{try{g||null==c["return"]||c["return"]()}finally{if(h)throw e}}return f}}function _arrayWithHoles(a){if(Array.isArray(a))return a}var Tooltip=function(a){var b=a.content,c=void 0===b?"":b,d=a.display,e=void 0===d?"inline-block":d,f=a.isDisabled,g=a.position,h=void 0===g?"top":g,i=a.showDelay,j=void 0===i?400:i,k=a.trigger,l=a.triggerAreaRef,m=a.inlineStyle,n=a.className,o=a.webcomponent,p=0,q=(0,_elvisToolbox.useSlot)("trigger",o),r=q.ref,s=(0,_react.useRef)(null),t=(0,_react.useState)(!1),u=_slicedToArray(t,2),v=u[0],w=u[1],x=(0,_react.useState)(h),y=_slicedToArray(x,2),z=y[0],A=y[1],B=(0,_elvisToolbox.useConnectedOverlay)(r,s,{alignWidths:!1,verticalPosition:(0,_mapPosition.mapPositionToVerticalPosition)(h),horizontalPosition:(0,_mapPosition.mapPositionToHorizontalPosition)(h),offset:14}),C=B.isShowing,D=B.setIsShowing,E=B.verticalPosition,F=B.horizontalPosition,G=B.updatePreferredPosition,H=function(){var a=!(0<arguments.length&&void 0!==arguments[0])||arguments[0];(0,_elvisToolbox.isSsr)()?(w(!1),D(!0)):(window.clearTimeout(p),p=window.setTimeout(function(){w(!1),D(!0)},a?j:0))},I=function(){(0,_elvisToolbox.isSsr)()||window.clearTimeout(p),w(!0)};(0,_react.useEffect)(function(){var a=null===l||void 0===l?void 0:l.current;if(a){var b=function(){return H()},c=function(){return I()};return a.addEventListener("mouseenter",b),a.addEventListener("mouseleave",c),function(){a.removeEventListener("mouseenter",b),a.removeEventListener("mouseleave",c)}}},[l,null===l||void 0===l?void 0:l.current]),(0,_react.useEffect)(function(){var a=h||"top";A(a),G((0,_mapPosition.mapPositionToVerticalPosition)(a),(0,_mapPosition.mapPositionToHorizontalPosition)(a))},[h]);var J=function(){var a=new MutationObserver(function(){return G()});return s.current&&a.observe(s.current,{childList:!0,subtree:!0,characterData:!0,attributes:!0}),a};return(0,_react.useEffect)(function(){if(C&&s.current&&null!==o&&void 0!==o&&o.getSlot("content")){s.current.innerHTML="",s.current.appendChild(o.getSlot("content"));var a=J();/** Update position on initial render */return G(),function(){return a.disconnect()}}},[C]),(0,_react.useEffect)(function(){var a="top";"left"===F||"right"===F?a=F:"bottom"===E&&(a=E),A(a)},[E,F]),/*#__PURE__*/_react.default.createElement(_react.default.Fragment,null,/*#__PURE__*/_react.default.createElement(_styledComponents.TriggerContainer,{style:{display:e},onMouseEnter:function onMouseEnter(){return!(null!==l&&void 0!==l&&l.current)&&H(!0)},onMouseLeave:function onMouseLeave(){return!(null!==l&&void 0!==l&&l.current)&&I()},onFocus:function onFocus(){return!(null!==l&&void 0!==l&&l.current)&&H(!1)},onBlur:function onBlur(){return!(null!==l&&void 0!==l&&l.current)&&I()},ref:r},k),C&&!(void 0!==f&&f)&&(0,_reactDom.createPortal)(/*#__PURE__*/_react.default.createElement(_elvisToolbox.TooltipPopup,{position:z,ref:s,className:null!==n&&void 0!==n?n:"",style:_objectSpread({},m),fadeOut:v,onAnimationEnd:function onAnimationEnd(){v&&D(!1)},"aria-live":"polite"},c),document.body))};exports.Tooltip=Tooltip;var _default=Tooltip;exports.default=_default;
 //# sourceMappingURL=elvia-tooltip.js.map

dist/react/js/elviaTooltip.types.d.ts

@@ -1,5 +0,5 @@
-import type { ElvisComponentWrapper } from '@elvia/elvis-component-wrapper';
+import { BaseProps } from '@elvia/elvis-toolbox';
 import { CSSProperties, RefObject } from 'react';
 export declare type TooltipPosition = 'bottom' | 'top' | 'left' | 'right';
-export interface TooltipProps {
+export interface TooltipProps extends BaseProps {
     isDisabled?: boolean;
@@ -10,5 +10,3 @@ showDelay?: number;
     trigger: string | JSX.Element;
-    className?: string;
-    inlineStyle?: CSSProperties;
-    webcomponent?: ElvisComponentWrapper;
+    display?: CSSProperties['display'];
     /**
@@ -15,0 +13,0 @@ * @internal

dist/web_component/js/elvia-tooltip.js

@@ -9,3 +9,3 @@ /*
   static get observedAttributes() {
-    return ["trigger", "isdisabled", "position", "showdelay", "content", "classname", "inlinestyle"];
+    return ["trigger", "display", "isdisabled", "position", "showdelay", "content", "classname", "inlinestyle"];
   }
@@ -20,2 +20,5 @@ static getComponentData() {
       }, {
+        "name": "display",
+        "type": "string"
+      }, {
         "name": "isDisabled",
@@ -51,2 +54,10 @@ "type": "boolean"
   }
+  set display(newValue) {
+    super.setProps({
+      'display': newValue
+    });
+  }
+  get display() {
+    return super.getProps()['display'];
+  }
   set isDisabled(newValue) {
@@ -53,0 +64,0 @@ super.setProps({

package.json

 {
   "name": "@elvia/elvis-tooltip",
-  "version": "1.0.11",
+  "version": "1.1.0",
   "description": "",
@@ -19,4 +19,4 @@ "license": "MIT",
     "@elvia/elvis-component-wrapper": "^3.0.1",
-    "@elvia/elvis-icon": "^1.3.1",
-    "@elvia/elvis-toolbox": "^5.4.0",
+    "@elvia/elvis-icon": "^1.3.4",
+    "@elvia/elvis-toolbox": "^5.8.0",
     "@elvia/elvis-typography": "^2.3.1",
@@ -23,0 +23,0 @@ "styled-components": "^5.3.3"

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

169222

increased by0.88%

Lines of code

807

increased by2.93%

Dependency changes

• Updated@elvia/elvis-icon@^1.3.4

• Updated@elvia/elvis-toolbox@^5.8.0