@khanacademy/wonder-blocks-dropdown 2.6.8 → 2.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-dropdown",
-  "version": "2.6.8",
+  "version": "2.7.0",
   "design": "v1",
   "description": "Dropdown variants for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,17 +16,18 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@khanacademy/wonder-blocks-button": "^2.11.4",
-    "@khanacademy/wonder-blocks-clickable": "^2.2.5",
+    "@khanacademy/wonder-blocks-button": "^2.11.5",
+    "@khanacademy/wonder-blocks-clickable": "^2.2.6",
     "@khanacademy/wonder-blocks-color": "^1.1.20",
-    "@khanacademy/wonder-blocks-core": "^4.3.0",
-    "@khanacademy/wonder-blocks-icon": "^1.2.26",
-    "@khanacademy/wonder-blocks-icon-button": "^3.4.5",
-    "@khanacademy/wonder-blocks-layout": "^1.4.8",
-    "@khanacademy/wonder-blocks-modal": "^2.3.0",
+    "@khanacademy/wonder-blocks-core": "^4.3.1",
+    "@khanacademy/wonder-blocks-icon": "^1.2.27",
+    "@khanacademy/wonder-blocks-icon-button": "^3.4.6",
+    "@khanacademy/wonder-blocks-layout": "^1.4.9",
+    "@khanacademy/wonder-blocks-modal": "^2.3.1",
+    "@khanacademy/wonder-blocks-search-field": "^1.0.4",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
     "@khanacademy/wonder-blocks-timing": "^2.1.0",
-    "@khanacademy/wonder-blocks-typography": "^1.1.30"
+    "@khanacademy/wonder-blocks-typography": "^1.1.31"
   },
   "peerDependencies": {
     "@popperjs/core": "^2.10.1",
@@ -39,6 +40,6 @@
     "react-window": "^1.8.5"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.3.0"
+    "wb-dev-build-settings": "^0.4.0"
   }
 }

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

@@ -1,6 +1,6 @@
 // @flow
 import * as React from "react";
-import {fireEvent, render, screen} from "@testing-library/react";
+import {fireEvent, render, screen, waitFor} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import OptionItem from "../option-item.js";
@@ -784,7 +784,9 @@ describe("DropdownCore", () => {
             const searchField = await screen.findByPlaceholderText("Filter");
 
             // Assert
-            expect(searchField).toHaveFocus();
+            waitFor(() => {
+                expect(searchField).toHaveFocus();
+            });
         });
 
         it("should focus on the item after clicking on it", async () => {
@@ -826,7 +828,9 @@ describe("DropdownCore", () => {
             userEvent.click(item);
 
             // Assert
-            expect(item).toHaveFocus();
+            waitFor(() => {
+                expect(item).toHaveFocus();
+            });
         });
     });
 });

package/src/components/__tests__/search-text-input.test.js

@@ -1,14 +1,14 @@
 // @flow
 import * as React from "react";
