@khanacademy/wonder-blocks-tooltip 2.4.2 → 2.5.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @khanacademy/wonder-blocks-tooltip
 
+## 2.5.0
+
+### Minor Changes
+
+-   badad6ee: Adds a `viewportPadding` prop to provide spacing between the popper and the viewport edges. If this prop is not provided, default spacing is applied.
+
+### Patch Changes
+
+-   fcab789b: Only show the `TooltipPopper` contents once the popper has positioned itself. This fixes the issue where Tooltips are initially rendered in the top left corner for a brief moment before moving to the correct position (which was causing a flickering effect).
+
+## 2.4.3
+
+### Patch Changes
+
+-   02a1b298: Make sure we don't package tsconfig and tsbuildinfo files
+-   Updated dependencies [02a1b298]
+    -   @khanacademy/wonder-blocks-core@7.0.1
+    -   @khanacademy/wonder-blocks-layout@2.2.1
+    -   @khanacademy/wonder-blocks-modal@5.1.12
+    -   @khanacademy/wonder-blocks-tokens@2.0.1
+    -   @khanacademy/wonder-blocks-typography@2.1.16
+
 ## 2.4.2
 
 ### Patch Changes

package/dist/components/tooltip-popper.d.ts

@@ -34,16 +34,30 @@ type Props = {
      * on where there is available room within the document body.
      */
     rootBoundary?: RootBoundary;
+    /**
+     * If `rootBoundary` is `viewport`, this padding value is used to provide
+     * spacing between the popper and the viewport. If not provided, default
+     * spacing of 12px is applied.
+     */
+    viewportPadding?: number;
+};
+type State = {
+    /**
+     * If the popper is ready to show content.
+     */
+    isReady: boolean;
 };
 type DefaultProps = {
     rootBoundary: Props["rootBoundary"];
+    viewportPadding: Props["viewportPadding"];
 };
 /**
  * A component that wraps react-popper's Popper component to provide a
  * consistent interface for positioning floating elements.
  */
