@khanacademy/wonder-blocks-popover 3.2.15 → 3.3.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @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
+
+-   02a1b298: Make sure we don't package tsconfig and tsbuildinfo files
+-   Updated dependencies [02a1b298]
+    -   @khanacademy/wonder-blocks-core@7.0.1
+    -   @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-typography@2.1.16
+
 ## 3.2.15
 
 ### 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.15",
+  "version": "3.3.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -16,12 +16,12 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-core": "^7.0.0",
-    "@khanacademy/wonder-blocks-icon-button": "^5.4.0",
-    "@khanacademy/wonder-blocks-modal": "^5.1.11",
-    "@khanacademy/wonder-blocks-tokens": "^2.0.0",
-    "@khanacademy/wonder-blocks-tooltip": "^2.4.2",
-    "@khanacademy/wonder-blocks-typography": "^2.1.15"
+    "@khanacademy/wonder-blocks-core": "^7.0.1",
+    "@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.5.0",
+    "@khanacademy/wonder-blocks-typography": "^2.1.16"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",

package/src/components/__tests__/focus-manager.test.tsx

@@ -1,180 +0,0 @@
-import * as React from "react";
-import {render, screen} from "@testing-library/react";
-import {userEvent} from "@testing-library/user-event";
-
-import FocusManager from "../focus-manager";
-
-describe("FocusManager", () => {
-    it("should focus on the first focusable element inside the popover", async () => {
-        // Arrange
-        const externalNodes = (
-            <div>
-                <button>Open popover</button>
-                <button>Next focusable element outside</button>
-            </div>
-        );
-        render(externalNodes);
-
-        // get the anchor reference to be able pass it to the FocusManager
-        const anchorElementNode = await screen.findByRole("button", {
-            name: "Open popover",
-        });
-
-        render(
-            <FocusManager anchorElement={anchorElementNode}>
-                <div>
-                    <button>first focusable element inside</button>
-                    <button>second focusable element inside</button>
-                    <button>third focusable element inside</button>
-                </div>
-            </FocusManager>,
-        );
-
-        // Act
-        // focus on the previous element before the popover (anchor element)
-        anchorElementNode.focus();
-        // focus gets automatically moved to be on the first focusable element
-
-        const firstFocusableElementInside = await screen.findByText(
-            "first focusable element inside",
-        );
-
-        // Assert
-        expect(firstFocusableElementInside).toHaveFocus();
-    });
-
-    it("should focus on the last focusable element inside the popover", async () => {
-        // Arrange
-        const externalNodes = (
-            <div>
-                <button>Open popover</button>
-                <button>Next focusable element outside</button>
-            </div>
-        );
-        render(externalNodes);
-
-        // get the anchor reference to be able pass it to the FocusManager
-        const anchorElementNode = await screen.findByRole("button", {
-            name: "Open popover",
-        });
-
-        render(
-            <FocusManager anchorElement={anchorElementNode}>
-                <div>
-                    <button>first focusable element inside</button>
-                    <button>second focusable element inside</button>
-                    <button>third focusable element inside</button>
-                </div>
-            </FocusManager>,
-        );
-
-        // Act
-
-        // find previous focusable element outside the popover
-        const nextFocusableElementOutside = await screen.findByRole("button", {
-            name: "Next focusable element outside",
-        });
-
-        // focus on the next element after the popover
-        nextFocusableElementOutside.focus();
-        await userEvent.tab({shift: true});
-
-        const lastFocusableElementInside = await screen.findByText(
-            "third focusable element inside",
-        );
-
-        // Assert
-        expect(lastFocusableElementInside).toHaveFocus();
-    });
-
-    it("should allow flowing the focus correctly", async () => {
-        // Arrange
-        const externalNodes = (
-            <div>
-                <button>Prev focusable element outside</button>
-                <button>Open popover</button>
-                <button>Next focusable element outside</button>
-            </div>
-        );
-        render(externalNodes);
-
-        // get the anchor reference to be able pass it to the FocusManager
-        const anchorElementNode = await screen.findByRole("button", {
-            name: "Open popover",
-        });
-
-        render(
-            <FocusManager anchorElement={anchorElementNode}>
-                <div>
-                    <button>first focusable element inside</button>
-                </div>
-            </FocusManager>,
-        );
-
-        // Act
-        // 1. focus on the Open popover button, this opens the focus manager
-        // and focuses the button inside the popover
-        await userEvent.tab();
-
-        // 2. we advance to the next focusable element outside the popover
-        await userEvent.tab();
-
-        // 3. we loop back around to the first focusable element outside the popover
-        await userEvent.tab();
-
-        // find previous focusable element outside the popover
-        const prevFocusableElementOutside = await screen.findByRole("button", {
-            name: "Prev focusable element outside",
-        });
-
-        // Assert
-        expect(prevFocusableElementOutside).toHaveFocus();
-    });
-
-    it("should disallow focusability on internal elements if the user focus out of the focus manager", async () => {
-        // Arrange
-        const externalNodes = (
-            <div>
-                <button>Prev focusable element outside</button>
-                <button>Open popover</button>
-                <button>Next focusable element outside</button>
-            </div>
-        );
-        render(externalNodes);
-
-        // get the anchor reference to be able pass it to the FocusManager
-        const anchorElementNode = await screen.findByRole("button", {
-            name: "Open popover",
-        });
-
-        render(
-            <FocusManager anchorElement={anchorElementNode}>
-                <div>
-                    <button>first focusable element inside</button>
-                </div>
-            </FocusManager>,
-        );
-
-        // Act
-        // 1. focus on the previous element before the popover
-        await userEvent.tab();
-
-        // 2. focus on the anchor element
-        await userEvent.tab();
-
-        // 3. focus on focusable element inside the popover
-        await userEvent.tab();
-
-        // 4. focus on the next focusable element outside the popover (this will
-        //    be the first focusable element outside the popover)
-        await userEvent.tab();
-
-        // The elements inside the focus manager should not be focusable anymore.
-        const focusableElementInside = await screen.findByRole("button", {
-            name: "first focusable element inside",
-        });
-
-        // Assert
-        expect(focusableElementInside).toHaveAttribute("tabIndex", "-1");
-    });
-});

