@khanacademy/wonder-blocks-dropdown 2.3.19

package/src/__tests__/generated-snapshot.test.js

@@ -0,0 +1,1612 @@
+// This file is auto-generated by gen-snapshot-tests.js
+// Do not edit this file.  To make changes to these snapshot tests:
+//   1. edit the markdown documentation files in the package,
+//        packages/wonder-blocks-dropdown
+//   2. Run `yarn run gen-snapshot-tests`.
+import React from "react";
+import renderer from "react-test-renderer";
+
+// Mock react-dom as jest doesn't like findDOMNode.
+jest.mock("react-dom");
+import {
+    ActionMenu,
+    ActionItem,
+    SeparatorItem,
+    OptionItem,
+    SingleSelect,
+    MultiSelect,
+} from "@khanacademy/wonder-blocks-dropdown";
+import {View, Text} from "@khanacademy/wonder-blocks-core";
+import {StyleSheet} from "aphrodite";
+import {Spring, Strut} from "@khanacademy/wonder-blocks-layout";
+import Button from "@khanacademy/wonder-blocks-button";
+import Spacing from "@khanacademy/wonder-blocks-spacing";
+import Color from "@khanacademy/wonder-blocks-color";
+import {LabelLarge, HeadingLarge} from "@khanacademy/wonder-blocks-typography";
+import {OnePaneDialog, ModalLauncher} from "@khanacademy/wonder-blocks-modal";
+
+describe("wonder-blocks-dropdown", () => {
+    it("example 1", () => {
+        const styles = StyleSheet.create({
+            row: {
+                flexDirection: "row",
+                justifyContent: "flex-end",
+            },
+        });
+        const example = (
+            <View style={styles.row}>
+                <ActionMenu
+                    alignment="right"
+                    menuText="Betsy Appleseed"
+                    testId="teacher-menu"
+                >
+                    <ActionItem
+                        label="Profile"
+                        href="http://khanacademy.org/profile"
+                        target="_blank"
+                        testId="profile"
+                    />
+                    <ActionItem
+                        label="Teacher dashboard"
+                        href="http://khanacademy.org/coach/dashboard"
+                        testId="dashboard"
+                    />
+                    <ActionItem
+                        label="Settings (onClick)"
+                        onClick={() => console.log("user clicked on settings")}
+                        testId="settings"
+                    />
+                    <ActionItem
+                        label="Help"
+                        disabled={true}
+                        onClick={() => console.log("this item is disabled...")}
+                        testId="help"
+                    />
+                    <ActionItem
+                        label="Feedback"
+                        disabled={true}
+                        href="/feedback"
+                        testId="feedback"
+                    />
+                    <SeparatorItem />
+                    <ActionItem
+                        label="Log out"
+                        href="http://khanacademy.org/logout"
+                        testId="logout"
+                    />
+                </ActionMenu>
+            </View>
+        );
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 2", () => {
+        const styles = StyleSheet.create({
+            row: {
+                flexDirection: "row",
+            },
+        });
+        const example = (
+            <View style={styles.row}>
+                <Spring />
+                <ActionMenu
+                    menuText="Betsy Appleseed"
+                    style={{
+                        width: 100,
+                    }}
+                >
+                    <ActionItem
+                        label="Profile"
+                        href="http://khanacademy.org/profile"
+                    />
+                    <ActionItem
+                        label="Teacher dashboard"
+                        href="http://khanacademy.org/coach/dashboard"
+                    />
+                    <ActionItem
+                        label="Settings (onClick)"
+                        onClick={() => console.log("user clicked on settings")}
+                    />
+                    <ActionItem
+                        label="Help"
+                        disabled={true}
+                        onClick={() => console.log("this item is disabled...")}
+                    />
+                    <SeparatorItem />
+                    <ActionItem
+                        label="Log out"
+                        href="http://khanacademy.org/logout"
+                    />
+                </ActionMenu>
+            </View>
+        );
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 3", () => {
+        const styles = StyleSheet.create({
+            row: {
+                flexDirection: "row",
+            },
+        });
+
+        class HybridMenu extends React.Component {
+            constructor() {
+                super();
+                this.state = {
+                    selectedValues: ["homework"],
+                    showHiddenOption: false,
+                }; // Styleguidist doesn't support arrow functions in class field properties
+
+                this.handleChange = this.handleChange.bind(this);
+            }
+
+            handleChange(update) {
+                this.setState({
+                    selectedValues: update,
+                    showHiddenOption: update.includes("in-class"),
+                });
+            }
+
+            render() {
+                const {showHiddenOption} = this.state;
+                return (
+                    <ActionMenu
+                        menuText="Assignments"
+                        onChange={this.handleChange}
+                        selectedValues={this.state.selectedValues}
+                    >
+                        <ActionItem
+                            label="Create..."
+                            onClick={() => console.log("create action")}
+                        />
+                        <ActionItem
+                            label="Edit..."
+                            disabled={true}
+                            onClick={() => console.log("edit action")}
+                        />
+                        <ActionItem
+                            label="Delete"
+                            disabled={true}
+                            onClick={() => console.log("delete action")}
+                        />
+                        {showHiddenOption && (
+                            <ActionItem
+                                label="Hidden menu for class"
+                                disabled={!showHiddenOption}
+                                onClick={() =>
+                                    console.log("hidden menu is clicked!")
+                                }
+                            />
+                        )}
+                        <SeparatorItem />
+                        <OptionItem
+                            label="Show homework assignments"
+                            value="homework"
+                            onClick={() =>
+                                console.log(`Show homework assignments toggled`)
+                            }
+                        />
+                        <OptionItem
+                            label="Show in-class assignments"
+                            value="in-class"
+                            onClick={() =>
+                                console.log(`Show in-class assignments toggled`)
+                            }
+                        />
+                    </ActionMenu>
+                );
+            }
+        }
+
+        const example = (
+            <View style={styles.row}>
+                <HybridMenu />
+            </View>
+        );
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 4", () => {
+        const styles = StyleSheet.create({
+            row: {
+                flexDirection: "row",
+            },
+        });
+        const example = (
+            <View style={styles.row}>
+                <ActionMenu menuText="Empty" />
+            </View>
+        );
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 5", () => {
+        const styles = StyleSheet.create({
+            row: {
+                flexDirection: "row",
+            },
+            dropdown: {
+                maxHeight: 200,
+            },
+        });
+        const example = (
+            <View style={styles.row}>
+                <ActionMenu
+                    menuText="Betsy Appleseed"
+                    testId="teacher-menu"
+                    dropdownStyle={styles.dropdown}
+                >
+                    <ActionItem
+                        label="Profile"
+                        href="http://khanacademy.org/profile"
+                        testId="profile"
+                    />
+                    <ActionItem
+                        label="Teacher dashboard"
+                        href="http://khanacademy.org/coach/dashboard"
+                        testId="dashboard"
+                    />
+                    <ActionItem
+                        label="Settings (onClick)"
+                        onClick={() => console.log("user clicked on settings")}
+                        testId="settings"
+                    />
+                    <ActionItem
+                        label="Help"
+                        disabled={true}
+                        onClick={() => console.log("this item is disabled...")}
+                        testId="help"
+                    />
+                    <ActionItem
+                        label="Feedback"
+                        disabled={true}
+                        href="/feedback"
+                        testId="feedback"
+                    />
+                    <SeparatorItem />
+                    <ActionItem
+                        label="Log out"
+                        href="http://khanacademy.org/logout"
+                        testId="logout"
+                    />
+                </ActionMenu>
+            </View>
+        );
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 6", () => {
+        const styles = StyleSheet.create({
+            row: {
+                flexDirection: "row",
+            },
+        });
+
+        class ControlledActionMenuExample extends React.Component {
+            constructor() {
+                super();
+                this.state = {
+                    opened: false,
+                    selectedValues: ["kumail"],
+                };
+                this.handleChange = this.handleChange.bind(this);
+                this.handleToggleMenu = this.handleToggleMenu.bind(this);
+            }
+
+            handleChange(update) {
+                this.setState({
+                    selectedValues: update,
+                });
+            }
+
+            handleToggleMenu(opened) {
+                this.setState({
+                    opened,
+                });
+            }
+
+            render() {
+                return (
+                    <View style={styles.row}>
+                        <ActionMenu
+                            menuText="Betsy Appleseed"
+                            onChange={this.handleChange}
+                            onToggle={(opened) => {
+                                console.log("toggle called!!!! ", opened);
+                                this.handleToggleMenu(opened);
+                            }}
+                            opened={this.state.opened}
+                            selectedValues={this.state.selectedValues}
+                        >
+                            <ActionItem label="Add new +" />
+                            <SeparatorItem />
+                            <OptionItem label="Alex" value="alex" />
+                            <OptionItem label="Cathy" value="cathy" />
+                            <OptionItem label="Kumail" value="kumail" />
+                            <OptionItem label="Salman" value="salman" />
+                            <OptionItem label="Yan" value="yan" />
+                            <OptionItem label="Yash" value="yash" />
+                        </ActionMenu>
+                        <Strut size={Spacing.medium_16} />
+                        <Button onClick={() => this.handleToggleMenu(true)}>
+                            Open ActionMenu programatically
+                        </Button>
+                    </View>
+                );
+            }
+        }
+
+        const example = <ControlledActionMenuExample />;
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 7", () => {
+        const styles = StyleSheet.create({
+            focused: {
+                color: Color.purple,
+            },
+            hovered: {
+                textDecoration: "underline",
+                color: Color.purple,
+                cursor: "pointer",
+            },
+            pressed: {
+                color: Color.blue,
+            },
+        });
+        const example = (
+            <ActionMenu
+                disabled={false}
+                menuText="Custom opener"
+                opener={({focused, hovered, pressed, text}) => (
+                    <LabelLarge
+                        onClick={() => {
+                            console.log("custom click!!!!!");
+                        }}
+                        testId="teacher-menu-custom-opener"
+                        style={[
+                            focused && styles.focused,
+                            hovered && styles.hovered,
+                            pressed && styles.pressed,
+                        ]}
+                    >
+                        {text}
+                    </LabelLarge>
+                )}
+            >
+                <ActionItem
+                    label="Profile"
+                    href="http://khanacademy.org/profile"
+                    testId="profile"
+                />
+                <ActionItem
+                    label="Settings"
+                    onClick={() => console.log("user clicked on settings")}
+                    testId="settings"
+                />
+                <ActionItem
+                    label="Help"
+                    disabled={true}
+                    onClick={() => console.log("this item is disabled...")}
+                    testId="help"
+                />
+                <SeparatorItem />
+                <ActionItem
+                    label="Log out"
+                    href="http://khanacademy.org/logout"
+                    testId="logout"
+                />
+                <OptionItem
+                    label="Show homework assignments"
+                    value="homework"
+                    onClick={() =>
+                        console.log(`Show homework assignments toggled`)
+                    }
+                />
+                <OptionItem
+                    label="Show in-class assignments"
+                    value="in-class"
+                    onClick={() =>
+                        console.log(`Show in-class assignments toggled`)
+                    }
+                />
+            </ActionMenu>
+        );
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 8", () => {
+        const styles = StyleSheet.create({
+            row: {
+                flexDirection: "row",
+            },
+            setWidth: {
+                minWidth: 170,
+                maxWidth: 190,
+            },
+        });
+
+        class ExampleWithPlaceholder extends React.Component {
+            constructor() {
+                super();
+                this.state = {
+                    selectedValue: null,
+                };
+                this.handleChange = this.handleChange.bind(this);
+            }
+
+            handleChange(selected) {
+                console.log(`${selected} was selected!`);
+                this.setState({
+                    selectedValue: selected,
+                });
+            }
+
+            render() {
+                return (
+                    <SingleSelect
+                        onChange={this.handleChange}
+                        onToggle={(opened) => console.log("toggle: ", opened)}
+                        placeholder="Choose a fruit"
+                        selectedValue={this.state.selectedValue}
+                        style={styles.setWidth}
+                        testId="fruit-select"
+                    >
+                        <OptionItem
+                            label="Vine-ripened tomatoes"
+                            value="tomato"
+                            testId="tomato"
+                        />
+                        <OptionItem
+                            label="Watermelon"
+                            value="watermelon"
+                            testId="watermelon"
+                        />
+                        <OptionItem
+                            label="Strawberry"
+                            value="strawberry"
+                            testId="strawberry"
+                        />
+                        {false && (
+                            <OptionItem
+                                label="Other"
+                                value="other"
+                                testId="other"
+                            />
+                        )}
+                    </SingleSelect>
+                );
+            }
+        }
+
+        const example = (
+            <View style={styles.row}>
+                <ExampleWithPlaceholder />
+            </View>
+        );
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 9", () => {
+        const styles = StyleSheet.create({
+            row: {
+                flexDirection: "row",
+            },
+        });
+
+        class ExampleWithStartingSelection extends React.Component {
+            constructor() {
+                super();
+                this.state = {
+                    selectedValue: "banana",
+                }; // Styleguidist doesn't support arrow functions in class field properties
+
+                this.handleChange = this.handleChange.bind(this);
+            }
+
+            handleChange(selected) {
+                console.log(`${selected} was selected!`);
+                this.setState({
+                    selectedValue: selected,
+                });
+            }
+
+            render() {
+                return (
+                    <SingleSelect
+                        onChange={this.handleChange}
+                        placeholder="Choose a juice"
+                        selectedValue={this.state.selectedValue}
+                    >
+                        <OptionItem label="Banana juice" value="banana" />
+                        <OptionItem
+                            label="Guava juice"
+                            value="guava"
+                            disabled
+                        />
+                        <OptionItem label="White grape juice" value="grape" />
+                    </SingleSelect>
+                );
+            }
+        }
+
+        const example = (
+            <View style={styles.row}>
+                <ExampleWithStartingSelection />
+            </View>
+        );
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 10", () => {
+        const styles = StyleSheet.create({
+            row: {
+                flexDirection: "row",
+            },
+        });
+
+        class DisabledExample extends React.Component {
+            constructor() {
+                super();
+                this.state = {
+                    selectedValue: "banana",
+                }; // Styleguidist doesn't support arrow functions in class field properties
+
+                this.handleChange = this.handleChange.bind(this);
+            }
+
+            handleChange(selected) {
+                console.log(`${selected} was selected!`);
+                this.setState({
+                    selectedValue: selected,
+                });
+            }
+
+            render() {
+                return (
+                    <SingleSelect
+                        disabled={true}
+                        onChange={this.handleChange}
+                        placeholder="Choose a juice"
+                        selectedValue={this.state.selectedValue}
+                    >
+                        <OptionItem label="Banana juice" value="banana" />
+                        <OptionItem
+                            label="Guava juice"
+                            value="guava"
+                            disabled
+                        />
+                        <OptionItem label="White grape juice" value="grape" />
+                    </SingleSelect>
+                );
+            }
+        }
+
+        const example = (
+            <View style={styles.row}>
+                <DisabledExample />
+            </View>
+        );
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 11", () => {
+        const styles = StyleSheet.create({
+            row: {
+                flexDirection: "row",
+            },
+            darkBackgroundWrapper: {
+                flexDirection: "row",
+                justifyContent: "flex-end",
+                backgroundColor: Color.darkBlue,
+                width: 350,
+                height: 200,
+                paddingRight: 10,
+                paddingTop: 10,
+            },
+        });
+
+        class LightRightAlignedExample extends React.Component {
+            constructor() {
+                super();
+                this.state = {
+                    selectedValue: null,
+                }; // Styleguidist doesn't support arrow functions in class field properties
+
+                this.handleChange = this.handleChange.bind(this);
+            }
+
+            handleChange(selected) {
+                console.log(`${selected} was selected!`);
+                this.setState({
+                    selectedValue: selected,
+                });
+            }
+
+            render() {
+                return (
+                    <SingleSelect
+                        alignment="right"
+                        light={true}
+                        onChange={this.handleChange}
+                        placeholder="Choose a drink"
+                        selectedValue={this.state.selectedValue}
+                    >
+                        <OptionItem
+                            label="Regular milk tea with boba"
+                            value="regular"
+                        />
+                        <OptionItem
+                            label="Wintermelon milk tea with boba"
+                            value="wintermelon"
+                        />
+                        <OptionItem
+                            label="Taro milk tea, half sugar"
+                            value="taro"
+                        />
+                    </SingleSelect>
+                );
+            }
+        }
+
+        const example = (
+            <View style={styles.row}>
+                <View style={styles.darkBackgroundWrapper}>
+                    <LightRightAlignedExample />
+                </View>
+            </View>
+        );
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 12", () => {
+        const styles = StyleSheet.create({
+            row: {
+                flexDirection: "row",
+            },
+        });
+        const example = (
+            <View style={styles.row}>
+                <SingleSelect placeholder="empty" />
+            </View>
+        );
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 13", () => {
+        const example = (
+            <View>
+                <LabelLarge
+                    tag="label"
+                    id="label-for-single-select"
+                    htmlFor="unique-single-select"
+                >
+                    Associated label element
+                </LabelLarge>
+                <SingleSelect
+                    aria-labelledby="label-for-single-select"
+                    id="unique-single-select"
+                    placeholder="Accessible SingleSelect"
+                    selectedValue="one"
+                >
+                    <OptionItem
+                        label="First element"
+                        aria-label="First element, selected"
+                        value="one"
+                    />
+                    <OptionItem
+                        label="Second element"
+                        aria-label="Second element, unselelected"
+                        value="two"
+                    />
+                </SingleSelect>
+            </View>
+        );
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 14", () => {
+        const styles = StyleSheet.create({
+            row: {
+                flexDirection: "row",
+            },
+        });
+
+        class ControlledSingleSelectExample extends React.Component {
+            constructor() {
+                super();
+                this.state = {
+                    opened: false,
+                    selectedValue: null,
+                };
+                this.handleChange = this.handleChange.bind(this);
+                this.handleToggleMenu = this.handleToggleMenu.bind(this);
+            }
+
+            handleChange(selected) {
+                this.setState({
+                    selectedValue: selected,
+                });
+            }
+
+            handleToggleMenu(opened) {
+                this.setState({
+                    opened,
+                });
+            }
+
+            render() {
+                return (
+                    <View style={styles.row}>
+                        <SingleSelect
+                            opened={this.state.opened}
+                            onToggle={this.handleToggleMenu}
+                            onChange={this.handleChange}
+                            selectedValue={this.state.selectedValue}
+                            placeholder="Choose"
+                        >
+                            <OptionItem label="item 1" value="1" />
+                            <OptionItem label="item 2" value="2" />
+                            <OptionItem label="item 3" value="3" />
+                        </SingleSelect>
+                        <Strut size={Spacing.medium_16} />
+                        <Button onClick={() => this.handleToggleMenu(true)}>
+                            Open SingleSelect programatically
+                        </Button>
+                    </View>
+                );
+            }
+        }
+
+        const example = <ControlledSingleSelectExample />;
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 15", () => {
+        const styles = StyleSheet.create({
+            focused: {
+                color: Color.purple,
+            },
+            hovered: {
+                textDecoration: "underline",
+                color: Color.purple,
+                cursor: "pointer",
+            },
+            pressed: {
+                color: Color.blue,
+            },
+        });
+
+        class SingleSelectWithCustomOpener extends React.Component {
+            constructor() {
+                super();
+                this.state = {
+                    opened: false,
+                    selectedValue: null,
+                };
+                this.handleChange = this.handleChange.bind(this);
+                this.handleToggleMenu = this.handleToggleMenu.bind(this);
+            }
+
+            handleChange(selected) {
+                this.setState({
+                    selectedValue: selected,
+                });
+            }
+
+            handleToggleMenu(opened) {
+                this.setState({
+                    opened,
+                });
+            }
+
+            render() {
+                return (
+                    <SingleSelect
+                        placeholder="Choose a juice"
+                        opened={this.state.opened}
+                        onChange={this.handleChange}
+                        onToggle={this.handleToggleMenu}
+                        selectedValue={this.state.selectedValue}
+                        opener={({focused, hovered, pressed, text}) => (
+                            <HeadingLarge
+                                onClick={() => {
+                                    console.log("custom click!!!!!");
+                                }}
+                                testId="single-select-custom-opener"
+                                style={[
+                                    focused && styles.focused,
+                                    hovered && styles.hovered,
+                                    pressed && styles.pressed,
+                                ]}
+                            >
+                                {text}
+                            </HeadingLarge>
+                        )}
+                    >
+                        <OptionItem label="Banana juice" value="banana" />
+                        <OptionItem
+                            label="Guava juice"
+                            value="guava"
+                            disabled
+                        />
+                        <OptionItem label="White grape juice" value="grape" />
+                    </SingleSelect>
+                );
+            }
+        }
+
+        const example = <SingleSelectWithCustomOpener />;
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 16", () => {
+        const styles = StyleSheet.create({
+            row: {
+                flexDirection: "row",
+            },
+            fullBleed: {
+                width: "100%",
+            },
+        });
+        const fruits = ["banana", "strawberry", "pear", "orange"];
+        const optionItems = new Array(1000)
+            .fill(null)
+            .map((_, i) => (
+                <OptionItem
+                    key={i}
+                    value={(i + 1).toString()}
+                    label={`Fruit # ${i + 1} ${fruits[i % fruits.length]}`}
+                />
+            ));
+
+        class ExampleWithFilter extends React.Component {
+            constructor() {
+                super();
+                this.state = {
+                    opened: true,
+                    selectedValue: null,
+                };
+                this.handleChange = this.handleChange.bind(this);
+                this.handleToggleMenu = this.handleToggleMenu.bind(this);
+            }
+
+            handleChange(selected) {
+                this.setState({
+                    selectedValue: selected,
+                });
+            }
+
+            handleToggleMenu(opened) {
+                this.setState({
+                    opened,
+                });
+            }
+
+            render() {
+                return (
+                    <SingleSelect
+                        opened={this.state.opened}
+                        onToggle={this.handleToggleMenu}
+                        onChange={this.handleChange}
+                        isFilterable={true}
+                        placeholder="Select a fruit"
+                        selectedValue={this.state.selectedValue}
+                        dropdownStyle={styles.fullBleed}
+                        style={styles.fullBleed}
+                    >
+                        {optionItems}
+                    </SingleSelect>
+                );
+            }
+        }
+
+        const example = (
+            <View style={styles.row}>
+                <ExampleWithFilter />
+            </View>
+        );
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 17", () => {
+        const styles = StyleSheet.create({
+            row: {
+                flexDirection: "row",
+            },
+            setWidth: {
+                minWidth: 170,
+            },
+        });
+
+        class ExampleNoneSelected extends React.Component {
+            constructor() {
+                super();
+                this.state = {
+                    selectedValues: [],
+                }; // Styleguidist doesn't support arrow functions in class field properties
+
+                this.handleChange = this.handleChange.bind(this);
+            }
+
+            handleChange(update) {
+                console.log("changes happened!");
+                this.setState({
+                    selectedValues: update,
+                });
+            }
+
+            render() {
+                return (
+                    <MultiSelect
+                        onChange={this.handleChange}
+                        selectedValues={this.state.selectedValues}
+                        style={styles.setWidth}
+                        testId="palette"
+                        labels={{
+                            noneSelected: "Color palette",
+                            someSelected: (numSelectedValues) =>
+                                `${numSelectedValues} colors`,
+                        }}
+                    >
+                        <OptionItem
+                            label="Red"
+                            value="1"
+                            testId="red"
+                            onClick={() => console.log("Roses are red")}
+                        />
+                        <OptionItem
+                            label="Yellow"
+                            value="2"
+                            disabled
+                            testId="yellow"
+                        />
+                        <OptionItem label="Green" value="3" testId="green" />
+                        <OptionItem label="Blue" value="4" testId="blue" />
+                        {false && (
+                            <OptionItem label="Pink" value="5" testId="pink" />
+                        )}
+                    </MultiSelect>
+                );
+            }
+        }
+
+        const example = (
+            <View style={styles.row}>
+                <ExampleNoneSelected />
+            </View>
+        );
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 18", () => {
+        const styles = StyleSheet.create({
+            row: {
+                flexDirection: "row",
+            },
+            setWidth: {
+                minWidth: 170,
+                width: "100%",
+            },
+            customDropdown: {
+                maxHeight: 200,
+            },
+        });
+
+        class ExampleScrolling extends React.Component {
+            constructor() {
+                super();
+                this.state = {
+                    selectedValues: [],
+                }; // Styleguidist doesn't support arrow functions in class field properties
+
+                this.handleChange = this.handleChange.bind(this);
+            }
+
+            handleChange(update) {
+                console.log("changes happened!");
+                this.setState({
+                    selectedValues: update,
+                });
+            }
+
+            render() {
+                return (
+                    <MultiSelect
+                        onChange={this.handleChange}
+                        selectedValues={this.state.selectedValues}
+                        style={styles.setWidth}
+                        dropdownStyle={styles.customDropdown}
+                        labels={{
+                            noneSelected: "Solar system",
+                            someSelected: (numSelectedValues) =>
+                                `${numSelectedValues} planets`,
+                        }}
+                    >
+                        <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>
+                );
+            }
+        }
+
+        const example = (
+            <View style={styles.row}>
+                <ExampleScrolling />
+            </View>
+        );
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 19", () => {
+        const styles = StyleSheet.create({
+            row: {
+                flexDirection: "row",
+            },
+        });
+
+        class ExampleWithShortcuts extends React.Component {
+            constructor() {
+                super();
+                this.state = {
+                    selectedValues: ["wonderblocks 4ever"],
+                }; // Styleguidist doesn't support arrow functions in class field properties
+
+                this.handleChange = this.handleChange.bind(this);
+            }
+
+            handleChange(update) {
+                console.log("changes happened!");
+                this.setState({
+                    selectedValues: update,
+                });
+            }
+
+            render() {
+                return (
+                    <MultiSelect
+                        shortcuts={true}
+                        onChange={this.handleChange}
+                        selectedValues={this.state.selectedValues}
+                        labels={{
+                            selectNoneLabel: "Select none",
+                            selectAllLabel: (numOptions) =>
+                                `Select all interns (${numOptions})`,
+                            someSelected: (numSelectedValues) =>
+                                `${numSelectedValues} interns`,
+                            allSelected: "All interns selected",
+                        }}
+                    >
+                        <OptionItem label="Anesu" value="very mobile" />
+                        <OptionItem label="Ioana" value="lives in roma" />
+                        <OptionItem label="Jennie" value="master of dominion" />
+                        <OptionItem
+                            label="Kelsey"
+                            value="pipelines and kotlin"
+                        />
+                        <OptionItem label="Mary" value="flow-distress" />
+                        <OptionItem
+                            label="Nisha"
+                            value="on the growth boat boat"
+                        />
+                        <OptionItem label="Sophie" value="wonderblocks 4ever" />
+                        <OptionItem
+                            label="Stephanie"
+                            value="ramen izakaya fan"
+                        />
+                        <OptionItem label="Yeva" value="boba enthusiast" />
+                    </MultiSelect>
+                );
+            }
+        }
+
+        const example = (
+            <View style={styles.row}>
+                <ExampleWithShortcuts />
+            </View>
+        );
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 20", () => {
+        const styles = StyleSheet.create({
+            wrapper: {
+                alignItems: "center",
+            },
+            scrolledWrapper: {
+                height: 200,
+                overflow: "auto",
+                border: "1px solid grey",
+                borderRadius: 4,
+                margin: 10,
+                padding: 20,
+            },
+            setWidth: {
+                minWidth: 170,
+            },
+        });
+
+        class SimpleMultiSelect extends React.Component {
+            constructor() {
+                super();
+                this.state = {
+                    selectedValues: [],
+                }; // Styleguidist doesn't support arrow functions in class field properties
+
+                this.handleChange = this.handleChange.bind(this);
+            }
+
+            handleChange(update) {
+                console.log("changes happened!");
+                this.setState({
+                    selectedValues: update,
+                });
+            }
+
+            render() {
+                return (
+                    <MultiSelect
+                        onChange={this.handleChange}
+                        selectedValues={this.state.selectedValues}
+                        labels={{
+                            someSelected: (numSelectedValues) =>
+                                `${numSelectedValues} great houses`,
+                        }}
+                        style={styles.setWidth}
+                    >
+                        <OptionItem label="Stark" value="1" />
+                        <OptionItem label="Arryn" value="2" />
+                        <OptionItem label="Baratheon" value="3" />
+                        <OptionItem label="Tully" value="4" />
+                        <OptionItem label="Greyjoy" value="5" />
+                        <OptionItem label="Lannister" value="6" />
+                        <OptionItem label="Tyrell" value="7" />
+                        <OptionItem label="Martell" value="8" />
+                        <OptionItem label="Targaryen" value="9" />
+                    </MultiSelect>
+                );
+            }
+        }
+
+        const modalContent = (
+            <View
+                style={{
+                    height: "200vh",
+                }}
+            >
+                <View style={styles.scrolledWrapper}>
+                    <View
+                        style={{
+                            minHeight: "100vh",
+                        }}
+                    >
+                        <SimpleMultiSelect />
+                    </View>
+                </View>
+            </View>
+        );
+        const modal = (
+            <OnePaneDialog
+                title="Westerosi modal"
+                footer=""
+                content={modalContent}
+            />
+        );
+        const example = (
+            <View style={styles.wrapper}>
+                <ModalLauncher modal={modal}>
+                    {({openModal}) => (
+                        <Button onClick={openModal}>Open modal!</Button>
+                    )}
+                </ModalLauncher>
+            </View>
+        );
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 21", () => {
+        const styles = StyleSheet.create({
+            row: {
+                flexDirection: "row",
+            },
+        });
+        const example = (
+            <View style={styles.row}>
+                <MultiSelect
+                    labels={{
+                        noneSelected: "empty",
+                    }}
+                />
+            </View>
+        );
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 22", () => {
+        const example = (
+            <View>
+                <LabelLarge
+                    tag="label"
+                    id="label-for-multi-select"
+                    htmlFor="unique-multi-select"
+                >
+                    Associated label element
+                </LabelLarge>
+                <MultiSelect
+                    aria-labelledby="label-for-multi-select"
+                    id="unique-multi-select"
+                    labels={{
+                        noneSelected: "Accessible MultiSelect",
+                        someSelected: (numSelectedValues) =>
+                            `${numSelectedValues} planets`,
+                    }}
+                    selectedValues={["one"]}
+                >
+                    <OptionItem
+                        label="First element"
+                        aria-label="First element, selected"
+                        value="one"
+                    />
+                    <OptionItem
+                        label="Second element"
+                        aria-label="Second element, unselelected"
+                        value="two"
+                    />
+                </MultiSelect>
+            </View>
+        );
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 23", () => {
+        const styles = StyleSheet.create({
+            row: {
+                flexDirection: "row",
+            },
+        });
+
+        class ImplicitAllEnabledExample extends React.Component {
+            constructor() {
+                super();
+                this.state = {
+                    selectedValues: [],
+                }; // Styleguidist doesn't support arrow functions in class field properties
+
+                this.handleChange = this.handleChange.bind(this);
+            }
+
+            handleChange(update) {
+                console.log("changes happened!");
+                this.setState({
+                    selectedValues: update,
+                });
+            }
+
+            render() {
+                return (
+                    <MultiSelect
+                        implicitAllEnabled={true}
+                        labels={{
+                            someSelected: (numSelectedValues) =>
+                                `${numSelectedValues} fruits`,
+                            allSelected: "All fruits selected",
+                        }}
+                        onChange={this.handleChange}
+                        selectedValues={this.state.selectedValues}
+                    >
+                        <OptionItem label="Nectarine" value="nectarine" />
+                        <OptionItem label="Plum" value="plum" />
+                        <OptionItem label="Cantaloupe" value="cantaloupe" />
+                        <OptionItem label="Pineapples" value="pineapples" />
+                    </MultiSelect>
+                );
+            }
+        }
+
+        const example = (
+            <View style={styles.row}>
+                <ImplicitAllEnabledExample />
+            </View>
+        );
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 24", () => {
+        const styles = StyleSheet.create({
+            row: {
+                flexDirection: "row",
+            },
+        });
+
+        class ControlledMultiSelectExample extends React.Component {
+            constructor() {
+                super();
+                this.state = {
+                    opened: false,
+                    selectedValues: [],
+                };
+                this.handleChange = this.handleChange.bind(this);
+                this.handleToggleMenu = this.handleToggleMenu.bind(this);
+            }
+
+            handleChange(update) {
+                this.setState({
+                    selectedValues: update,
+                });
+            }
+
+            handleToggleMenu(opened) {
+                this.setState({
+                    opened,
+                });
+            }
+
+            render() {
+                return (
+                    <View style={styles.row}>
+                        <MultiSelect
+                            labels={{
+                                noneSelected: "Select one",
+                                someSelected: (numSelectedValues) =>
+                                    `${numSelectedValues} fruits`,
+                                allSelected: "All fruits selected",
+                            }}
+                            onChange={this.handleChange}
+                            opened={this.state.opened}
+                            onToggle={this.handleToggleMenu}
+                            selectedValues={this.state.selectedValues}
+                        >
+                            <OptionItem label="Nectarine" value="nectarine" />
+                            <OptionItem label="Plum" value="plum" />
+                            <OptionItem label="Cantaloupe" value="cantaloupe" />
+                            <OptionItem label="Pineapples" value="pineapples" />
+                        </MultiSelect>
+                        <Strut size={Spacing.medium_16} />
+                        <Button onClick={() => this.handleToggleMenu(true)}>
+                            Open SingleSelect programatically
+                        </Button>
+                    </View>
+                );
+            }
+        }
+
+        const example = <ControlledMultiSelectExample />;
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 25", () => {
+        const styles = StyleSheet.create({
+            row: {
+                flexDirection: "row",
+            },
+        });
+        const optionItems = new Array(1000)
+            .fill(null)
+            .map((_, i) => (
+                <OptionItem
+                    key={i}
+                    value={(i + 1).toString()}
+                    label={`School ${
+                        i + 1
+                    } in Wizarding World Some more really long labels?`}
+                />
+            ));
+
+        class ExampleWithShortcuts extends React.Component {
+            constructor() {
+                super();
+                this.state = {
+                    selectedValues: [],
+                }; // Styleguidist doesn't support arrow functions in class field properties
+
+                this.handleChange = this.handleChange.bind(this);
+            }
+
+            handleChange(selectedValues) {
+                this.setState({
+                    selectedValues,
+                });
+            }
+
+            render() {
+                return (
+                    <MultiSelect
+                        shortcuts={true}
+                        isFilterable={true}
+                        onChange={this.handleChange}
+                        selectedValues={this.state.selectedValues}
+                        labels={{
+                            noneSelected: "Select a school",
+                            someSelected: (numSelectedValues) =>
+                                `${numSelectedValues} schools`,
+                            allSelected: "All schools selected",
+                            selectAllLabel: (numOptions) =>
+                                `Select all (${numOptions})`,
+                        }}
+                    >
+                        {optionItems}
+                    </MultiSelect>
+                );
+            }
+        }
+
+        const example = (
+            <View style={styles.row}>
+                <ExampleWithShortcuts />
+            </View>
+        );
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 26", () => {
+        const styles = StyleSheet.create({
+            focused: {
+                color: Color.purple,
+            },
+            hovered: {
+                textDecoration: "underline",
+                color: Color.purple,
+                cursor: "pointer",
+            },
+            pressed: {
+                color: Color.blue,
+            },
+        });
+
+        class CustomOpenerExample extends React.Component {
+            constructor() {
+                super();
+                this.state = {
+                    opened: false,
+                    selectedValues: [],
+                };
+                this.handleChange = this.handleChange.bind(this);
+                this.handleToggleMenu = this.handleToggleMenu.bind(this);
+            }
+
+            handleChange(update) {
+                this.setState({
+                    selectedValues: update,
+                });
+            }
+
+            handleToggleMenu(opened) {
+                this.setState({
+                    opened,
+                });
+            }
+
+            render() {
+                return (
+                    <MultiSelect
+                        labels={{
+                            noneSelected: "Choose a fruit",
+                            someSelected: (numSelectedValues) =>
+                                `${numSelectedValues} fruits`,
+                            allSelected: "All fruits selected",
+                        }}
+                        onChange={this.handleChange}
+                        opened={this.state.opened}
+                        onToggle={this.handleToggleMenu}
+                        selectedValues={this.state.selectedValues}
+                        testId="multi-select-custom-opener"
+                        opener={({focused, hovered, pressed, text}) => (
+                            <HeadingLarge
+                                onClick={() => {
+                                    console.log("custom click!!!!!");
+                                }}
+                                testId="multi-select-custom-opener"
+                                style={[
+                                    focused && styles.focused,
+                                    hovered && styles.hovered,
+                                    pressed && styles.pressed,
+                                ]}
+                            >
+                                {text}
+                            </HeadingLarge>
+                        )}
+                    >
+                        <OptionItem label="Nectarine" value="nectarine" />
+                        <OptionItem label="Plum" value="plum" />
+                        <OptionItem label="Cantaloupe" value="cantaloupe" />
+                        <OptionItem label="Pineapples" value="pineapples" />
+                    </MultiSelect>
+                );
+            }
+        }
+
+        const example = <CustomOpenerExample />;
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 27", () => {
+        const optionItems = new Array(10)
+            .fill(null)
+            .map((_, i) => (
+                <OptionItem
+                    key={i}
+                    value={(i + 1).toString()}
+                    label={`School ${i + 1} in Wizarding World`}
+                />
+            ));
+
+        class ExampleWithTranslatedValues extends React.Component {
+            constructor() {
+                super();
+                this.state = {
+                    selectedValues: [],
+                }; // Styleguidist doesn't support arrow functions in class field properties
+
+                this.handleChange = this.handleChange.bind(this);
+            }
+
+            handleChange(selectedValues) {
+                this.setState({
+                    selectedValues,
+                });
+            }
+
+            render() {
+                return (
+                    <MultiSelect
+                        shortcuts={true}
+                        isFilterable={true}
+                        onChange={this.handleChange}
+                        selectedValues={this.state.selectedValues}
+                        labels={{
+                            clearSearch: "Limpiar busqueda",
+                            filter: "Filtrar",
+                            noResults: "Sin resultados",
+                            selectAllLabel: (numOptions) =>
+                                `Seleccionar todas (${numOptions})`,
+                            selectNoneLabel: "No seleccionar ninguno",
+                            noneSelected: "0 escuelas seleccionadas",
+                            allSelected: "Todas las escuelas",
+                            someSelected: (numSelectedValues) =>
+                                `${numSelectedValues} escuelas seleccionadas`,
+                        }}
+                    >
+                        {optionItems}
+                    </MultiSelect>
+                );
+            }
+        }
+
+        const example = <ExampleWithTranslatedValues />;
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});