UNPKG

@ebay/ui-core-react

Version:

Skin components build off React

2 lines (1 loc) 3.75 kB
"use strict";const E=require("./tslib.es6-BW4cJBUu.js"),e=require("react"),_=require("classnames"),N=require("./forwardRef-DBQKIlPy.js"),p=require("./utils-C9NL3q0j.js"),v=require("./icons/ebay-icon-close-16/index.js"),f=a=>{var{children:o,className:r,forwardedRef:s}=a,t=E.__rest(a,["children","className","forwardedRef"]);return e.Children.only(o),e.cloneElement(o,Object.assign(Object.assign({ref:s},t),{className:_(r,o.props.className)}))},C=a=>{var o,{className:r,type:s,isExpanded:t,children:n,forwardedRef:c}=a,m=E.__rest(a,["className","type","isExpanded","children","forwardedRef"]);const i=p.findComponent(n,f),l=p.excludeComponent(n,f)[0];if(!i)throw new Error("Tooltip: Please use a TooltipHost that defines the host of the tooltip");const d=e.cloneElement(i,Object.assign({className:`${s}__host`,"aria-expanded":t,"aria-describedby":(o=l?.props)===null||o===void 0?void 0:o.id},i.props));return e.createElement("span",Object.assign({},m,{ref:c,className:_(r,s,{[`${s}--expanded`]:t})}),d,l)},O=N.withForwardRef(C),x="bottom",R={tooltip:"tooltip",tourtip:"region",infotip:""},$={left:{transform:"translateX(16px) translateY(-50%) scale3d(1,1,1)",left:"100%",right:"auto",top:"-6px",bottom:"auto"},"left-top":{transform:"translateX(16px) scale3d(1,1,1)",left:"100%",right:"auto",top:"-100%",bottom:"auto"},"left-bottom":{transform:"translateX(16px) scale3d(1,1,1)",left:"100%",right:"auto",top:"auto",bottom:"-10px"},right:{transform:"translateX(-16px) translateY(-50%) scale3d(1,1,1)",left:"auto",right:"100%",top:"-6px",bottom:"auto"},"right-top":{transform:"translateX(-16px) scale3d(1,1,1)",left:"auto",right:"100%",top:"-100%",bottom:"auto"},"right-bottom":{transform:"translateX(-16px) scale3d(1,1,1)",left:"auto",right:"100%",top:"auto",bottom:"-50%"},top:{transform:"translateX(-50%) scale3d(1,1,1)",left:"50%",right:"auto",top:"calc(100% + 2px)",bottom:"auto"},"top-left":{transform:"scale3d(1,1,1)",left:"-10px",right:"auto",top:"calc(100% + 2px)",bottom:"auto"},"top-right":{transform:"scale3d(1,1,1)",left:"auto",right:"-10px",top:"calc(100% + 2px)",bottom:"auto"},"bottom-right":{transform:"scale3d(1,1,1)",left:"auto",right:"-10px",top:"auto",bottom:"calc(100% + 12px)"},"bottom-left":{transform:"scale3d(1,1,1)",left:"-10px",right:"auto",top:"auto",bottom:"calc(100% + 12px)"},bottom:{transform:"translateX(-50%) scale3d(1,1,1)",left:"50%",right:"auto",top:"auto",bottom:"calc(100% + 12px)"}},I=()=>null,b=({children:a,className:o,type:r="tourtip"})=>e.createElement("div",{className:_(`${r}__footer`,o)},a),w=({id:a,style:o,pointer:r=x,children:s,type:t="tooltip",showCloseButton:n,a11yCloseText:c,ariaLabelledBy:m,onClose:i,overlayRef:l,arrowRef:d,arrowStyle:T})=>{const u=p.findComponent(s,I),h=p.findComponent(s,b),g=p.excludeComponent(s,b);return e.createElement("span",{className:`${t}__overlay`,id:a,role:R[t]||null,"aria-labelledby":m,style:o,ref:l},e.createElement("span",{className:`${t}__pointer ${t}__pointer--${r}`,ref:d,style:T}),e.createElement("span",{className:`${t}__mask`},e.createElement("span",{className:`${t}__cell`},e.createElement("span",{className:`${t}__content`},g),n?e.createElement("button",Object.assign({},u?.props,{className:`icon-btn icon-btn--transparent ${t}__close`,type:"button","aria-label":c,onClick:i}),e.createElement(v.EbayIconClose16,null)):null,h)))},X=({onExpand:a,onCollapse:o,initialExpanded:r=!1,expanded:s,hostRef:t})=>{const[n,c]=e.useState(r);return{isExpanded:s!==void 0?s:n,expandTooltip:()=>{c(!0),a&&a()},collapseTooltip:()=>{var l;c(!1),o&&o(),(l=t?.current)===null||l===void 0||l.focus()}}};exports.DEFAULT_POINTER_DIRECTION=x;exports.POINTER_STYLES=$;exports.Tooltip=O;exports.TooltipContent=w;exports.TooltipFooter=b;exports.TooltipHost=f;exports.useTooltip=X;