@khanacademy/wonder-blocks-popover 3.2.16 → 3.3.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @khanacademy/wonder-blocks-popover
 
+## 3.3.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).
+-   Updated dependencies [badad6ee]
+-   Updated dependencies [fcab789b]
+    -   @khanacademy/wonder-blocks-tooltip@2.5.0
+
 ## 3.2.16
 
 ### Patch Changes

package/dist/components/popover.d.ts

@@ -103,6 +103,12 @@ type Props = AriaProps & Readonly<{
      * 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 = Readonly<{
     /**

package/dist/es/index.js

@@ -449,7 +449,8 @@ class Popover extends React.Component {
       portal,
       "aria-label": ariaLabel,
       "aria-describedby": ariaDescribedBy,
-      rootBoundary
+      rootBoundary,
+      viewportPadding
     } = this.props;
     const {
       anchorElement
@@ -459,7 +460,8 @@ class Popover extends React.Component {
     const popperContent = React.createElement(TooltipPopper, {
       anchorElement: anchorElement,
       placement: placement,
-      rootBoundary: rootBoundary
+      rootBoundary: rootBoundary,
+      viewportPadding: viewportPadding
     }, props => React.createElement(PopoverDialog, _extends({}, props, {
       "aria-label": ariaLabel,
       "aria-describedby": describedBy,

package/dist/index.js

@@ -479,7 +479,8 @@ class Popover extends React__namespace.Component {
       portal,
       "aria-label": ariaLabel,
       "aria-describedby": ariaDescribedBy,
-      rootBoundary
+      rootBoundary,
+      viewportPadding
     } = this.props;
     const {
       anchorElement
@@ -489,7 +490,8 @@ class Popover extends React__namespace.Component {
     const popperContent = React__namespace.createElement(wonderBlocksTooltip.TooltipPopper, {
       anchorElement: anchorElement,
       placement: placement,
-      rootBoundary: rootBoundary
+      rootBoundary: rootBoundary,
+      viewportPadding: viewportPadding
     }, props => React__namespace.createElement(PopoverDialog, _extends__default["default"]({}, props, {
       "aria-label": ariaLabel,
       "aria-describedby": describedBy,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-popover",
-  "version": "3.2.16",
+  "version": "3.3.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -20,7 +20,7 @@
     "@khanacademy/wonder-blocks-icon-button": "^5.4.1",
     "@khanacademy/wonder-blocks-modal": "^5.1.12",
     "@khanacademy/wonder-blocks-tokens": "^2.0.1",
-    "@khanacademy/wonder-blocks-tooltip": "^2.4.3",
+    "@khanacademy/wonder-blocks-tooltip": "^2.5.0",
     "@khanacademy/wonder-blocks-typography": "^2.1.16"
   },
   "peerDependencies": {