@khanacademy/wonder-blocks-core 5.0.4 → 5.2.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @khanacademy/wonder-blocks-core
 
+## 5.2.0
+
+### Minor Changes
+
+-   fa70c895: Add 'lang', 'className' and 'htmlFor' properties to Text and View
+
+### Patch Changes
+
+-   19ab0408: Update flowgen to convert React.ForwardRefExoticComponent<> and React.FowardedRef<> properly
+-   fa70c895: Remove all TypeScript error suppressions on JSX attributes
+
+## 5.1.0
+
+### Minor Changes
+
+-   3c400719: Add useLatestRef hook to wonder-blocks-core
+
+### Patch Changes
+
+-   a6164ed0: Don't use React.FC<> for functional components
+
 ## 5.0.4
 
 ### Patch Changes

package/dist/components/render-state-root.d.ts

@@ -6,5 +6,5 @@ type Props = {
      */
     throwIfNested?: boolean;
 };
-declare const RenderStateRoot: React.FC<Props>;
+declare const RenderStateRoot: ({ children, throwIfNested, }: Props) => React.ReactElement;
 export { RenderStateRoot };

package/dist/components/render-state-root.js.flow

@@ -13,5 +13,5 @@ declare type Props = {|
    */
   throwIfNested?: boolean,
 |};
-declare var RenderStateRoot: React.StatelessFunctionalComponent<Props>;
+declare var RenderStateRoot: (x: Props) => React.Element<any>;
 declare export { RenderStateRoot };

package/dist/es/index.js

