@khanacademy/wonder-blocks-dropdown 3.0.0 → 3.0.2

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 3.0.2
+
+### Patch Changes
+
+-   Updated dependencies [21ce20c7]
+    -   @khanacademy/wonder-blocks-core@5.0.2
+    -   @khanacademy/wonder-blocks-clickable@3.0.2
+    -   @khanacademy/wonder-blocks-icon@2.0.2
+    -   @khanacademy/wonder-blocks-layout@2.0.2
+    -   @khanacademy/wonder-blocks-modal@4.0.2
+    -   @khanacademy/wonder-blocks-search-field@2.0.2
+    -   @khanacademy/wonder-blocks-typography@2.0.2
+
+## 3.0.1
+
+### Patch Changes
+
+-   ccb6fe00: Miscellaneous TS type fixes
+-   d4c2b18c: Fix a variety of issues with Flow types generated by flowgen
+-   Updated dependencies [ccb6fe00]
+-   Updated dependencies [d4c2b18c]
+    -   @khanacademy/wonder-blocks-clickable@3.0.1
+    -   @khanacademy/wonder-blocks-core@5.0.1
+    -   @khanacademy/wonder-blocks-icon@2.0.1
+    -   @khanacademy/wonder-blocks-layout@2.0.1
+    -   @khanacademy/wonder-blocks-modal@4.0.1
+    -   @khanacademy/wonder-blocks-timing@3.0.1
+    -   @khanacademy/wonder-blocks-typography@2.0.1
+    -   @khanacademy/wonder-blocks-color@2.0.1
+    -   @khanacademy/wonder-blocks-search-field@2.0.1
+    -   @khanacademy/wonder-blocks-spacing@4.0.1
+
 ## 3.0.0
 
 ### Major Changes

package/dist/components/__mocks__/dropdown-core-virtualized.d.ts

