@khanacademy/wonder-blocks-dropdown 2.7.3 → 2.7.6

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,11 +557,8 @@ 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}
@@ -589,6 +571,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,12 +373,8 @@ 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
@@ -410,6 +394,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/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/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"},
-];

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

@@ -1,124 +0,0 @@
-// @flow
-import * as React from "react";
-import {StyleSheet} from "aphrodite";
-
-import {View} from "@khanacademy/wonder-blocks-core";
-
-import type {Labels} from "@khanacademy/wonder-blocks-dropdown";
-import type {StoryComponentType} from "@storybook/react";
-
-import {MultiSelect, OptionItem} from "../index.js";
-
-export default {
-    title: "Dropdown / MultiSelect",
-};
-
-// Custom MultiSelect labels
-const dropdownLabels: $Shape<Labels> = {
-    noneSelected: "Solar system",
-    someSelected: (numSelectedValues) => `${numSelectedValues} planets`,
-};
-
-type Props = {|
-    opened: boolean,
-|};
-
-type State = {|
-    opened: boolean,
-    selectedValues: Array<string>,
-|};
-
-type DefaultProps = {|
-    opened: $PropertyType<Props, "opened">,
-|};
-
-class MultiSelectWithCustomStyles extends React.Component<Props, State> {
-    static defaultProps: DefaultProps = {
-        opened: false,
-    };
-
-    state: State = {
-        selectedValues: [],
-        opened: this.props.opened,
-    };
-
-    handleChange: (update: Array<string>) => void = (update) => {
-        this.setState({
-            selectedValues: update,
-        });
-    };
-
-    handleToggleMenu: (opened: boolean) => void = (opened) => {
-        this.setState({
-            opened,
-        });
-    };
-
-    render(): React.Node {
-        return (
-            <View style={styles.wrapper}>
-                <MultiSelect
-                    onChange={this.handleChange}
-                    selectedValues={this.state.selectedValues}
-                    style={styles.setWidth}
-                    dropdownStyle={styles.customDropdown}
-                    labels={dropdownLabels}
-                    opened={this.state.opened}
-                    onToggle={this.handleToggleMenu}
-                >
-                    <OptionItem label="Mercury" value="1" />
-                    <OptionItem label="Venus" value="2" />
-                    <OptionItem label="Earth" value="3" disabled />
-                    <OptionItem label="Mars" value="4" />
-                    <OptionItem label="Jupiter" value="5" />
-                    <OptionItem label="Saturn" value="6" />
-                    <OptionItem label="Neptune" value="7" />
-                    <OptionItem label="Uranus" value="8" />
-                </MultiSelect>
-            </View>
-        );
-    }
-}
-
-export const CustomStyles: StoryComponentType = () => (
-    <MultiSelectWithCustomStyles />
-);
-
-CustomStyles.parameters = {
-    chromatic: {
-        // we don't need screenshots because this story only tests behavior.
-        disableSnapshot: true,
-    },
-};
-
-export const CustomStylesOpened: StoryComponentType = () => (
-    <MultiSelectWithCustomStyles opened={true} />
-);
-
-export const DisabledMultiSelect: StoryComponentType = () => (
-    <MultiSelect disabled={true} onChange={() => {}}>
-        <OptionItem label="Mercury" value="1" />
-        <OptionItem label="Venus" value="2" />
-    </MultiSelect>
-);
-
-DisabledMultiSelect.parameters = {
-    docs: {
-        storyDescription:
-            "`MultiSelect` can be disabled by passing `disabled={true}`. This can be useful when you want to disable a control temporarily.",
-    },
-};
-
-const styles = StyleSheet.create({
-    setWidth: {
-        minWidth: 170,
-        width: "100%",
-    },
-    customDropdown: {
-        maxHeight: 200,
-    },
-    wrapper: {
-        height: "800px",
-        width: "1200px",
-    },
-});