@khanacademy/wonder-blocks-dropdown 2.6.8 → 2.7.0

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

@@ -2,17 +2,11 @@
 // A TextField with a search icon on its left side and X icon on its right side
 
 import * as React from "react";
-import {StyleSheet, css} from "aphrodite";
-
-import {styles as typographyStyles} from "@khanacademy/wonder-blocks-typography";
-import {View} from "@khanacademy/wonder-blocks-core";
-import IconButton from "@khanacademy/wonder-blocks-icon-button";
-import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
-import Color from "@khanacademy/wonder-blocks-color";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
+
+import SearchField from "@khanacademy/wonder-blocks-search-field";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
-import {defaultLabels, DROPDOWN_ITEM_HEIGHT} from "../util/constants.js";
+import {defaultLabels} from "../util/constants.js";
 
 type Labels = {|
     clearSearch: string,
@@ -63,16 +57,7 @@ type DefaultProps = {|
     labels: $PropertyType<Props, "labels">,
 |};
 
-type State = {|
-    focused: boolean,
-
-    /**
-     * The object containing the custom labels used inside this component.
-     */
-    labels: Labels,
-|};
-
-export default class SearchTextInput extends React.Component<Props, State> {
+export default class SearchTextInput extends React.Component<Props> {
     static isClassOf(instance: React.Element<any>): boolean {
         return (
             instance && instance.type && instance.type.__IS_SEARCH_TEXT_INPUT__
@@ -86,142 +71,23 @@ export default class SearchTextInput extends React.Component<Props, State> {
         },
     };
 
-    state: State = {
-        focused: false,
-        labels: {
-            clearSearch: defaultLabels.clearSearch,
-            filter: defaultLabels.filter,
-            ...this.props.labels,
-        },
-    };
-
-    componentDidUpdate(prevProps: Props) {
-        if (this.props.labels !== prevProps.labels) {
-            // eslint-disable-next-line react/no-did-update-set-state
-            this.setState({
-                labels: {...this.state.labels, ...this.props.labels},
-            });
-        }
-    }
-
     static __IS_SEARCH_TEXT_INPUT__: boolean = true;
 
-    handleChange: (e: SyntheticInputEvent<>) => void = (e) => {
-        e.preventDefault();
-        this.props.onChange(e.target.value);
-    };
-
-    handleDismiss: () => void = () => {
-        const {onClick, onChange} = this.props;
-        // Empty the search text and focus the SearchTextInput
-        onChange("");
-        if (onClick) {
-            onClick();
-        }
-    };
-
-    handleBlur: (e: SyntheticInputEvent<>) => void = (e) => {
-        this.setState({focused: false});
-    };
-
-    handleFocus: (e: SyntheticInputEvent<>) => void = (e) => {
-        this.setState({focused: true});
-    };
-
-    maybeRenderDismissIconButton(): React.Node {
-        const {searchText} = this.props;
-        const {clearSearch} = this.state.labels;
-
-        if (searchText.length > 0) {
-            return (
-                <IconButton
-                    icon={icons.dismiss}
-                    kind="tertiary"
-                    onClick={this.handleDismiss}
-                    style={styles.dismissIcon}
-                    aria-label={clearSearch}
-                />
-            );
-        }
-        return null;
-    }
-
     render(): React.Node {
-        const {onClick, itemRef, searchText, style, testId} = this.props;
-        const {filter} = this.state.labels;
+        const {labels, onChange, onClick, itemRef, searchText, style, testId} =
+            this.props;
 
         return (
-            <View
+            <SearchField
+                clearAriaLabel={labels.clearSearch}
+                onChange={onChange}
                 onClick={onClick}
-                style={[
-                    styles.inputContainer,
-                    this.state.focused && styles.focused,
-                    style,
-                ]}
-            >
-                <Icon
-                    icon={icons.search}
-                    size="medium"
-                    color={Color.offBlack64}
-                    style={styles.searchIcon}
-                    aria-hidden="true"
-                />
-                <input
-                    type="text"
-                    onChange={this.handleChange}
-                    onFocus={this.handleFocus}
-                    onBlur={this.handleBlur}
-                    ref={itemRef}
-                    placeholder={filter}
-                    value={searchText}
-                    className={css(
-                        styles.inputStyleReset,
-                        typographyStyles.LabelMedium,
-                    )}
-                    data-test-id={testId}
-                />
-                {this.maybeRenderDismissIconButton()}
-            </View>
+                placeholder={labels.filter}
+                ref={itemRef}
+                style={style}
+                testId={testId}
+                value={searchText}
+            />
         );
     }
 }
-
-const styles = StyleSheet.create({
-    inputContainer: {
-        flexDirection: "row",
-        border: `1px solid ${Color.offBlack16}`,
-        borderRadius: Spacing.xxxSmall_4,
-        alignItems: "center",
-        // The height of the text input is 40 in design spec and we need to
-        // specify the height as well as minHeight to make sure the search text
-        // input takes enough height to render. (otherwise, it will get
-        // squashed)
-        height: DROPDOWN_ITEM_HEIGHT,
-        minHeight: DROPDOWN_ITEM_HEIGHT,
-    },
-    focused: {
-        border: `1px solid ${Color.blue}`,
-    },
-    searchIcon: {
-        marginLeft: Spacing.xSmall_8,
-        marginRight: Spacing.xSmall_8,
-    },
-    dismissIcon: {
-        margin: 0,
-        ":hover": {
-            border: "none",
-        },
-    },
-    inputStyleReset: {
-        display: "flex",
-        flex: 1,
-        background: "inherit",
-        border: "none",
-        outline: "none",
-        "::placeholder": {
-            color: Color.offBlack64,
-        },
-        width: "100%",
-        color: "inherit",
-    },
-});

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

@@ -52,6 +52,7 @@ export const DefaultSingleSelectOpened: StoryComponentType = (args) => {
             <OptionItem label="Apple" value="apple" />
             <OptionItem label="Grape" value="grape" />
             <OptionItem label="Lemon" value="lemon" />
+            <OptionItem label="Mango" value="mango" />
         </SingleSelectTemplate>
     );
 };

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

@@ -0,0 +1,100 @@
+// @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";
+
+const optionItems = [
+    {
+        component: (
+            <OptionItem testId="item-0" label="item 0" value="0" key="0" />
+        ),
+        focusable: true,
+        populatedProps: {},
+    },
+    {
+        component: (
+            <OptionItem testId="item-1" label="item 1" value="1" key="1" />
+        ),
+        focusable: true,
+        populatedProps: {},
+    },
+    {
+        component: (
+            <OptionItem testId="item-2" label="item 2" value="2" key="2" />
+        ),
+        focusable: true,
+        populatedProps: {},
+    },
+];
+
+const searchFieldItem = {
+    component: (
+        <SearchTextInput
+            testId="item-0"
+            key="search-text-input"
+            onChange={jest.fn()}
+            searchText={""}
+        />
+    ),
+    focusable: true,
+    populatedProps: {},
+};
+
+const separatorItem = {
+    component: <SeparatorItem />,
+    focusable: false,
+    populatedProps: {},
+};
+
+describe("getDropdownMenuHeight", () => {
+    it("should get a valid height for a dropdown with 3 items", () => {
+        // Arrange
+        const items = optionItems;
+
+        // Act
+        const height = getDropdownMenuHeight(items);
+
+        // Assert
+        // 3 option items
+        expect(height).toBe(120);
+    });
+
+    it("should include an initial min height", () => {
+        // Arrange
+        const items = optionItems;
+
+        // Act
+        const height = getDropdownMenuHeight(items, 10);
+
+        // Assert
+        // 3 option items + initial height (e.g. padding)
+        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];
+
+        // Act
+        const height = getDropdownMenuHeight(items);
+
+        // Assert
+        // separator item + 3 option items
+        expect(height).toBe(129);
+    });
+});

package/src/util/constants.js

@@ -19,7 +19,6 @@ export const selectDropdownStyle = {
 // Note that these can be overridden by the provided style if needed.
 export const filterableDropdownStyle = {
     minHeight: 100,
-    maxHeight: 384,
 };
 
 export const searchInputStyle = {
@@ -30,6 +29,13 @@ export const searchInputStyle = {
 // The default item height
 export const DROPDOWN_ITEM_HEIGHT = 40;
 
+/**
+ * Maximum visible items inside the dropdown list. Based on the defined height
+ * that we're using, this is the maximum number of items that can fit into the
+ * visible portion of the dropdown's listbox.
+ */
+export const MAX_VISIBLE_ITEMS = 9;
+
 export const SEPARATOR_ITEM_HEIGHT = 9;
 
 export const SEARCH_ITEM_HEIGHT: number =

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

@@ -0,0 +1,65 @@
+// @flow
+import {StyleSheet} from "aphrodite";
+
+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";
+
+/**
+ * The list height that is automatically calculated depending on the
+ * component's type of each item (e.g. Separator, Option, Search, etc)
+ *
+ * @param {Array<DropdownItem>} items - The list of items to calculate the height
+ * @param {number} initialHeight - The initial height of the list
+ *
+ * @returns {number} The list height
+ */
+export function getDropdownMenuHeight(
+    items: Array<DropdownItem>,
+    initialHeight: number = 0,
+): number {
+    // calculate using the first 10 items on the array as we want to display
+    // this number of elements in the visible area
+    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;
+        }
+    }, initialHeight);
+}
+
+/**
+ * Wraps the dynamic styles in an Aphrodite style sheet so we can properly apply
+ * the styles to a merged stylesheet (instead of inlining the styles).
+ *
+ * @param {StyleType} customStyles - The custom styles to apply to the dropdown
+ * menu.
+ * @returns The Aphrodite stylesheet for the dropdown menu.
+ */
+export function generateDropdownMenuStyles(
+    minWidth: number,
+    maxHeight: number,
+): StyleType {
+    const styles = StyleSheet.create({
+        dropdownMenu: {
+            minWidth,
+            maxHeight,
+        },
+    });
+
+    return styles.dropdownMenu;
+}