qpp-style 9.26.1 → 9.28.0

package/coverage/lcov-report/react/components/SideNav/Chart/index.js.html

@@ -79,7 +79,7 @@ export default ScoreChart;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Mar 06 2023 14:49:52 GMT-0800 (Pacific Standard Time)
+                at Tue Mar 07 2023 15:53:41 GMT-0500 (Eastern Standard Time)
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/SideNav/Content/LevelOneContent.jsx.html

@@ -667,7 +667,7 @@ export default LevelOneContent;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Mar 06 2023 14:49:52 GMT-0800 (Pacific Standard Time)
+                at Tue Mar 07 2023 15:53:41 GMT-0500 (Eastern Standard Time)
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/SideNav/Content/LevelTwoContent.jsx.html

@@ -718,7 +718,7 @@ export default LevelTwoContent;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Mar 06 2023 14:49:52 GMT-0800 (Pacific Standard Time)
+                at Tue Mar 07 2023 15:53:41 GMT-0500 (Eastern Standard Time)
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/SideNav/Content/SelectRole/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Mar 06 2023 14:49:52 GMT-0800 (Pacific Standard Time)
+                at Tue Mar 07 2023 15:53:41 GMT-0500 (Eastern Standard Time)
             </div>
         <script src="../../../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/SideNav/Content/SelectRole/index.js.html

@@ -301,7 +301,7 @@ export default SelectRole;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Mar 06 2023 14:49:52 GMT-0800 (Pacific Standard Time)
+                at Tue Mar 07 2023 15:53:41 GMT-0500 (Eastern Standard Time)
             </div>
         <script src="../../../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/SideNav/Content/SelectRole/utils.js.html

@@ -490,7 +490,7 @@ export const updateLocalStorageRoleState = <span class="fstat-no" title="functio
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Mar 06 2023 14:49:52 GMT-0800 (Pacific Standard Time)
+                at Tue Mar 07 2023 15:53:41 GMT-0500 (Eastern Standard Time)
             </div>
         <script src="../../../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/SideNav/Content/index.html

@@ -131,7 +131,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Mar 06 2023 14:49:52 GMT-0800 (Pacific Standard Time)
+                at Tue Mar 07 2023 15:53:41 GMT-0500 (Eastern Standard Time)
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/SideNav/Content/index.js.html

@@ -82,7 +82,7 @@ export { LevelOneContent, LevelTwoContent };
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Mar 06 2023 14:49:52 GMT-0800 (Pacific Standard Time)
+                at Tue Mar 07 2023 15:53:41 GMT-0500 (Eastern Standard Time)
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/SideNav/Details/IndividualDetails.jsx.html

@@ -124,7 +124,7 @@ export default IndividualDetails;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Mar 06 2023 14:49:52 GMT-0800 (Pacific Standard Time)
+                at Tue Mar 07 2023 15:53:41 GMT-0500 (Eastern Standard Time)
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/SideNav/Details/PracticeDetails.jsx.html

@@ -205,7 +205,7 @@ export default PracticeDetails;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Mar 06 2023 14:49:52 GMT-0800 (Pacific Standard Time)
+                at Tue Mar 07 2023 15:53:41 GMT-0500 (Eastern Standard Time)
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/SideNav/Details/index.html

@@ -131,7 +131,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Mar 06 2023 14:49:52 GMT-0800 (Pacific Standard Time)
+                at Tue Mar 07 2023 15:53:41 GMT-0500 (Eastern Standard Time)
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/SideNav/Details/index.js.html

@@ -82,7 +82,7 @@ export { IndividualDetails, PracticeDetails };
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Mar 06 2023 14:49:52 GMT-0800 (Pacific Standard Time)
+                at Tue Mar 07 2023 15:53:41 GMT-0500 (Eastern Standard Time)
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/SideNav/Links/CmsSwitchLink.jsx.html

@@ -193,7 +193,7 @@ export default CmsSwitchLink;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Mar 06 2023 14:49:52 GMT-0800 (Pacific Standard Time)
+                at Tue Mar 07 2023 15:53:41 GMT-0500 (Eastern Standard Time)
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/SideNav/Links/NavItemInline.jsx.html

