@khanacademy/wonder-blocks-core 4.9.1 → 5.0.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @khanacademy/wonder-blocks-core
 
+## 5.0.1
+
+### Patch Changes
+
+-   ccb6fe00: Miscellaneous TS type fixes
+-   d4c2b18c: Fix a variety of issues with Flow types generated by flowgen
+
+## 5.0.0
+
+### Major Changes
+
+-   1ca4d7e3: Fix minor issue with generate Flow types (this is a major bump b/c I forgot to do one after doing the TS conversion)
+
 ## 4.9.1
 
 ### Patch Changes

package/dist/components/id-provider.d.ts

@@ -6,7 +6,7 @@ type Props = {
      * use anywhere within children. This provides a way of adding a unique identifier
      * to a given component for a11y purposes.
      */
-    children: (uniqueId: string) => React.ReactElement;
+    children: (uniqueId: string) => React.ReactNode;
     /**
      * Scope for the unique identifier
      */
@@ -53,6 +53,6 @@ type Props = {
 export default class IDProvider extends React.Component<Props> {
     static defaultId: string;
     renderChildren(ids?: IIdentifierFactory): React.ReactNode;
-    render(): React.ReactElement;
+    render(): React.ReactNode;
 }
 export {};

package/dist/components/id-provider.js.flow

@@ -7,13 +7,13 @@
 
 import * as React from "react";
 import type { IIdentifierFactory } from "../util/types";
-declare type Props = {
+declare type Props = {|
   /**
    * Use the children-as-function pattern to pass a uniqueId string for
    * use anywhere within children. This provides a way of adding a unique identifier
    * to a given component for a11y purposes.
    */
-  children: (uniqueId: string) => React.Element<>,
+  children: (uniqueId: string) => React.Node,
 
   /**
    * Scope for the unique identifier
@@ -30,8 +30,7 @@ declare type Props = {
    * Test ID used for e2e testing.
    */
   testId?: string,
-  ...
-};
+|};
 /**
  * This is a wrapper that returns an identifier. If the `id` prop is set, the
  * component will return the same id to be consumed by its children. Otherwise,
@@ -63,5 +62,5 @@ declare type Props = {
 declare export default class IDProvider extends React.Component<Props> {
   static defaultId: string;
   renderChildren(ids?: IIdentifierFactory): React.Node;
-  render(): React.Element<>;
+  render(): React.Node;
 }

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

@@ -6,12 +6,11 @@
  */
 
 import * as React from "react";
-declare export var RenderState: {
+declare export var RenderState: {|
   +Root: "root",
   +Initial: "initial",
   +Standard: "standard",
-  ...
-};
+|};
 /**
  * This is the context that tracks who is doing what in our SSR component tree.
  *

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

@@ -6,14 +6,13 @@
  */
 
 import * as React from "react";
-declare type Props = {
+declare type Props = {|
   children: React.Node,
 
   /**
    * Whether the component should throw when nested.  Defaults to `true`.
    */
   throwIfNested?: boolean,
-  ...
-};
-declare var RenderStateRoot: React.FC<Props>;
+|};
+declare var RenderStateRoot: React.StatelessFunctionalComponent<Props>;
 declare export { RenderStateRoot };

package/dist/components/text.d.ts

@@ -20,6 +20,6 @@ type DefaultProps = {
  */
 export default class Text extends React.Component<Props> {
     static defaultProps: DefaultProps;
-    render(): React.ReactElement;
+    render(): React.ReactNode;
 }
 export {};

package/dist/components/text.js.flow

@@ -7,17 +7,15 @@
 
 import * as React from "react";
 import type { TextViewSharedProps } from "../util/types";
-declare type Props = {
+declare type Props = {|
   ...TextViewSharedProps,
-  ...{
+  ...{|
     tag: string,
-    ...
-  },
-};
-declare type DefaultProps = {
+  |},
+|};
+declare type DefaultProps = {|
   tag: $PropertyType<Props, "tag">,
-  ...
-};
+|};
 /**
  * Text is a building block for constructing other components. `Text` roughly
  * maps to `span`. You can override which tag is used to render the component
@@ -32,5 +30,5 @@ declare type DefaultProps = {
  */
 declare export default class Text extends React.Component<Props> {
   static defaultProps: DefaultProps;
-  render(): React.Element<>;
+  render(): React.Node;
 }

package/dist/components/unique-id-provider.d.ts

@@ -18,7 +18,7 @@ type Props = {
      *
      * `{get(id: string): string} => React.Node`
      */
-    children: (arg1: IIdentifierFactory) => React.ReactElement;
+    children: (arg1: IIdentifierFactory) => React.ReactNode;
     /**
      * If mockOnFirstRender is false, children is only called
      * after the initial render has occurred.
@@ -64,6 +64,6 @@ type Props = {
 export default class UniqueIDProvider extends React.Component<Props> {
     _idFactory: IIdentifierFactory;
     _performRender(firstRender: boolean): React.ReactNode;
-    render(): React.ReactElement;
+    render(): React.ReactNode;
 }
 export {};

package/dist/components/unique-id-provider.js.flow

@@ -7,7 +7,7 @@
 
 import * as React from "react";
 import type { IIdentifierFactory } from "../util/types";
-declare type Props = {
+declare type Props = {|
   /**
    * A render prop that takes an instance of IIdentifierFactory and returns
    * the content to be rendered.
@@ -25,7 +25,7 @@ declare type Props = {
    *
    * `{get(id: string): string} => React.Node`
    */
-  children: (arg1: IIdentifierFactory) => React.Element<>,
+  children: (arg1: IIdentifierFactory) => React.Node,
 
   /**
    * If mockOnFirstRender is false, children is only called
@@ -41,8 +41,7 @@ declare type Props = {
    * given scope. This can be useful for making easily readable identifiers.
    */
   +scope?: string,
-  ...
-};
+|};
 /**
  * The `UniqueIDProvider` component is how Wonder Blocks components obtain
  * unique identifiers. This component ensures that server-side rendering and
@@ -74,5 +73,5 @@ declare type Props = {
 declare export default class UniqueIDProvider extends React.Component<Props> {
   _idFactory: IIdentifierFactory;
   _performRender(firstRender: boolean): React.Node;
-  render(): React.Element<>;
+  render(): React.Node;
 }

package/dist/components/view.d.ts

@@ -38,6 +38,6 @@ type DefaultProps = {
  */
 export default class View extends React.Component<Props> {
     static defaultProps: DefaultProps;
-    render(): React.ReactElement;
+    render(): React.ReactNode;
 }
 export {};

package/dist/components/view.js.flow

@@ -8,20 +8,18 @@
 import * as React from "react";
 import type { TextViewSharedProps } from "../util/types";
 declare type ValidViewTags = "div" | "article" | "aside" | "nav" | "section";
-declare type Props = {
+declare type Props = {|
   ...TextViewSharedProps,
-  ...{
+  ...{|
     /**
      * The HTML tag to render.
      */
     tag: ValidViewTags,
-    ...
-  },
-};
-declare type DefaultProps = {
+  |},
+|};
+declare type DefaultProps = {|
   tag: $PropertyType<Props, "tag">,
-  ...
-};
+|};
 /**
  * View is a building block for constructing other components. `View` roughly
  * maps to `div`. You can override which tag is used to render the component
@@ -50,5 +48,5 @@ declare type DefaultProps = {
  */
 declare export default class View extends React.Component<Props> {
   static defaultProps: DefaultProps;
-  render(): React.Element<>;
+  render(): React.Node;
 }

package/dist/components/with-ssr-placeholder.d.ts

@@ -10,7 +10,7 @@ type Props = {
      * not server-side rendering, or (when server-side rendering) after
      * the initial rehydration has finished.
      */
-    children: () => React.ReactElement;
+    children: () => React.ReactNode;
     /**
      * What to render during server-side rendering, or null not to
      * render anything.
@@ -58,6 +58,6 @@ export default class WithSSRPlaceholder extends React.Component<Props, State> {
     _isTheRootComponent: boolean;
     _renderAsRootComponent(): React.ReactNode;
     _maybeRender(renderState: typeof RenderState[keyof typeof RenderState]): React.ReactNode;
-    render(): React.ReactElement;
+    render(): React.ReactNode;
 }
 export {};

package/dist/components/with-ssr-placeholder.js.flow

@@ -12,13 +12,13 @@ import { RenderState } from "./render-state-context";
  * We use render functions so that we don't do any work unless we need to.
  * This avoids rendering but not mounting potentially complex component trees.
  */
-declare type Props = {
+declare type Props = {|
   /**
    * The content that is client-only.  This is what is rendered when
    * not server-side rendering, or (when server-side rendering) after
    * the initial rehydration has finished.
    */
-  children: () => React.Element<>,
+  children: () => React.Node,
 
   /**
    * What to render during server-side rendering, or null not to
@@ -29,13 +29,11 @@ declare type Props = {
    * the server-side renderer and the rehydration -- or it defeats
    * the purpose of using the WithSSRPlaceholder component.
    */
-  placeholder: () => React.Element<> | null | void,
-  ...
-};
-declare type State = {
+  placeholder: () => React.Element<any> | null | void,
+|};
+declare type State = {|
   mounted: boolean,
-  ...
-};
+|};
 /**
  * Defer or change rendering until the component did mount.
  *
@@ -73,5 +71,5 @@ declare export default class WithSSRPlaceholder
   _maybeRender(
     renderState: $ElementType<typeof RenderState, $Keys<typeof RenderState>>
   ): React.Node;
-  render(): React.Element<>;
+  render(): React.Node;
 }

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

@@ -8,16 +8,15 @@
 import * as React from "react";
 import type { StyleType } from "./types";
 declare export default function addStyle<
-  T: React.ComponentType<any> | $Keys<JSX.IntrinsicElements>
+  T: React.FragmentType<any> | $Keys<JSX.IntrinsicElements>
 >(
   Component: T,
   defaultStyle?: StyleType
-): React.FC<
+): React.StatelessFunctionalComponent<
   SpreadType<
-    JSX.LibraryManagedAttributes<T, React.ComponentProps<T>>,
-    {
+    JSX.LibraryManagedAttributes<T, React.ElementProps<T>>,
+    {|
       style?: StyleType,
-      ...
-    }
+    |}
   >
 >;

package/dist/util/aria-types.d.ts

@@ -0,0 +1,187 @@
+export interface AriaAttributes {
+    /** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */
+    "aria-activedescendant"?: string | undefined;
+    /** Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. */
+    "aria-atomic"?: boolean | "false" | "true" | undefined;
+    /**
+     * Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be
+     * presented if they are made.
+     */
+    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
+    /** Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user. */
+    "aria-busy"?: boolean | "false" | "true" | undefined;
+    /**
+     * Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
+     * @see aria-pressed @see aria-selected.
+     */
+    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
+    /**
+     * Defines the total number of columns in a table, grid, or treegrid.
+     * @see aria-colindex.
+     */
+    "aria-colcount"?: number | undefined;
+    /**
+     * Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
+     * @see aria-colcount @see aria-colspan.
+     */
+    "aria-colindex"?: number | undefined;
+    /**
+     * Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
+     * @see aria-colindex @see aria-rowspan.
+     */
+    "aria-colspan"?: number | undefined;
+    /**
+     * Identifies the element (or elements) whose contents or presence are controlled by the current element.
+     * @see aria-owns.
+     */
+    "aria-controls"?: string | undefined;
+    /** Indicates the element that represents the current item within a container or set of related elements. */
+    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
+    /**
+     * Identifies the element (or elements) that describes the object.
+     * @see aria-labelledby
+     */
+    "aria-describedby"?: string | undefined;
+    /**
+     * Identifies the element that provides a detailed, extended description for the object.
+     * @see aria-describedby.
+     */
+    "aria-details"?: string | undefined;
+    /**
+     * Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
+     * @see aria-hidden @see aria-readonly.
+     */
+    "aria-disabled"?: boolean | "false" | "true" | undefined;
+    /**
+     * Indicates what functions can be performed when a dragged object is released on the drop target.
+     * @deprecated in ARIA 1.1
+     */
+    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+    /**
+     * Identifies the element that provides an error message for the object.
+     * @see aria-invalid @see aria-describedby.
+     */
+    "aria-errormessage"?: string | undefined;
+    /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */
+    "aria-expanded"?: boolean | "false" | "true" | undefined;
+    /**
+     * Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,
+     * allows assistive technology to override the general default of reading in document source order.
+     */
+    "aria-flowto"?: string | undefined;
+    /**
+     * Indicates an element's "grabbed" state in a drag-and-drop operation.
+     * @deprecated in ARIA 1.1
+     */
+    "aria-grabbed"?: boolean | "false" | "true" | undefined;
+    /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */
+    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+    /**
+     * Indicates whether the element is exposed to an accessibility API.
+     * @see aria-disabled.
+     */
+    "aria-hidden"?: boolean | "false" | "true" | undefined;
+    /**
+     * Indicates the entered value does not conform to the format expected by the application.
+     * @see aria-errormessage.
+     */
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+    /** Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. */
+    "aria-keyshortcuts"?: string | undefined;
+    /**
+     * Defines a string value that labels the current element.
+     * @see aria-labelledby.
+     */
+    "aria-label"?: string | undefined;
+    /**
+     * Identifies the element (or elements) that labels the current element.
+     * @see aria-describedby.
+     */
+    "aria-labelledby"?: string | undefined;
+    /** Defines the hierarchical level of an element within a structure. */
+    "aria-level"?: number | undefined;
+    /** Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. */
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    /** Indicates whether an element is modal when displayed. */
+    "aria-modal"?: boolean | "false" | "true" | undefined;
+    /** Indicates whether a text box accepts multiple lines of input or only a single line. */
+    "aria-multiline"?: boolean | "false" | "true" | undefined;
+    /** Indicates that the user may select more than one item from the current selectable descendants. */
+    "aria-multiselectable"?: boolean | "false" | "true" | undefined;
+    /** Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. */
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    /**
+     * Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship
+     * between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
+     * @see aria-controls.
+     */
+    "aria-owns"?: string | undefined;
+    /**
+     * Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.
+     * A hint could be a sample value or a brief description of the expected format.
+     */
+    "aria-placeholder"?: string | undefined;
+    /**
+     * Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
+     * @see aria-setsize.
+     */
+    "aria-posinset"?: number | undefined;
+    /**
+     * Indicates the current "pressed" state of toggle buttons.
+     * @see aria-checked @see aria-selected.
+     */
+    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
+    /**
+     * Indicates that the element is not editable, but is otherwise operable.
+     * @see aria-disabled.
+     */
+    "aria-readonly"?: boolean | "false" | "true" | undefined;
+    /**
+     * Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
+     * @see aria-atomic.
+     */
+    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+    /** Indicates that user input is required on the element before a form may be submitted. */
+    "aria-required"?: boolean | "false" | "true" | undefined;
+    /** Defines a human-readable, author-localized description for the role of an element. */
+    "aria-roledescription"?: string | undefined;
+    /**
+     * Defines the total number of rows in a table, grid, or treegrid.
+     * @see aria-rowindex.
+     */
+    "aria-rowcount"?: number | undefined;
+    /**
+     * Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
+     * @see aria-rowcount @see aria-rowspan.
+     */
+    "aria-rowindex"?: number | undefined;
+    /**
+     * Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
+     * @see aria-rowindex @see aria-colspan.
+     */
+    "aria-rowspan"?: number | undefined;
+    /**
+     * Indicates the current "selected" state of various widgets.
+     * @see aria-checked @see aria-pressed.
+     */
+    "aria-selected"?: boolean | "false" | "true" | undefined;
+    /**
+     * Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
+     * @see aria-posinset.
+     */
+    "aria-setsize"?: number | undefined;
+    /** Indicates if items in a table or grid are sorted in ascending or descending order. */
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    /** Defines the maximum allowed value for a range widget. */
+    "aria-valuemax"?: number | undefined;
+    /** Defines the minimum allowed value for a range widget. */
+    "aria-valuemin"?: number | undefined;
+    /**
+     * Defines the current value for a range widget.
+     * @see aria-valuetext.
+     */
+    "aria-valuenow"?: number | undefined;
+    /** Defines the human readable text alternative of aria-valuenow for a range widget. */
+    "aria-valuetext"?: string | undefined;
+}
+export type AriaRole = "alert" | "alertdialog" | "application" | "article" | "banner" | "button" | "cell" | "checkbox" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "dialog" | "directory" | "document" | "feed" | "figure" | "form" | "grid" | "gridcell" | "group" | "heading" | "img" | "link" | "list" | "listbox" | "listitem" | "log" | "main" | "marquee" | "math" | "menu" | "menubar" | "menuitem" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "none" | "note" | "option" | "presentation" | "progressbar" | "radio" | "radiogroup" | "region" | "row" | "rowgroup" | "rowheader" | "scrollbar" | "search" | "searchbox" | "separator" | "slider" | "spinbutton" | "status" | "switch" | "tab" | "table" | "tablist" | "tabpanel" | "term" | "textbox" | "timer" | "toolbar" | "tooltip" | "tree" | "treegrid" | "treeitem";