-export default class TooltipPopper extends React.Component<Props> {
+export default class TooltipPopper extends React.Component<Props, State> {
     static defaultProps: DefaultProps;
+    constructor(props: Props);
     /**
      * Automatically updates the position of the floating element when necessary
      * to ensure it stays anchored.
@@ -75,6 +89,7 @@ export default class TooltipPopper extends React.Component<Props> {
      */
     _popperUpdate: PopperUpdateFn | null;
     _renderPositionedContent(popperProps: PopperChildrenProps): React.ReactNode;
+    handleFirstUpdate: () => void;
     render(): React.ReactNode;
 }
 export {};

package/dist/components/tooltip.d.ts

@@ -101,6 +101,12 @@ type Props = AriaProps & Readonly<{
      * Optional background color.
      */
     backgroundColor?: keyof typeof color;
+    /**
+     * If `rootBoundary` is `viewport`, this padding value is used to provide
+     * spacing between the popper and the viewport. If not provided, default
+     * spacing of 12px is applied.
+     */
+    viewportPadding?: number;
 }>;
 type State = Readonly<{
     /**

package/dist/es/index.js

@@ -658,12 +658,20 @@ const smallViewportModifier = {
   fn: _modifyPosition
 };
 class TooltipPopper extends React.Component {
-  constructor(...args) {
-    super(...args);
+  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
+    };
   }
   componentDidMount() {
     const {
@@ -691,6 +699,9 @@ class TooltipPopper extends React.Component {
     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);
@@ -703,7 +714,8 @@ class TooltipPopper extends React.Component {
         bottom: popperProps.style.bottom,
         right: popperProps.style.right,
         position: popperProps.style.position,
-        transform: popperProps.style.transform
+        transform: popperProps.style.transform,
+        visibility: !isReady ? "hidden" : undefined
       },
       updateBubbleRef: this._bubbleRefTracker.updateRef,
       tailOffset: {
@@ -722,14 +734,16 @@ class TooltipPopper extends React.Component {
     const {
       anchorElement,
       placement,
-      rootBoundary
+      rootBoundary,
+      viewportPadding
     } = this.props;
     const modifiers = [smallViewportModifier];
     if (rootBoundary === "viewport") {
       modifiers.push({
         name: "preventOverflow",
         options: {
-          rootBoundary: "viewport"
+          rootBoundary: "viewport",
+          padding: viewportPadding
         }
       });
     } else {
@@ -744,12 +758,14 @@ class TooltipPopper extends React.Component {
       referenceElement: anchorElement,
       strategy: "fixed",
       placement: placement,
-      modifiers: modifiers
+      modifiers: modifiers,
+      onFirstUpdate: this.handleFirstUpdate
     }, props => this._renderPositionedContent(props));
   }
 }
 TooltipPopper.defaultProps = {
-  rootBoundary: "viewport"
+  rootBoundary: "viewport",
+  viewportPadding: spacing.small_12
 };
 
 class Tooltip extends React.Component {
@@ -808,7 +824,8 @@ class Tooltip extends React.Component {
     return React.createElement(TooltipPopper, {
       anchorElement: this.state.anchorElement,
       placement: placement,
-      autoUpdate: this.props.autoUpdate
+      autoUpdate: this.props.autoUpdate,
+      viewportPadding: this.props.viewportPadding
     }, props => React.createElement(TooltipBubble, {
       id: bubbleId,
       style: props.style,

package/dist/index.js

@@ -686,12 +686,20 @@ const smallViewportModifier = {
   fn: _modifyPosition
 };
 class TooltipPopper extends React__namespace.Component {
-  constructor(...args) {
-    super(...args);
+  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
+    };
   }
   componentDidMount() {
     const {
@@ -719,6 +727,9 @@ class TooltipPopper extends React__namespace.Component {
     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);
@@ -731,7 +742,8 @@ class TooltipPopper extends React__namespace.Component {
         bottom: popperProps.style.bottom,
         right: popperProps.style.right,
         position: popperProps.style.position,
-        transform: popperProps.style.transform
+        transform: popperProps.style.transform,
+        visibility: !isReady ? "hidden" : undefined
       },
       updateBubbleRef: this._bubbleRefTracker.updateRef,
       tailOffset: {
@@ -750,14 +762,16 @@ class TooltipPopper extends React__namespace.Component {
     const {
       anchorElement,
       placement,
-      rootBoundary
+      rootBoundary,
+      viewportPadding
     } = this.props;
     const modifiers = [smallViewportModifier];
     if (rootBoundary === "viewport") {
       modifiers.push({
         name: "preventOverflow",
         options: {
-          rootBoundary: "viewport"
+          rootBoundary: "viewport",
+          padding: viewportPadding
         }
       });
     } else {
@@ -772,12 +786,14 @@ class TooltipPopper extends React__namespace.Component {
       referenceElement: anchorElement,
       strategy: "fixed",
       placement: placement,
-      modifiers: modifiers
+      modifiers: modifiers,
+      onFirstUpdate: this.handleFirstUpdate
     }, props => this._renderPositionedContent(props));
   }
 }
 TooltipPopper.defaultProps = {
-  rootBoundary: "viewport"
+  rootBoundary: "viewport",
+  viewportPadding: wonderBlocksTokens.spacing.small_12
 };
 
 class Tooltip extends React__namespace.Component {
@@ -836,7 +852,8 @@ class Tooltip extends React__namespace.Component {
     return React__namespace.createElement(TooltipPopper, {
       anchorElement: this.state.anchorElement,
       placement: placement,
-      autoUpdate: this.props.autoUpdate
+      autoUpdate: this.props.autoUpdate,
+      viewportPadding: this.props.viewportPadding
     }, props => React__namespace.createElement(TooltipBubble, {
       id: bubbleId,
       style: props.style,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-tooltip",
-  "version": "2.4.2",
+  "version": "2.5.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -16,11 +16,11 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-core": "^7.0.0",
-    "@khanacademy/wonder-blocks-layout": "^2.2.0",
-    "@khanacademy/wonder-blocks-modal": "^5.1.11",
-    "@khanacademy/wonder-blocks-tokens": "^2.0.0",
-    "@khanacademy/wonder-blocks-typography": "^2.1.15"
+    "@khanacademy/wonder-blocks-core": "^7.0.1",
+    "@khanacademy/wonder-blocks-layout": "^2.2.1",
+    "@khanacademy/wonder-blocks-modal": "^5.1.12",
+    "@khanacademy/wonder-blocks-tokens": "^2.0.1",
+    "@khanacademy/wonder-blocks-typography": "^2.1.16"
   },
   "peerDependencies": {
     "@popperjs/core": "^2.10.1",