@@ -232,7 +232,7 @@ export default NavItemInline;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Mar 06 2023 14:49:52 GMT-0800 (Pacific Standard Time)
+                at Tue Mar 07 2023 15:53:41 GMT-0500 (Eastern Standard Time)
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/SideNav/Links/NavLinkContainer.jsx.html

@@ -184,7 +184,7 @@ export default NavLinkContainer;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Mar 06 2023 14:49:52 GMT-0800 (Pacific Standard Time)
+                at Tue Mar 07 2023 15:53:41 GMT-0500 (Eastern Standard Time)
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/SideNav/Links/NavLinkDrawer.jsx.html

@@ -898,7 +898,7 @@ export default NavLinkDrawer;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Mar 06 2023 14:49:52 GMT-0800 (Pacific Standard Time)
+                at Tue Mar 07 2023 15:53:41 GMT-0500 (Eastern Standard Time)
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/SideNav/Links/NavLinkInline.jsx.html

@@ -406,7 +406,7 @@ export default NavLinkInline;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Mar 06 2023 14:49:52 GMT-0800 (Pacific Standard Time)
+                at Tue Mar 07 2023 15:53:41 GMT-0500 (Eastern Standard Time)
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/SideNav/Links/NavLinkToggle.jsx.html

@@ -172,7 +172,7 @@ export default NavLinkToggle;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Mar 06 2023 14:49:52 GMT-0800 (Pacific Standard Time)
+                at Tue Mar 07 2023 15:53:41 GMT-0500 (Eastern Standard Time)
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/SideNav/Links/index.html

@@ -191,7 +191,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Mar 06 2023 14:49:52 GMT-0800 (Pacific Standard Time)
+                at Tue Mar 07 2023 15:53:41 GMT-0500 (Eastern Standard Time)
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/SideNav/Links/index.js.html

