@khanacademy/wonder-blocks-tooltip 4.1.71 → 4.1.73
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +31 -0
- package/dist/es/index.js +4 -5
- package/dist/index.js +3 -4
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,36 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-tooltip
|
|
2
2
|
|
|
3
|
+
## 4.1.73
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 0fadf9f: Migrate internal usage of the deprecated `spacing` primitive token to the
|
|
8
|
+
`sizing` token. No public API or visual changes — each `spacing.<name>`
|
|
9
|
+
value maps 1:1 to a `sizing.size_<n>` token with the same rendered value.
|
|
10
|
+
A handful of internal `Strut` usages are replaced with CSS `gap` /
|
|
11
|
+
`margin` (since `sizing.X` is a CSS variable string at runtime, not a
|
|
12
|
+
number). Layout-spec and SVG sites that genuinely need JS numbers use
|
|
13
|
+
hardcoded values that mirror the matching `sizing.size_*` tokens (with
|
|
14
|
+
comments). Prep for removal of the `spacing` export in a future major
|
|
15
|
+
release of `@khanacademy/wonder-blocks-tokens`.
|
|
16
|
+
- Updated dependencies [0fadf9f]
|
|
17
|
+
- Updated dependencies [c1c74df]
|
|
18
|
+
- Updated dependencies [72c5272]
|
|
19
|
+
- @khanacademy/wonder-blocks-layout@3.1.49
|
|
20
|
+
- @khanacademy/wonder-blocks-tokens@16.4.0
|
|
21
|
+
- @khanacademy/wonder-blocks-modal@8.6.4
|
|
22
|
+
- @khanacademy/wonder-blocks-typography@4.3.2
|
|
23
|
+
|
|
24
|
+
## 4.1.72
|
|
25
|
+
|
|
26
|
+
### Patch Changes
|
|
27
|
+
|
|
28
|
+
- Updated dependencies [40f217b]
|
|
29
|
+
- @khanacademy/wonder-blocks-tokens@16.3.0
|
|
30
|
+
- @khanacademy/wonder-blocks-layout@3.1.48
|
|
31
|
+
- @khanacademy/wonder-blocks-modal@8.6.3
|
|
32
|
+
- @khanacademy/wonder-blocks-typography@4.3.1
|
|
33
|
+
|
|
3
34
|
## 4.1.71
|
|
4
35
|
|
|
5
36
|
### Patch Changes
|
package/dist/es/index.js
CHANGED
|
@@ -4,8 +4,7 @@ import * as ReactDOM from 'react-dom';
|
|
|
4
4
|
import { Text as Text$1, View, Id } from '@khanacademy/wonder-blocks-core';
|
|
5
5
|
import { maybeGetPortalMountedModalHostElement } from '@khanacademy/wonder-blocks-modal';
|
|
6
6
|
import { StyleSheet, css } from 'aphrodite';
|
|
7
|
-
import {
|
|
8
|
-
import { Strut } from '@khanacademy/wonder-blocks-layout';
|
|
7
|
+
import { semanticColor, color, border, boxShadow, sizing, remToPx, tokenValue } from '@khanacademy/wonder-blocks-tokens';
|
|
9
8
|
import { Heading, BodyText } from '@khanacademy/wonder-blocks-typography';
|
|
10
9
|
import { Popper } from 'react-popper';
|
|
11
10
|
|
|
@@ -15,17 +14,17 @@ const TooltipAppearanceDelay=100;const TooltipDisappearanceDelay=75;
|
|
|
15
14
|
|
|
16
15
|
const TRACKER=new ActiveTracker;class TooltipAnchor extends React.Component{componentDidMount(){const anchorNode=ReactDOM.findDOMNode(this);if(anchorNode instanceof Text){throw new Error("TooltipAnchor must be applied to an Element. Text content is not supported.")}this._unsubscribeFromTracker=TRACKER.subscribe(this);this._anchorNode=anchorNode;this._updateFocusivity();if(anchorNode){anchorNode.addEventListener("focusin",this._handleFocusIn);anchorNode.addEventListener("focusout",this._handleFocusOut);anchorNode.addEventListener("mouseenter",this._handleMouseEnter);anchorNode.addEventListener("mouseleave",this._handleMouseLeave);this.props.anchorRef(this._anchorNode);}}componentDidUpdate(prevProps){if(prevProps.forceAnchorFocusivity!==this.props.forceAnchorFocusivity||prevProps.children!==this.props.children){this._updateFocusivity();}}componentWillUnmount(){if(this._unsubscribeFromTracker){this._unsubscribeFromTracker();}this._clearPendingAction();const anchorNode=this._anchorNode;if(anchorNode){anchorNode.removeEventListener("focusin",this._handleFocusIn);anchorNode.removeEventListener("focusout",this._handleFocusOut);anchorNode.removeEventListener("mouseenter",this._handleMouseEnter);anchorNode.removeEventListener("mouseleave",this._handleMouseLeave);}if(this.state.active){document.removeEventListener("keyup",this._handleKeyUp);}}_updateFocusivity(){const anchorNode=this._anchorNode;if(!anchorNode){return}const{forceAnchorFocusivity}=this.props;const currentTabIndex=anchorNode.getAttribute("tabindex");if(forceAnchorFocusivity&&!currentTabIndex){anchorNode.setAttribute("tabindex","0");this._weSetFocusivity=true;}else if(!forceAnchorFocusivity&¤tTabIndex){if(this._weSetFocusivity){anchorNode.removeAttribute("tabindex");this._weSetFocusivity=false;}}}_updateActiveState(hovered,focused){this._hovered=hovered;this._focused=focused;this._setActiveState(hovered||focused);}_clearPendingAction(){if(this._timeoutID){clearTimeout(this._timeoutID);this._timeoutID=null;}}_setActiveState(active,instant){if(this._stolenFromUs||active!==this.state.active||!this.state.active&&this._timeoutID){this._clearPendingAction();}else if(active===this.state.active){if(this._timeoutID){this._clearPendingAction();}return}instant=instant||active&&TRACKER.steal(this);if(instant){if(active){document.addEventListener("keyup",this._handleKeyUp);}else {document.removeEventListener("keyup",this._handleKeyUp);}this.setState({active});this.props.onActiveChanged(active);if(!this._stolenFromUs&&!active){TRACKER.giveup();}this._stolenFromUs=false;}else {const delay=active?TooltipAppearanceDelay:TooltipDisappearanceDelay;this._timeoutID=setTimeout(()=>{this._timeoutID=null;this._setActiveState(active,true);},delay);}}_renderAnchorableChildren(){const{children}=this.props;return typeof children==="string"?jsx(Text$1,{children:children}):children}render(){const{"aria-describedby":ariaDescribedBy}=this.props;const anchorableChildren=this._renderAnchorableChildren();return React.cloneElement(anchorableChildren,{"aria-describedby":ariaDescribedBy})}constructor(props){super(props),this.activeStateStolen=()=>{this._stolenFromUs=this.state.active||!!this._timeoutID;this._focused=false;this._setActiveState(false,true);},this._handleFocusIn=()=>{this._updateActiveState(this._hovered,true);},this._handleFocusOut=()=>{this._updateActiveState(this._hovered,false);},this._handleMouseEnter=()=>{this._updateActiveState(true,this._focused);},this._handleMouseLeave=()=>{this._updateActiveState(false,this._focused);},this._handleKeyUp=e=>{if(e.key==="Escape"&&this.state.active){e.preventDefault();e.stopPropagation();this._updateActiveState(false,false);}};this._focused=false;this._hovered=false;this.state={active:false};}}TooltipAnchor.defaultProps={forceAnchorFocusivity:true};
|
|
17
16
|
|
|
18
|
-
let tempIdCounter=0;class TooltipTail extends React.Component{_calculateDimensionsFromPlacement(){const{placement}=this.props;const trimlineOffset=.5;switch(placement){case"top":return {trimlinePoints:[`0,-${trimlineOffset}`,`${ARROW_WIDTH},-${trimlineOffset}`],points:["0,0",`${ARROW_WIDTH/2},${ARROW_HEIGHT}`,`${ARROW_WIDTH},0`],height:ARROW_HEIGHT,width:ARROW_WIDTH};case"right":return {trimlinePoints:[`${ARROW_HEIGHT+trimlineOffset},0`,`${ARROW_HEIGHT+trimlineOffset},${ARROW_WIDTH}`],points:[`${ARROW_HEIGHT},0`,`0,${ARROW_WIDTH/2}`,`${ARROW_HEIGHT},${ARROW_WIDTH}`],width:ARROW_HEIGHT,height:ARROW_WIDTH};case"bottom":return {trimlinePoints:[`0, ${ARROW_HEIGHT+trimlineOffset}`,`${ARROW_WIDTH},${ARROW_HEIGHT+trimlineOffset}`],points:[`0, ${ARROW_HEIGHT}`,`${ARROW_WIDTH/2},0`,`${ARROW_WIDTH},${ARROW_HEIGHT}`],width:ARROW_WIDTH,height:ARROW_HEIGHT};case"left":return {trimlinePoints:[`-${trimlineOffset},0`,`-${trimlineOffset},${ARROW_WIDTH}`],points:[`0,0`,`${ARROW_HEIGHT},${ARROW_WIDTH/2}`,`0,${ARROW_WIDTH}`],width:ARROW_HEIGHT,height:ARROW_WIDTH};default:throw new Error(`Unknown placement: ${placement}`)}}_getFilterPositioning(){const{placement}=this.props;switch(placement){case"top":return {y:"-50%",x:"-50%",offsetShadowX:0};case"bottom":return null;case"left":return {y:"-50%",x:"0%",offsetShadowX:1};case"right":return {y:"-50%",x:"-100%",offsetShadowX:-1};default:throw new Error(`Unknown placement: ${placement}`)}}_maybeRenderDropshadow(points){const position=this._getFilterPositioning();if(!position){return null}const{placement}=this.props;const{y,x,offsetShadowX}=position;const dropShadowFilterId=`tooltip-dropshadow-${placement}-${tempIdCounter++}`;return [jsxs("filter",{id:dropShadowFilterId,width:"200%",height:"200%",x:x,y:y,children:[jsx("feGaussianBlur",{in:"SourceAlpha",stdDeviation:
|
|
17
|
+
let tempIdCounter=0;class TooltipTail extends React.Component{_calculateDimensionsFromPlacement(){const{placement}=this.props;const trimlineOffset=.5;switch(placement){case"top":return {trimlinePoints:[`0,-${trimlineOffset}`,`${ARROW_WIDTH},-${trimlineOffset}`],points:["0,0",`${ARROW_WIDTH/2},${ARROW_HEIGHT}`,`${ARROW_WIDTH},0`],height:ARROW_HEIGHT,width:ARROW_WIDTH};case"right":return {trimlinePoints:[`${ARROW_HEIGHT+trimlineOffset},0`,`${ARROW_HEIGHT+trimlineOffset},${ARROW_WIDTH}`],points:[`${ARROW_HEIGHT},0`,`0,${ARROW_WIDTH/2}`,`${ARROW_HEIGHT},${ARROW_WIDTH}`],width:ARROW_HEIGHT,height:ARROW_WIDTH};case"bottom":return {trimlinePoints:[`0, ${ARROW_HEIGHT+trimlineOffset}`,`${ARROW_WIDTH},${ARROW_HEIGHT+trimlineOffset}`],points:[`0, ${ARROW_HEIGHT}`,`${ARROW_WIDTH/2},0`,`${ARROW_WIDTH},${ARROW_HEIGHT}`],width:ARROW_WIDTH,height:ARROW_HEIGHT};case"left":return {trimlinePoints:[`-${trimlineOffset},0`,`-${trimlineOffset},${ARROW_WIDTH}`],points:[`0,0`,`${ARROW_HEIGHT},${ARROW_WIDTH/2}`,`0,${ARROW_WIDTH}`],width:ARROW_HEIGHT,height:ARROW_WIDTH};default:throw new Error(`Unknown placement: ${placement}`)}}_getFilterPositioning(){const{placement}=this.props;switch(placement){case"top":return {y:"-50%",x:"-50%",offsetShadowX:0};case"bottom":return null;case"left":return {y:"-50%",x:"0%",offsetShadowX:1};case"right":return {y:"-50%",x:"-100%",offsetShadowX:-1};default:throw new Error(`Unknown placement: ${placement}`)}}_maybeRenderDropshadow(points){const position=this._getFilterPositioning();if(!position){return null}const{placement}=this.props;const{y,x,offsetShadowX}=position;const dropShadowFilterId=`tooltip-dropshadow-${placement}-${tempIdCounter++}`;return [jsxs("filter",{id:dropShadowFilterId,width:"200%",height:"200%",x:x,y:y,children:[jsx("feGaussianBlur",{in:"SourceAlpha",stdDeviation:3}),jsx("feComponentTransfer",{children:jsx("feFuncA",{type:"linear",slope:"0.3"})})]},"filter"),jsx("g",{transform:`translate(${offsetShadowX},5.5)`,children:jsx("polyline",{fill:semanticColor.core.shadow.transparent.mid,points:points.join(" "),stroke:semanticColor.core.shadow.transparent.mid,filter:`url(#${dropShadowFilterId})`})},"dropshadow")]}_getFullTailWidth(){return ARROW_WIDTH+2*MIN_DISTANCE_FROM_CORNERS}_getFullTailHeight(){return ARROW_HEIGHT+DISTANCE_FROM_ANCHOR}_getContainerStyle(){const{placement}=this.props;const fullTailWidth=this._getFullTailWidth();const fullTailHeight=this._getFullTailHeight();switch(placement){case"top":return {top:-1,width:fullTailWidth,height:fullTailHeight};case"right":return {left:1,width:fullTailHeight,height:fullTailWidth};case"bottom":return {top:1,width:fullTailWidth,height:fullTailHeight};case"left":return {left:-1,width:fullTailHeight,height:fullTailWidth};default:throw new Error(`Unknown placement: ${placement}`)}}_getArrowStyle(){const{placement}=this.props;switch(placement){case"top":return {marginLeft:MIN_DISTANCE_FROM_CORNERS,marginRight:MIN_DISTANCE_FROM_CORNERS,paddingBottom:DISTANCE_FROM_ANCHOR};case"right":return {marginTop:MIN_DISTANCE_FROM_CORNERS,marginBottom:MIN_DISTANCE_FROM_CORNERS,paddingLeft:DISTANCE_FROM_ANCHOR};case"bottom":return {marginLeft:MIN_DISTANCE_FROM_CORNERS,marginRight:MIN_DISTANCE_FROM_CORNERS,paddingTop:DISTANCE_FROM_ANCHOR};case"left":return {marginTop:MIN_DISTANCE_FROM_CORNERS,marginBottom:MIN_DISTANCE_FROM_CORNERS,paddingRight:DISTANCE_FROM_ANCHOR};default:throw new Error(`Unknown placement: ${placement}`)}}_renderArrow(){const{trimlinePoints,points,height,width}=this._calculateDimensionsFromPlacement();const{color:arrowColor,show}=this.props;if(!show){return jsx(View,{"aria-hidden":true,style:{inlineSize:height,flexBasis:height,flexShrink:0}})}return jsxs("svg",{className:css(styles$2.arrow),style:this._getArrowStyle(),width:width,height:height,"aria-hidden":true,children:[this._maybeRenderDropshadow(points),jsx("polyline",{fill:color[arrowColor],stroke:color[arrowColor],points:points.join(" ")}),jsx("polyline",{fill:color[arrowColor],points:points.join(" "),stroke:semanticColor.core.shadow.transparent.mid}),jsx("polyline",{stroke:color[arrowColor],points:trimlinePoints.join(" ")})]})}render(){const{offset,placement,updateRef}=this.props;return jsx(View,{style:[styles$2.tailContainer,{...offset},this._getContainerStyle()],"data-placement":placement,ref:updateRef,children:this._renderArrow()})}}TooltipTail.defaultProps={color:"white",show:true};const DISTANCE_FROM_ANCHOR=8;const MIN_DISTANCE_FROM_CORNERS=8;const ARROW_WIDTH=24;const ARROW_HEIGHT=12;const styles$2=StyleSheet.create({tailContainer:{position:"relative",pointerEvents:"none"},arrow:{overflow:"visible"}});
|
|
19
18
|
|
|
20
19
|
class TooltipBubble extends React.Component{_setActiveState(active){this.setState({active});this.props.onActiveChanged(active);}render(){const{id,children,updateBubbleRef,placement,isReferenceHidden,style,updateTailRef,tailOffset,backgroundColor}=this.props;return jsxs(View,{id:id,role:"tooltip","data-placement":placement,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,ref:updateBubbleRef,style:[isReferenceHidden&&styles$1.hide,styles$1.bubble,styles$1[`content-${placement}`],style],children:[jsx(View,{style:[styles$1.content,backgroundColor&&{backgroundColor:color[backgroundColor]}],children:children}),jsx(TooltipTail,{updateRef:updateTailRef,placement:placement,offset:tailOffset,color:backgroundColor})]})}constructor(...args){super(...args),this.state={active:false},this.handleMouseEnter=()=>{this._setActiveState(true);},this.handleMouseLeave=()=>{this.props.onActiveChanged(false);};}}const styles$1=StyleSheet.create({bubble:{position:"absolute"},hide:{pointerEvents:"none",opacity:0,backgroundColor:"transparent",color:"transparent"},"content-top":{flexDirection:"column"},"content-right":{flexDirection:"row-reverse"},"content-bottom":{flexDirection:"column-reverse"},"content-left":{flexDirection:"row"},content:{maxWidth:472,borderRadius:border.radius.radius_040,border:`solid 1px ${semanticColor.core.border.neutral.subtle}`,backgroundColor:semanticColor.core.background.base.default,boxShadow:boxShadow.mid,justifyContent:"center"}});
|
|
21
20
|
|
|
22
|
-
class TooltipContent extends React.Component{_renderTitle(){const{title}=this.props;if(title){if(typeof title==="string"){return jsx(Heading,{size:"medium",children:title})}else {return title}}return null}_renderChildren(){const{children}=this.props;if(typeof children==="string"){return jsx(BodyText,{tag:"span",children:children})}else {return children}}render(){const title=this._renderTitle();const children=this._renderChildren();const containerStyle=title?styles.withTitle:styles.withoutTitle;return jsxs(View,{style:[containerStyle,this.props.contentStyle],testId:this.props.testId,children:[title,title
|
|
21
|
+
class TooltipContent extends React.Component{_renderTitle(){const{title}=this.props;if(title){if(typeof title==="string"){return jsx(Heading,{size:"medium",children:title})}else {return title}}return null}_renderChildren(){const{children}=this.props;if(typeof children==="string"){return jsx(BodyText,{tag:"span",children:children})}else {return children}}render(){const title=this._renderTitle();const children=this._renderChildren();const containerStyle=title?styles.withTitle:styles.withoutTitle;return jsxs(View,{style:[containerStyle,this.props.contentStyle],testId:this.props.testId,children:[title,title?jsx(View,{children:children}):children]})}}const styles=StyleSheet.create({withoutTitle:{padding:`${sizing.size_100} ${sizing.size_160}`},withTitle:{padding:sizing.size_160,gap:sizing.size_040}});
|
|
23
22
|
|
|
24
23
|
var e=n=>null==n||"object"!=typeof n?n:Array.isArray(n)?n.map(e):Object.keys(n).reduce((t,r)=>(t[r]=e(n[r]),t),{}),t=Object.freeze({Unknown:"Unknown",Internal:"Internal",InvalidInput:"InvalidInput",InvalidUse:"InvalidUse",NotFound:"NotFound",NotAllowed:"NotAllowed",Unauthorized:"Unauthorized",NotImplemented:"NotImplemented"});function r(e,n,t){return (n=function(e){var n=function(e,n){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n);if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return ("string"===n?String:Number)(e)}(e,"string");return "symbol"==typeof n?n:n+""}(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}class o{constructor(e,n){r(this,"_name",void 0),r(this,"_message",void 0),this._name=e,this._message=n;}get message(){return this._message}get name(){return this._name}get messageWithName(){return "".concat(this.name,": ").concat(this.message)}static fromConsequenceAndCause(e,n){if("production"!==process.env.NODE_ENV){if(!(e instanceof o))throw new Error("consequence must be an instance of ErrorInfo");if(!(n instanceof o))throw new Error("cause must be an instance of ErrorInfo");if(n===e)throw new Error("cause and consequence must be different")}return new o(e.name,((e,n)=>{var t=e=>(null==e?void 0:e.trim())||"(empty message)",r=t(e);return null==n?r:"".concat(r,"\n\tcaused by\n\t\t").concat(t(n))})(e.message,n.messageWithName))}static normalize(e){var n;if("production"!==process.env.NODE_ENV&&!(e instanceof Error))throw new Error("Error must be an instance of Error");var t=null!==(n=e.message.toString().split("\n").find(e=>e.trim().length))&&void 0!==n?n:"(empty message)";return new o(e.name,t)}static from(e){if("production"!==process.env.NODE_ENV&&!(e instanceof Error))throw new Error("Error must be an instance of Error");return new o(e.name,e.message)}}class s extends Error{constructor(n){var s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:t.Unknown,{cause:i,prefix:a,name:u,metadata:c}=arguments.length>2&&void 0!==arguments[2]?arguments[2]:Object.freeze({});if("production"!==process.env.NODE_ENV){if(i&&!(i instanceof Error))throw new Error("cause must be an instance of Error");if(null!=u&&/\s/g.test(u))throw new Error("name must not contain whitespace");if(/\s/g.test(s))throw new Error("kind must not contain whitespace");if(null!=a&&/\s/g.test(a))throw new Error("prefix must not contain whitespace")}if(super(n),r(this,"kind",void 0),r(this,"originalMessage",void 0),r(this,"metadata",void 0),r(this,"cause",void 0),this.originalMessage=n,this.metadata=(n=>{if(null==n)return n;var t=e(n);return Object.freeze(t)})(c),this.name="".concat(null!=a?a:"").concat(s).concat(null!=u?u:"","Error"),this.kind=s,this.cause=i,null!=i){var l=o.normalize(this),f=o.from(i),d=o.fromConsequenceAndCause(l,f);this.message=d.message;}}}Object.freeze({ConsequenceFirst:"consequence-first",CauseFirst:"cause-first"});class g extends s{constructor(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:t.InvalidInput,r=arguments.length>2?arguments[2]:void 0;super("Unhandled case for '".concat(e,"'"),n,r);}}(function(e){return e.Production="production",e.Development="development",e.Test="test",e})({});
|
|
25
24
|
|
|
26
25
|
class RefTracker{constructor(){this.updateRef=ref=>{if(ref){const domNode=ReactDOM.findDOMNode(ref);if(domNode instanceof HTMLElement&&domNode!==this._lastRef){this._lastRef=domNode;this._targetFn?.(domNode);}}};this.setCallback=targetFn=>{if(this._targetFn!==targetFn){if(targetFn&&typeof targetFn!=="function"){throw new Error("targetFn must be a function")}this._targetFn=targetFn||undefined;if(this._lastRef&&this._targetFn){this._targetFn(this._lastRef);}}};}}
|
|
27
26
|
|
|
28
|
-
const filterPopperPlacement=placement=>{switch(placement){case"auto":case"auto-start":case"auto-end":case"top":case"top-start":case"top-end":return "top";case"bottom":case"bottom-start":case"bottom-end":return "bottom";case"right":case"right-start":case"right-end":return "right";case"left":case"left-start":case"left-end":return "left";default:throw new g(placement)}};function _modifyPosition({state}){const popperHeight=state.rects.popper.height+state.rects.reference.height;const minHeight=document.documentElement.clientHeight;if(minHeight<popperHeight&&state.modifiersData.hide){state.modifiersData.hide={...state.modifiersData.hide,isReferenceHidden:false};}}const smallViewportModifier={name:"smallViewport",enabled:true,phase:"main",fn:_modifyPosition};class TooltipPopper extends React.Component{componentDidMount(){const{anchorElement,autoUpdate}=this.props;if(!anchorElement||!autoUpdate){return}this._observer=new MutationObserver(()=>{this._popperUpdate?.();});this._observer.observe(anchorElement,{attributes:true,childList:true,subtree:true});}componentWillUnmount(){this._observer?.disconnect();}_renderPositionedContent(popperProps){const{children}=this.props;const{isReady}=this.state;const placement=filterPopperPlacement(popperProps.placement)||this.props.placement;this._bubbleRefTracker.setCallback(popperProps.ref);this._tailRefTracker.setCallback(popperProps.arrowProps.ref);this._popperUpdate=popperProps.update;const bubbleProps={placement,style:{top:popperProps.style.top,left:popperProps.style.left,bottom:popperProps.style.bottom,right:popperProps.style.right,position:popperProps.style.position,transform:popperProps.style.transform,visibility:!isReady?"hidden":undefined},updateBubbleRef:this._bubbleRefTracker.updateRef,tailOffset:{bottom:popperProps.arrowProps.style.bottom,right:popperProps.arrowProps.style.right,top:popperProps.arrowProps.style.top,left:popperProps.arrowProps.style.left,transform:popperProps.arrowProps.style.transform},updateTailRef:this._tailRefTracker.updateRef,isReferenceHidden:popperProps.isReferenceHidden};return children(bubbleProps)}render(){const{anchorElement,placement,rootBoundary,viewportPadding}=this.props;const modifiers=[smallViewportModifier];if(rootBoundary==="viewport"){modifiers.push({name:"preventOverflow",options:{rootBoundary:"viewport",padding:viewportPadding}});}else {modifiers.push({name:"flip",options:{rootBoundary:"document"}});}return jsx(Popper,{referenceElement:anchorElement,strategy:"fixed",placement:placement,modifiers:modifiers,onFirstUpdate:this.handleFirstUpdate,children:props=>this._renderPositionedContent(props)})}constructor(props){super(props),this._bubbleRefTracker=new RefTracker,this._tailRefTracker=new RefTracker,this._observer=null,this._popperUpdate=null,this.handleFirstUpdate=()=>{this.setState({isReady:true});};this.state={isReady:false};}}TooltipPopper.defaultProps={rootBoundary:"viewport",viewportPadding:
|
|
27
|
+
const filterPopperPlacement=placement=>{switch(placement){case"auto":case"auto-start":case"auto-end":case"top":case"top-start":case"top-end":return "top";case"bottom":case"bottom-start":case"bottom-end":return "bottom";case"right":case"right-start":case"right-end":return "right";case"left":case"left-start":case"left-end":return "left";default:throw new g(placement)}};function _modifyPosition({state}){const popperHeight=state.rects.popper.height+state.rects.reference.height;const minHeight=document.documentElement.clientHeight;if(minHeight<popperHeight&&state.modifiersData.hide){state.modifiersData.hide={...state.modifiersData.hide,isReferenceHidden:false};}}const smallViewportModifier={name:"smallViewport",enabled:true,phase:"main",fn:_modifyPosition};const VIEWPORT_PADDING=parseInt(remToPx(tokenValue(sizing.size_120)));class TooltipPopper extends React.Component{componentDidMount(){const{anchorElement,autoUpdate}=this.props;if(!anchorElement||!autoUpdate){return}this._observer=new MutationObserver(()=>{this._popperUpdate?.();});this._observer.observe(anchorElement,{attributes:true,childList:true,subtree:true});}componentWillUnmount(){this._observer?.disconnect();}_renderPositionedContent(popperProps){const{children}=this.props;const{isReady}=this.state;const placement=filterPopperPlacement(popperProps.placement)||this.props.placement;this._bubbleRefTracker.setCallback(popperProps.ref);this._tailRefTracker.setCallback(popperProps.arrowProps.ref);this._popperUpdate=popperProps.update;const bubbleProps={placement,style:{top:popperProps.style.top,left:popperProps.style.left,bottom:popperProps.style.bottom,right:popperProps.style.right,position:popperProps.style.position,transform:popperProps.style.transform,visibility:!isReady?"hidden":undefined},updateBubbleRef:this._bubbleRefTracker.updateRef,tailOffset:{bottom:popperProps.arrowProps.style.bottom,right:popperProps.arrowProps.style.right,top:popperProps.arrowProps.style.top,left:popperProps.arrowProps.style.left,transform:popperProps.arrowProps.style.transform},updateTailRef:this._tailRefTracker.updateRef,isReferenceHidden:popperProps.isReferenceHidden};return children(bubbleProps)}render(){const{anchorElement,placement,rootBoundary,viewportPadding}=this.props;const modifiers=[smallViewportModifier];if(rootBoundary==="viewport"){modifiers.push({name:"preventOverflow",options:{rootBoundary:"viewport",padding:viewportPadding}});}else {modifiers.push({name:"flip",options:{rootBoundary:"document"}});}return jsx(Popper,{referenceElement:anchorElement,strategy:"fixed",placement:placement,modifiers:modifiers,onFirstUpdate:this.handleFirstUpdate,children:props=>this._renderPositionedContent(props)})}constructor(props){super(props),this._bubbleRefTracker=new RefTracker,this._tailRefTracker=new RefTracker,this._observer=null,this._popperUpdate=null,this.handleFirstUpdate=()=>{this.setState({isReady:true});};this.state={isReady:false};}}TooltipPopper.defaultProps={rootBoundary:"viewport",viewportPadding:VIEWPORT_PADDING};
|
|
29
28
|
|
|
30
29
|
class Tooltip extends React.Component{static getDerivedStateFromProps(props,state){return {active:typeof props.opened==="boolean"?props.opened:state.active}}_updateAnchorElement(ref){if(ref&&ref!==this.state.anchorElement){this.setState({anchorElement:ref});}}_renderBubbleContent(){const{title,content,contentStyle,testId}=this.props;if(typeof content==="string"){return jsx(TooltipContent,{title:title,contentStyle:contentStyle,testId:testId?`${testId}-content`:undefined,children:content})}else if(title){return React.cloneElement(content,{title})}else {return content}}_renderPopper(ariaContentId){const{backgroundColor,placement}=this.props;return jsx(TooltipPopper,{anchorElement:this.state.anchorElement,placement:placement,autoUpdate:this.props.autoUpdate,viewportPadding:this.props.viewportPadding,children:props=>jsx(TooltipBubble,{id:ariaContentId,style:props.style,backgroundColor:backgroundColor,tailOffset:props.tailOffset,isReferenceHidden:props.isReferenceHidden,placement:props.placement,updateTailRef:props.updateTailRef,updateBubbleRef:props.updateBubbleRef,onActiveChanged:active=>this.setState({activeBubble:active}),children:this._renderBubbleContent()})})}_getHost(){const{anchorElement}=this.state;return maybeGetPortalMountedModalHostElement(anchorElement)||document.body}_renderTooltipAnchor(uniqueId){const{autoUpdate,children,forceAnchorFocusivity}=this.props;const{active,activeBubble}=this.state;const popperHost=this._getHost();const shouldAnchorExist=autoUpdate?this.state.anchorElement:true;const shouldBeVisible=popperHost&&(active||activeBubble)&&shouldAnchorExist;const ariaContentId=`${uniqueId}-aria-content`;return jsxs(React.Fragment,{children:[jsx(TooltipAnchor,{forceAnchorFocusivity:forceAnchorFocusivity,anchorRef:r=>this._updateAnchorElement(r),onActiveChanged:active=>this.setState({active}),"aria-describedby":shouldBeVisible?ariaContentId:undefined,children:children}),shouldBeVisible&&ReactDOM.createPortal(this._renderPopper(ariaContentId),popperHost)]})}render(){const{id}=this.props;return jsx(Id,{id:id,children:uniqueId=>this._renderTooltipAnchor(uniqueId)})}constructor(...args){super(...args),this.state={active:false,activeBubble:false};}}Tooltip.defaultProps={forceAnchorFocusivity:true,placement:"top"};
|
|
31
30
|
|
package/dist/index.js
CHANGED
|
@@ -9,7 +9,6 @@ var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
|
|
|
9
9
|
var wonderBlocksModal = require('@khanacademy/wonder-blocks-modal');
|
|
10
10
|
var aphrodite = require('aphrodite');
|
|
11
11
|
var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
|
|
12
|
-
var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
|
|
13
12
|
var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
|
|
14
13
|
var reactPopper = require('react-popper');
|
|
15
14
|
|
|
@@ -40,17 +39,17 @@ const TooltipAppearanceDelay=100;const TooltipDisappearanceDelay=75;
|
|
|
40
39
|
|
|
41
40
|
const TRACKER=new ActiveTracker;class TooltipAnchor extends React__namespace.Component{componentDidMount(){const anchorNode=ReactDOM__namespace.findDOMNode(this);if(anchorNode instanceof Text){throw new Error("TooltipAnchor must be applied to an Element. Text content is not supported.")}this._unsubscribeFromTracker=TRACKER.subscribe(this);this._anchorNode=anchorNode;this._updateFocusivity();if(anchorNode){anchorNode.addEventListener("focusin",this._handleFocusIn);anchorNode.addEventListener("focusout",this._handleFocusOut);anchorNode.addEventListener("mouseenter",this._handleMouseEnter);anchorNode.addEventListener("mouseleave",this._handleMouseLeave);this.props.anchorRef(this._anchorNode);}}componentDidUpdate(prevProps){if(prevProps.forceAnchorFocusivity!==this.props.forceAnchorFocusivity||prevProps.children!==this.props.children){this._updateFocusivity();}}componentWillUnmount(){if(this._unsubscribeFromTracker){this._unsubscribeFromTracker();}this._clearPendingAction();const anchorNode=this._anchorNode;if(anchorNode){anchorNode.removeEventListener("focusin",this._handleFocusIn);anchorNode.removeEventListener("focusout",this._handleFocusOut);anchorNode.removeEventListener("mouseenter",this._handleMouseEnter);anchorNode.removeEventListener("mouseleave",this._handleMouseLeave);}if(this.state.active){document.removeEventListener("keyup",this._handleKeyUp);}}_updateFocusivity(){const anchorNode=this._anchorNode;if(!anchorNode){return}const{forceAnchorFocusivity}=this.props;const currentTabIndex=anchorNode.getAttribute("tabindex");if(forceAnchorFocusivity&&!currentTabIndex){anchorNode.setAttribute("tabindex","0");this._weSetFocusivity=true;}else if(!forceAnchorFocusivity&¤tTabIndex){if(this._weSetFocusivity){anchorNode.removeAttribute("tabindex");this._weSetFocusivity=false;}}}_updateActiveState(hovered,focused){this._hovered=hovered;this._focused=focused;this._setActiveState(hovered||focused);}_clearPendingAction(){if(this._timeoutID){clearTimeout(this._timeoutID);this._timeoutID=null;}}_setActiveState(active,instant){if(this._stolenFromUs||active!==this.state.active||!this.state.active&&this._timeoutID){this._clearPendingAction();}else if(active===this.state.active){if(this._timeoutID){this._clearPendingAction();}return}instant=instant||active&&TRACKER.steal(this);if(instant){if(active){document.addEventListener("keyup",this._handleKeyUp);}else {document.removeEventListener("keyup",this._handleKeyUp);}this.setState({active});this.props.onActiveChanged(active);if(!this._stolenFromUs&&!active){TRACKER.giveup();}this._stolenFromUs=false;}else {const delay=active?TooltipAppearanceDelay:TooltipDisappearanceDelay;this._timeoutID=setTimeout(()=>{this._timeoutID=null;this._setActiveState(active,true);},delay);}}_renderAnchorableChildren(){const{children}=this.props;return typeof children==="string"?jsxRuntime.jsx(wonderBlocksCore.Text,{children:children}):children}render(){const{"aria-describedby":ariaDescribedBy}=this.props;const anchorableChildren=this._renderAnchorableChildren();return React__namespace.cloneElement(anchorableChildren,{"aria-describedby":ariaDescribedBy})}constructor(props){super(props),this.activeStateStolen=()=>{this._stolenFromUs=this.state.active||!!this._timeoutID;this._focused=false;this._setActiveState(false,true);},this._handleFocusIn=()=>{this._updateActiveState(this._hovered,true);},this._handleFocusOut=()=>{this._updateActiveState(this._hovered,false);},this._handleMouseEnter=()=>{this._updateActiveState(true,this._focused);},this._handleMouseLeave=()=>{this._updateActiveState(false,this._focused);},this._handleKeyUp=e=>{if(e.key==="Escape"&&this.state.active){e.preventDefault();e.stopPropagation();this._updateActiveState(false,false);}};this._focused=false;this._hovered=false;this.state={active:false};}}TooltipAnchor.defaultProps={forceAnchorFocusivity:true};
|
|
42
41
|
|
|
43
|
-
let tempIdCounter=0;class TooltipTail extends React__namespace.Component{_calculateDimensionsFromPlacement(){const{placement}=this.props;const trimlineOffset=.5;switch(placement){case"top":return {trimlinePoints:[`0,-${trimlineOffset}`,`${ARROW_WIDTH},-${trimlineOffset}`],points:["0,0",`${ARROW_WIDTH/2},${ARROW_HEIGHT}`,`${ARROW_WIDTH},0`],height:ARROW_HEIGHT,width:ARROW_WIDTH};case"right":return {trimlinePoints:[`${ARROW_HEIGHT+trimlineOffset},0`,`${ARROW_HEIGHT+trimlineOffset},${ARROW_WIDTH}`],points:[`${ARROW_HEIGHT},0`,`0,${ARROW_WIDTH/2}`,`${ARROW_HEIGHT},${ARROW_WIDTH}`],width:ARROW_HEIGHT,height:ARROW_WIDTH};case"bottom":return {trimlinePoints:[`0, ${ARROW_HEIGHT+trimlineOffset}`,`${ARROW_WIDTH},${ARROW_HEIGHT+trimlineOffset}`],points:[`0, ${ARROW_HEIGHT}`,`${ARROW_WIDTH/2},0`,`${ARROW_WIDTH},${ARROW_HEIGHT}`],width:ARROW_WIDTH,height:ARROW_HEIGHT};case"left":return {trimlinePoints:[`-${trimlineOffset},0`,`-${trimlineOffset},${ARROW_WIDTH}`],points:[`0,0`,`${ARROW_HEIGHT},${ARROW_WIDTH/2}`,`0,${ARROW_WIDTH}`],width:ARROW_HEIGHT,height:ARROW_WIDTH};default:throw new Error(`Unknown placement: ${placement}`)}}_getFilterPositioning(){const{placement}=this.props;switch(placement){case"top":return {y:"-50%",x:"-50%",offsetShadowX:0};case"bottom":return null;case"left":return {y:"-50%",x:"0%",offsetShadowX:1};case"right":return {y:"-50%",x:"-100%",offsetShadowX:-1};default:throw new Error(`Unknown placement: ${placement}`)}}_maybeRenderDropshadow(points){const position=this._getFilterPositioning();if(!position){return null}const{placement}=this.props;const{y,x,offsetShadowX}=position;const dropShadowFilterId=`tooltip-dropshadow-${placement}-${tempIdCounter++}`;return [jsxRuntime.jsxs("filter",{id:dropShadowFilterId,width:"200%",height:"200%",x:x,y:y,children:[jsxRuntime.jsx("feGaussianBlur",{in:"SourceAlpha",stdDeviation:
|
|
42
|
+
let tempIdCounter=0;class TooltipTail extends React__namespace.Component{_calculateDimensionsFromPlacement(){const{placement}=this.props;const trimlineOffset=.5;switch(placement){case"top":return {trimlinePoints:[`0,-${trimlineOffset}`,`${ARROW_WIDTH},-${trimlineOffset}`],points:["0,0",`${ARROW_WIDTH/2},${ARROW_HEIGHT}`,`${ARROW_WIDTH},0`],height:ARROW_HEIGHT,width:ARROW_WIDTH};case"right":return {trimlinePoints:[`${ARROW_HEIGHT+trimlineOffset},0`,`${ARROW_HEIGHT+trimlineOffset},${ARROW_WIDTH}`],points:[`${ARROW_HEIGHT},0`,`0,${ARROW_WIDTH/2}`,`${ARROW_HEIGHT},${ARROW_WIDTH}`],width:ARROW_HEIGHT,height:ARROW_WIDTH};case"bottom":return {trimlinePoints:[`0, ${ARROW_HEIGHT+trimlineOffset}`,`${ARROW_WIDTH},${ARROW_HEIGHT+trimlineOffset}`],points:[`0, ${ARROW_HEIGHT}`,`${ARROW_WIDTH/2},0`,`${ARROW_WIDTH},${ARROW_HEIGHT}`],width:ARROW_WIDTH,height:ARROW_HEIGHT};case"left":return {trimlinePoints:[`-${trimlineOffset},0`,`-${trimlineOffset},${ARROW_WIDTH}`],points:[`0,0`,`${ARROW_HEIGHT},${ARROW_WIDTH/2}`,`0,${ARROW_WIDTH}`],width:ARROW_HEIGHT,height:ARROW_WIDTH};default:throw new Error(`Unknown placement: ${placement}`)}}_getFilterPositioning(){const{placement}=this.props;switch(placement){case"top":return {y:"-50%",x:"-50%",offsetShadowX:0};case"bottom":return null;case"left":return {y:"-50%",x:"0%",offsetShadowX:1};case"right":return {y:"-50%",x:"-100%",offsetShadowX:-1};default:throw new Error(`Unknown placement: ${placement}`)}}_maybeRenderDropshadow(points){const position=this._getFilterPositioning();if(!position){return null}const{placement}=this.props;const{y,x,offsetShadowX}=position;const dropShadowFilterId=`tooltip-dropshadow-${placement}-${tempIdCounter++}`;return [jsxRuntime.jsxs("filter",{id:dropShadowFilterId,width:"200%",height:"200%",x:x,y:y,children:[jsxRuntime.jsx("feGaussianBlur",{in:"SourceAlpha",stdDeviation:3}),jsxRuntime.jsx("feComponentTransfer",{children:jsxRuntime.jsx("feFuncA",{type:"linear",slope:"0.3"})})]},"filter"),jsxRuntime.jsx("g",{transform:`translate(${offsetShadowX},5.5)`,children:jsxRuntime.jsx("polyline",{fill:wonderBlocksTokens.semanticColor.core.shadow.transparent.mid,points:points.join(" "),stroke:wonderBlocksTokens.semanticColor.core.shadow.transparent.mid,filter:`url(#${dropShadowFilterId})`})},"dropshadow")]}_getFullTailWidth(){return ARROW_WIDTH+2*MIN_DISTANCE_FROM_CORNERS}_getFullTailHeight(){return ARROW_HEIGHT+DISTANCE_FROM_ANCHOR}_getContainerStyle(){const{placement}=this.props;const fullTailWidth=this._getFullTailWidth();const fullTailHeight=this._getFullTailHeight();switch(placement){case"top":return {top:-1,width:fullTailWidth,height:fullTailHeight};case"right":return {left:1,width:fullTailHeight,height:fullTailWidth};case"bottom":return {top:1,width:fullTailWidth,height:fullTailHeight};case"left":return {left:-1,width:fullTailHeight,height:fullTailWidth};default:throw new Error(`Unknown placement: ${placement}`)}}_getArrowStyle(){const{placement}=this.props;switch(placement){case"top":return {marginLeft:MIN_DISTANCE_FROM_CORNERS,marginRight:MIN_DISTANCE_FROM_CORNERS,paddingBottom:DISTANCE_FROM_ANCHOR};case"right":return {marginTop:MIN_DISTANCE_FROM_CORNERS,marginBottom:MIN_DISTANCE_FROM_CORNERS,paddingLeft:DISTANCE_FROM_ANCHOR};case"bottom":return {marginLeft:MIN_DISTANCE_FROM_CORNERS,marginRight:MIN_DISTANCE_FROM_CORNERS,paddingTop:DISTANCE_FROM_ANCHOR};case"left":return {marginTop:MIN_DISTANCE_FROM_CORNERS,marginBottom:MIN_DISTANCE_FROM_CORNERS,paddingRight:DISTANCE_FROM_ANCHOR};default:throw new Error(`Unknown placement: ${placement}`)}}_renderArrow(){const{trimlinePoints,points,height,width}=this._calculateDimensionsFromPlacement();const{color:arrowColor,show}=this.props;if(!show){return jsxRuntime.jsx(wonderBlocksCore.View,{"aria-hidden":true,style:{inlineSize:height,flexBasis:height,flexShrink:0}})}return jsxRuntime.jsxs("svg",{className:aphrodite.css(styles$2.arrow),style:this._getArrowStyle(),width:width,height:height,"aria-hidden":true,children:[this._maybeRenderDropshadow(points),jsxRuntime.jsx("polyline",{fill:wonderBlocksTokens.color[arrowColor],stroke:wonderBlocksTokens.color[arrowColor],points:points.join(" ")}),jsxRuntime.jsx("polyline",{fill:wonderBlocksTokens.color[arrowColor],points:points.join(" "),stroke:wonderBlocksTokens.semanticColor.core.shadow.transparent.mid}),jsxRuntime.jsx("polyline",{stroke:wonderBlocksTokens.color[arrowColor],points:trimlinePoints.join(" ")})]})}render(){const{offset,placement,updateRef}=this.props;return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$2.tailContainer,{...offset},this._getContainerStyle()],"data-placement":placement,ref:updateRef,children:this._renderArrow()})}}TooltipTail.defaultProps={color:"white",show:true};const DISTANCE_FROM_ANCHOR=8;const MIN_DISTANCE_FROM_CORNERS=8;const ARROW_WIDTH=24;const ARROW_HEIGHT=12;const styles$2=aphrodite.StyleSheet.create({tailContainer:{position:"relative",pointerEvents:"none"},arrow:{overflow:"visible"}});
|
|
44
43
|
|
|
45
44
|
class TooltipBubble extends React__namespace.Component{_setActiveState(active){this.setState({active});this.props.onActiveChanged(active);}render(){const{id,children,updateBubbleRef,placement,isReferenceHidden,style,updateTailRef,tailOffset,backgroundColor}=this.props;return jsxRuntime.jsxs(wonderBlocksCore.View,{id:id,role:"tooltip","data-placement":placement,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,ref:updateBubbleRef,style:[isReferenceHidden&&styles$1.hide,styles$1.bubble,styles$1[`content-${placement}`],style],children:[jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.content,backgroundColor&&{backgroundColor:wonderBlocksTokens.color[backgroundColor]}],children:children}),jsxRuntime.jsx(TooltipTail,{updateRef:updateTailRef,placement:placement,offset:tailOffset,color:backgroundColor})]})}constructor(...args){super(...args),this.state={active:false},this.handleMouseEnter=()=>{this._setActiveState(true);},this.handleMouseLeave=()=>{this.props.onActiveChanged(false);};}}const styles$1=aphrodite.StyleSheet.create({bubble:{position:"absolute"},hide:{pointerEvents:"none",opacity:0,backgroundColor:"transparent",color:"transparent"},"content-top":{flexDirection:"column"},"content-right":{flexDirection:"row-reverse"},"content-bottom":{flexDirection:"column-reverse"},"content-left":{flexDirection:"row"},content:{maxWidth:472,borderRadius:wonderBlocksTokens.border.radius.radius_040,border:`solid 1px ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`,backgroundColor:wonderBlocksTokens.semanticColor.core.background.base.default,boxShadow:wonderBlocksTokens.boxShadow.mid,justifyContent:"center"}});
|
|
46
45
|
|
|
47
|
-
class TooltipContent extends React__namespace.Component{_renderTitle(){const{title}=this.props;if(title){if(typeof title==="string"){return jsxRuntime.jsx(wonderBlocksTypography.Heading,{size:"medium",children:title})}else {return title}}return null}_renderChildren(){const{children}=this.props;if(typeof children==="string"){return jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"span",children:children})}else {return children}}render(){const title=this._renderTitle();const children=this._renderChildren();const containerStyle=title?styles.withTitle:styles.withoutTitle;return jsxRuntime.jsxs(wonderBlocksCore.View,{style:[containerStyle,this.props.contentStyle],testId:this.props.testId,children:[title,title
|
|
46
|
+
class TooltipContent extends React__namespace.Component{_renderTitle(){const{title}=this.props;if(title){if(typeof title==="string"){return jsxRuntime.jsx(wonderBlocksTypography.Heading,{size:"medium",children:title})}else {return title}}return null}_renderChildren(){const{children}=this.props;if(typeof children==="string"){return jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"span",children:children})}else {return children}}render(){const title=this._renderTitle();const children=this._renderChildren();const containerStyle=title?styles.withTitle:styles.withoutTitle;return jsxRuntime.jsxs(wonderBlocksCore.View,{style:[containerStyle,this.props.contentStyle],testId:this.props.testId,children:[title,title?jsxRuntime.jsx(wonderBlocksCore.View,{children:children}):children]})}}const styles=aphrodite.StyleSheet.create({withoutTitle:{padding:`${wonderBlocksTokens.sizing.size_100} ${wonderBlocksTokens.sizing.size_160}`},withTitle:{padding:wonderBlocksTokens.sizing.size_160,gap:wonderBlocksTokens.sizing.size_040}});
|
|
48
47
|
|
|
49
48
|
var e=n=>null==n||"object"!=typeof n?n:Array.isArray(n)?n.map(e):Object.keys(n).reduce((t,r)=>(t[r]=e(n[r]),t),{}),t=Object.freeze({Unknown:"Unknown",Internal:"Internal",InvalidInput:"InvalidInput",InvalidUse:"InvalidUse",NotFound:"NotFound",NotAllowed:"NotAllowed",Unauthorized:"Unauthorized",NotImplemented:"NotImplemented"});function r(e,n,t){return (n=function(e){var n=function(e,n){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n);if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return ("string"===n?String:Number)(e)}(e,"string");return "symbol"==typeof n?n:n+""}(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}class o{constructor(e,n){r(this,"_name",void 0),r(this,"_message",void 0),this._name=e,this._message=n;}get message(){return this._message}get name(){return this._name}get messageWithName(){return "".concat(this.name,": ").concat(this.message)}static fromConsequenceAndCause(e,n){if("production"!==process.env.NODE_ENV){if(!(e instanceof o))throw new Error("consequence must be an instance of ErrorInfo");if(!(n instanceof o))throw new Error("cause must be an instance of ErrorInfo");if(n===e)throw new Error("cause and consequence must be different")}return new o(e.name,((e,n)=>{var t=e=>(null==e?void 0:e.trim())||"(empty message)",r=t(e);return null==n?r:"".concat(r,"\n\tcaused by\n\t\t").concat(t(n))})(e.message,n.messageWithName))}static normalize(e){var n;if("production"!==process.env.NODE_ENV&&!(e instanceof Error))throw new Error("Error must be an instance of Error");var t=null!==(n=e.message.toString().split("\n").find(e=>e.trim().length))&&void 0!==n?n:"(empty message)";return new o(e.name,t)}static from(e){if("production"!==process.env.NODE_ENV&&!(e instanceof Error))throw new Error("Error must be an instance of Error");return new o(e.name,e.message)}}class s extends Error{constructor(n){var s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:t.Unknown,{cause:i,prefix:a,name:u,metadata:c}=arguments.length>2&&void 0!==arguments[2]?arguments[2]:Object.freeze({});if("production"!==process.env.NODE_ENV){if(i&&!(i instanceof Error))throw new Error("cause must be an instance of Error");if(null!=u&&/\s/g.test(u))throw new Error("name must not contain whitespace");if(/\s/g.test(s))throw new Error("kind must not contain whitespace");if(null!=a&&/\s/g.test(a))throw new Error("prefix must not contain whitespace")}if(super(n),r(this,"kind",void 0),r(this,"originalMessage",void 0),r(this,"metadata",void 0),r(this,"cause",void 0),this.originalMessage=n,this.metadata=(n=>{if(null==n)return n;var t=e(n);return Object.freeze(t)})(c),this.name="".concat(null!=a?a:"").concat(s).concat(null!=u?u:"","Error"),this.kind=s,this.cause=i,null!=i){var l=o.normalize(this),f=o.from(i),d=o.fromConsequenceAndCause(l,f);this.message=d.message;}}}Object.freeze({ConsequenceFirst:"consequence-first",CauseFirst:"cause-first"});class g extends s{constructor(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:t.InvalidInput,r=arguments.length>2?arguments[2]:void 0;super("Unhandled case for '".concat(e,"'"),n,r);}}(function(e){return e.Production="production",e.Development="development",e.Test="test",e})({});
|
|
50
49
|
|
|
51
50
|
class RefTracker{constructor(){this.updateRef=ref=>{if(ref){const domNode=ReactDOM__namespace.findDOMNode(ref);if(domNode instanceof HTMLElement&&domNode!==this._lastRef){this._lastRef=domNode;this._targetFn?.(domNode);}}};this.setCallback=targetFn=>{if(this._targetFn!==targetFn){if(targetFn&&typeof targetFn!=="function"){throw new Error("targetFn must be a function")}this._targetFn=targetFn||undefined;if(this._lastRef&&this._targetFn){this._targetFn(this._lastRef);}}};}}
|
|
52
51
|
|
|
53
|
-
const filterPopperPlacement=placement=>{switch(placement){case"auto":case"auto-start":case"auto-end":case"top":case"top-start":case"top-end":return "top";case"bottom":case"bottom-start":case"bottom-end":return "bottom";case"right":case"right-start":case"right-end":return "right";case"left":case"left-start":case"left-end":return "left";default:throw new g(placement)}};function _modifyPosition({state}){const popperHeight=state.rects.popper.height+state.rects.reference.height;const minHeight=document.documentElement.clientHeight;if(minHeight<popperHeight&&state.modifiersData.hide){state.modifiersData.hide={...state.modifiersData.hide,isReferenceHidden:false};}}const smallViewportModifier={name:"smallViewport",enabled:true,phase:"main",fn:_modifyPosition};class TooltipPopper extends React__namespace.Component{componentDidMount(){const{anchorElement,autoUpdate}=this.props;if(!anchorElement||!autoUpdate){return}this._observer=new MutationObserver(()=>{this._popperUpdate?.();});this._observer.observe(anchorElement,{attributes:true,childList:true,subtree:true});}componentWillUnmount(){this._observer?.disconnect();}_renderPositionedContent(popperProps){const{children}=this.props;const{isReady}=this.state;const placement=filterPopperPlacement(popperProps.placement)||this.props.placement;this._bubbleRefTracker.setCallback(popperProps.ref);this._tailRefTracker.setCallback(popperProps.arrowProps.ref);this._popperUpdate=popperProps.update;const bubbleProps={placement,style:{top:popperProps.style.top,left:popperProps.style.left,bottom:popperProps.style.bottom,right:popperProps.style.right,position:popperProps.style.position,transform:popperProps.style.transform,visibility:!isReady?"hidden":undefined},updateBubbleRef:this._bubbleRefTracker.updateRef,tailOffset:{bottom:popperProps.arrowProps.style.bottom,right:popperProps.arrowProps.style.right,top:popperProps.arrowProps.style.top,left:popperProps.arrowProps.style.left,transform:popperProps.arrowProps.style.transform},updateTailRef:this._tailRefTracker.updateRef,isReferenceHidden:popperProps.isReferenceHidden};return children(bubbleProps)}render(){const{anchorElement,placement,rootBoundary,viewportPadding}=this.props;const modifiers=[smallViewportModifier];if(rootBoundary==="viewport"){modifiers.push({name:"preventOverflow",options:{rootBoundary:"viewport",padding:viewportPadding}});}else {modifiers.push({name:"flip",options:{rootBoundary:"document"}});}return jsxRuntime.jsx(reactPopper.Popper,{referenceElement:anchorElement,strategy:"fixed",placement:placement,modifiers:modifiers,onFirstUpdate:this.handleFirstUpdate,children:props=>this._renderPositionedContent(props)})}constructor(props){super(props),this._bubbleRefTracker=new RefTracker,this._tailRefTracker=new RefTracker,this._observer=null,this._popperUpdate=null,this.handleFirstUpdate=()=>{this.setState({isReady:true});};this.state={isReady:false};}}TooltipPopper.defaultProps={rootBoundary:"viewport",viewportPadding:
|
|
52
|
+
const filterPopperPlacement=placement=>{switch(placement){case"auto":case"auto-start":case"auto-end":case"top":case"top-start":case"top-end":return "top";case"bottom":case"bottom-start":case"bottom-end":return "bottom";case"right":case"right-start":case"right-end":return "right";case"left":case"left-start":case"left-end":return "left";default:throw new g(placement)}};function _modifyPosition({state}){const popperHeight=state.rects.popper.height+state.rects.reference.height;const minHeight=document.documentElement.clientHeight;if(minHeight<popperHeight&&state.modifiersData.hide){state.modifiersData.hide={...state.modifiersData.hide,isReferenceHidden:false};}}const smallViewportModifier={name:"smallViewport",enabled:true,phase:"main",fn:_modifyPosition};const VIEWPORT_PADDING=parseInt(wonderBlocksTokens.remToPx(wonderBlocksTokens.tokenValue(wonderBlocksTokens.sizing.size_120)));class TooltipPopper extends React__namespace.Component{componentDidMount(){const{anchorElement,autoUpdate}=this.props;if(!anchorElement||!autoUpdate){return}this._observer=new MutationObserver(()=>{this._popperUpdate?.();});this._observer.observe(anchorElement,{attributes:true,childList:true,subtree:true});}componentWillUnmount(){this._observer?.disconnect();}_renderPositionedContent(popperProps){const{children}=this.props;const{isReady}=this.state;const placement=filterPopperPlacement(popperProps.placement)||this.props.placement;this._bubbleRefTracker.setCallback(popperProps.ref);this._tailRefTracker.setCallback(popperProps.arrowProps.ref);this._popperUpdate=popperProps.update;const bubbleProps={placement,style:{top:popperProps.style.top,left:popperProps.style.left,bottom:popperProps.style.bottom,right:popperProps.style.right,position:popperProps.style.position,transform:popperProps.style.transform,visibility:!isReady?"hidden":undefined},updateBubbleRef:this._bubbleRefTracker.updateRef,tailOffset:{bottom:popperProps.arrowProps.style.bottom,right:popperProps.arrowProps.style.right,top:popperProps.arrowProps.style.top,left:popperProps.arrowProps.style.left,transform:popperProps.arrowProps.style.transform},updateTailRef:this._tailRefTracker.updateRef,isReferenceHidden:popperProps.isReferenceHidden};return children(bubbleProps)}render(){const{anchorElement,placement,rootBoundary,viewportPadding}=this.props;const modifiers=[smallViewportModifier];if(rootBoundary==="viewport"){modifiers.push({name:"preventOverflow",options:{rootBoundary:"viewport",padding:viewportPadding}});}else {modifiers.push({name:"flip",options:{rootBoundary:"document"}});}return jsxRuntime.jsx(reactPopper.Popper,{referenceElement:anchorElement,strategy:"fixed",placement:placement,modifiers:modifiers,onFirstUpdate:this.handleFirstUpdate,children:props=>this._renderPositionedContent(props)})}constructor(props){super(props),this._bubbleRefTracker=new RefTracker,this._tailRefTracker=new RefTracker,this._observer=null,this._popperUpdate=null,this.handleFirstUpdate=()=>{this.setState({isReady:true});};this.state={isReady:false};}}TooltipPopper.defaultProps={rootBoundary:"viewport",viewportPadding:VIEWPORT_PADDING};
|
|
54
53
|
|
|
55
54
|
class Tooltip extends React__namespace.Component{static getDerivedStateFromProps(props,state){return {active:typeof props.opened==="boolean"?props.opened:state.active}}_updateAnchorElement(ref){if(ref&&ref!==this.state.anchorElement){this.setState({anchorElement:ref});}}_renderBubbleContent(){const{title,content,contentStyle,testId}=this.props;if(typeof content==="string"){return jsxRuntime.jsx(TooltipContent,{title:title,contentStyle:contentStyle,testId:testId?`${testId}-content`:undefined,children:content})}else if(title){return React__namespace.cloneElement(content,{title})}else {return content}}_renderPopper(ariaContentId){const{backgroundColor,placement}=this.props;return jsxRuntime.jsx(TooltipPopper,{anchorElement:this.state.anchorElement,placement:placement,autoUpdate:this.props.autoUpdate,viewportPadding:this.props.viewportPadding,children:props=>jsxRuntime.jsx(TooltipBubble,{id:ariaContentId,style:props.style,backgroundColor:backgroundColor,tailOffset:props.tailOffset,isReferenceHidden:props.isReferenceHidden,placement:props.placement,updateTailRef:props.updateTailRef,updateBubbleRef:props.updateBubbleRef,onActiveChanged:active=>this.setState({activeBubble:active}),children:this._renderBubbleContent()})})}_getHost(){const{anchorElement}=this.state;return wonderBlocksModal.maybeGetPortalMountedModalHostElement(anchorElement)||document.body}_renderTooltipAnchor(uniqueId){const{autoUpdate,children,forceAnchorFocusivity}=this.props;const{active,activeBubble}=this.state;const popperHost=this._getHost();const shouldAnchorExist=autoUpdate?this.state.anchorElement:true;const shouldBeVisible=popperHost&&(active||activeBubble)&&shouldAnchorExist;const ariaContentId=`${uniqueId}-aria-content`;return jsxRuntime.jsxs(React__namespace.Fragment,{children:[jsxRuntime.jsx(TooltipAnchor,{forceAnchorFocusivity:forceAnchorFocusivity,anchorRef:r=>this._updateAnchorElement(r),onActiveChanged:active=>this.setState({active}),"aria-describedby":shouldBeVisible?ariaContentId:undefined,children:children}),shouldBeVisible&&ReactDOM__namespace.createPortal(this._renderPopper(ariaContentId),popperHost)]})}render(){const{id}=this.props;return jsxRuntime.jsx(wonderBlocksCore.Id,{id:id,children:uniqueId=>this._renderTooltipAnchor(uniqueId)})}constructor(...args){super(...args),this.state={active:false,activeBubble:false};}}Tooltip.defaultProps={forceAnchorFocusivity:true,placement:"top"};
|
|
56
55
|
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "",
|
|
4
4
|
"author": "Khan Academy",
|
|
5
5
|
"license": "MIT",
|
|
6
|
-
"version": "4.1.
|
|
6
|
+
"version": "4.1.73",
|
|
7
7
|
"publishConfig": {
|
|
8
8
|
"access": "public"
|
|
9
9
|
},
|
|
@@ -21,10 +21,10 @@
|
|
|
21
21
|
"types": "dist/index.d.ts",
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@khanacademy/wonder-blocks-core": "12.4.3",
|
|
24
|
-
"@khanacademy/wonder-blocks-layout": "3.1.
|
|
25
|
-
"@khanacademy/wonder-blocks-modal": "8.6.
|
|
26
|
-
"@khanacademy/wonder-blocks-tokens": "16.
|
|
27
|
-
"@khanacademy/wonder-blocks-typography": "4.3.
|
|
24
|
+
"@khanacademy/wonder-blocks-layout": "3.1.49",
|
|
25
|
+
"@khanacademy/wonder-blocks-modal": "8.6.4",
|
|
26
|
+
"@khanacademy/wonder-blocks-tokens": "16.4.0",
|
|
27
|
+
"@khanacademy/wonder-blocks-typography": "4.3.2"
|
|
28
28
|
},
|
|
29
29
|
"peerDependencies": {
|
|
30
30
|
"@popperjs/core": "^2.10.1",
|