@khanacademy/wonder-blocks-core 7.0.0 → 8.0.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @khanacademy/wonder-blocks-core
 
+## 8.0.0
+
+### Major Changes
+
+-   e6abdd17: Upgrade to React 18
+
+## 7.0.1
+
+### Patch Changes
+
+-   02a1b298: Make sure we don't package tsconfig and tsbuildinfo files
+
 ## 7.0.0
 
 ### Major Changes

package/dist/components/text.d.ts

@@ -23,8 +23,8 @@ declare const Text: React.ForwardRefExoticComponent<{
     title?: string | undefined;
     "data-modal-launcher-portal"?: boolean | undefined;
     "data-placement"?: string | undefined;
-} & Readonly<import("../util/aria-types").AriaAttributes> & Readonly<{
-    role?: import("../util/aria-types").AriaRole | undefined;
+} & Readonly<import("..").AriaAttributes> & Readonly<{
+    role?: import("..").AriaRole | undefined;
 }> & {
     onMouseDown?: ((e: React.MouseEvent<Element, MouseEvent>) => unknown) | undefined;
     onMouseUp?: ((e: React.MouseEvent<Element, MouseEvent>) => unknown) | undefined;

package/dist/es/index.js

@@ -90,11 +90,12 @@ const Text = React.forwardRef(function Text(_ref, ref) {
 const _excluded$1 = ["className", "style"];
 function addStyle(Component, defaultStyle) {
   return React.forwardRef((props, ref) => {
-    const {
+    const _ref = props,
+      {
         className,
         style
-      } = props,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$1);
+      } = _ref,
+      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$1);
     const reset = typeof Component === "string" ? overrides[Component] : null;
     const {
       className: aphroditeClassName,

package/dist/index.d.ts

@@ -16,4 +16,5 @@ export { usePreHydrationEffect } from "./hooks/use-pre-hydration-effect";
 export { useRenderState } from "./hooks/use-render-state";
 export { RenderStateRoot } from "./components/render-state-root";
 export { RenderState } from "./components/render-state-context";
+export type { AriaRole, AriaAttributes } from "./util/aria-types";
 export type { AriaProps, IIdentifierFactory, StyleType, PropsFor };

package/dist/index.js

@@ -117,11 +117,12 @@ const Text = React__namespace.forwardRef(function Text(_ref, ref) {
 const _excluded$1 = ["className", "style"];
 function addStyle(Component, defaultStyle) {
   return React__namespace.forwardRef((props, ref) => {
-    const {
+    const _ref = props,
+      {
         className,
         style
-      } = props,
-      otherProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$1);
+      } = _ref,
+      otherProps = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$1);
     const reset = typeof Component === "string" ? overrides[Component] : null;
     const {
       className: aphroditeClassName,

package/dist/util/add-style.d.ts

@@ -4,7 +4,7 @@ export default function addStyle<T extends React.ComponentType<any> | keyof JSX.
     className?: string;
     style?: StyleType;
     children?: React.ReactNode;
-} & Omit<React.ComponentProps<T>, "style">>(Component: T, defaultStyle?: StyleType): React.ForwardRefExoticComponent<React.PropsWithoutRef<Props> & React.RefAttributes<T extends keyof JSX.IntrinsicElements ? IntrinsicElementsMap[T] : T>>;
+} & Omit<React.ComponentProps<T>, "style">>(Component: T, defaultStyle?: StyleType): React.ForwardRefExoticComponent<React.PropsWithoutRef<Props> & React.RefAttributes<T extends keyof IntrinsicElementsMap ? IntrinsicElementsMap[T] : T>>;
 type IntrinsicElementsMap = {
     a: HTMLAnchorElement;
     abbr: HTMLElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-core",
-  "version": "7.0.0",
+  "version": "8.0.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -17,14 +17,14 @@
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
-    "react-router": "5.2.1",
-    "react-router-dom": "5.3.0"
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-router": "5.3.4",
+    "react-router-dom": "5.3.4"
   },
   "devDependencies": {
-    "@khanacademy/wb-dev-build-settings": "^1.0.1",
-    "@khanacademy/wonder-blocks-testing-core": "^1.0.1"
+    "@khanacademy/wb-dev-build-settings": "^2.0.0",
+    "@khanacademy/wonder-blocks-testing-core": "^2.0.0"
   },
   "author": "",
   "license": "MIT"

package/src/components/__tests__/__snapshots__/view.test.tsx.snap

@@ -1,55 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`View Should set the tag to be article 1`] = `
-<div>
-  <article
-    class=""
-    style="align-items: stretch; border-width: 0px; border-style: solid; box-sizing: border-box; display: flex; flex-direction: column; margin: 0px; padding: 0px; position: relative; z-index: 0; min-height: 0; min-width: 0;"
-  />
-</div>
-`;
-
-exports[`View Should set the tag to be aside 1`] = `
-<div>
-  <aside
-    class=""
-    style="align-items: stretch; border-width: 0px; border-style: solid; box-sizing: border-box; display: flex; flex-direction: column; margin: 0px; padding: 0px; position: relative; z-index: 0; min-height: 0; min-width: 0;"
-  />
-</div>
-`;
-
-exports[`View Should set the tag to be div 1`] = `
-<div>
-  <div
-    class=""
-    style="align-items: stretch; border-width: 0px; border-style: solid; box-sizing: border-box; display: flex; flex-direction: column; margin: 0px; padding: 0px; position: relative; z-index: 0; min-height: 0; min-width: 0;"
-  />
-</div>
-`;
-
-exports[`View Should set the tag to be nav 1`] = `
-<div>
-  <nav
-    class=""
-    style="align-items: stretch; border-width: 0px; border-style: solid; box-sizing: border-box; display: flex; flex-direction: column; margin: 0px; padding: 0px; position: relative; z-index: 0; min-height: 0; min-width: 0;"
-  />
-</div>
-`;
-
-exports[`View Should set the tag to be section 1`] = `
-<div>
-  <section
-    class=""
-    style="align-items: stretch; border-width: 0px; border-style: solid; box-sizing: border-box; display: flex; flex-direction: column; margin: 0px; padding: 0px; position: relative; z-index: 0; min-height: 0; min-width: 0;"
-  />
-</div>
-`;
-
-exports[`View Should set the tag to be section 2`] = `
-<div>
-  <section
-    class=""
-    style="align-items: stretch; border-width: 0px; border-style: solid; box-sizing: border-box; display: flex; flex-direction: column; margin: 0px; padding: 0px; position: relative; z-index: 0; min-height: 0; min-width: 0;"
-  />
-</div>
-`;

package/src/components/__tests__/id-provider.test.tsx

@@ -1,48 +0,0 @@
-import * as React from "react";
-import {render} from "@testing-library/react";
-
-import IDProvider from "../id-provider";
-
-const mockIDENTIFIER = `uid-component-0-${IDProvider.defaultId}`;
-
-jest.mock("@khanacademy/wonder-blocks-core", () => {
-    const Core = jest.requireActual("@khanacademy/wonder-blocks-core");
-    // We want all of Core to be the regular thing except for UniqueIDProvider
-    return {
-        ...Core,
-        UniqueIDProvider: (props: any) =>
-            // eslint-disable-next-line testing-library/no-node-access
-            props.children({
-                get: () => mockIDENTIFIER,
-            }),
-    };
-});
-
-describe("UniqueDialog", () => {
-    test("renders children if ID is provided", () => {
-        // Arrange
-        const renderDialogFn = jest.fn(() => <div />);
-        const titleId = "custom-title";
-
-        // Act
-        render(
-            <IDProvider id={titleId} scope="component">
-                {renderDialogFn}
-            </IDProvider>,
-        );
-
-        // Assert
-        expect(renderDialogFn).toHaveBeenCalledWith(titleId);
-    });
-
-    test("if ID is not provided, then generates a unique ID and renders children", () => {
-        // Arrange
-        const renderDialogFn = jest.fn(() => <div />);
-
-        // Act
-        render(<IDProvider scope="component">{renderDialogFn}</IDProvider>);
-
-        // Assert
-        expect(renderDialogFn).toHaveBeenCalledWith(mockIDENTIFIER);
-    });
-});

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

@@ -1,258 +0,0 @@
-import * as React from "react";
-import * as ReactDOMServer from "react-dom/server";
-import {render} from "@testing-library/react";
-
-import InitialFallback from "../initial-fallback";
-import {RenderStateRoot} from "../render-state-root";
-
-describe("InitialFallback", () => {
-    describe("client-side rendering", () => {
-        test("calls placeholder render first, then the actual content render", async () => {
-            // Arrange
-            const mockPlaceholder = jest.fn(() => null);
-            await new Promise((resolve: any) => {
-                const nodes = (
-                    <InitialFallback fallback={mockPlaceholder}>
-                        {() => {
-                            resolve();
-                            return null;
-                        }}
-                    </InitialFallback>
-                );
-
-                // Act
-                render(nodes);
-            });
-
-            // Assert
-            // Our promise doesn't resolve until the children render, therefore
-            // we don't get here until that and so if the placeholder has been
-            // called, it must have been called first.
-            expect(mockPlaceholder).toHaveBeenCalledTimes(1);
-        });
-
-        describe("nested", () => {
-            test("in parent placeholder, calls placeholder", async () => {
-                // Arrange
-                const mockChildrenNotCalled = jest.fn(() => null);
-
-                await new Promise((resolve: any) => {
-                    const nestedPlaceholder = () => {
-                        resolve();
-                        return null;
-                    };
-
-                    const placeholder = () => (
-                        <InitialFallback fallback={nestedPlaceholder}>
-                            {mockChildrenNotCalled}
-                        </InitialFallback>
-                    );
-
-                    const nodes = (
-                        <InitialFallback fallback={placeholder}>
-                            {() => null}
-                        </InitialFallback>
-                    );
-
-                    // Act
-                    render(nodes);
-                });
-
-                // Assert
-                // Our promise doesn't resolve until the placeholder of our nested
-                // InitialFallback is rendered, therefore if we get here it means
-                // that the test is doing what we'd expect.
-                // In addition, if our code is working right, the children of the
-                // nested placeholder should have been skipped.
-                expect(mockChildrenNotCalled).not.toHaveBeenCalled();
-            });
-
-            test("in parent children, calls children render, skipping placeholder", async () => {
-                // Arrange
-                const mockPlaceholder = jest.fn(() => null);
-                const mockPlaceholderNotCalled = jest.fn(() => null);
-                await new Promise((resolve: any) => {
-                    const nodes = (
-                        <InitialFallback fallback={mockPlaceholder}>
-                            {() => (
-                                <InitialFallback
-                                    fallback={mockPlaceholderNotCalled}
-                                >
-                                    {() => {
-                                        resolve();
-                                        return null;
-                                    }}
-                                </InitialFallback>
-                            )}
-                        </InitialFallback>
-                    );
-
-                    // Act
-                    render(nodes);
-                });
-
-                // Assert
-                // Our promise doesn't resolve until the children of our nested InitialFallback
-                // are rendered, therefore we don't get here until that and so if the
-                // parent placeholder has been called, it must have been called first.
-                // In addition, if our code is working right, the placeholder of the
-                // nested component should have been skipped.
-                expect(mockPlaceholder).toHaveBeenCalledTimes(1);
-                expect(mockPlaceholderNotCalled).not.toHaveBeenCalled();
-            });
-        });
-    });
-
-    describe("server-side rendering", () => {
-        test("server-side rendering, calls placeholder render only", () => {
-            // Arrange
-            const mockChildren = jest.fn(() => null);
-            const mockPlaceholder = jest.fn(() => null);
-
-            const nodes = (
-                <InitialFallback fallback={mockPlaceholder}>
-                    {mockChildren}
-                </InitialFallback>
-            );
-
-            // Act
-            ReactDOMServer.renderToStaticMarkup(nodes);
-
-            // Assert
-            expect(mockPlaceholder).toHaveBeenCalledTimes(1);
-            expect(mockChildren).toHaveBeenCalledTimes(0);
-        });
-
-        test("null placeholder returns null", () => {
-            // Arrange
-            const mockChildren = jest.fn(() => null);
-
-            const nodes = (
-                <InitialFallback fallback={null}>
-                    {mockChildren}
-                </InitialFallback>
-            );
-
-            // Act
-            const result = ReactDOMServer.renderToStaticMarkup(nodes);
-
-            // Assert
-            expect(result).toBe("");
-            expect(mockChildren).toHaveBeenCalledTimes(0);
-        });
-
-        describe("nested", () => {
-            test("in parent placeholder, renders as placeholder", () => {
-                // Arrange
-                const expectation = "CHILD PLACEHOLDER";
-                const placeholder = (
-                    <InitialFallback fallback={() => expectation}>
-                        {() => "This won't render"}
-                    </InitialFallback>
-                );
-
-                const nodes = (
-                    <InitialFallback fallback={() => placeholder}>
-                        {() => "This won't render"}
-                    </InitialFallback>
-                );
-
-                // Act
-                const result = ReactDOMServer.renderToStaticMarkup(nodes);
-
-                // Assert
-                expect(result).toBe(expectation);
-            });
-
-            test("in parent children, renders as null", () => {
-                // Arrange
-                const placeholder = (
-                    <InitialFallback fallback={null}>
-                        {() => "This won't render"}
-                    </InitialFallback>
-                );
-
-                const nodes = (
-                    <InitialFallback fallback={() => placeholder}>
-                        {() => "This won't render"}
-                    </InitialFallback>
-                );
-
-                // Act
-                const result = ReactDOMServer.renderToStaticMarkup(nodes);
-
-                // Assert
-                expect(result).toBe("");
-            });
-        });
-    });
-
-    describe("inside a RenderStateRoot", () => {
-        test("calls placeholder render first, then the actual content render", async () => {
-            // Arrange
-            const mockPlaceholder = jest.fn(() => null);
-            await new Promise((resolve: any) => {
-                const nodes = (
-                    <RenderStateRoot>
-                        <InitialFallback fallback={mockPlaceholder}>
-                            {() => {
-                                resolve();
-                                return null;
-                            }}
-                        </InitialFallback>
-                    </RenderStateRoot>
-                );
-
-                // Act
-                render(nodes);
-            });
-
-            // Assert
-            // Our promise doesn't resolve until the children render, therefore
-            // we don't get here until that and so if the placeholder has been
-            // called, it must have been called first.
-            expect(mockPlaceholder).toHaveBeenCalledTimes(1);
-        });
-
-        test("server-side rendering, calls placeholder render only", () => {
-            // Arrange
-            const mockChildren = jest.fn(() => null);
-            const mockPlaceholder = jest.fn(() => null);
-
-            const nodes = (
-                <RenderStateRoot>
-                    <InitialFallback fallback={mockPlaceholder}>
-                        {mockChildren}
-                    </InitialFallback>
-                </RenderStateRoot>
-            );
-
-            // Act
-            ReactDOMServer.renderToStaticMarkup(nodes);
-
-            // Assert
-            expect(mockPlaceholder).toHaveBeenCalledTimes(1);
-            expect(mockChildren).toHaveBeenCalledTimes(0);
-        });
-
-        test("null placeholder returns null", () => {
-            // Arrange
-            const mockChildren = jest.fn(() => null);
-
-            const nodes = (
-                <RenderStateRoot>
-                    <InitialFallback fallback={null}>
-                        {mockChildren}
-                    </InitialFallback>
-                </RenderStateRoot>
-            );
-
-            // Act
-            const result = ReactDOMServer.renderToStaticMarkup(nodes);
-
-            // Assert
-            expect(result).toBe("");
-            expect(mockChildren).toHaveBeenCalledTimes(0);
-        });
-    });
-});

package/src/components/__tests__/render-state-root.test.tsx

@@ -1,86 +0,0 @@
-import * as React from "react";
-import {render} from "@testing-library/react";
-
-import {RenderStateRoot} from "../render-state-root";
-import {RenderState, RenderStateContext} from "../render-state-context";
-
-const {useContext} = React;
-
-describe("RenderStateRoot", () => {
-    test("the first render should set context's value to RenderState.Initial", () => {
-        // Arrange
-        const values: Array<any> = [];
-        const TestComponent = () => {
-            const value = useContext(RenderStateContext);
-
-            values.push(value);
-
-            return null;
-        };
-
-        // Act
-        render(
-            <RenderStateRoot>
-                <TestComponent />
-            </RenderStateRoot>,
-        );
-
-        // Assert
-        expect(values[0]).toEqual(RenderState.Initial);
-    });
-
-    test("the second render should set context's value to RenderState.Standard", () => {
-        // Arrange
-        const values: Array<any> = [];
-        const TestComponent = () => {
-            const value = useContext(RenderStateContext);
-
-            values.push(value);
-
-            return null;
-        };
-
-        // Act
-        render(
-            <RenderStateRoot>
-                <TestComponent />
-            </RenderStateRoot>,
-        );
-
-        // Assert
-        expect(values[1]).toEqual(RenderState.Standard);
-    });
-
-    it("should not allow nesting of <RenderStateRoot> when", () => {
-        // Act
-        const underTest = () =>
-            render(
-                <RenderStateRoot>
-                    <RenderStateRoot>Hello, world!</RenderStateRoot>
-                </RenderStateRoot>,
-            );
-
-        expect(underTest).toThrowErrorMatchingInlineSnapshot(
-            `"There's already a <RenderStateRoot> above this instance in the render tree.  This instance should be removed."`,
-        );
-    });
-
-    it("should allow nesting of <RenderStateRoot> when throwIfNested={false}", () => {
-        // Act
-        const underTest = () =>
-            render(
-                <RenderStateRoot throwIfNested={false}>
-                    <RenderStateRoot throwIfNested={false}>
-                        Hello, world!
-                    </RenderStateRoot>
-                </RenderStateRoot>,
-            );
-
-        expect(underTest).not.toThrowError();
-    });
-
-    // This test can be written once ADR #526 has been implemented.  I've left
-    // a comment in the ADR about this kind of test case being something we
-    // should support.
-    it.todo("should only render a single context provider when nesting");
-});

package/src/components/__tests__/text.test.tsx

@@ -1,44 +0,0 @@
-import * as React from "react";
-import {render, screen} from "@testing-library/react";
-import Text from "../text";
-
-describe("Text", () => {
-    test("forwards the ref to the heading element", () => {
-        // Arrange
-        const ref: React.RefObject<HTMLSpanElement> = React.createRef();
-
-        // Act
-        render(<Text ref={ref}>Some text</Text>);
-
-        // Assert
-        expect(ref.current).toBeInstanceOf(HTMLSpanElement);
-    });
-
-    test("applies style to the text wrapper", () => {
-        // Arrange
-        render(<Text style={{color: "red"}}>Text</Text>);
-
-        // Act
-        const wrapper = screen.getByText("Text");
-
-        // Assert
-        expect(wrapper).toHaveStyle({color: "red"});
-    });
-
-    test("appends the className prop to the element's class list", () => {
-        // Arrange
-        const className = "some-class";
-
-        // Act
-        render(
-            <Text style={{color: "red"}} className={className}>
-                Text
-            </Text>,
-        );
-
-        const wrapper = screen.getByText("Text");
-
-        // Assert
-        expect(wrapper).toHaveClass(className);
-    });
-});