@@ -109,7 +109,7 @@ export {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Mar 06 2023 14:49:52 GMT-0800 (Pacific Standard Time)
+                at Tue Mar 07 2023 15:53:41 GMT-0500 (Eastern Standard Time)
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/SideNav/UI/SideNavUI.jsx.html

@@ -1072,7 +1072,7 @@ export default withGetConfig(SideNavUI, {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Mar 06 2023 14:49:52 GMT-0800 (Pacific Standard Time)
+                at Tue Mar 07 2023 15:53:41 GMT-0500 (Eastern Standard Time)
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/SideNav/UI/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Mar 06 2023 14:49:52 GMT-0800 (Pacific Standard Time)
+                at Tue Mar 07 2023 15:53:41 GMT-0500 (Eastern Standard Time)
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/SideNav/UI/index.js.html

@@ -79,7 +79,7 @@ export { SideNavUI };
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Mar 06 2023 14:49:52 GMT-0800 (Pacific Standard Time)
+                at Tue Mar 07 2023 15:53:41 GMT-0500 (Eastern Standard Time)
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/SideNav/helpers.js.html

@@ -1123,7 +1123,7 @@ module.exports = {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Mar 06 2023 14:49:52 GMT-0800 (Pacific Standard Time)
+                at Tue Mar 07 2023 15:53:41 GMT-0500 (Eastern Standard Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/SideNav/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Mar 06 2023 14:49:52 GMT-0800 (Pacific Standard Time)
+                at Tue Mar 07 2023 15:53:41 GMT-0500 (Eastern Standard Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/SideNav/index.js.html

@@ -229,7 +229,7 @@ export default SideNav;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Mar 06 2023 14:49:52 GMT-0800 (Pacific Standard Time)
+                at Tue Mar 07 2023 15:53:41 GMT-0500 (Eastern Standard Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/Tooltip/Tooltip.jsx.html

@@ -25,28 +25,28 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>16/16</span>
+                <span class='fraction'>7/7</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>7/7</span>
+                <span class='fraction'>0/0</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>2/2</span>
+                <span class='fraction'>1/1</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>16/16</span>
+                <span class='fraction'>7/7</span>
             </div>
         
             
@@ -112,46 +112,8 @@
 <a name='L47'></a><a href='#L47'>47</a>
 <a name='L48'></a><a href='#L48'>48</a>
 <a name='L49'></a><a href='#L49'>49</a>
-<a name='L50'></a><a href='#L50'>50</a>
-<a name='L51'></a><a href='#L51'>51</a>
-<a name='L52'></a><a href='#L52'>52</a>
-<a name='L53'></a><a href='#L53'>53</a>
-<a name='L54'></a><a href='#L54'>54</a>
-<a name='L55'></a><a href='#L55'>55</a>
-<a name='L56'></a><a href='#L56'>56</a>
-<a name='L57'></a><a href='#L57'>57</a>
-<a name='L58'></a><a href='#L58'>58</a>
-<a name='L59'></a><a href='#L59'>59</a>
-<a name='L60'></a><a href='#L60'>60</a>
-<a name='L61'></a><a href='#L61'>61</a>
-<a name='L62'></a><a href='#L62'>62</a>
-<a name='L63'></a><a href='#L63'>63</a>
-<a name='L64'></a><a href='#L64'>64</a>
-<a name='L65'></a><a href='#L65'>65</a>
-<a name='L66'></a><a href='#L66'>66</a>
-<a name='L67'></a><a href='#L67'>67</a>
-<a name='L68'></a><a href='#L68'>68</a>
-<a name='L69'></a><a href='#L69'>69</a>
-<a name='L70'></a><a href='#L70'>70</a>
-<a name='L71'></a><a href='#L71'>71</a>
-<a name='L72'></a><a href='#L72'>72</a>
-<a name='L73'></a><a href='#L73'>73</a>
-<a name='L74'></a><a href='#L74'>74</a>
-<a name='L75'></a><a href='#L75'>75</a>
-<a name='L76'></a><a href='#L76'>76</a>
-<a name='L77'></a><a href='#L77'>77</a>
-<a name='L78'></a><a href='#L78'>78</a>
-<a name='L79'></a><a href='#L79'>79</a>
-<a name='L80'></a><a href='#L80'>80</a>
-<a name='L81'></a><a href='#L81'>81</a>
-<a name='L82'></a><a href='#L82'>82</a>
-<a name='L83'></a><a href='#L83'>83</a>
-<a name='L84'></a><a href='#L84'>84</a>
-<a name='L85'></a><a href='#L85'>85</a>
-<a name='L86'></a><a href='#L86'>86</a>
-<a name='L87'></a><a href='#L87'>87</a>
-<a name='L88'></a><a href='#L88'>88</a>
-<a name='L89'></a><a href='#L89'>89</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L50'></a><a href='#L50'>50</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -162,47 +124,13 @@
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">35x</span>
-<span class="cline-any cline-yes">35x</span>
-<span class="cline-any cline-yes">35x</span>
-<span class="cline-any cline-yes">35x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">35x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">32x</span>
-<span class="cline-any cline-yes">3x</span>
-<span class="cline-any cline-yes">3x</span>
-<span class="cline-any cline-yes">3x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">3x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">35x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">22x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">22x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -210,6 +138,7 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">22x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -232,98 +161,52 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { cloneElement, useLayoutEffect, useRef } from 'react';
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React from 'react';
 import PropTypes from 'prop-types';
-import positionTip, { positionTriangle } from './position';
-import { useTooltip, TooltipPopup } from '@reach/tooltip';
-import { Portal } from '@reach/portal';
+import {
+  Tooltip as TooltipAriaKit,
+  TooltipAnchor,
+  TooltipArrow,
+  useTooltipState
+} from 'ariakit/tooltip'
 &nbsp;
-// TODO: investigate ways to allow more styling via css? the triangle
-// positioning effect issue may need to be resolved to allow for this.
 const TEXT_COLOR = '#FFF';
 const BACKGROUND_COLOR = '#333';
 &nbsp;
-/**
- * Generic styled tooltip component.
- * Corresponding styles: /styles/components/_tooltip.scss
- *
- * Extends implementation from @reach/tooltip:
- * https://reacttraining.com/reach-ui/tooltip
- */
-const Tooltip = ({ children, label, ariaLabel, DEBUG_STYLE }) =&gt; {
-  const [trigger, tooltip] = useTooltip({ DEBUG_STYLE });
-  const { isVisible, triggerRect } = tooltip;
-  const tooltipPopupRef = useRef();
-  const triangleRef = useRef();
-&nbsp;
-  useLayoutEffect(() =&gt; {
-    // For some reason, the forwardRef for the tooltipPopup points to an undefined
-    // dom element when we first render the portal containing the triangle. Using
-    // an effect here will ensure that the ref is available when applying styles.
-    // TODO: investigate and make issue for @reach-ui/tooltip?
-    if (isVisible &amp;&amp; tooltipPopupRef.current &amp;&amp; triggerRect) {
-      const tooltipRect = tooltipPopupRef.current.getBoundingClientRect();
-      const positionCssText = positionTriangle(triggerRect, tooltipRect);
-      const cssText = `
-                  position: absolute;
-                  width: 0;
-                  height: 0;
-                  ${positionCssText}
-                  border-top-color: ${BACKGROUND_COLOR};
-                  border-bottom-color: ${BACKGROUND_COLOR};
-                  z-index: 1;
-                `;
-      triangleRef.current.style.cssText = cssText;
-    }
-  });
+const Tooltip = ({
+  children,
+  label,
+}) =&gt; {
+  const tooltip = useTooltipState()
 &nbsp;
+  const cssStyles = {
+    maxWidth: '300px',
+    padding: '8px',
+    borderRadius: '4px',
+    fontSize: '0.9rem',
+    backgroundColor: BACKGROUND_COLOR,
+    color: TEXT_COLOR,
+  }
   return (
     &lt;&gt;
-      {cloneElement(children, trigger)}
-      &lt;TooltipPopup
-        {...tooltip}
-        label={label}
-        ariaLabel={ariaLabel}
-        style={{
-          background: BACKGROUND_COLOR,
-          color: TEXT_COLOR,
-        }}
-        ref={tooltipPopupRef}
-        position={positionTip}
-      /&gt;
-      {isVisible &amp;&amp; (
-        &lt;Portal&gt;
-          &lt;div
-            ref={triangleRef}
-            style={{
-              position: 'absolute',
-              width: 0,
-              height: 0,
-            }}
-          /&gt;
-        &lt;/Portal&gt;
-      )}
+      &lt;TooltipAnchor as={'span'} state={ tooltip } className='tooltip-anchor'&gt;
+        { children }
+      &lt;/TooltipAnchor&gt;
+      &lt;TooltipAriaKit
+        state={ tooltip }
+        className='tooltip-content'
+        style={ cssStyles }
+      &gt;
+        { label }
+        &lt;TooltipArrow /&gt;
+      &lt;/TooltipAriaKit&gt;
     &lt;/&gt;
-  );
+  )
 };
 &nbsp;
 Tooltip.propTypes = {
   children: PropTypes.node.isRequired,
   label: PropTypes.node.isRequired,
-  ariaLabel: PropTypes.string,
-  DEBUG_STYLE: PropTypes.bool,
-};
-&nbsp;
-Tooltip.defaultProps = {
-  ariaLabel: undefined,
-  DEBUG_STYLE: undefined,
 };
 &nbsp;
 export default Tooltip;
@@ -334,7 +217,7 @@ export default Tooltip;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Mar 06 2023 14:49:52 GMT-0800 (Pacific Standard Time)
+                at Mon Oct 24 2022 17:03:25 GMT-0400 (Eastern Daylight Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/Tooltip/index.html

@@ -25,28 +25,28 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>37/37</span>
+                <span class='fraction'>28/28</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>19/19</span>
+                <span class='fraction'>12/12</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>5/5</span>
+                <span class='fraction'>4/4</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>37/37</span>
+                <span class='fraction'>28/28</span>
             </div>
         
             
@@ -84,13 +84,13 @@
 	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
 	</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="16" class="abs high">16/16</td>
-	<td data-value="100" class="pct high">100%</td>
 	<td data-value="7" class="abs high">7/7</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="2" class="abs high">2/2</td>
+	<td data-value="0" class="abs high">0/0</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="1" class="abs high">1/1</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="16" class="abs high">16/16</td>
+	<td data-value="7" class="abs high">7/7</td>
 	</tr>
 
 <tr>
@@ -131,7 +131,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Mar 06 2023 14:49:52 GMT-0800 (Pacific Standard Time)
+                at Mon Oct 24 2022 17:03:25 GMT-0400 (Eastern Daylight Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>