@khanacademy/wonder-blocks-dropdown 2.7.4 → 2.8.0

package/src/components/multi-select.js

@@ -8,7 +8,6 @@ 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 SearchTextInput from "./search-text-input.js";
 import SelectOpener from "./select-opener.js";
 import SeparatorItem from "./separator-item.js";
 import {
@@ -211,6 +210,17 @@ type State = {|
  *
  * The multi select stays open until closed by the user. The onChange callback
  * happens every time there is a change in the selection of the items.
+ *
+ * ## Usage
+ *
+ * ```jsx
+ * import {OptionItem, MultiSelect} from "@khanacademy/wonder-blocks-dropdown";
+ *
+ * <MultiSelect onChange={setSelectedValues} selectedValues={selectedValues}>
+ *  <OptionItem value="pear">Pear</OptionItem>
+ *  <OptionItem value="mango">Mango</OptionItem>
+ * </MultiSelect>
+ * ```
  */
 export default class MultiSelect extends React.Component<Props, State> {
     labels: Labels;
@@ -329,32 +339,6 @@ export default class MultiSelect extends React.Component<Props, State> {
         }
     }
 
-    getSearchField(): Array<DropdownItem> {
-        if (!this.props.isFilterable) {
-            return [];
-        }
-
-        const {clearSearch, filter} = this.state.labels;
-
-        return [
-            {
-                component: (
-                    <SearchTextInput
-                        key="search-text-input"
-                        onChange={this.handleSearchTextChanged}
-                        searchText={this.state.searchText}
-                        labels={{
-                            clearSearch,
-                            filter,
-                        }}
-                    />
-                ),
-                focusable: true,
-                populatedProps: {},
-            },
-        ];
-    }
-
     getShortcuts(numOptions: number): Array<DropdownItem> {
         const {selectedValues, shortcuts} = this.props;
         const {selectAllLabel, selectNoneLabel} = this.state.labels;
@@ -556,7 +540,8 @@ export default class MultiSelect extends React.Component<Props, State> {
             isFilterable,
         } = this.props;
         const {open, searchText} = this.state;
-        const {noResults, someSelected} = this.state.labels;
+        const {clearSearch, filter, noResults, someSelected} =
+            this.state.labels;
 
         const allChildren = React.Children.toArray(children).filter(Boolean);
         const numOptions = allChildren.length;
@@ -572,16 +557,14 @@ export default class MultiSelect extends React.Component<Props, State> {
                     selectDropdownStyle,
                     dropdownStyle,
                 ]}
-                items={[
-                    ...this.getSearchField(),
-                    ...this.getShortcuts(numOptions),
-                    ...filteredItems,
-                ]}
+                isFilterable={isFilterable}
+                items={[...this.getShortcuts(numOptions), ...filteredItems]}
                 light={light}
                 onOpenChanged={this.handleOpenChanged}
                 open={open}
                 opener={opener}
                 openerElement={this.state.openerElement}
+                selectionType="multi"
                 style={style}
                 className={className}
                 onSearchTextChanged={
@@ -589,6 +572,8 @@ export default class MultiSelect extends React.Component<Props, State> {
                 }
                 searchText={isFilterable ? searchText : ""}
                 labels={{
+                    clearSearch,
+                    filter,
                     noResults,
                     someSelected,
                 }}

package/src/components/single-select.js

@@ -9,14 +9,12 @@ import DropdownCore from "./dropdown-core.js";
 import DropdownOpener from "./dropdown-opener.js";
 import SelectOpener from "./select-opener.js";
 import {
-    defaultLabels,
     selectDropdownStyle,
     filterableDropdownStyle,
 } from "../util/constants.js";
 
 import typeof OptionItem from "./option-item.js";
 import type {DropdownItem, OpenerProps} from "../util/types.js";
-import SearchTextInput from "./search-text-input.js";
 
 type Props = {|
     ...AriaProps,
@@ -144,11 +142,23 @@ type DefaultProps = {|
  * The single select dropdown closes after the selection of an item. If the same
  * item is selected, there is no callback.
  *
- * *NOTE:* The component automatically uses
+ * **NOTE:** If there are more than 125 items, the component automatically uses
  * [react-window](https://github.com/bvaughn/react-window) to improve
  * performance when rendering these elements and is capable of handling many
  * hundreds of items without performance problems.
  *
+ * ## Usage
+ *
+ * ```jsx
+ * import {OptionItem, SingleSelect} from "@khanacademy/wonder-blocks-dropdown";
+ *
+ * const [selectedValue, setSelectedValue] = useState("");
+ *
+ * <SingleSelect placeholder="Choose a fruit" onChange={setSelectedValue} selectedValue={selectedValue}>
+ *  <OptionItem value="pear">Pear</OptionItem>
+ *  <OptionItem value="mango">Mango</OptionItem>
+ * </SingleSelect>
+ * ```
  */
 export default class SingleSelect extends React.Component<Props, State> {
     selectedIndex: number;
@@ -275,28 +285,6 @@ export default class SingleSelect extends React.Component<Props, State> {
         );
     }
 
-    getSearchField(): ?DropdownItem {
-        if (!this.props.isFilterable) {
-            return null;
-        }
-
-        return {
-            component: (
-                <SearchTextInput
-                    key="search-text-input"
-                    onChange={this.handleSearchTextChanged}
-                    searchText={this.state.searchText}
-                    labels={{
-                        clearSearch: defaultLabels.clearSearch,
-                        filter: defaultLabels.filter,
-                    }}
-                />
-            ),
-            focusable: true,
-            populatedProps: {},
-        };
-    }
-
     handleSearchTextChanged: (searchText: string) => void = (searchText) => {
         this.setState({searchText});
     };
@@ -385,16 +373,13 @@ export default class SingleSelect extends React.Component<Props, State> {
         } = this.props;
         const {searchText} = this.state;
         const allChildren = React.Children.toArray(children).filter(Boolean);
-        const filteredItems = this.getMenuItems(allChildren);
+        const items = this.getMenuItems(allChildren);
         const opener = this.renderOpener(allChildren.length);
-        const searchField = this.getSearchField();
-        const items = searchField
-            ? [searchField, ...filteredItems]
-            : filteredItems;
 
         return (
             <DropdownCore
                 role="listbox"
+                selectionType="single"
                 alignment={alignment}
                 dropdownStyle={[
                     isFilterable && filterableDropdownStyle,
@@ -410,6 +395,7 @@ export default class SingleSelect extends React.Component<Props, State> {
                 openerElement={this.state.openerElement}
                 style={style}
                 className={className}
+                isFilterable={isFilterable}
                 onSearchTextChanged={
                     isFilterable ? this.handleSearchTextChanged : null
                 }

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

@@ -1,7 +1,6 @@
 // @flow
 import * as React from "react";
 import OptionItem from "../../components/option-item.js";
-import SearchTextInput from "../../components/search-text-input.js";
 import SeparatorItem from "../../components/separator-item.js";
 
 import {getDropdownMenuHeight} from "../dropdown-menu-styles.js";
@@ -30,19 +29,6 @@ const optionItems = [
     },
 ];
 
-const searchFieldItem = {
-    component: (
-        <SearchTextInput
-            testId="item-0"
-            key="search-text-input"
-            onChange={jest.fn()}
-            searchText={""}
-        />
-    ),
-    focusable: true,
-    populatedProps: {},
-};
-
 const separatorItem = {
     component: <SeparatorItem />,
     focusable: false,
@@ -74,18 +60,6 @@ describe("getDropdownMenuHeight", () => {
         expect(height).toBe(130);
     });
 
-    it("should get a valid height for a filterable dropdown", () => {
-        // Arrange
-        const items = [searchFieldItem, ...optionItems];
-
-        // Act
-        const height = getDropdownMenuHeight(items);
-
-        // Assert
-        // search field + 3 option items
-        expect(height).toBe(172);
-    });
-
     it("should get a valid height for a dropdown with a SeparatorItem", () => {
         // Arrange
         const items = [separatorItem, ...optionItems];

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

@@ -0,0 +1,73 @@
+// @flow
+import {debounce, getStringForKey} from "../helpers.js";
+
+describe("getStringForKey", () => {
+    it("should get a valid string", () => {
+        // Arrange
+
+        // Act
+        const key = getStringForKey("a");
+
+        // Assert
+        expect(key).toBe("a");
+    });
+
+    it("should return empty if we use a glyph modifier key (e.g. Shift)", () => {
+        // Arrange
+
+        // Act
+        const key = getStringForKey("Shift");
+
+        // Assert
+        expect(key).toBe("");
+    });
+});
+
+describe("debounce", () => {
+    beforeEach(() => {
+        jest.useFakeTimers();
+    });
+
+    it("should call the debounced function", () => {
+        // Arrange
+        const callbackFnMock = jest.fn();
+        const debounced = debounce(callbackFnMock, 500);
+
+        // Act
+        debounced();
+        jest.advanceTimersByTime(501);
+
+        // Assert
+        expect(callbackFnMock).toHaveBeenCalled();
+    });
+
+    it("should call the debounced function only once", () => {
+        // Arrange
+        const callbackFnMock = jest.fn();
+        const debounced = debounce(callbackFnMock, 500);
+
+        // Act
+        debounced();
+        debounced();
+        debounced();
+        jest.advanceTimersByTime(501);
+
+        // Assert
+        expect(callbackFnMock).toHaveBeenCalledTimes(1);
+    });
+
+    it("should execute the last call with the exact args", () => {
+        // Arrange
+        const callbackFnMock = jest.fn();
+        const debounced = debounce(callbackFnMock, 500);
+
+        // Act
+        debounced("a");
+        debounced("ab");
+        debounced("abc");
+        jest.advanceTimersByTime(501);
+
+        // Assert
+        expect(callbackFnMock).toHaveBeenCalledWith("abc");
+    });
+});

package/src/util/constants.js

@@ -21,14 +21,6 @@ export const filterableDropdownStyle = {
     minHeight: 100,
 };
 
-export const searchInputStyle = {
-    margin: Spacing.xSmall_8,
-    marginTop: Spacing.xxxSmall_4,
-    // Set `minHeight` to "auto" to stop the search field from having
-    // a height of 0 and being cut off.
-    minHeight: "auto",
-};
-
 // The default item height
 export const DROPDOWN_ITEM_HEIGHT = 40;
 
@@ -41,9 +33,6 @@ export const MAX_VISIBLE_ITEMS = 9;
 
 export const SEPARATOR_ITEM_HEIGHT = 9;
 
-export const SEARCH_ITEM_HEIGHT: number =
-    DROPDOWN_ITEM_HEIGHT + searchInputStyle.margin + searchInputStyle.marginTop;
-
 // The default labels that will be used by different components
 export const defaultLabels = {
     clearSearch: "Clear search",

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

@@ -6,12 +6,10 @@ import type {StyleType} from "@khanacademy/wonder-blocks-core";
 import {
     DROPDOWN_ITEM_HEIGHT,
     MAX_VISIBLE_ITEMS,
-    SEARCH_ITEM_HEIGHT,
     SEPARATOR_ITEM_HEIGHT,
 } from "./constants.js";
 
 import SeparatorItem from "../components/separator-item.js";
-import SearchTextInput from "../components/search-text-input.js";
 
 import type {DropdownItem} from "./types.js";
 
@@ -33,9 +31,6 @@ export function getDropdownMenuHeight(
     return items.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;
         }

package/src/util/helpers.js

@@ -0,0 +1,44 @@
+// @flow
+
+/**
+ * Checks if a given key is a valid ASCII value.
+ *
+ * @param {string} key The key that is being typed in.
+ * @returns A valid string representation of the given key.
+ */
+export function getStringForKey(key: string): string {
+    // If the key is of length 1, it is an ASCII value.
+    // Otherwise, if there are no ASCII characters in the key name,
+    // it is a Unicode character.
+    // See https://www.w3.org/TR/uievents-key/
+    if (key.length === 1 || !/^[A-Z]/i.test(key)) {
+        return key;
+    }
+
+    return "";
+}
+
+/**
+ *
+ * @param {fn} callback The function that will be executed after the debounce is resolved.
+ * @param {number} wait The period of time that will be executed the debounced
+ * function.
+ * @returns The function that will be executed after the wait period is
+ * fulfilled.
+ */
+export function debounce(
+    callback: (...args: any) => void,
+    wait: number,
+): (...args: any) => void {
+    let timeout;
+
+    return function executedFunction(...args) {
+        const later = () => {
+            clearTimeout(timeout);
+            callback(...args);
+        };
+
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    };
+}

package/src/util/types.js

@@ -5,18 +5,15 @@ 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 SearchTextInput from "../components/search-text-input.js";
 import typeof SeparatorItem from "../components/separator-item.js";
 
 //TODO: rename into something more descriptive
 export type Item =
     | false
-    | React.Element<ActionItem | OptionItem | SeparatorItem | SearchTextInput>;
+    | React.Element<ActionItem | OptionItem | SeparatorItem>;
 
 export type DropdownItem = {|
-    component: React.Element<
-        ActionItem | OptionItem | SeparatorItem | SearchTextInput,
-    >,
+    component: React.Element<ActionItem | OptionItem | SeparatorItem>,
     focusable: boolean,
     populatedProps: any,
     // extra props used by DropdownCore

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

@@ -1,212 +0,0 @@
-// @flow
-import * as React from "react";
-import {render, screen} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-import SearchTextInput from "../search-text-input.js";
-
-describe("SearchTextInput", () => {
-    test("text input container should be focused when focusing on the input", () => {
-        // Arrange
-        render(
-            <SearchTextInput
-                searchText=""
-                testId="search-text-input"
-                onChange={jest.fn()}
-            />,
-        );
-
-        const input = screen.getByTestId("search-text-input");
-
-        // Act
-        input.focus();
-
-        // Assert
-        expect(input).toHaveFocus();
-    });
-
-    test("text input should not be focused when losing focus", () => {
-        // Arrange
-        render(
-            <SearchTextInput
-                searchText=""
-                testId="search-text-input"
-                onChange={jest.fn()}
-            />,
-        );
-
-        const input = screen.getByTestId("search-text-input");
-        // focus in
-        input.focus();
-
-        // Act
-        // focus out
-        input.blur();
-
-        // Assert
-        expect(input).not.toHaveFocus();
-    });
-
-    test("onChange should be invoked if text input changes", () => {
-        // Arrange
-        const onChangeMock = jest.fn();
-
-        render(
-            <SearchTextInput
-                searchText=""
-                testId="search-text-input"
-                onChange={onChangeMock}
-            />,
-        );
-
-        const input = screen.getByTestId("search-text-input");
-
-        // Act
-        userEvent.paste(input, "value");
-
-        // Assert
-        expect(onChangeMock).toHaveBeenCalledWith("value");
-    });
-
-    test("displays the dismiss button when search text exists", () => {
-        // Arrange
-        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();
-    });
-
-    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
-        userEvent.click(clearIconButton);
-
-        // Assert
-        expect(input).toHaveValue("");
-    });
-
-    test("focus should return to the input element after clear button is clicked", () => {
-        // Arrange
-        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");
-
-        // 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={() => {}}
-                labels={{
-                    clearSearch: "Clear",
-                    filter: "Filter",
-                }}
-                testId="search-text-input"
-            />,
-        );
-
-        const input = screen.getByTestId("search-text-input");
-
-        // Act
-        rerender(
-            <SearchTextInput
-                searchText="query"
-                onChange={() => {}}
-                labels={{
-                    clearSearch: "Dismiss",
-                    filter: "Search",
-                }}
-                testId="search-text-input"
-            />,
-        );
-
-        // Assert
-        expect(input).toHaveAttribute("placeholder", "Search");
-    });
-
-    test("button label should be updated by the parent component", () => {
-        // Arrange
-        const {rerender} = render(
-            <SearchTextInput
-                searchText="query"
-                onChange={() => {}}
-                labels={{
-                    clearSearch: "Clear",
-                    filter: "Filter",
-                }}
-                testId="search-text-input"
-            />,
-        );
-
-        const clearIconButton = screen.queryByRole("button");
-
-        // Act
-        rerender(
-            <SearchTextInput
-                searchText="query"
-                onChange={() => {}}
-                labels={{
-                    clearSearch: "Dismiss",
-                    filter: "Search",
-                }}
-                testId="search-text-input"
-            />,
-        );
-
-        // Assert
-        expect(clearIconButton).toHaveAttribute("aria-label", "Dismiss");
-    });
-});

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

@@ -1,48 +0,0 @@
-// @flow
-import * as React from "react";
-
-import type {StoryComponentType} from "@storybook/react";
-import ActionMenu from "./action-menu.js";
-import ActionItem from "./action-item.js";
-
-export default {
-    title: "Dropdown / ActionMenu",
-    component: ActionMenu,
-};
-
-export const ActionMenuWithLang: StoryComponentType = () => (
-    <ActionMenu menuText="Locales">
-        {locales.map((locale) => (
-            <ActionItem
-                key={locale.locale}
-                label={locale.localName}
-                lang={locale.locale}
-                testId={"language_picker_" + locale.locale}
-            />
-        ))}
-    </ActionMenu>
-);
-
-ActionMenuWithLang.storyName = "Using the ActionMenu with the lang attribute";
-
-ActionMenuWithLang.parameters = {
-    docs: {
-        storyDescription:
-            "You can use the `lang` attribute to specify the language of the action item(s). This is useful if you want to avoid issues with Screen Readers trying to read the proper language for the rendered text.",
-    },
-    chromatic: {
-        disableSnapshot: true,
-    },
-};
-
-const locales = [
-    {id: "az", locale: "az", localName: "Azərbaycanca"},
-    {id: "id", locale: "id", localName: "Bahasa Indonesia"},
-    {id: "cs", locale: "cs", localName: "čeština"},
-    {id: "da", locale: "da", localName: "dansk"},
-    {id: "de", locale: "de", localName: "Deutsch"},
-    {id: "en", locale: "en", localName: "English"},
-    {id: "es", locale: "es", localName: "español"},
-    {id: "fr", locale: "fr", localName: "français"},
-    {id: "it", locale: "it", localName: "italiano"},
-];