@khanacademy/wonder-blocks-dropdown 2.7.4 → 2.8.0

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

@@ -99,6 +99,10 @@ describe("SingleSelect", () => {
         });
 
         describe("keyboard", () => {
+            beforeEach(() => {
+                jest.useFakeTimers();
+            });
+
             describe.each([{key: "{enter}"}, {key: "{space}"}])(
                 "$key",
                 ({key}) => {
@@ -129,7 +133,7 @@ describe("SingleSelect", () => {
                 },
             );
 
-            it("should not select an item when pressing {enter}", () => {
+            it("should select an item when pressing {enter}", () => {
                 // Arrange
                 render(uncontrolledSingleSelect);
                 userEvent.tab();
@@ -139,8 +143,8 @@ describe("SingleSelect", () => {
                 userEvent.keyboard("{enter}");
 
                 // Assert
-                expect(onChange).not.toHaveBeenCalled();
-                expect(screen.getByRole("listbox")).toBeInTheDocument();
+                expect(onChange).toHaveBeenCalledWith("1");
+                expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
             });
 
             it("should select an item when pressing {space}", () => {
@@ -157,6 +161,27 @@ describe("SingleSelect", () => {
                 expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
             });
 
+            it("should find and select an item using the keyboard", () => {
+                // Arrange
+                render(
+                    <SingleSelect onChange={onChange} placeholder="Choose">
+                        <OptionItem label="apple" value="apple" />
+                        <OptionItem label="orange" value="orange" />
+                        <OptionItem label="pear" value="pear" />
+                    </SingleSelect>,
+                );
+                userEvent.tab();
+
+                // Act
+                // find first occurrence
+                userEvent.keyboard("or");
+                jest.advanceTimersByTime(501);
+
+                // Assert
+                expect(onChange).toHaveBeenCalledWith("orange");
+                expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+            });
+
             it("should dismiss the dropdown when pressing {escape}", () => {
                 // Arrange
                 render(uncontrolledSingleSelect);
@@ -214,7 +239,7 @@ describe("SingleSelect", () => {
             render(<ControlledComponent onToggle={onToggleMock} />);
 
             // Act
-            userEvent.click(screen.getByTestId("parent-button"));
+            userEvent.click(screen.getByRole("button", {name: "Choose"}));
 
             // Assert
             expect(onToggleMock).toHaveBeenCalledWith(true);
@@ -225,7 +250,7 @@ describe("SingleSelect", () => {
             const onToggleMock = jest.fn();
             render(<ControlledComponent onToggle={onToggleMock} />);
             // open the menu from the outside
-            userEvent.click(screen.getByTestId("parent-button"));
+            userEvent.click(screen.getByRole("button", {name: "Choose"}));
 
             // Act
             // click on first item
@@ -264,10 +289,11 @@ describe("SingleSelect", () => {
             render(<ControlledComponent />);
 
             // Act
+            const opener = screen.getByRole("button", {name: "Choose"});
             // open the menu from the outside
-            userEvent.click(screen.getByTestId("parent-button"));
+            userEvent.click(opener);
             // click on the dropdown anchor to hide the menu
-            userEvent.click(screen.getByText("Choose"));
+            userEvent.click(opener);
 
             // Assert
             expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
@@ -360,12 +386,7 @@ describe("SingleSelect", () => {
                     testId="openTest"
                     onChange={jest.fn()}
                     opener={({text}) => (
-                        <button
-                            onClick={jest.fn()}
-                            data-test-id="custom-opener"
-                        >
-                            {text}
-                        </button>
+                        <button onClick={jest.fn()}>{text}</button>
                     )}
                 >
                     <OptionItem label="Toggle A" value="toggle_a" />
@@ -374,7 +395,7 @@ describe("SingleSelect", () => {
             );
 
             // Act
-            const opener = screen.getByTestId("custom-opener");
+            const opener = screen.getByRole("button");
             // open dropdown
             userEvent.click(opener);
 
@@ -405,12 +426,7 @@ describe("SingleSelect", () => {
                                 selectedValue={this.state.selectedValue}
                                 placeholder="Custom placeholder"
                                 opener={({text}) => (
-                                    <button
-                                        onClick={jest.fn()}
-                                        data-test-id="custom-opener"
-                                    >
-                                        {text}
-                                    </button>
+                                    <button onClick={jest.fn()}>{text}</button>
                                 )}
                             >
                                 <OptionItem label="Toggle A" value="toggle_a" />
@@ -424,7 +440,7 @@ describe("SingleSelect", () => {
             render(<ControlledComponent />);
 
             // Act
-            const opener = screen.getByTestId("custom-opener");
+            const opener = screen.getByRole("button");
             // open dropdown
             userEvent.click(opener);
             userEvent.click(screen.getByText("Toggle B"));
@@ -437,7 +453,7 @@ describe("SingleSelect", () => {
     });
 
     describe("isFilterable", () => {
-        it("displays SearchTextInput when isFilterable is true", () => {
+        it("displays SearchField when isFilterable is true", () => {
             // Arrange
             render(
                 <SingleSelect
@@ -484,7 +500,7 @@ describe("SingleSelect", () => {
             expect(options[0]).toHaveTextContent("item 2");
         });
 
-        it("Type something in SearchTextInput should update searchText in SingleSelect", () => {
+        it("Type something in SearchField should update searchText in SingleSelect", () => {
             // Arrange
             render(
                 <SingleSelect
@@ -611,30 +627,7 @@ describe("SingleSelect", () => {
 
             // Assert
             const dropdownMenu = screen.getByRole("listbox");
-            expect(dropdownMenu).toHaveStyle("max-height: 132px");
-        });
-
-        it("should apply the default maxHeight to a filterable listbox", () => {
-            // Arrange
-
-            // Act
-            render(
-                <SingleSelect
-                    onChange={onChange}
-                    opened={true}
-                    isFilterable={true}
-                    placeholder="Choose"
-                    selectedValue="2"
-                >
-                    <OptionItem label="item 1" value="1" />
-                    <OptionItem label="item 2" value="2" />
-                    <OptionItem label="item 3" value="3" />
-                </SingleSelect>,
-            );
-
-            // Assert
-            const dropdownMenu = screen.getByRole("listbox");
-            expect(dropdownMenu).toHaveStyle("max-height: 184px");
+            expect(dropdownMenu).toHaveStyle("max-height: 120px");
         });
 
         it("should apply the default maxHeight to a virtualized listbox", () => {
@@ -665,7 +658,7 @@ describe("SingleSelect", () => {
             // Assert
             const dropdownMenu = screen.getByRole("listbox");
             // Max allowed height
-            expect(dropdownMenu).toHaveStyle("max-height: 384px");
+            expect(dropdownMenu).toHaveStyle("max-height: 360px");
         });
 
         it("should override the default maxHeight to the listbox if a custom dropdownStyle is set", () => {
@@ -688,13 +681,13 @@ describe("SingleSelect", () => {
             );
 
             // Assert
-            const dropdownMenu = screen.getByRole("listbox");
+            const dropdownMenu = screen.getByTestId("dropdown-core-container");
             expect(dropdownMenu).toHaveStyle("max-height: 200px");
         });
     });
 
     describe("a11y > Live region", () => {
-        it("should change the number of options after using the search filter", async () => {
+        it("should change the number of options after using the search filter", () => {
             // Arrange
             render(
                 <SingleSelect

package/src/components/action-menu.js

@@ -103,6 +103,17 @@ type DefaultProps = {|
 
 /**
  * A menu that consists of various types of items.
+ *
+ * ## Usage
+ *
+ * ```jsx
+ * import {ActionMenu, ActionItem} from "@khanacademy/wonder-blocks-dropdown";
+ *
+ * <ActionMenu menuText="Menu">
+ *  <ActionItem href="/profile" label="Profile" />
+ *  <ActionItem label="Settings" onClick={() => {}} />
+ * </ActionMenu>
+ * ```
  */
 export default class ActionMenu extends React.Component<Props, State> {
     openerElement: ?HTMLElement;

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

@@ -9,7 +9,6 @@ import type {
     WithoutActionScheduler,
 } from "@khanacademy/wonder-blocks-timing";
 import DropdownVirtualizedItem from "./dropdown-core-virtualized-item.js";
-import SearchTextInput from "./search-text-input.js";
 import SeparatorItem from "./separator-item.js";
 
 import type {DropdownItem} from "../util/types.js";
@@ -17,7 +16,6 @@ import type {DropdownItem} from "../util/types.js";
 import {
     DROPDOWN_ITEM_HEIGHT,
     MAX_VISIBLE_ITEMS,
-    SEARCH_ITEM_HEIGHT,
     SEPARATOR_ITEM_HEIGHT,
 } from "../util/constants.js";
 import {getDropdownMenuHeight} from "../util/dropdown-menu-styles.js";
@@ -134,9 +132,6 @@ class DropdownCoreVirtualized extends React.Component<Props, State> {
         if (SeparatorItem.isClassOf(item.component)) {
             // this is the separator's height (1px) + vertical margin (8px)
             return SEPARATOR_ITEM_HEIGHT;
-        } else if (SearchTextInput.isClassOf(item.component)) {
-            // search text input height
-            return SEARCH_ITEM_HEIGHT;
         } else {
             // default dropdown item height
             return DROPDOWN_ITEM_HEIGHT;