package/src/components/__tests__/initial-focus.test.tsx

@@ -1,73 +0,0 @@
-import * as React from "react";
-import {render, screen} from "@testing-library/react";
-
-import InitialFocus from "../initial-focus";
-
-describe("InitialFocus", () => {
-    beforeEach(() => {
-        jest.useFakeTimers();
-    });
-
-    it("should try to focus on a given element by id", () => {
-        // Arrange
-        render(
-            <InitialFocus initialFocusId="initial-focus-id">
-                <div data-testid="container">
-                    <button data-testid="item-0" />
-                    <button data-testid="item-1" id="initial-focus-id" />
-                    <button data-testid="item-2" />
-                </div>
-            </InitialFocus>,
-        );
-
-        // Act
-        const firstFocusableElement = screen.getByTestId("item-1");
-        // Fast-forward until all timers have been executed
-        jest.runAllTimers();
-
-        // Assert
-        expect(firstFocusableElement).toHaveFocus();
-    });
-
-    it("should try to focus on the first focusable element", () => {
-        // Arrange
-        render(
-            <InitialFocus>
-                <div data-testid="container">
-                    <button data-testid="item-0" />
-                    <button data-testid="item-1" id="initial-focus-id" />
-                    <button data-testid="item-2" />
-                </div>
-            </InitialFocus>,
-        );
-
-        // Act
-        const firstFocusableElement = screen.getByTestId("item-0");
-
-        // Fast-forward until all timers have been executed
-        jest.runAllTimers();
-
-        // Assert
-        expect(firstFocusableElement).toHaveFocus();
-    });
-
-    it("should try to focus on the container if no focusable elements are found", () => {
-        // Arrange
-        render(
-            <InitialFocus>
-                <div data-testid="container">
-                    <p>no focusable elements here</p>
-                </div>
-            </InitialFocus>,
-        );
-
-        // Act
-        const firstFocusableElement = screen.getByTestId("container");
-
-        // Fast-forward until all timers have been executed
-        jest.runAllTimers();
-
-        // Assert
-        expect(firstFocusableElement).toHaveFocus();
-    });
-});

package/src/components/__tests__/popover-anchor.test.tsx

