@khanacademy/wonder-blocks-dropdown 3.0.0 → 3.0.2

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

@@ -13,5 +13,5 @@ export default class SeparatorItem extends React.Component<{
 }> {
     static isClassOf(instance: React.ReactElement<any>): boolean;
     static __IS_SEPARATOR_ITEM__: boolean;
-    render(): React.ReactElement;
+    render(): React.ReactNode;
 }

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

@@ -12,18 +12,17 @@ import type { StyleType } from "@khanacademy/wonder-blocks-core";
  * A separator used in a dropdown menu.
  */
 declare export default class SeparatorItem
-  mixins
-    React.Component<{
+  extends
+    React.Component<{|
       /**
        * In case we use react-window, this needs to be added in order to inject
        * styles to calculate the position
        * @ignore
        */
       style?: StyleType,
-      ...
-    }>
+    |}>
 {
   static isClassOf(instance: React.Element<any>): boolean;
   static __IS_SEPARATOR_ITEM__: boolean;
-  render(): React.Element<any>;
+  render(): React.Node;
 }

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

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

package/dist/components/single-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 SingleSelectLabels = {
+export type SingleSelectLabels = {|
   /**
    * Label for describing the dismiss icon on the search filter.
    */
@@ -31,9 +31,8 @@ export type SingleSelectLabels = {
    * Label for the opening component when there are some items selected.
    */
   someResults: (numOptions: number) => 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.
@@ -76,20 +75,16 @@ declare type DefaultProps = {
    * The object containing the custom labels used inside this component.
    */
   labels: SingleSelectLabels,
-  ...
-};
-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
     >,
 
     /**
@@ -158,10 +153,9 @@ declare type Props = {
      * top. The items will be filtered by the input.
      */
     isFilterable?: boolean,
-    ...
-  },
-};
-declare type State = {
+  |},
+|};
+declare type State = {|
   /**
    * Whether or not the dropdown is open.
    */
@@ -178,8 +172,7 @@ declare type State = {
    * to this element, and also to pass the reference to Popper.js.
    */
   openerElement: HTMLElement | null | void,
-  ...
-};
+|};
 /**
  * The single select allows the selection of one item. Clients are responsible
  * for keeping track of the selected item in the select.
@@ -225,7 +218,9 @@ declare type State = {
  * </SingleSelect>
  * ```
  */
-declare export default class SingleSelect extends React.Component<Props, State> {
+declare export default class SingleSelect
+  extends React.Component<Props, State>
+{
   selectedIndex: number;
   static defaultProps: DefaultProps;
   constructor(props: Props): this;
@@ -237,25 +232,25 @@ declare export default class SingleSelect extends React.Component<Props, State>
   static getDerivedStateFromProps(
     props: Props,
     state: State
-  ): $Rest<State, { ... }> | null;
+  ): $Rest<State, {}> | null;
   handleOpenChanged: (opened: boolean) => void;
   handleToggle: (selectedValue: string) => void;
   mapOptionItemsToDropdownItems: (
-    children: Array<React.Element<React.ComponentProps<typeof OptionItem>>>
+    children: Array<React.Element<React.ElementProps<typeof OptionItem>>>
   ) => Array<DropdownItem>;
   filterChildren(
-    children: Array<React.Element<React.ComponentProps<typeof OptionItem>>>
-  ): Array<React.Element<React.ComponentProps<typeof OptionItem>>>;
+    children: Array<React.Element<React.ElementProps<typeof OptionItem>>>
+  ): Array<React.Element<React.ElementProps<typeof OptionItem>>>;
   getMenuItems(
-    children: Array<React.Element<React.ComponentProps<typeof OptionItem>>>
+    children: Array<React.Element<React.ElementProps<typeof OptionItem>>>
   ): Array<DropdownItem>;
   handleSearchTextChanged: (searchText: string) => void;
   handleOpenerRef: (node?: any) => void;
-  handleClick: (e: React.SyntheticEvent<>) => void;
+  handleClick: (e: SyntheticEvent<>) => void;
   renderOpener(
     numItems: number
   ):
-    | 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/util/constants.js.flow

@@ -5,24 +5,21 @@
  * @flow
  */
 
-declare export var keyCodes: {
+declare export var keyCodes: {|
   +tab: 9,
   +enter: 13,
   +escape: 27,
   +space: 32,
   +up: 38,
   +down: 40,
-  ...
-};
-declare export var selectDropdownStyle: {
+|};
+declare export var selectDropdownStyle: {|
   +marginTop: 8,
   +marginBottom: 8,
-  ...
-};
-declare export var filterableDropdownStyle: {
+|};
+declare export var filterableDropdownStyle: {|
   +minHeight: 100,
-  ...
-};
+|};
 declare export var DROPDOWN_ITEM_HEIGHT: 40;
 /**
  * Maximum visible items inside the dropdown list. Based on the defined height
@@ -31,7 +28,7 @@ declare export var DROPDOWN_ITEM_HEIGHT: 40;
  */
 declare export var MAX_VISIBLE_ITEMS: 9;
 declare export var SEPARATOR_ITEM_HEIGHT: 9;
-declare export var defaultLabels: {
+declare export var defaultLabels: {|
   +clearSearch: "Clear search",
   +filter: "Filter",
   +noResults: "No results",
@@ -40,5 +37,4 @@ declare export var defaultLabels: {
   +noneSelected: "0 items",
   +someSelected: (numSelectedValues: number) => string,
   +allSelected: "All items",
-  ...
-};
+|};

package/dist/util/types.js.flow

@@ -13,13 +13,13 @@ import SeparatorItem from "../components/separator-item";
 export type Item =
   | false
   | React.Element<
-      React.ComponentProps<
+      React.ElementProps<
         typeof ActionItem | typeof OptionItem | typeof SeparatorItem
       >
     >;
-export type DropdownItem = {
+export type DropdownItem = {|
   component: React.Element<
-    React.ComponentProps<
+    React.ElementProps<
       typeof ActionItem | typeof OptionItem | typeof SeparatorItem
     >
   >,
@@ -28,12 +28,10 @@ export type DropdownItem = {
   onClick?: () => mixed,
   ref?: any,
   role?: string,
-  ...
-};
-export type OpenerProps = {
+|};
+export type OpenerProps = {|
   ...ClickableState,
-  ...{
+  ...{|
     text: string,
-    ...
-  },
-};
+  |},
+|};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-dropdown",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "design": "v1",
   "description": "Dropdown variants for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,16 +16,16 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^3.0.0",
-    "@khanacademy/wonder-blocks-color": "^2.0.0",
-    "@khanacademy/wonder-blocks-core": "^5.0.0",
-    "@khanacademy/wonder-blocks-icon": "^2.0.0",
-    "@khanacademy/wonder-blocks-layout": "^2.0.0",
-    "@khanacademy/wonder-blocks-modal": "^4.0.0",
-    "@khanacademy/wonder-blocks-search-field": "^2.0.0",
-    "@khanacademy/wonder-blocks-spacing": "^4.0.0",
-    "@khanacademy/wonder-blocks-timing": "^3.0.0",
-    "@khanacademy/wonder-blocks-typography": "^2.0.0"
+    "@khanacademy/wonder-blocks-clickable": "^3.0.2",
+    "@khanacademy/wonder-blocks-color": "^2.0.1",
+    "@khanacademy/wonder-blocks-core": "^5.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-spacing": "^4.0.1",
+    "@khanacademy/wonder-blocks-timing": "^3.0.1",
+    "@khanacademy/wonder-blocks-typography": "^2.0.2"
   },
   "peerDependencies": {
     "@popperjs/core": "^2.10.1",
@@ -38,7 +38,7 @@
     "react-window": "^1.8.5"
   },
   "devDependencies": {
-    "@khanacademy/wonder-blocks-button": "^4.0.0",
-    "wb-dev-build-settings": "^0.8.0"
+    "@khanacademy/wonder-blocks-button": "^4.0.2",
+    "wb-dev-build-settings": "^0.9.1"
   }
 }

package/src/components/__mocks__/dropdown-core-virtualized.tsx

@@ -14,7 +14,7 @@ type Props = {
  * A minimal mocked version of the Virtualized implementation
  */
 class DropdownCoreVirtualizedMock extends React.Component<Props> {
-    render(): React.ReactElement {
+    render(): React.ReactNode {
         const {data, listRef} = this.props;
         return (
             <List

package/src/components/action-item.tsx

@@ -215,7 +215,7 @@ export default class ActionItem extends React.Component<ActionProps> {
         );
     }
 
-    render(): React.ReactElement {
+    render(): React.ReactNode {
         return (
             <__RouterContext.Consumer>
                 {(router) => this.renderClickableBehavior(router)}

package/src/components/action-menu-opener-core.tsx

@@ -41,7 +41,7 @@ const StyledButton = addStyle<"button">("button");
  * - 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 {
         const {
             children,
             disabled: disabledProp,

package/src/components/action-menu.tsx

@@ -263,7 +263,7 @@ export default class ActionMenu extends React.Component<Props, State> {
         );
     }
 
-    render(): React.ReactElement {
+    render(): React.ReactNode {
         const {alignment, dropdownStyle, style, className} = this.props;
 
         const items = this.getMenuItems();

package/src/components/dropdown-core-virtualized-item.ts

@@ -32,7 +32,7 @@ type Props = {
  * react-window make its own calculations.
  */
 class DropdownVirtualizedItem extends React.Component<Props> {
-    render(): React.ReactElement {
+    render(): React.ReactNode {
         const {data, index, style} = this.props;
         const item = data[index];
 

package/src/components/dropdown-core.tsx

@@ -993,7 +993,6 @@ class DropdownCore extends React.Component<Props, State> {
                 referenceElement={openerElement}
             >
                 {(isReferenceHidden) =>
-                    // @ts-expect-error [FEI-5019] - TS2322 - Type 'ReactNode' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.
                     this.renderDropdownMenu(listRenderer, isReferenceHidden)
                 }
             </DropdownPopper>
@@ -1018,7 +1017,7 @@ class DropdownCore extends React.Component<Props, State> {
         );
     }
 
-    render(): React.ReactElement {
+    render(): React.ReactNode {
         const {open, opener, style, className} = this.props;
 
         return (

package/src/components/dropdown-opener.tsx

@@ -53,7 +53,7 @@ class DropdownOpener extends React.Component<Props> {
     renderAnchorChildren(
         eventState: ClickableState,
         clickableChildrenProps: ChildrenProps,
-    ): React.ReactNode {
+    ): React.ReactElement {
         const {disabled, testId, text} = this.props;
         const renderedChildren = this.props.children({...eventState, text});
         const childrenProps = renderedChildren.props;
@@ -77,14 +77,13 @@ class DropdownOpener extends React.Component<Props> {
         });
     }
 
-    render(): React.ReactElement {
+    render(): React.ReactNode {
         return (
             <ClickableBehavior
                 onClick={this.props.onClick}
                 disabled={this.props.disabled}
             >
                 {(eventState, handlers) =>
-                    // @ts-expect-error [FEI-5019] - TS2322 - Type 'ReactNode' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.
                     this.renderAnchorChildren(eventState, handlers)
                 }
             </ClickableBehavior>

package/src/components/dropdown-popper.tsx

@@ -25,7 +25,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/src/components/multi-select.tsx

@@ -517,7 +517,7 @@ export default class MultiSelect extends React.Component<Props, State> {
         return dropdownOpener;
     }
 
-    render(): React.ReactElement {
+    render(): React.ReactNode {
         const {
             alignment,
             light,

package/src/components/option-item.tsx

@@ -106,7 +106,7 @@ export default class OptionItem extends React.Component<OptionProps> {
         }
     };
 
-    render(): React.ReactElement {
+    render(): React.ReactNode {
         const {
             disabled,
             label,

package/src/components/select-opener.tsx

@@ -153,7 +153,7 @@ export default class SelectOpener extends React.Component<SelectOpenerProps> {
         );
     }
 
-    render(): React.ReactElement {
+    render(): React.ReactNode {
         return (
             <__RouterContext.Consumer>
                 {(router) => this.renderClickableBehavior(router)}

package/src/components/separator-item.tsx

@@ -28,7 +28,7 @@ export default class SeparatorItem extends React.Component<{
 
     static __IS_SEPARATOR_ITEM__ = true;
 
-    render(): React.ReactElement {
+    render(): React.ReactNode {
         return (
             // pass optional styles from react-window (if applies)
             <View

package/src/components/single-select.tsx

@@ -424,7 +424,7 @@ export default class SingleSelect extends React.Component<Props, State> {
         return dropdownOpener;
     }
 
-    render(): React.ReactElement {
+    render(): React.ReactNode {
         const {
             alignment,
             autoFocus,