@@ -9,6 +9,6 @@ type Props = {
  * A minimal mocked version of the Virtualized implementation
  */
 declare class DropdownCoreVirtualizedMock extends React.Component<Props> {
-    render(): React.ReactElement;
+    render(): React.ReactNode;
 }
 export default DropdownCoreVirtualizedMock;

package/dist/components/__mocks__/dropdown-core-virtualized.js.flow

@@ -8,15 +8,14 @@
 import * as React from "react";
 import { VariableSizeList as List } from "react-window";
 import type { DropdownItem } from "../../util/types";
-declare type Props = {
+declare type Props = {|
   data: Array<DropdownItem>,
   listRef?: React.RefObject<List>,
-  ...
-};
+|};
 /**
  * A minimal mocked version of the Virtualized implementation
  */
 declare class DropdownCoreVirtualizedMock extends React.Component<Props> {
-  render(): React.Element<any>;
+  render(): React.Node;
 }
 declare export default typeof DropdownCoreVirtualizedMock;

package/dist/components/action-item.d.ts

@@ -89,6 +89,6 @@ export default class ActionItem extends React.Component<ActionProps> {
     static defaultProps: DefaultProps;
     static __IS_ACTION_ITEM__: boolean;
     renderClickableBehavior(router: any): React.ReactNode;
-    render(): React.ReactElement;
+    render(): React.ReactNode;
 }
 export {};

package/dist/components/action-item.js.flow

@@ -7,7 +7,7 @@
 
 import * as React from "react";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
-declare type ActionProps = {
+declare type ActionProps = {|
   /**
    * Display text of the action item.
    */
@@ -90,14 +90,12 @@ declare type ActionProps = {
    * @ignore
    */
   style?: StyleType,
-  ...
-};
-declare type DefaultProps = {
+|};
+declare type DefaultProps = {|
   disabled: $PropertyType<ActionProps, "disabled">,
   indent: $PropertyType<ActionProps, "indent">,
   role: $PropertyType<ActionProps, "role">,
-  ...
-};
+|};
 /**
  * The action item trigger actions, such as navigating to a different page or
  * opening a modal. Supply the href and/or onClick props. Used as a child of
@@ -108,5 +106,5 @@ declare export default class ActionItem extends React.Component<ActionProps> {
   static defaultProps: DefaultProps;
   static __IS_ACTION_ITEM__: boolean;
   renderClickableBehavior(router: any): React.Node;
-  render(): React.Element<any>;
+  render(): React.Node;
 }

package/dist/components/action-menu-opener-core.d.ts

@@ -26,6 +26,6 @@ type Props = Partial<Omit<AriaProps, "aria-disabled">> & ClickableState & {
  * - the down caret icon is smaller that the one that would be used by ButtonCore
  */
 export default class ActionMenuOpenerCore extends React.Component<Props> {
-    render(): React.ReactElement;
+    render(): React.ReactNode;
 }
 export {};

package/dist/components/action-menu-opener-core.js.flow

@@ -8,10 +8,10 @@
 import * as React from "react";
 import type { AriaProps } from "@khanacademy/wonder-blocks-core";
 import type { ClickableState } from "@khanacademy/wonder-blocks-clickable";
-declare type Props = {
-  ...$Rest<$Diff<AriaProps, { "aria-disabled": any }>, { ... }>,
+declare type Props = {|
+  ...$Rest<$Diff<AriaProps, { "aria-disabled": any }>, {}>,
   ...ClickableState,
-  ...{
+  ...{|
     /**
      * Display text for the opener.
      */
@@ -31,9 +31,8 @@ declare type Props = {
      * Whether the dropdown is open.
      */
     opened: boolean,
-    ...
-  },
-};
+  |},
+|};
 /**
  * Although this component shares a lot with ButtonCore there are a couple
  * of differences:
@@ -43,5 +42,5 @@ declare type Props = {
 declare export default class ActionMenuOpenerCore
   extends React.Component<Props>
 {
-  render(): React.Element<any>;
+  render(): React.Node;
 }

package/dist/components/action-menu.d.ts

@@ -104,6 +104,6 @@ export default class ActionMenu extends React.Component<Props, State> {
     handleOpenerRef: (node?: any) => void;
     handleClick: (e: React.SyntheticEvent) => void;
     renderOpener(numItems: number): React.ReactElement<React.ComponentProps<typeof DropdownOpener>>;
-    render(): React.ReactElement;
+    render(): React.ReactNode;
 }
 export {};

package/dist/components/action-menu.js.flow

@@ -9,9 +9,9 @@ import * as React from "react";
 import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
 import DropdownOpener from "./dropdown-opener";
 import type { Item, DropdownItem, OpenerProps } from "../util/types";
-declare type Props = {
+declare type Props = {|
   ...AriaProps,
-  ...{
+  ...{|
     /**
      * The items in this dropdown.
      */
@@ -84,21 +84,18 @@ declare type Props = {
      * element to access pointer event state.
      */
     opener?: (openerProps: OpenerProps) => React.Element<any>,
-    ...
-  },
-};
-declare type State = {
+  |},
+|};
+declare type State = {|
   /**
    * Whether or not the dropdown is open.
    */
   opened: boolean,
-  ...
-};
-declare type DefaultProps = {
+|};
+declare type DefaultProps = {|
   alignment: $PropertyType<Props, "alignment">,
   disabled: $PropertyType<Props, "disabled">,
-  ...
-};
+|};
 /**
  * A menu that consists of various types of items.
  *
@@ -125,15 +122,15 @@ declare export default class ActionMenu extends React.Component<Props, State> {
   static getDerivedStateFromProps(
     props: Props,
     state: State
-  ): $Rest<State, { ... }> | null;
+  ): $Rest<State, {}> | null;
   handleItemSelected: () => void;
   handleOpenChanged: (opened: boolean) => void;
   handleOptionSelected: (selectedValue: string) => void;
   getMenuItems(): Array<DropdownItem>;
   handleOpenerRef: (node?: any) => void;
-  handleClick: (e: React.SyntheticEvent<>) => void;
+  handleClick: (e: SyntheticEvent<>) => void;
   renderOpener(
     numItems: number
-  ): React.Element<React.ComponentProps<typeof DropdownOpener>>;
-  render(): React.Element<any>;
+  ): React.Element<React.ElementProps<typeof DropdownOpener>>;
+  render(): React.Node;
 }

package/dist/components/check.js.flow

@@ -11,7 +11,7 @@ import * as React from "react";
  * Props describing the state of the OptionItem, shared by the checkbox
  * component,
  */