@@ -1,61 +0,0 @@
-import * as React from "react";
-import {render, screen} from "@testing-library/react";
-import {userEvent} from "@testing-library/user-event";
-
-import PopoverAnchor from "../popover-anchor";
-
-describe("PopoverAnchor", () => {
-    it("should set child node as ref", async () => {
-        // Arrange
-        const updateRef = jest.fn();
-
-        render(
-            <PopoverAnchor anchorRef={updateRef} onClick={jest.fn()}>
-                <button>test</button>
-            </PopoverAnchor>,
-        );
-
-        // Act
-        const triggerElement = await screen.findByRole("button");
-
-        // Assert
-        expect(updateRef).toBeCalledWith(triggerElement);
-    });
-
-    it("should add onClick handler if child is a function", async () => {
-        // Arrange
-        const onClickMock = jest.fn();
-
-        render(
-            <PopoverAnchor anchorRef={jest.fn()} onClick={onClickMock}>
-                {({open}: any) => <button onClick={open}>open</button>}
-            </PopoverAnchor>,
-        );
-
-        // Act
-        await userEvent.click(await screen.findByRole("button"));
-
-        // Assert
-        expect(onClickMock).toBeCalled();
-    });
-
-    it("should add onClick handler if child is a Node", async () => {
-        // Arrange
-        const onClickMock = jest.fn();
-        const onClickInnerMock = jest.fn();
-
-        render(
-            <PopoverAnchor anchorRef={jest.fn()} onClick={onClickMock}>
-                <button onClick={onClickInnerMock}>test</button>
-            </PopoverAnchor>,
-        );
-
-        // Act
-        await userEvent.click(await screen.findByRole("button"));
-
-        // Assert
-        // both custom and internal click should be called
-        expect(onClickInnerMock).toBeCalled();
-        expect(onClickMock).toBeCalled();
-    });
-});

package/src/components/__tests__/popover-content.test.tsx

@@ -1,76 +0,0 @@
-import * as React from "react";
-import {render, screen} from "@testing-library/react";
-import {userEvent} from "@testing-library/user-event";
-
-import PopoverContent from "../popover-content";
-import PopoverContext from "../popover-context";
-
-describe("PopoverContent", () => {
-    it("should close the popover from the actions", async () => {
-        // Arrange
-        const onCloseMock = jest.fn();
-
-        render(
-            <PopoverContext.Provider
-                value={{close: onCloseMock, placement: "left"}}
-            >
-                <PopoverContent
-                    title="Title"
-                    content="content"
-                    actions={({close}: any) => (
-                        <button onClick={close}>close popover</button>
-                    )}
-                />
-            </PopoverContext.Provider>,
-        );
-
-        // Act
-        await userEvent.click(await screen.findByRole("button"));
-
-        // Assert
-        expect(onCloseMock).toBeCalled();
-    });
-
-    it("should warn when setting a image and icon at the same time", async () => {
-        // Arrange
-        const nodes = (
-            <PopoverContent
-                title="illustration"
-                content="content"
-                image={<img src="/dummy-image.png" alt="popover image" />}
-                icon={<img src="/dummy-icon.png" alt="popover icon" />}
-            />
-        );
-
-        // Act
-        const underTest = () => render(nodes);
-
-        // Assert
-        expect(underTest).toThrowErrorMatchingInlineSnapshot(
-            `"'image' and 'icon' cannot be used at the same time. You can fix this by either removing 'image' or 'icon' from your instance."`,
-        );
-    });
-
-    it("should warn when setting a horizontal placement with an Illustration popover", async () => {
-        // Arrange
-        const nodes = (
-            <PopoverContext.Provider
-                value={{close: () => {}, placement: "left"}}
-            >
-                <PopoverContent
-                    title="illustration"
-                    content="content"
-                    image={<img src="/dummy-image.png" alt="dummy" />}
-                />
-            </PopoverContext.Provider>
-        );
-
-        // Act
-        const underTest = () => render(nodes);
-
-        // Assert
-        expect(underTest).toThrowErrorMatchingInlineSnapshot(
-            `"'image' can only be vertically placed. You can fix this by either changing \`placement\` to \`top\` or \`bottom\` or removing the \`image\` prop inside \`content\`."`,
-        );
-    });
-});

