Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@contentful/f36-tooltip

Package Overview
Dependencies
Maintainers
106
Versions
342
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@contentful/f36-tooltip - npm Package Compare versions

Comparing version 4.0.1-next-v4-8377.2344 to 4.0.1-next-v4-8455.2348

2

dist/module.js

@@ -1,2 +0,2 @@

import e from"@babel/runtime/helpers/esm/extends";import{cx as t,css as o}from"emotion";import n,{useState as a,useEffect as r,useRef as l}from"react";import{usePopper as i}from"react-popper";import s from"@contentful/f36-tokens";import{Portal as p}from"@contentful/f36-utils";import{useId as m,Box as c}from"@contentful/f36-core";var d,u,f,g;d={},u="Tooltip",f=()=>h,Object.defineProperty(d,u,{get:f,set:g,enumerable:!0,configurable:!0});const b=`calc(-1 * ((1rem * (10 / ${s.fontBaseDefault})) / 2))`,y=`calc(1rem * (10 / ${s.fontBaseDefault}))`;const h=({children:d,className:u,as:f="span",content:g,id:h,isVisible:x,hideDelay:E=0,onBlur:v,onFocus:I,onMouseLeave:N,onMouseOver:w,onKeyDown:z,targetWrapperClassName:D,maxWidth:M=360,testId:S="cf-ui-tooltip",placement:T="auto",usePortal:k=!1,isDisabled:B=!1,...W})=>{const F={tooltipTargetWrapper:o({name:"b3pn3b",styles:"display:inline-block;position:relative;"}),tooltip:o({background:s.gray900,fontFamily:s.fontStackPrimary,fontSize:s.fontSizeS,fontWeight:s.fontWeightNormal,fontStyle:"normal",textDecoration:"none",color:s.colorWhite,textAlign:"center",lineHeight:s.lineHeightM,padding:`${s.spacingXs} calc(1rem * (10 / ${s.fontBaseDefault}))`,borderRadius:s.borderRadiusMedium,whiteSpace:"normal"},""),tooltipHidden:o({visibility:"hidden",pointerEvents:"none",zIndex:s.zIndexNegative},""),tooltipContainer:o({name:"1nqn0g6",styles:"& > button[disabled]{pointer-events:none;}"}),tooltipArrow:o({position:"absolute",'&[data-placement*="top"]':{bottom:0,left:0,marginBottom:b},'&[data-placement*="right"]':{left:0,marginLeft:b},'&[data-placement*="bottom"]':{left:0,top:0,marginTop:b},'&[data-placement*="left"]':{right:0,marginRight:b},"&::before":{content:'""',display:"block",height:y,width:y,backgroundColor:s.gray900,transform:"rotate3d(0, 0, 1, 45deg)",zIndex:s.zIndexNegative}},"")},[C,P]=a(!1),R=m(h,"tooltip"),$=l(null),L=l(null),[A,H]=a(null),{styles:K,attributes:O,forceUpdate:V}=i($.current,L.current,{placement:T,modifiers:[{name:"arrow",options:{element:A,padding:parseFloat(s.borderRadiusSmall)}},{name:"offset",options:{offset:[0,10]}}]});r((()=>{null!==V&&V()}),[g,V]);const[j,q]=a(!1),[U,X]=a(!1);r((()=>{P(U||j)}),[j,U]),r((()=>{x&&P(!0)}),[]);const G="string"==typeof M?M:`${M}px`,J={zIndex:s.zIndexTooltip,maxWidth:G,...K.popper};if(!g||B)return n.createElement(c,{as:f,className:D},d);const Q=n.createElement(c,e({as:"span",id:R,ref:L,role:"tooltip",style:J,className:t(F.tooltip,u),testId:S,onMouseEnter:()=>{X(!0)},onMouseLeave:()=>{X(!1)}},O.popper),n.createElement("span",null,g),n.createElement("span",{className:F.tooltipArrow,"data-placement":O.popper&&O.popper["data-popper-placement"],ref:H,style:K.arrow}));return n.createElement(n.Fragment,null,C?n.createElement(n.Fragment,null,k?n.createElement(p,null,Q):Q):null,n.createElement(c,e({as:f,ref:$,className:t(F.tooltipContainer,D),onMouseEnter:e=>{q(!0),w&&w(e)},onMouseLeave:e=>{setTimeout((()=>q(!1)),E),N&&N(e)},onFocus:e=>{q(!0),I&&I(e)},onBlur:e=>{setTimeout((()=>q(!1)),E),v&&v(e)},onKeyDown:e=>{"Escape"===e.key&&setTimeout((()=>q(!1)),E),z&&z(e)}},W),n.Children.map(d,(e=>{if(n.isValidElement(e))return n.cloneElement(e,{"aria-describedby":R})}))))};export{h as Tooltip};
import e from"@babel/runtime/helpers/esm/extends";import{cx as t,css as o}from"emotion";import n,{useRef as a,useState as r,useEffect as l}from"react";import{usePopper as i}from"react-popper";import s from"@contentful/f36-tokens";import{Portal as p}from"@contentful/f36-utils";import{Box as m,useId as c}from"@contentful/f36-core";var d,u,f,g;d={},u="Tooltip",f=()=>h,Object.defineProperty(d,u,{get:f,set:g,enumerable:!0,configurable:!0});const b=`calc(-1 * ((1rem * (10 / ${s.fontBaseDefault})) / 2))`,y=`calc(1rem * (10 / ${s.fontBaseDefault}))`;const h=({children:d,className:u,as:f="span",content:g,id:h,isVisible:x,hideDelay:E=0,onBlur:v,onFocus:I,onMouseLeave:N,onMouseOver:w,onKeyDown:z,targetWrapperClassName:D,maxWidth:M=360,testId:S="cf-ui-tooltip",placement:T="auto",usePortal:k=!1,isDisabled:B=!1,...W})=>{const F={tooltipTargetWrapper:o({name:"b3pn3b",styles:"display:inline-block;position:relative;"}),tooltip:o({background:s.gray900,fontFamily:s.fontStackPrimary,fontSize:s.fontSizeS,fontWeight:s.fontWeightNormal,fontStyle:"normal",textDecoration:"none",color:s.colorWhite,textAlign:"center",lineHeight:s.lineHeightM,padding:`${s.spacingXs} calc(1rem * (10 / ${s.fontBaseDefault}))`,borderRadius:s.borderRadiusMedium,whiteSpace:"normal"},""),tooltipHidden:o({visibility:"hidden",pointerEvents:"none",zIndex:s.zIndexNegative},""),tooltipContainer:o({name:"1nqn0g6",styles:"& > button[disabled]{pointer-events:none;}"}),tooltipArrow:o({position:"absolute",'&[data-placement*="top"]':{bottom:0,left:0,marginBottom:b},'&[data-placement*="right"]':{left:0,marginLeft:b},'&[data-placement*="bottom"]':{left:0,top:0,marginTop:b},'&[data-placement*="left"]':{right:0,marginRight:b},"&::before":{content:'""',display:"block",height:y,width:y,backgroundColor:s.gray900,transform:"rotate3d(0, 0, 1, 45deg)",zIndex:s.zIndexNegative}},"")},[C,P]=r(!1),R=c(h,"tooltip"),$=a(null),L=a(null),[A,H]=r(null),{styles:K,attributes:O,forceUpdate:V}=i($.current,L.current,{placement:T,modifiers:[{name:"arrow",options:{element:A,padding:parseFloat(s.borderRadiusSmall)}},{name:"offset",options:{offset:[0,10]}}]});l((()=>{null!==V&&V()}),[g,V]);const[j,q]=r(!1),[U,X]=r(!1);l((()=>{P(U||j)}),[j,U]),l((()=>{x&&P(!0)}),[]);const G="string"==typeof M?M:`${M}px`,J={zIndex:s.zIndexTooltip,maxWidth:G,...K.popper};if(!g||B)return n.createElement(m,{as:f,className:D},d);const Q=n.createElement(m,e({as:"span",id:R,ref:L,role:"tooltip",style:J,className:t(F.tooltip,u),testId:S,onMouseEnter:()=>{X(!0)},onMouseLeave:()=>{X(!1)}},O.popper),n.createElement("span",null,g),n.createElement("span",{className:F.tooltipArrow,"data-placement":O.popper&&O.popper["data-popper-placement"],ref:H,style:K.arrow}));return n.createElement(n.Fragment,null,C?n.createElement(n.Fragment,null,k?n.createElement(p,null,Q):Q):null,n.createElement(m,e({as:f,ref:$,className:t(F.tooltipContainer,D),onMouseEnter:e=>{q(!0),w&&w(e)},onMouseLeave:e=>{setTimeout((()=>q(!1)),E),N&&N(e)},onFocus:e=>{q(!0),I&&I(e)},onBlur:e=>{setTimeout((()=>q(!1)),E),v&&v(e)},onKeyDown:e=>{"Escape"===e.key&&setTimeout((()=>q(!1)),E),z&&z(e)}},W),n.Children.map(d,(e=>{if(n.isValidElement(e))return n.cloneElement(e,{"aria-describedby":R})}))))};export{h as Tooltip};
//# sourceMappingURL=module.js.map
{
"name": "@contentful/f36-tooltip",
"version": "4.0.1-next-v4-8377.2344+34888bc6",
"version": "4.0.1-next-v4-8455.2348+839d9049",
"description": "Forma 36: Tooltip component",

@@ -10,5 +10,5 @@ "scripts": {

"@babel/runtime": "^7.6.2",
"@contentful/f36-core": "4.0.1-next-v4-8377.2344+34888bc6",
"@contentful/f36-tokens": "4.0.1-next-v4-8377.2344+34888bc6",
"@contentful/f36-utils": "4.0.1-next-v4-8377.2344+34888bc6",
"@contentful/f36-core": "4.0.1-next-v4-8455.2348+839d9049",
"@contentful/f36-tokens": "4.0.1-next-v4-8455.2348+839d9049",
"@contentful/f36-utils": "4.0.1-next-v4-8455.2348+839d9049",
"@popperjs/core": "^2.4.4",

@@ -40,3 +40,3 @@ "csstype": "^3.0.5",

},
"gitHead": "34888bc67ea8ca6538e86cf9066b3fc28cf70d9f"
"gitHead": "839d9049e81b4e3816af95725a488d8848464300"
}
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc