@khanacademy/wonder-blocks-dropdown 2.10.5 → 2.10.7

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 2.10.7
+
+### Patch Changes
+
+-   91cb727c: Remove file extensions from imports
+-   Updated dependencies [91cb727c]
+-   Updated dependencies [91cb727c]
+-   Updated dependencies [91cb727c]
+-   Updated dependencies [91cb727c]
+    -   @khanacademy/wonder-blocks-icon@1.2.37
+    -   @khanacademy/wonder-blocks-clickable@2.4.5
+    -   @khanacademy/wonder-blocks-color@1.2.1
+    -   @khanacademy/wonder-blocks-core@4.7.0
+    -   @khanacademy/wonder-blocks-layout@1.4.16
+    -   @khanacademy/wonder-blocks-modal@3.0.7
+    -   @khanacademy/wonder-blocks-search-field@1.0.19
+    -   @khanacademy/wonder-blocks-timing@2.1.1
+    -   @khanacademy/wonder-blocks-typography@1.1.38
+
+## 2.10.6
+
+### Patch Changes
+
+-   Updated dependencies [1a5624d4]
+    -   @khanacademy/wonder-blocks-icon@1.2.36
+    -   @khanacademy/wonder-blocks-modal@3.0.6
+    -   @khanacademy/wonder-blocks-search-field@1.0.18
+
 ## 2.10.5
 
 ### Patch Changes

package/dist/index.js.flow

@@ -1,2 +1,2 @@
 // @flow
-export * from "../src/index.js";
+export * from "../src/index";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-dropdown",
-  "version": "2.10.5",
+  "version": "2.10.7",
   "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": "^2.4.4",
-    "@khanacademy/wonder-blocks-color": "^1.2.0",
-    "@khanacademy/wonder-blocks-core": "^4.6.2",
-    "@khanacademy/wonder-blocks-icon": "^1.2.35",
-    "@khanacademy/wonder-blocks-layout": "^1.4.15",
-    "@khanacademy/wonder-blocks-modal": "^3.0.5",
-    "@khanacademy/wonder-blocks-search-field": "^1.0.17",
+    "@khanacademy/wonder-blocks-clickable": "^2.4.5",
+    "@khanacademy/wonder-blocks-color": "^1.2.1",
+    "@khanacademy/wonder-blocks-core": "^4.7.0",
+    "@khanacademy/wonder-blocks-icon": "^1.2.37",
+    "@khanacademy/wonder-blocks-layout": "^1.4.16",
+    "@khanacademy/wonder-blocks-modal": "^3.0.7",
+    "@khanacademy/wonder-blocks-search-field": "^1.0.19",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-    "@khanacademy/wonder-blocks-timing": "^2.1.0",
-    "@khanacademy/wonder-blocks-typography": "^1.1.37"
+    "@khanacademy/wonder-blocks-timing": "^2.1.1",
+    "@khanacademy/wonder-blocks-typography": "^1.1.38"
   },
   "peerDependencies": {
     "@popperjs/core": "^2.10.1",
@@ -38,7 +38,7 @@
     "react-window": "^1.8.5"
   },
   "devDependencies": {
-    "@khanacademy/wonder-blocks-button": "^3.0.12",
-    "wb-dev-build-settings": "^0.7.0"
+    "@khanacademy/wonder-blocks-button": "^3.0.14",
+    "wb-dev-build-settings": "^0.7.1"
   }
 }

package/src/components/__docs__/action-menu.stories.js

@@ -17,11 +17,11 @@ import {Checkbox} from "@khanacademy/wonder-blocks-form";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
 import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
 
-import actionMenuArgtypes from "./action-menu.argtypes.js";
-import ComponentInfo from "../../../../../.storybook/components/component-info.js";
+import actionMenuArgtypes from "./action-menu.argtypes";
+import ComponentInfo from "../../../../../.storybook/components/component-info";
 import {name, version} from "../../../package.json";
 
-import type {Item} from "../../util/types.js";
+import type {Item} from "../../util/types";
 
 type ActionMenuProps = React.ElementProps<typeof ActionMenu>;
 

package/src/components/__docs__/multi-select.stories.js

@@ -15,10 +15,10 @@ import {OnePaneDialog, ModalLauncher} from "@khanacademy/wonder-blocks-modal";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
 import {HeadingLarge} from "@khanacademy/wonder-blocks-typography";
 