-import {shallow} from "enzyme";
-import "jest-enzyme";
+import {render, screen} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import SearchTextInput from "../search-text-input.js";
 
 describe("SearchTextInput", () => {
-    it("text input container should be focused when focusing on the input", () => {
+    test("text input container should be focused when focusing on the input", () => {
         // Arrange
-        const wrapper = shallow(
+        render(
             <SearchTextInput
                 searchText=""
                 testId="search-text-input"
@@ -16,18 +16,18 @@ describe("SearchTextInput", () => {
             />,
         );
 
-        const input = wrapper.find(`[data-test-id="search-text-input"]`);
+        const input = screen.getByTestId("search-text-input");
 
         // Act
-        input.simulate("focus");
+        input.focus();
 
         // Assert
-        expect(wrapper).toHaveState({focused: true});
+        expect(input).toHaveFocus();
     });
 
-    it("text input should not be focused when losing focus", () => {
+    test("text input should not be focused when losing focus", () => {
         // Arrange
-        const wrapper = shallow(
+        render(
             <SearchTextInput
                 searchText=""
                 testId="search-text-input"
@@ -35,23 +35,23 @@ describe("SearchTextInput", () => {
             />,
         );
 
-        const input = wrapper.find(`[data-test-id="search-text-input"]`);
+        const input = screen.getByTestId("search-text-input");
         // focus in
-        input.simulate("focus");
+        input.focus();
 
         // Act
         // focus out
-        input.simulate("blur");
+        input.blur();
 
         // Assert
-        expect(wrapper).toHaveState({focused: false});
+        expect(input).not.toHaveFocus();
     });
 
-    it("onChange should be invoked if text input changes", () => {
+    test("onChange should be invoked if text input changes", () => {
         // Arrange
         const onChangeMock = jest.fn();
 
-        const wrapper = shallow(
+        render(
             <SearchTextInput
                 searchText=""
                 testId="search-text-input"
@@ -59,87 +59,154 @@ describe("SearchTextInput", () => {
             />,
         );
 
-        const input = wrapper.find(`[data-test-id="search-text-input"]`);
+        const input = screen.getByTestId("search-text-input");
 
         // Act
-        input.simulate("change", {
-            target: {value: "query"},
-            preventDefault: jest.fn(),
-        });
-
-        wrapper.update();
+        userEvent.paste(input, "value");
 
         // Assert
-        expect(onChangeMock).toHaveBeenCalledWith("query");
+        expect(onChangeMock).toHaveBeenCalledWith("value");
     });
 
-    it("displays the dismiss button when search text exists", () => {
+    test("displays the dismiss button when search text exists", () => {
         // Arrange
-        const wrapper = shallow(
-            <SearchTextInput
-                searchText="query"
-                testId="search-text-input"
-                onChange={() => jest.fn()}
-                onClick={() => jest.fn()}
-            />,
-        );
+        const SearchFieldWrapper = () => {
+            const [value, setValue] = React.useState("");
+            return (
+                <SearchTextInput
+                    searchText={value}
+                    testId="search-text-input"
+                    onChange={setValue}
+                />
+            );
+        };
+
+        render(<SearchFieldWrapper />);
+
+        const input = screen.getByTestId("search-text-input");
+
+        // Act
+        userEvent.paste(input, "value");
+
+        // Assert
+        const clearIconButton = screen.queryByRole("button");
+        expect(clearIconButton).toBeInTheDocument();
+    });
 
-        const input = wrapper.find(`[data-test-id="search-text-input"]`);
+    test("search should be cleared if the clear icon is clicked", () => {
+        // Arrange
+        const SearchFieldWrapper = () => {
+            const [value, setValue] = React.useState("initial value");
+            return (
+                <SearchTextInput
+                    searchText={value}
+                    testId="search-text-input"
+                    onChange={setValue}
+                />
+            );
+        };
+
+        render(<SearchFieldWrapper />);
+
+        const input = screen.getByTestId("search-text-input");
+        const clearIconButton = screen.queryByRole("button");
 
         // Act
-        input.simulate("change", {
-            target: {value: "query"},
-            preventDefault: jest.fn(),
-        });
+        userEvent.click(clearIconButton);
 
         // Assert
-        expect(wrapper.find("IconButton")).toExist();
+        expect(input).toHaveValue("");
     });
 
-    it("search should be dismissed if the close icon is clicked", () => {
+    test("focus should return to the input element after clear button is clicked", () => {
         // Arrange
-        const onClickMock = jest.fn();
+        const SearchFieldWrapper = () => {
+            const [value, setValue] = React.useState("");
+            return (
+                <SearchTextInput
+                    searchText={value}
+                    testId="search-text-input"
+                    onChange={setValue}
+                />
+            );
+        };
+
+        render(<SearchFieldWrapper />);
+
+        const input = screen.getByTestId("search-text-input");
+        userEvent.paste(input, "something");
 
-        const wrapper = shallow(
+        // Act
+        const clearIconButton = screen.queryByRole("button");
+        userEvent.click(clearIconButton);
+
+        // Assert
+        expect(input).toHaveFocus();
+    });
+
+    test("placeholder should be updated by the parent component", () => {
+        // Arrange
+        const {rerender} = render(
             <SearchTextInput
                 searchText="query"
-                onChange={() => jest.fn()}
-                onClick={onClickMock}
+                onChange={() => {}}
+                labels={{
+                    clearSearch: "Clear",
+                    filter: "Filter",
+                }}
+                testId="search-text-input"
             />,
         );
 
-        const dismissBtn = wrapper.find("IconButton");
+        const input = screen.getByTestId("search-text-input");
 
         // Act
-        dismissBtn.simulate("click");
-
-        wrapper.update();
+        rerender(
+            <SearchTextInput
+                searchText="query"
+                onChange={() => {}}
+                labels={{
+                    clearSearch: "Dismiss",
+                    filter: "Search",
+                }}
+                testId="search-text-input"
+            />,
+        );
 
         // Assert
-        expect(onClickMock).toHaveBeenCalled();
+        expect(input).toHaveAttribute("placeholder", "Search");
     });
 
-    it("labels should be updated by the parent component", () => {
+    test("button label should be updated by the parent component", () => {
         // Arrange
-        const wrapper = shallow(
+        const {rerender} = render(
             <SearchTextInput
                 searchText="query"
-                onChange={() => jest.fn()}
+                onChange={() => {}}
                 labels={{
                     clearSearch: "Clear",
                     filter: "Filter",
                 }}
+                testId="search-text-input"
             />,
         );
 
-        // Act
-        wrapper.setProps({labels: {clearSearch: "Dismiss", filter: "Search"}});
+        const clearIconButton = screen.queryByRole("button");
 
-        wrapper.update();
+        // Act
+        rerender(
+            <SearchTextInput
+                searchText="query"
+                onChange={() => {}}
+                labels={{
+                    clearSearch: "Dismiss",
+                    filter: "Search",
+                }}
+                testId="search-text-input"
+            />,
+        );
 
         // Assert
-        expect(wrapper).toHaveState({
-            labels: {clearSearch: "Dismiss", filter: "Search"},
-        });
+        expect(clearIconButton).toHaveAttribute("aria-label", "Dismiss");
     });
 });

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

@@ -428,7 +428,6 @@ describe("SingleSelect", () => {
             // open dropdown
             userEvent.click(opener);
             userEvent.click(screen.getByText("Toggle B"));
-            jest.advanceTimersByTime(100);
 
             // Assert
             // NOTE: the opener text is only updated in response to changes to the
@@ -591,4 +590,106 @@ describe("SingleSelect", () => {
             expect(dismissBtn).toHaveFocus();
         });
     });
+
+    describe("Custom listbox styles", () => {
+        it("should apply the default maxHeight to the listbox", () => {
+            // Arrange
+
+            // Act
+            render(
+                <SingleSelect
+                    onChange={onChange}
+                    opened={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: 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");
+        });
+
+        it("should apply the default maxHeight to a virtualized listbox", () => {
+            // Arrange
+            const optionItems = new Array(1000)
+                .fill(null)
+                .map((_, i) => (
+                    <OptionItem
+                        key={i}
+                        value={(i + 1).toString()}
+                        label={`item ${i + 1}`}
+                    />
+                ));
+
+            // Act
+            render(
+                <SingleSelect
+                    onChange={onChange}
+                    opened={true}
+                    isFilterable={true}
+                    placeholder="Choose"
+                    selectedValue="2"
+                >
+                    {optionItems}
+                </SingleSelect>,
+            );
+
+            // Assert
+            const dropdownMenu = screen.getByRole("listbox");
+            // Max allowed height
+            expect(dropdownMenu).toHaveStyle("max-height: 384px");
+        });
+
+        it("should override the default maxHeight to the listbox if a custom dropdownStyle is set", () => {
+            // Arrange
+            const customMaxHeight = 200;
+
+            // Act
+            render(
+                <SingleSelect
+                    onChange={onChange}
+                    opened={true}
+                    placeholder="Choose"
+                    selectedValue="2"
+                    dropdownStyle={{maxHeight: customMaxHeight}}
+                >
+                    <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: 200px");
+        });
+    });
 });

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

@@ -16,9 +16,11 @@ 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";
 
 type Props = {|
     /**
@@ -56,23 +58,19 @@ type State = {|
     height: ?number,
 |};
 
-/**
- * Maximum visible items inside the dropdown list.
- * Based on the defined height that we're using, this is the maximium
- * number of items that can fit into the visible porition of the
- * dropdowns list box.
- */
-const MAX_VISIBLE_ITEMS = 9;
-
 /**
  * A react-window's List wrapper that instantiates the virtualized list and
  * dynamically calculates the item height depending on the type
  */
 class DropdownCoreVirtualized extends React.Component<Props, State> {
-    state: State = {
-        height: this.getHeight(),
-        width: this.props.width,
-    };
+    constructor(props: Props) {
+        super(props);
+
+        this.state = {
+            height: getDropdownMenuHeight(props.data),
+            width: props.width,
+        };
+    }
 
     componentDidMount() {
         const {schedule} = this.props;
@@ -122,31 +120,10 @@ class DropdownCoreVirtualized extends React.Component<Props, State> {
      */
     setHeight() {
         // calculate dropdown's height depending on the type of items
-        const height = this.getHeight();
+        const height = getDropdownMenuHeight(this.props.data);
         this.setState({height});
     }
 
-    /**
-     * The list height that is automatically calculated depending on the
-     * component's type of each item (e.g. Separator, Option, Search, etc)
-     */
-    getHeight(): number {
-        // calculate using the first 10 items on the array as we want to display
-        // this number of elements in the visible area
-        return this.props.data
-            .slice(0, MAX_VISIBLE_ITEMS)
-            .reduce((sum, item) => {
-                if (SeparatorItem.isClassOf(item.component)) {
-                    return sum + SEPARATOR_ITEM_HEIGHT;
-                } else if (SearchTextInput.isClassOf(item.component)) {
-                    // search text input height
-                    return sum + SEARCH_ITEM_HEIGHT;
-                } else {
-                    return sum + DROPDOWN_ITEM_HEIGHT;
-                }
-            }, 0);
-    }
-
     /**
      * Calculates item height
      */

package/src/components/dropdown-core.js

@@ -25,6 +25,10 @@ import SearchTextInput from "./search-text-input.js";
 import {defaultLabels, keyCodes, searchInputStyle} from "../util/constants.js";
 import type {DropdownItem} from "../util/types.js";
 import DropdownPopper from "./dropdown-popper.js";
+import {
+    generateDropdownMenuStyles,
+    getDropdownMenuHeight,
+} from "../util/dropdown-menu-styles.js";
 
 /**
  * The number of options to apply the virtualized list to.
@@ -762,6 +766,14 @@ class DropdownCore extends React.Component<Props, State> {
             ? openerStyle.getPropertyValue("width")
             : 0;
 
+        // Vertical padding of the dropdown menu + borders
+        const initialHeight = 12;
+
+        const maxDropdownHeight = getDropdownMenuHeight(
+            this.props.items,
+            initialHeight,
+        );
+
         return (
             <View
                 // Stop propagation to prevent the mouseup listener on the
@@ -772,7 +784,11 @@ class DropdownCore extends React.Component<Props, State> {
                     styles.dropdown,
                     light && styles.light,
                     isReferenceHidden && styles.hidden,
-                    {minWidth: minDropdownWidth},
+                    generateDropdownMenuStyles(
+                        minDropdownWidth,
+                        maxDropdownHeight,
+                    ),
+
                     dropdownStyle,
                 ]}
             >