@@ -119,7 +119,7 @@ Text.defaultProps = {
 
 const _excluded$1 = ["className", "style"];
 function addStyle(Component, defaultStyle) {
-  const StyleComponent = props => {
+  return React.forwardRef((props, ref) => {
     const {
         className,
         style
@@ -131,11 +131,11 @@ function addStyle(Component, defaultStyle) {
       style: inlineStyles
     } = processStyleList([reset, defaultStyle, style]);
     return React.createElement(Component, _extends({}, otherProps, {
+      ref: ref,
       className: [aphroditeClassName, className].filter(Boolean).join(" "),
       style: inlineStyles
     }));
-  };
-  return StyleComponent;
+  });
 }
 const overrides = StyleSheet.create({
   button: {
@@ -422,6 +422,12 @@ const useIsMounted = () => {
   return React.useCallback(() => isMounted.current, []);
 };
 
+function useLatestRef(value) {
+  const ref = React.useRef(value);
+  ref.current = value;
+  return ref;
+}
+
 const useOnline = () => {
   const forceUpdate = useForceUpdate();
   useEffect$1(() => {
@@ -442,7 +448,7 @@ const {
 } = React;
 const RenderStateRoot = ({
   children,
-  throwIfNested
+  throwIfNested: _throwIfNested = true
 }) => {
   const [firstRender, setFirstRender] = useState(true);
   const renderState = useRenderState();
@@ -450,7 +456,7 @@ const RenderStateRoot = ({
     setFirstRender(false);
   }, []);
   if (renderState !== RenderState.Root) {
-    if (throwIfNested) {
+    if (_throwIfNested) {
       throw new Error("There's already a <RenderStateRoot> above this instance in " + "the render tree.  This instance should be removed.");
     }
     return children;
@@ -460,8 +466,5 @@ const RenderStateRoot = ({
     value: value
   }, children);
 };
-RenderStateRoot.defaultProps = {
-  throwIfNested: true
-};
 
-export { IDProvider, RenderState, RenderStateRoot, server as Server, Text, UniqueIDProvider, View, WithSSRPlaceholder, addStyle, useForceUpdate, useIsMounted, useOnMountEffect, useOnline, useRenderState, useUniqueIdWithMock, useUniqueIdWithoutMock };
+export { IDProvider, RenderState, RenderStateRoot, server as Server, Text, UniqueIDProvider, View, WithSSRPlaceholder, addStyle, useForceUpdate, useIsMounted, useLatestRef, useOnMountEffect, useOnline, useRenderState, useUniqueIdWithMock, useUniqueIdWithoutMock };

package/dist/hooks/use-latest-ref.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+/**
+ * Return a ref that always contains the `value` passed.
+ *
+ * The useLatestRef hook returns a ref that always contains the `value` passed
+ * to the hook during the most recent render.
+ *
+ * It can be used to wrap a possibly-changing prop in a stable value that can
+ * be passed to useEffect without causing unnecessary re-renders. See the
+ * Storybook docs for a usage example.
+ */
+export declare function useLatestRef<T>(value: T): React.RefObject<T>;

package/dist/hooks/use-latest-ref.js.flow

@@ -0,0 +1,16 @@
+/**
+ * Flowtype definitions for useLatestRef
+ * @flow
+ */
+
+/**
+ * Return a ref that always contains the `value` passed.
+ *
+ * The useLatestRef hook returns a ref that always contains the `value` passed
+ * to the hook during the most recent render.
+ *
+ * It can be used to wrap a possibly-changing prop in a stable value that can
+ * be passed to useEffect without causing unnecessary re-renders. See the
+ * Storybook docs for a usage example.
+ */
+declare export function useLatestRef<T>(value: T): {|current: T|};

package/dist/index.d.ts

@@ -9,6 +9,7 @@ export { default as Server } from "./util/server";
 export { useUniqueIdWithMock, useUniqueIdWithoutMock, } from "./hooks/use-unique-id";
 export { useForceUpdate } from "./hooks/use-force-update";
 export { useIsMounted } from "./hooks/use-is-mounted";
+export { useLatestRef } from "./hooks/use-latest-ref";
 export { useOnMountEffect } from "./hooks/use-on-mount-effect";
 export { useOnline } from "./hooks/use-online";
 export { useRenderState } from "./hooks/use-render-state";

package/dist/index.js

@@ -142,7 +142,7 @@ Text.defaultProps = {
 
 const _excluded$1 = ["className", "style"];
 function addStyle(Component, defaultStyle) {
-  const StyleComponent = props => {
+  return React__namespace.forwardRef((props, ref) => {
     const {
         className,
         style
@@ -154,11 +154,11 @@ function addStyle(Component, defaultStyle) {
       style: inlineStyles
     } = processStyleList([reset, defaultStyle, style]);
     return React__namespace.createElement(Component, _extends({}, otherProps, {
+      ref: ref,
       className: [aphroditeClassName, className].filter(Boolean).join(" "),
       style: inlineStyles
     }));
-  };
-  return StyleComponent;
+  });
 }
 const overrides = aphrodite.StyleSheet.create({
   button: {
@@ -445,6 +445,12 @@ const useIsMounted = () => {
   return React__namespace.useCallback(() => isMounted.current, []);
 };
 
+function useLatestRef(value) {
+  const ref = React__namespace.useRef(value);
+  ref.current = value;
+  return ref;
+}
+
 const useOnline = () => {
   const forceUpdate = useForceUpdate();
   React.useEffect(() => {
@@ -465,7 +471,7 @@ const {
 } = React__namespace;
 const RenderStateRoot = ({
   children,
-  throwIfNested
+  throwIfNested: _throwIfNested = true
 }) => {
   const [firstRender, setFirstRender] = useState(true);
   const renderState = useRenderState();
@@ -473,7 +479,7 @@ const RenderStateRoot = ({
     setFirstRender(false);
   }, []);
   if (renderState !== RenderState.Root) {
-    if (throwIfNested) {
+    if (_throwIfNested) {
       throw new Error("There's already a <RenderStateRoot> above this instance in " + "the render tree.  This instance should be removed.");
     }
     return children;
@@ -483,9 +489,6 @@ const RenderStateRoot = ({
     value: value
   }, children);
 };
-RenderStateRoot.defaultProps = {
-  throwIfNested: true
-};
 
 exports.IDProvider = IDProvider;
 exports.RenderState = RenderState;
@@ -498,6 +501,7 @@ exports.WithSSRPlaceholder = WithSSRPlaceholder;
 exports.addStyle = addStyle;
 exports.useForceUpdate = useForceUpdate;
 exports.useIsMounted = useIsMounted;
+exports.useLatestRef = useLatestRef;
 exports.useOnMountEffect = useOnMountEffect;
 exports.useOnline = useOnline;
 exports.useRenderState = useRenderState;

package/dist/index.js.flow

@@ -18,6 +18,7 @@ declare export {
 } from "./hooks/use-unique-id";
 declare export { useForceUpdate } from "./hooks/use-force-update";
 declare export { useIsMounted } from "./hooks/use-is-mounted";
+declare export { useLatestRef } from "./hooks/use-latest-ref";
 declare export { useOnMountEffect } from "./hooks/use-on-mount-effect";
 declare export { useOnline } from "./hooks/use-online";
 declare export { useRenderState } from "./hooks/use-render-state";

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

@@ -1,5 +1,185 @@
 import * as React from "react";
 import type { StyleType } from "./types";
-export default function addStyle<T extends React.ComponentType<any> | keyof JSX.IntrinsicElements>(Component: T, defaultStyle?: StyleType): React.FC<SpreadType<JSX.LibraryManagedAttributes<T, React.ComponentProps<T>>, {
+export default function addStyle<T extends React.ComponentType<any> | keyof JSX.IntrinsicElements, Props extends {
+    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>>;
+type IntrinsicElementsMap = {
+    a: HTMLAnchorElement;
+    abbr: HTMLElement;
+    address: HTMLElement;
+    area: HTMLAreaElement;
+    article: HTMLElement;
+    aside: HTMLElement;
+    audio: HTMLAudioElement;
+    b: HTMLElement;
+    base: HTMLBaseElement;
+    bdi: HTMLElement;
+    bdo: HTMLElement;
+    big: HTMLElement;
+    blockquote: HTMLElement;
+    body: HTMLBodyElement;
+    br: HTMLBRElement;
+    button: HTMLButtonElement;
+    canvas: HTMLCanvasElement;
+    caption: HTMLElement;
+    cite: HTMLElement;
+    code: HTMLElement;
+    col: HTMLTableColElement;
+    colgroup: HTMLTableColElement;
+    data: HTMLDataElement;
+    datalist: HTMLDataListElement;
+    dd: HTMLElement;
+    del: HTMLElement;
+    details: HTMLElement;
+    dfn: HTMLElement;
+    dialog: HTMLDialogElement;
+    div: HTMLDivElement;
+    dl: HTMLDListElement;
+    dt: HTMLElement;
+    em: HTMLElement;
+    embed: HTMLEmbedElement;
+    fieldset: HTMLFieldSetElement;
+    figcaption: HTMLElement;
+    figure: HTMLElement;
+    footer: HTMLElement;
+    form: HTMLFormElement;
+    h1: HTMLHeadingElement;
+    h2: HTMLHeadingElement;
+    h3: HTMLHeadingElement;
+    h4: HTMLHeadingElement;
+    h5: HTMLHeadingElement;
+    h6: HTMLHeadingElement;
+    head: HTMLHeadElement;
+    header: HTMLElement;
+    hgroup: HTMLElement;
+    hr: HTMLHRElement;
+    html: HTMLHtmlElement;
+    i: HTMLElement;
+    iframe: HTMLIFrameElement;
+    img: HTMLImageElement;
+    input: HTMLInputElement;
+    ins: HTMLModElement;
+    kbd: HTMLElement;
+    keygen: HTMLElement;
+    label: HTMLLabelElement;
+    legend: HTMLLegendElement;
+    li: HTMLLIElement;
+    link: HTMLLinkElement;
+    main: HTMLElement;
+    map: HTMLMapElement;
+    mark: HTMLElement;
+    menu: HTMLElement;
+    menuitem: HTMLElement;
+    meta: HTMLMetaElement;
+    meter: HTMLElement;
+    nav: HTMLElement;
+    noindex: HTMLElement;
+    noscript: HTMLElement;
+    object: HTMLObjectElement;
+    ol: HTMLOListElement;
+    optgroup: HTMLOptGroupElement;
+    option: HTMLOptionElement;
+    output: HTMLElement;
+    p: HTMLParagraphElement;
+    param: HTMLParamElement;
+    picture: HTMLElement;
+    pre: HTMLPreElement;
+    progress: HTMLProgressElement;
+    q: HTMLQuoteElement;
+    rp: HTMLElement;
+    rt: HTMLElement;
+    ruby: HTMLElement;
+    s: HTMLElement;
+    samp: HTMLElement;
+    slot: HTMLSlotElement;
+    script: HTMLScriptElement;
+    section: HTMLElement;
+    select: HTMLSelectElement;
+    small: HTMLElement;
+    source: HTMLSourceElement;
+    span: HTMLSpanElement;
+    strong: HTMLElement;
+    style: HTMLStyleElement;
+    sub: HTMLElement;
+    summary: HTMLElement;
+    sup: HTMLElement;
+    table: HTMLTableElement;
+    template: HTMLTemplateElement;
+    tbody: HTMLTableSectionElement;
+    td: HTMLElement;
+    textarea: HTMLTextAreaElement;
+    tfoot: HTMLTableSectionElement;
+    th: HTMLElement;
+    thead: HTMLTableSectionElement;
+    time: HTMLElement;
+    title: HTMLTitleElement;
+    tr: HTMLTableRowElement;
+    track: HTMLTrackElement;
+    u: HTMLElement;
+    ul: HTMLUListElement;
+    var: HTMLElement;
+    video: HTMLVideoElement;
+    wbr: HTMLElement;
+    webview: HTMLElement;
+    svg: SVGSVGElement;
+    animate: SVGElement;
+    animateMotion: SVGElement;
+    animateTransform: SVGElement;
+    circle: SVGCircleElement;
+    clipPath: SVGClipPathElement;
+    defs: SVGDefsElement;
+    desc: SVGDescElement;
+    ellipse: SVGEllipseElement;
+    feBlend: SVGFEBlendElement;
+    feColorMatrix: SVGFEColorMatrixElement;
+    feComponentTransfer: SVGFEComponentTransferElement;
+    feComposite: SVGFECompositeElement;
+    feConvolveMatrix: SVGFEConvolveMatrixElement;
+    feDiffuseLighting: SVGFEDiffuseLightingElement;
+    feDisplacementMap: SVGFEDisplacementMapElement;
+    feDistantLight: SVGFEDistantLightElement;
+    feDropShadow: SVGFEDropShadowElement;
+    feFlood: SVGFEFloodElement;
+    feFuncA: SVGFEFuncAElement;
+    feFuncB: SVGFEFuncBElement;
+    feFuncG: SVGFEFuncGElement;
+    feFuncR: SVGFEFuncRElement;
+    feGaussianBlur: SVGFEGaussianBlurElement;
+    feImage: SVGFEImageElement;
+    feMerge: SVGFEMergeElement;
+    feMergeNode: SVGFEMergeNodeElement;
+    feMorphology: SVGFEMorphologyElement;
+    feOffset: SVGFEOffsetElement;
+    fePointLight: SVGFEPointLightElement;
+    feSpecularLighting: SVGFESpecularLightingElement;
+    feSpotLight: SVGFESpotLightElement;
+    feTile: SVGFETileElement;
+    feTurbulence: SVGFETurbulenceElement;
+    filter: SVGFilterElement;
+    foreignObject: SVGForeignObjectElement;
+    g: SVGGElement;
+    image: SVGImageElement;
+    line: SVGLineElement;
+    linearGradient: SVGLinearGradientElement;
+    marker: SVGMarkerElement;
+    mask: SVGMaskElement;
+    metadata: SVGMetadataElement;
+    mpath: SVGElement;
+    path: SVGPathElement;
+    pattern: SVGPatternElement;
+    polygon: SVGPolygonElement;
+    polyline: SVGPolylineElement;
+    radialGradient: SVGRadialGradientElement;
+    rect: SVGRectElement;
+    stop: SVGStopElement;
+    switch: SVGSwitchElement;
+    symbol: SVGSymbolElement;
+    text: SVGTextElement;
+    textPath: SVGTextPathElement;
+    tspan: SVGTSpanElement;
+    use: SVGUseElement;
+    view: SVGViewElement;
+};
+export {};

package/dist/util/add-style.js.flow

@@ -1,21 +1,13 @@
-/**
- * Flowtype definitions for data
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
 import * as React from "react";
-import type { StyleType } from "./types";
+import type {StyleType} from "./types";
+
 declare export default function addStyle<
-  T: React.ComponentType<any> | $Keys<JSX.IntrinsicElements>
+    T: React.AbstractComponent<any> | string,
 >(
-  Component: T,
-  defaultStyle?: StyleType
-): React.StatelessFunctionalComponent<
-  SpreadType<
-    JSX.LibraryManagedAttributes<T, React.ElementProps<T>>,
-    {|
-      style?: StyleType,
-    |}
-  >
->;
+    Component: T,
+    defaultStyle?: StyleType,
+): React.AbstractComponent<{
+    ...React.ElementConfig<T>,
+    style?: StyleType,
+    ...
+}>;

package/dist/util/types.d.ts

@@ -62,6 +62,16 @@ export type TextViewSharedProps = {
      * Test ID used for e2e testing.
      */
     testId?: string;
+    /**
+     * Optional attribute to indicate to the Screen Reader which language the
+     * item text is in.
+     */
+    lang?: string;
+    /**
+     * Optional CSS classes for the entire dropdown component.
+     */
+    className?: string;
+    htmlFor?: string;
     tabIndex?: number;
     id?: string;
     "data-modal-launcher-portal"?: boolean;

package/dist/util/types.js.flow

@@ -82,6 +82,18 @@ export type TextViewSharedProps = {|
      * Test ID used for e2e testing.
      */
     testId?: string,
+
+    /**
+     * Optional attribute to indicate to the Screen Reader which language the
+     * item text is in.
+     */
+    lang?: string,
+
+    /**
+     * Optional CSS classes for the entire dropdown component.
+     */
+    className?: string,
+    htmlFor?: string,
     tabIndex?: number,
     id?: string,
     "data-modal-launcher-portal"?: boolean,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-core",
-  "version": "5.0.4",
+  "version": "5.2.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -23,7 +23,7 @@
     "react-router-dom": "5.3.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.9.5"
+    "wb-dev-build-settings": "^0.9.7"
   },
   "author": "",
   "license": "MIT"

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

@@ -13,10 +13,10 @@ type Props = {
     throwIfNested?: boolean;
 };
 
-const RenderStateRoot: React.FC<Props> = ({
+const RenderStateRoot = ({
     children,
-    throwIfNested,
-}): React.ReactElement => {
+    throwIfNested = true,
+}: Props): React.ReactElement => {
     const [firstRender, setFirstRender] = useState<boolean>(true);
     const renderState = useRenderState();
     useEffect(() => {
@@ -45,10 +45,4 @@ const RenderStateRoot: React.FC<Props> = ({
     );
 };
 
-// We can set `defaultProps` on a functional component if we move the `export` to appear
-// afterwards.
-RenderStateRoot.defaultProps = {
-    throwIfNested: true,
-};
-
 export {RenderStateRoot};

package/src/components/view.tsx

@@ -37,11 +37,11 @@ type DefaultProps = {
     tag: Props["tag"];
 };
 
-const StyledDiv = addStyle<"div">("div", styles.default);
-const StyledArticle = addStyle<"article">("article", styles.default);
-const StyledAside = addStyle<"aside">("aside", styles.default);
-const StyledNav = addStyle<"nav">("nav", styles.default);
-const StyledSection = addStyle<"section">("section", styles.default);
+const StyledDiv = addStyle("div", styles.default);
+const StyledArticle = addStyle("article", styles.default);
+const StyledAside = addStyle("aside", styles.default);
+const StyledNav = addStyle("nav", styles.default);
+const StyledSection = addStyle("section", styles.default);
 
 /**
  * View is a building block for constructing other components. `View` roughly

package/src/hooks/__tests__/use-force-update.test.tsx

@@ -24,7 +24,7 @@ describe("#useForceUpdate", () => {
 
         it("should cause component to render", () => {
             // Arrange
-            const Component: React.FC<any> = (props): React.ReactElement => {
+            const Component = (): React.ReactElement => {
                 const countRef = React.useRef(0);
                 const forceUpdate = useForceUpdate();
                 React.useEffect(() => {

package/src/hooks/__tests__/use-latest-ref.test.ts

@@ -0,0 +1,40 @@
+import {renderHook} from "@testing-library/react-hooks";
+import {useLatestRef} from "../use-latest-ref";
+
+describe("useLatestRef", () => {
+    it("returns a ref to the value passed in", () => {
+        const {
+            result: {current: ref},
+        } = renderHook(() => useLatestRef(123));
+        expect(ref.current).toBe(123);
+    });
+
+    it("returns a ref to the most recent value passed in", () => {
+        // Arrange: render the component with props {value: 123}
+        const {result, rerender} = renderHook(
+            ({value}) => useLatestRef(value),
+            {initialProps: {value: 123}},
+        );
+
+        // Act
+        rerender({value: 456});
+
+        // Assert
+        expect(result.current.current).toBe(456);
+    });
+
+    it("returns a stable ref object for the lifetime of the component", () => {
+        // Arrange: render the component and remember the ref
+        const {result, rerender} = renderHook(
+            ({value}) => useLatestRef(value),
+            {initialProps: {value: 123}},
+        );
+        const refFromFirstRender = result.current;
+
+        // Act
+        rerender({value: 456});
+
+        // Assert
+        expect(result.current).toBe(refFromFirstRender);
+    });
+});

package/src/hooks/use-latest-ref.js.flow

@@ -0,0 +1,16 @@
+/**
+ * Flowtype definitions for useLatestRef
+ * @flow
+ */
+
+/**
+ * Return a ref that always contains the `value` passed.
+ *
+ * The useLatestRef hook returns a ref that always contains the `value` passed
+ * to the hook during the most recent render.
+ *
+ * It can be used to wrap a possibly-changing prop in a stable value that can
+ * be passed to useEffect without causing unnecessary re-renders. See the
+ * Storybook docs for a usage example.
+ */
+declare export function useLatestRef<T>(value: T): {|current: T|};

package/src/hooks/use-latest-ref.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+
+/**
+ * Return a ref that always contains the `value` passed.
+ *
+ * The useLatestRef hook returns a ref that always contains the `value` passed
+ * to the hook during the most recent render.
+ *
+ * It can be used to wrap a possibly-changing prop in a stable value that can
+ * be passed to useEffect without causing unnecessary re-renders. See the
+ * Storybook docs for a usage example.
+ */
+export function useLatestRef<T>(value: T): React.RefObject<T> {
+    const ref = React.useRef(value);
+    ref.current = value;
+    return ref;
+}

package/src/index.ts

@@ -13,6 +13,7 @@ export {
 } from "./hooks/use-unique-id";
 export {useForceUpdate} from "./hooks/use-force-update";
 export {useIsMounted} from "./hooks/use-is-mounted";
+export {useLatestRef} from "./hooks/use-latest-ref";
 export {useOnMountEffect} from "./hooks/use-on-mount-effect";
 export {useOnline} from "./hooks/use-online";
 export {useRenderState} from "./hooks/use-render-state";

package/src/util/__tests__/add-style.test.tsx

@@ -4,7 +4,7 @@ import {screen, render} from "@testing-library/react";
 
 import addStyle from "../add-style";
 
-const StyledDiv = addStyle<"div">("div");
+const StyledDiv = addStyle("div");
 
 const styles = StyleSheet.create({
     foo: {
@@ -88,4 +88,24 @@ describe("addStyle", () => {
         expect(classNames[0]).toEqual(expect.any(String));
         expect(classNames[1]).toEqual("foo");
     });
+
+    it("should forward a ref to the component", () => {
+        // Arrange
+        const ref = React.createRef<HTMLDivElement>();
+
+        render(
+            <StyledDiv
+                className="foo"
+                style={styles.foo}
+                data-test-id="styled-div"
+                ref={ref}
+            />,
+        );
+
+        // Act
+        const div = screen.getByTestId("styled-div");
+
+        // Assert
+        expect(div).toBe(ref.current);
+    });
 });