package/src/components/__tests__/popover-content.typestest.tsx

@@ -1,38 +0,0 @@
-import * as React from "react";
-
-import PopoverContent from "../popover-content";
-
-<PopoverContent title="Title" content="Content" />;
-
-<PopoverContent title="Title" content="Content" icon="close" />;
-
-<PopoverContent
-    title="Title"
-    content="Content"
-    image={<img src="domokun.jpg" alt="domokun" />}
-/>;
-
-<PopoverContent
-    title="Title"
-    content="Content"
-    icon="close"
-    image={<img src="domokun.jpg" alt="domokun" />}
-/>;
-
-<PopoverContent title="Title" content="Content" emphasized={true} />;
-
-// @ts-expect-error `emphasized` cannot be used with `icon`
-<PopoverContent
-    title="Title"
-    content="Content"
-    icon="close"
-    emphasized={true}
-/>;
-
-// @ts-expect-error `emphasized` cannot be used with `img`
-<PopoverContent
-    title="Title"
-    content="Content"
-    image={<img src="domokun.jpg" alt="domokun" />}
-    emphasized={true}
-/>;

package/src/components/__tests__/popover-dialog.test.tsx

@@ -1,98 +0,0 @@
-import * as React from "react";
-import {render} from "@testing-library/react";
-import * as Tooltip from "@khanacademy/wonder-blocks-tooltip";
-
-import type {Placement} from "@khanacademy/wonder-blocks-tooltip";
-import PopoverDialog from "../popover-dialog";
-import PopoverContentCore from "../popover-content-core";
-
-jest.mock("@khanacademy/wonder-blocks-tooltip");
-
-describe("PopoverDialog", () => {
-    it("should update the tail color to match the content's color", () => {
-        // Arrange
-        const tooltipTailSpy = jest.spyOn(Tooltip, "TooltipTail");
-
-        // Act
-        render(
-            <PopoverDialog showTail={true} placement="top" onUpdate={jest.fn()}>
-                <PopoverContentCore color="darkBlue">
-                    popover content
-                </PopoverContentCore>
-            </PopoverDialog>,
-        );
-
-        // Assert
-        expect(tooltipTailSpy).toHaveBeenCalledWith(
-            expect.objectContaining({color: "darkBlue"}),
-            {},
-        );
-    });
-
-    it("should call onUpdate if placement is changed", () => {
-        // Arrange
-        const onUpdateMock = jest.fn();
-        const UnderTest = ({placement}: {placement: Placement}) => (
-            <PopoverDialog
-                showTail={true}
-                placement={placement}
-                onUpdate={onUpdateMock}
-            >
-                <PopoverContentCore>popover content</PopoverContentCore>
-            </PopoverDialog>
-        );
-
-        const {rerender} = render(<UnderTest placement="top" />);
-
-        // Act
-        rerender(<UnderTest placement="bottom" />);
-
-        // Assert
-        expect(onUpdateMock).toBeCalledWith("bottom");
-    });
-
-    it("should not call onUpdate if placement remains the same", () => {
-        // Arrange
-        const onUpdateMock = jest.fn();
-
-        const UnderTest = ({placement}: {placement: Placement}) => (
-            <PopoverDialog
-                showTail={true}
-                placement={placement}
-                onUpdate={onUpdateMock}
-            >
-                <PopoverContentCore>popover content</PopoverContentCore>
-            </PopoverDialog>
-        );
-
-        const {rerender} = render(<UnderTest placement="top" />);
-
-        // Act
-        rerender(<UnderTest placement="top" />);
-
-        // Assert
-        expect(onUpdateMock).not.toBeCalled();
-    });
-
-    it("should not render a tail if showTail is false", () => {
-        // Arrange
-        const tooltipTailSpy = jest.spyOn(Tooltip, "TooltipTail");
-
-        // Act
-        render(
-            <PopoverDialog
-                showTail={false}
-                placement="top"
-                onUpdate={jest.fn()}
-            >
-                <PopoverContentCore>popover content</PopoverContentCore>
-            </PopoverDialog>,
-        );
-
-        // Assert
-        expect(tooltipTailSpy).toHaveBeenCalledWith(
-            expect.objectContaining({show: false}),
-            {},
-        );
-    });
-});