-import ComponentInfo from "../../../../../.storybook/components/component-info.js";
+import ComponentInfo from "../../../../../.storybook/components/component-info";
 import {name, version} from "../../../package.json";
-import multiSelectArgtypes from "./base-select.argtypes.js";
-import {defaultLabels} from "../../util/constants.js";
+import multiSelectArgtypes from "./base-select.argtypes";
+import {defaultLabels} from "../../util/constants";
 
 export default {
     title: "Dropdown / MultiSelect",

package/src/components/__docs__/single-select.stories.js

@@ -23,10 +23,10 @@ import {
 import type {SingleSelectLabels} from "@khanacademy/wonder-blocks-dropdown";
 import type {IconAsset} from "@khanacademy/wonder-blocks-icon";
 
-import ComponentInfo from "../../../../../.storybook/components/component-info.js";
+import ComponentInfo from "../../../../../.storybook/components/component-info";
 import {name, version} from "../../../package.json";
-import singleSelectArgtypes from "./base-select.argtypes.js";
-import {defaultLabels} from "../../util/constants.js";
+import singleSelectArgtypes from "./base-select.argtypes";
+import {defaultLabels} from "../../util/constants";
 
 export default {
     title: "Dropdown / SingleSelect",

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

@@ -2,9 +2,9 @@
 import * as React from "react";
 import {VariableSizeList as List} from "react-window";
 
-import DropdownVirtualizedItem from "../dropdown-core-virtualized-item.js";
+import DropdownVirtualizedItem from "../dropdown-core-virtualized-item";
 
-import type {DropdownItem} from "../../util/types.js";
+import type {DropdownItem} from "../../util/types";
 
 type Props = {|
     data: Array<DropdownItem>,

package/src/components/__tests__/action-item.test.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import {render, screen} from "@testing-library/react";
 import * as ReactRouterDOM from "react-router-dom";
 
-import ActionItem from "../action-item.js";
+import ActionItem from "../action-item";
 
 jest.mock("react-router-dom", () => ({
     __esModule: true,

package/src/components/__tests__/action-menu.test.js

@@ -3,10 +3,10 @@ import * as React from "react";
 import {render, screen} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
-import ActionItem from "../action-item.js";
-import OptionItem from "../option-item.js";
-import SeparatorItem from "../separator-item.js";
-import ActionMenu from "../action-menu.js";
+import ActionItem from "../action-item";
+import OptionItem from "../option-item";
+import SeparatorItem from "../separator-item";
+import ActionMenu from "../action-menu";
 
 describe("ActionMenu", () => {
     const onClick = jest.fn();

package/src/components/__tests__/dropdown-core-virtualized.test.js

@@ -2,9 +2,9 @@
 import * as React from "react";
 import {render, screen} from "@testing-library/react";
 
-import OptionItem from "../option-item.js";
-import SeparatorItem from "../separator-item.js";
-import DropdownCoreVirtualized from "../dropdown-core-virtualized.js";
+import OptionItem from "../option-item";
+import SeparatorItem from "../separator-item";
+import DropdownCoreVirtualized from "../dropdown-core-virtualized";
 
 describe("DropdownCoreVirtualized", () => {
     it("should sort the items on first load", () => {

package/src/components/__tests__/dropdown-core.test.js

@@ -3,8 +3,8 @@ import * as React from "react";
 import {fireEvent, render, screen, waitFor} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
-import OptionItem from "../option-item.js";
-import DropdownCore from "../dropdown-core.js";
+import OptionItem from "../option-item";
+import DropdownCore from "../dropdown-core";
 
 const items = [
     {

package/src/components/__tests__/dropdown-popper.test.js

@@ -2,7 +2,7 @@
 import * as React from "react";
 import {render, screen} from "@testing-library/react";
 
-import DropdownPopper from "../dropdown-popper.js";
+import DropdownPopper from "../dropdown-popper";
 
 describe("DropdownPopper", () => {
     it("renders the children if valid props are passed in", () => {

package/src/components/__tests__/multi-select.test.js

@@ -6,10 +6,10 @@ import userEvent from "@testing-library/user-event";
 
 import {ngettext} from "@khanacademy/wonder-blocks-i18n";
 
-import OptionItem from "../option-item.js";
-import MultiSelect from "../multi-select.js";
+import OptionItem from "../option-item";
+import MultiSelect from "../multi-select";
 
-import type {Labels} from "../multi-select.js";
+import type {Labels} from "../multi-select";
 
 const labels: $Shape<Labels> = {
     selectAllLabel: (numOptions) => `Sellect all (${numOptions})`,

package/src/components/__tests__/single-select.test.js

@@ -3,9 +3,9 @@ import * as React from "react";
 import {render, screen} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
-import OptionItem from "../option-item.js";
-import SingleSelect from "../single-select.js";
-import type {SingleSelectLabels} from "../single-select.js";
+import OptionItem from "../option-item";
+import SingleSelect from "../single-select";
+import type {SingleSelectLabels} from "../single-select";
 
 describe("SingleSelect", () => {
     const onChange = jest.fn();

package/src/components/action-item.js

@@ -16,7 +16,7 @@ import {addStyle} from "@khanacademy/wonder-blocks-core";
 
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
-import {DROPDOWN_ITEM_HEIGHT} from "../util/constants.js";
+import {DROPDOWN_ITEM_HEIGHT} from "../util/constants";
 
 const {blue, white, offBlack, offBlack32} = Color;
 

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

@@ -11,7 +11,7 @@ import {Strut} from "@khanacademy/wonder-blocks-layout";
 import type {AriaProps} from "@khanacademy/wonder-blocks-core";
 import type {ClickableState} from "@khanacademy/wonder-blocks-clickable";
 
-import {DROPDOWN_ITEM_HEIGHT} from "../util/constants.js";
+import {DROPDOWN_ITEM_HEIGHT} from "../util/constants";
 
 type Props = {|
     ...$Rest<AriaProps, {|"aria-disabled": "true" | "false" | void|}>,

package/src/components/action-menu.js

@@ -4,13 +4,13 @@ import * as React from "react";
 import ReactDOM from "react-dom";
 import {StyleSheet} from "aphrodite";
 import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
-import DropdownOpener from "./dropdown-opener.js";
-import ActionItem from "./action-item.js";
-import OptionItem from "./option-item.js";
-import DropdownCore from "./dropdown-core.js";
+import DropdownOpener from "./dropdown-opener";
+import ActionItem from "./action-item";
+import OptionItem from "./option-item";
+import DropdownCore from "./dropdown-core";
 
-import ActionMenuOpenerCore from "./action-menu-opener-core.js";
-import type {Item, DropdownItem, OpenerProps} from "../util/types.js";
+import ActionMenuOpenerCore from "./action-menu-opener-core";
+import type {Item, DropdownItem, OpenerProps} from "../util/types";
 
 type Props = {|
     ...AriaProps,

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

@@ -3,9 +3,9 @@ import * as React from "react";
 
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
-import SeparatorItem from "./separator-item.js";
+import SeparatorItem from "./separator-item";
 
-import type {DropdownItem} from "../util/types.js";
+import type {DropdownItem} from "../util/types";
 
 // copied from https://github.com/bvaughn/react-window/blob/master/src/createListComponent.js#L17
 type Props = {|

package/src/components/dropdown-core-virtualized.js

@@ -8,17 +8,17 @@ import type {
     WithActionSchedulerProps,
     WithoutActionScheduler,
 } from "@khanacademy/wonder-blocks-timing";
-import DropdownVirtualizedItem from "./dropdown-core-virtualized-item.js";
-import SeparatorItem from "./separator-item.js";
+import DropdownVirtualizedItem from "./dropdown-core-virtualized-item";
+import SeparatorItem from "./separator-item";
 
-import type {DropdownItem} from "../util/types.js";
+import type {DropdownItem} from "../util/types";
 
 import {
     DROPDOWN_ITEM_HEIGHT,
     MAX_VISIBLE_ITEMS,
     SEPARATOR_ITEM_HEIGHT,
-} from "../util/constants.js";
-import {getDropdownMenuHeight} from "../util/dropdown-menu-styles.js";
+} from "../util/constants";
+import {getDropdownMenuHeight} from "../util/dropdown-menu-styles";
 
 type Props = {|
     /**

package/src/components/dropdown-core.js

@@ -21,16 +21,16 @@ import type {
     WithActionSchedulerProps,
     WithoutActionScheduler,
 } from "@khanacademy/wonder-blocks-timing";
-import DropdownCoreVirtualized from "./dropdown-core-virtualized.js";
-import SeparatorItem from "./separator-item.js";
-import {defaultLabels, keyCodes} from "../util/constants.js";
-import type {DropdownItem} from "../util/types.js";
-import DropdownPopper from "./dropdown-popper.js";
-import {debounce, getStringForKey} from "../util/helpers.js";
+import DropdownCoreVirtualized from "./dropdown-core-virtualized";
+import SeparatorItem from "./separator-item";
+import {defaultLabels, keyCodes} from "../util/constants";
+import type {DropdownItem} from "../util/types";
+import DropdownPopper from "./dropdown-popper";
+import {debounce, getStringForKey} from "../util/helpers";
 import {
     generateDropdownMenuStyles,
     getDropdownMenuHeight,
-} from "../util/dropdown-menu-styles.js";
+} from "../util/dropdown-menu-styles";
 
 /**
  * The number of options to apply the virtualized list to.

package/src/components/dropdown-opener.js

@@ -9,7 +9,7 @@ import type {
     ClickableState,
 } from "@khanacademy/wonder-blocks-clickable";
 
-import type {OpenerProps} from "../util/types.js";
+import type {OpenerProps} from "../util/types";
 
 type Props = {|
     ...$Rest<AriaProps, {|"aria-disabled": "true" | "false" | void|}>,

package/src/components/multi-select.js

@@ -5,19 +5,19 @@ import ReactDOM from "react-dom";
 
 import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
 
-import ActionItem from "./action-item.js";
-import DropdownCore from "./dropdown-core.js";
-import DropdownOpener from "./dropdown-opener.js";
-import SelectOpener from "./select-opener.js";
-import SeparatorItem from "./separator-item.js";
+import ActionItem from "./action-item";
+import DropdownCore from "./dropdown-core";
+import DropdownOpener from "./dropdown-opener";
+import SelectOpener from "./select-opener";
+import SeparatorItem from "./separator-item";
 import {
     defaultLabels,
     selectDropdownStyle,
     filterableDropdownStyle,
-} from "../util/constants.js";
+} from "../util/constants";
 
-import typeof OptionItem from "./option-item.js";
-import type {DropdownItem, OpenerProps} from "../util/types.js";
+import typeof OptionItem from "./option-item";
+import type {DropdownItem, OpenerProps} from "../util/types";
 
 export type Labels = {|
     /**

package/src/components/option-item.js

@@ -11,9 +11,9 @@ import {getClickableBehavior} from "@khanacademy/wonder-blocks-clickable";
 
 import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
 
-import {DROPDOWN_ITEM_HEIGHT} from "../util/constants.js";
-import Check from "./check.js";
-import Checkbox from "./checkbox.js";
+import {DROPDOWN_ITEM_HEIGHT} from "../util/constants";
+import Check from "./check";
+import Checkbox from "./checkbox";
 
 type OptionProps = {|
     ...AriaProps,

package/src/components/select-opener.js

@@ -12,7 +12,7 @@ import {getClickableBehavior} from "@khanacademy/wonder-blocks-clickable";
 import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
 import {LabelMedium} from "@khanacademy/wonder-blocks-typography";
-import {DROPDOWN_ITEM_HEIGHT} from "../util/constants.js";
+import {DROPDOWN_ITEM_HEIGHT} from "../util/constants";
 
 const StyledButton = addStyle("button");
 

package/src/components/single-select.js

@@ -5,17 +5,17 @@ import ReactDOM from "react-dom";
 
 import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
 
-import DropdownCore from "./dropdown-core.js";
-import DropdownOpener from "./dropdown-opener.js";
-import SelectOpener from "./select-opener.js";
+import DropdownCore from "./dropdown-core";
+import DropdownOpener from "./dropdown-opener";
+import SelectOpener from "./select-opener";
 import {
     defaultLabels,
     selectDropdownStyle,
     filterableDropdownStyle,
-} from "../util/constants.js";
+} from "../util/constants";
 
-import typeof OptionItem from "./option-item.js";
-import type {DropdownItem, OpenerProps} from "../util/types.js";
+import typeof OptionItem from "./option-item";
+import type {DropdownItem, OpenerProps} from "../util/types";
 
 export type SingleSelectLabels = {|
     /**
@@ -193,15 +193,35 @@ type State = {|
  * hundreds of items without performance problems.
  *
  * ## Usage
+ * General usage
  *
  * ```jsx
  * import {OptionItem, SingleSelect} from "@khanacademy/wonder-blocks-dropdown";
  *
- * const [selectedValue, setSelectedValue] = useState("");
+ * const [selectedValue, setSelectedValue] = React.useState("");
  *
  * <SingleSelect placeholder="Choose a fruit" onChange={setSelectedValue} selectedValue={selectedValue}>
- *  <OptionItem value="pear">Pear</OptionItem>
- *  <OptionItem value="mango">Mango</OptionItem>
+ *     <OptionItem label="Pear" value="pear" />
+ *     <OptionItem label="Mango" value="mango" />
+ * </SingleSelect>
+ * ```
+ *
+ * Mapping a list
+ *
+ * ```jsx
+ * import {OptionItem, SingleSelect} from "@khanacademy/wonder-blocks-dropdown";
+ *
+ * const [selectedValue, setSelectedValue] = React.useState("");
+ * const fruitArray = ["Apple", "Banana", "Orange", "Mango", "Pear"];
+ *
+ * <SingleSelect
+ *     placeholder="Choose a fruit"
+ *     onChange={setSelectedValue}
+ *     selectedValue={selectedValue}
+ * >
+ *     {fruitArray.map((value, index) => (
+ *         <OptionItem key={index} value={value} label={value} />
+ *     ))}
  * </SingleSelect>
  * ```
  */

package/src/index.js

@@ -1,13 +1,13 @@
 // @flow
-import ActionItem from "./components/action-item.js";
-import OptionItem from "./components/option-item.js";
-import SeparatorItem from "./components/separator-item.js";
-import ActionMenu from "./components/action-menu.js";
-import SingleSelect from "./components/single-select.js";
-import MultiSelect from "./components/multi-select.js";
+import ActionItem from "./components/action-item";
+import OptionItem from "./components/option-item";
+import SeparatorItem from "./components/separator-item";
+import ActionMenu from "./components/action-menu";
+import SingleSelect from "./components/single-select";
+import MultiSelect from "./components/multi-select";
 
-import type {Labels} from "./components/multi-select.js";
-import type {SingleSelectLabels} from "./components/single-select.js";
+import type {Labels} from "./components/multi-select";
+import type {SingleSelectLabels} from "./components/single-select";
 
 export {
     ActionItem,

package/src/util/__tests__/dropdown-menu-styles.test.js

@@ -1,9 +1,9 @@
 // @flow
 import * as React from "react";
-import OptionItem from "../../components/option-item.js";
-import SeparatorItem from "../../components/separator-item.js";
+import OptionItem from "../../components/option-item";
+import SeparatorItem from "../../components/separator-item";
 
-import {getDropdownMenuHeight} from "../dropdown-menu-styles.js";
+import {getDropdownMenuHeight} from "../dropdown-menu-styles";
 
 const optionItems = [
     {

package/src/util/__tests__/helpers.test.js

@@ -1,5 +1,5 @@
 // @flow
-import {debounce, getStringForKey} from "../helpers.js";
+import {debounce, getStringForKey} from "../helpers";
 
 describe("getStringForKey", () => {
     it("should get a valid string", () => {

package/src/util/dropdown-menu-styles.js

@@ -7,11 +7,11 @@ import {
     DROPDOWN_ITEM_HEIGHT,
     MAX_VISIBLE_ITEMS,
     SEPARATOR_ITEM_HEIGHT,
-} from "./constants.js";
+} from "./constants";
 
-import SeparatorItem from "../components/separator-item.js";
+import SeparatorItem from "../components/separator-item";
 
-import type {DropdownItem} from "./types.js";
+import type {DropdownItem} from "./types";
 
 /**
  * The list height that is automatically calculated depending on the

package/src/util/types.js

@@ -3,9 +3,9 @@
 import * as React from "react";
 import type {ClickableState} from "@khanacademy/wonder-blocks-clickable";
 
-import typeof ActionItem from "../components/action-item.js";
-import typeof OptionItem from "../components/option-item.js";
-import typeof SeparatorItem from "../components/separator-item.js";
+import typeof ActionItem from "../components/action-item";
+import typeof OptionItem from "../components/option-item";
+import typeof SeparatorItem from "../components/separator-item";
 
 //TODO: rename into something more descriptive
 export type Item =