-declare type CheckProps = {
+declare type CheckProps = {|
   /**
    * Whether option item is disabled.
    */
@@ -36,10 +36,9 @@ declare type CheckProps = {
    * Whether option item is focused.
    */
   focused: boolean,
-  ...
-};
+|};
 /**
  * The check component used by OptionItem.
  */
-declare var Check: React.FC<CheckProps>;
+declare var Check: React.StatelessFunctionalComponent<CheckProps>;
 declare export default typeof Check;

package/dist/components/checkbox.js.flow

@@ -11,7 +11,7 @@ import * as React from "react";
  * Props describing the state of the OptionItem, shared by the check
  * component,
  */
-declare type CheckProps = {
+declare type CheckProps = {|
   /**
    * Whether option item is disabled.
    */
@@ -36,10 +36,9 @@ declare type CheckProps = {
    * Whether option item is focused.
    */
   focused: boolean,
-  ...
-};
+|};
 /**
  * The checkbox component used by OptionItem.
  */
-declare var Checkbox: React.FC<CheckProps>;
+declare var Checkbox: React.StatelessFunctionalComponent<CheckProps>;
 declare export default typeof Checkbox;

package/dist/components/dropdown-core-virtualized-item.d.ts

@@ -25,6 +25,6 @@ type Props = {
  * react-window make its own calculations.
  */
 declare class DropdownVirtualizedItem extends React.Component<Props> {
-    render(): React.ReactElement;
+    render(): React.ReactNode;
 }
 export default DropdownVirtualizedItem;

package/dist/components/dropdown-core-virtualized-item.js.flow

@@ -8,7 +8,7 @@
 import * as React from "react";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
 import type { DropdownItem } from "../util/types";
-declare type Props = {
+declare type Props = {|
   /**
    * The complete list of items that will be virtualized.
    */
@@ -28,14 +28,13 @@ declare type Props = {
    * Custom styles passed from react-window
    */
   style: StyleType,
-  ...
-};
+|};
 /**
  * A virtualized list item - It's created by decorating the DropdownItem
  * (ActionItem, OptionItem, SeparatorItem) with custom styles to let
  * react-window make its own calculations.
  */
 declare class DropdownVirtualizedItem extends React.Component<Props> {
-  render(): React.Element<any>;
+  render(): React.Node;
 }
 declare export default typeof DropdownVirtualizedItem;

package/dist/components/dropdown-core-virtualized.js.flow

@@ -8,13 +8,12 @@
 import * as React from "react";
 import { VariableSizeList as List } from "react-window";
 import type { DropdownItem } from "../util/types";
-declare var _default: React.ForwardRefExoticComponent<{
-  ...{
+declare var _default: React.ForwardRefExoticComponent<{|
+  ...{|
     width?: number | null | void,
     data: DropdownItem[],
     listRef?: React.RefObject<List<any>> | void,
-    ...
-  },
+  |},
   ...React.RefAttributes<mixed>,
-}>;
+|}>;
 declare export default typeof _default;

package/dist/components/dropdown-core.js.flow

@@ -8,7 +8,7 @@
 import * as React from "react";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
 import type { DropdownItem } from "../util/types";
-declare type Labels = {
+declare type Labels = {|
   /**
    * Label for describing the dismiss icon on the search filter.
    */
@@ -29,10 +29,9 @@ declare type Labels = {
    * These can be all items or only the ones that match the filter.
    */
   someResults: (numOptions: number) => string,
-  ...
-};
+|};
 declare type DropdownAriaRole = "listbox" | "menu";
-declare type ExportProps = {
+declare type ExportProps = {|
   /**
    * Items for the menu.
    */
@@ -147,7 +146,6 @@ declare type ExportProps = {
    * Used to determine if we can automatically select an item using the keyboard.
    */
   selectionType?: "single" | "multi",
-  ...
-};
+|};
 declare var _default: React.ComponentType<ExportProps>;
 declare export default typeof _default;

package/dist/components/dropdown-opener.d.ts

@@ -34,7 +34,7 @@ type DefaultProps = {
 declare class DropdownOpener extends React.Component<Props> {
     static defaultProps: DefaultProps;
     getTestIdFromProps: (childrenProps?: any) => string;
-    renderAnchorChildren(eventState: ClickableState, clickableChildrenProps: ChildrenProps): React.ReactNode;
-    render(): React.ReactElement;
+    renderAnchorChildren(eventState: ClickableState, clickableChildrenProps: ChildrenProps): React.ReactElement;
+    render(): React.ReactNode;
 }
 export default DropdownOpener;

package/dist/components/dropdown-opener.js.flow

@@ -12,9 +12,9 @@ import type {
   ClickableState,
 } from "@khanacademy/wonder-blocks-clickable";
 import type { OpenerProps } from "../util/types";
-declare type Props = {
-  ...$Rest<$Diff<AriaProps, { "aria-disabled": any }>, { ... }>,
-  ...{
+declare type Props = {|
+  ...$Rest<$Diff<AriaProps, { "aria-disabled": any }>, {}>,
+  ...{|
     /**
      * The child function that returns the anchor the Dropdown will be activated
      * by. This function takes two arguments:
@@ -32,7 +32,7 @@ declare type Props = {
     /**
      * Callback for when the opener is pressed.
      */
-    onClick: (e: React.SyntheticEvent<>) => mixed,
+    onClick: (e: SyntheticEvent<>) => mixed,
 
     /**
      * Test ID used for e2e testing.
@@ -43,20 +43,18 @@ declare type Props = {
      * Text for the opener that can be passed to the child as an argument.
      */
     text: string,
-    ...
-  },
-};
-declare type DefaultProps = {
+  |},
+|};
+declare type DefaultProps = {|
   disabled: $PropertyType<Props, "disabled">,
-  ...
-};
+|};
 declare class DropdownOpener extends React.Component<Props> {
   static defaultProps: DefaultProps;
   getTestIdFromProps: (childrenProps?: any) => string;
   renderAnchorChildren(
     eventState: ClickableState,
     clickableChildrenProps: ChildrenProps
-  ): React.Node;
-  render(): React.Element<any>;
+  ): React.Element<any>;
+  render(): React.Node;
 }
 declare export default typeof DropdownOpener;

package/dist/components/dropdown-popper.d.ts

@@ -4,7 +4,7 @@ type Props = {
     /**
      * The children that will be wrapped by PopperJS.
      */
-    children: (isReferenceHidden: boolean) => React.ReactElement;
+    children: (isReferenceHidden: boolean) => React.ReactNode;
     /**
      * The reference element used to position the popper.
      */

package/dist/components/dropdown-popper.js.flow

@@ -7,11 +7,11 @@
 
 import * as React from "react";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
-declare type Props = {
+declare type Props = {|
   /**
    * The children that will be wrapped by PopperJS.
    */
-  children: (isReferenceHidden: boolean) => React.Element<any>,
+  children: (isReferenceHidden: boolean) => React.Node,
 
   /**
    * The reference element used to position the popper.
@@ -34,10 +34,9 @@ declare type Props = {
    * Styles that will be applied to the children.
    */
   style?: StyleType,
-  ...
-};
+|};
 /**
  * A wrapper for PopperJS that renders the children inside a portal.
  */
-declare var DropdownPopper: React.FC<Props>;
+declare var DropdownPopper: React.StatelessFunctionalComponent<Props>;
 declare export default typeof DropdownPopper;

package/dist/components/multi-select.d.ts

@@ -193,6 +193,6 @@ export default class MultiSelect extends React.Component<Props, State> {
     handleSearchTextChanged: (searchText: string) => void;
     handleClick: (e: React.SyntheticEvent) => void;
     renderOpener(allChildren: Array<React.ReactElement<React.ComponentProps<typeof OptionItem>>>): React.ReactElement<React.ComponentProps<typeof DropdownOpener>> | React.ReactElement<React.ComponentProps<typeof SelectOpener>>;
-    render(): React.ReactElement;
+    render(): React.ReactNode;
 }
 export {};

package/dist/components/multi-select.js.flow

@@ -11,7 +11,7 @@ import DropdownOpener from "./dropdown-opener";
 import SelectOpener from "./select-opener";
 import OptionItem from "./option-item";
 import type { DropdownItem, OpenerProps } from "../util/types";
-export type Labels = {
+export type Labels = {|
   /**
    * Label for describing the dismiss icon on the search filter.
    */
@@ -51,9 +51,8 @@ export type Labels = {
    * Label for the opening component when all the items have been selected.
    */
   allSelected: string,
-  ...
-};
-declare type DefaultProps = {
+|};
+declare type DefaultProps = {|
   /**
    * Whether this dropdown should be left-aligned or right-aligned with the
    * opener component. Defaults to left-aligned.
@@ -81,20 +80,16 @@ declare type DefaultProps = {
    * Whether to display shortcuts for Select All and Select None.
    */
   shortcuts: boolean,
-  ...
-};
-declare type Props = {
+|};
+declare type Props = {|
   ...AriaProps,
   ...DefaultProps,
-  ...{
+  ...{|
     /**
      * The items in this select.
      */
     children?: Array<
-      | React.Element<React.ComponentProps<typeof OptionItem>>
-      | false
-      | null
-      | void
+      React.Element<React.ElementProps<typeof OptionItem>> | false | null | void
     >,
 
     /**
@@ -165,10 +160,9 @@ declare type Props = {
      * Test ID used for e2e testing.
      */
     testId?: string,
-    ...
-  },
-};
-declare type State = {
+  |},
+|};
+declare type State = {|
   /**
    * Whether or not the dropdown is open.
    */
@@ -197,8 +191,7 @@ declare type State = {
    * to this element, and also to pass the reference to Popper.js.
    */
   openerElement: HTMLElement | null | void,
-  ...
-};
+|};
 /**
  * A dropdown that consists of multiple selection items. This select allows
  * multiple options to be selected. Clients are responsible for keeping track
@@ -230,29 +223,29 @@ declare export default class MultiSelect extends React.Component<Props, State> {
   static getDerivedStateFromProps(
     props: Props,
     state: State
-  ): $Rest<State, { ... }> | null;
+  ): $Rest<State, {}> | null;
   componentDidUpdate(prevProps: Props): void;
   handleOpenChanged: (opened: boolean) => void;
   handleToggle: (selectedValue: string) => void;
   handleSelectAll: () => void;
   handleSelectNone: () => void;
   getMenuText(
-    children: Array<React.Element<React.ComponentProps<typeof OptionItem>>>
+    children: Array<React.Element<React.ElementProps<typeof OptionItem>>>
   ): string;
   getShortcuts(numOptions: number): Array<DropdownItem>;
   getMenuItems(
-    children: Array<React.Element<React.ComponentProps<typeof OptionItem>>>
+    children: Array<React.Element<React.ElementProps<typeof OptionItem>>>
   ): Array<DropdownItem>;
   mapOptionItemToDropdownItem: (
-    option: React.Element<React.ComponentProps<typeof OptionItem>>
+    option: React.Element<React.ElementProps<typeof OptionItem>>
   ) => DropdownItem;
   handleOpenerRef: (node?: any) => void;
   handleSearchTextChanged: (searchText: string) => void;
-  handleClick: (e: React.SyntheticEvent<>) => void;
+  handleClick: (e: SyntheticEvent<>) => void;
   renderOpener(
-    allChildren: Array<React.Element<React.ComponentProps<typeof OptionItem>>>
+    allChildren: Array<React.Element<React.ElementProps<typeof OptionItem>>>
   ):
-    | React.Element<React.ComponentProps<typeof DropdownOpener>>
-    | React.Element<React.ComponentProps<typeof SelectOpener>>;
-  render(): React.Element<any>;
+    | React.Element<React.ElementProps<typeof DropdownOpener>>
+    | React.Element<React.ElementProps<typeof SelectOpener>>;
+  render(): React.Node;
 }

package/dist/components/option-item.d.ts

@@ -70,6 +70,6 @@ export default class OptionItem extends React.Component<OptionProps> {
     static __IS_OPTION_ITEM__: boolean;
     getCheckComponent(): typeof Check | typeof Checkbox;
     handleClick: () => void;
-    render(): React.ReactElement;
+    render(): React.ReactNode;
 }
 export {};

package/dist/components/option-item.js.flow

@@ -9,9 +9,9 @@ import * as React from "react";
 import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
 import Check from "./check";
 import Checkbox from "./checkbox";
-declare type OptionProps = {
+declare type OptionProps = {|
   ...AriaProps,
-  ...{
+  ...{|
     /**
      * Display text of the option item.
      */
@@ -70,16 +70,14 @@ declare type OptionProps = {
      * @ignore
      */
     style?: StyleType,
-    ...
-  },
-};
-declare type DefaultProps = {
+  |},
+|};
+declare type DefaultProps = {|
   disabled: $PropertyType<OptionProps, "disabled">,
   onToggle: $PropertyType<OptionProps, "onToggle">,
   role: $PropertyType<OptionProps, "role">,
   selected: $PropertyType<OptionProps, "selected">,
-  ...
-};
+|};
 /**
  * For option items that can be selected in a dropdown, selection denoted either
  * with a check ✔️ or a checkbox ☑️. Use as children in SingleSelect or
@@ -91,5 +89,5 @@ declare export default class OptionItem extends React.Component<OptionProps> {
   static __IS_OPTION_ITEM__: boolean;
   getCheckComponent(): typeof Check | typeof Checkbox;
   handleClick: () => void;
-  render(): React.Element<any>;
+  render(): React.Node;
 }

package/dist/components/select-opener.d.ts

@@ -50,6 +50,6 @@ export default class SelectOpener extends React.Component<SelectOpenerProps> {
     static defaultProps: DefaultProps;
     handleClick: (e: React.SyntheticEvent) => void;
     renderClickableBehavior(router: any): React.ReactNode;
-    render(): React.ReactElement;
+    render(): React.ReactNode;
 }
 export {};

package/dist/components/select-opener.js.flow

@@ -7,9 +7,9 @@
 
 import * as React from "react";
 import type { AriaProps } from "@khanacademy/wonder-blocks-core";
-declare type SelectOpenerProps = {
+declare type SelectOpenerProps = {|
   ...AriaProps,
-  ...{
+  ...{|
     /**
      * Display text in the SelectOpener.
      */
@@ -53,15 +53,13 @@ declare type SelectOpenerProps = {
      * Whether the dropdown is open.
      */
     open: boolean,
-    ...
-  },
-};
-declare type DefaultProps = {
+  |},
+|};
+declare type DefaultProps = {|
   disabled: $PropertyType<SelectOpenerProps, "disabled">,
   light: $PropertyType<SelectOpenerProps, "light">,
   isPlaceholder: $PropertyType<SelectOpenerProps, "isPlaceholder">,
-  ...
-};
+|};
 /**
  * An opener that opens select boxes.
  */
@@ -69,7 +67,7 @@ declare export default class SelectOpener
   extends React.Component<SelectOpenerProps>
 {
   static defaultProps: DefaultProps;
-  handleClick: (e: React.SyntheticEvent<>) => void;
+  handleClick: (e: SyntheticEvent<>) => void;
   renderClickableBehavior(router: any): React.Node;
-  render(): React.Element<any>;
+  render(): React.Node;
 }