@khanacademy/wonder-blocks-dropdown 2.3.19

package/src/components/select-opener.js

@@ -0,0 +1,297 @@
+// @flow
+
+import * as React from "react";
+import {StyleSheet} from "aphrodite";
+import * as PropTypes from "prop-types";
+
+import type {AriaProps} from "@khanacademy/wonder-blocks-core";
+
+import Color, {mix, fade} from "@khanacademy/wonder-blocks-color";
+import {addStyle} from "@khanacademy/wonder-blocks-core";
+import {getClickableBehavior} from "@khanacademy/wonder-blocks-clickable";
+import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
+import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {LabelMedium} from "@khanacademy/wonder-blocks-typography";
+import {DROPDOWN_ITEM_HEIGHT} from "../util/constants.js";
+
+const StyledButton = addStyle("button");
+
+const {
+    blue,
+    white,
+    white50,
+    offBlack,
+    offBlack16,
+    offBlack32,
+    offBlack64,
+} = Color;
+
+type SelectOpenerProps = {|
+    ...AriaProps,
+
+    /**
+     * Display text in the SelectOpener.
+     */
+    children: string,
+
+    /**
+     * Whether the SelectOpener is disabled. If disabled, disallows interaction.
+     * Default false.
+     */
+    disabled: boolean,
+
+    /**
+     * Auto-populated by parent. Used for accessibility purposes, where the label
+     * id should match the field id.
+     */
+    id?: string,
+
+    //TODO: error state
+    // error: boolean,
+
+    /**
+     * Whether the displayed text is a placeholder, determined by the creator
+     * of this component. A placeholder has more faded text colors and styles.
+     */
+    isPlaceholder: boolean,
+
+    /**
+     * Whether to display the "light" version of this component instead, for
+     * use when the item is used on a dark background.
+     */
+    light: boolean,
+
+    /**
+     * Test ID used for e2e testing.
+     */
+    testId?: string,
+
+    /**
+     * Callback for when the SelectOpener is pressed.
+     */
+    onOpenChanged: (open: boolean) => mixed,
+
+    /**
+     * Whether the dropdown is open.
+     */
+    open: boolean,
+|};
+
+type ContextTypes = {|
+    router: $FlowFixMe,
+|};
+
+type DefaultProps = {|
+    disabled: $PropertyType<SelectOpenerProps, "disabled">,
+    light: $PropertyType<SelectOpenerProps, "light">,
+    isPlaceholder: $PropertyType<SelectOpenerProps, "isPlaceholder">,
+|};
+
+/**
+ * An opener that opens select boxes.
+ */
+export default class SelectOpener extends React.Component<SelectOpenerProps> {
+    static contextTypes: ContextTypes = {router: PropTypes.any};
+    static defaultProps: DefaultProps = {
+        disabled: false,
+        light: false,
+        isPlaceholder: false,
+    };
+
+    handleClick: (e: SyntheticEvent<>) => void = (e) => {
+        const {open} = this.props;
+        this.props.onOpenChanged(!open);
+    };
+
+    render(): React.Node {
+        const {
+            children,
+            disabled,
+            id,
+            isPlaceholder,
+            light,
+            open,
+            testId,
+            // eslint-disable-next-line no-unused-vars
+            onOpenChanged,
+            ...sharedProps
+        } = this.props;
+
+        const ClickableBehavior = getClickableBehavior(this.context.router);
+
+        return (
+            <ClickableBehavior disabled={disabled} onClick={this.handleClick}>
+                {(state, childrenProps) => {
+                    const stateStyles = _generateStyles(light, isPlaceholder);
+                    const {hovered, focused, pressed} = state;
+
+                    // The icon colors are kind of fickle. This is just logic
+                    // based on the zeplin design.
+                    const iconColor = light
+                        ? disabled || pressed
+                            ? "currentColor"
+                            : white
+                        : disabled
+                        ? offBlack32
+                        : offBlack64;
+
+                    const style = [
+                        styles.shared,
+                        stateStyles.default,
+                        disabled && stateStyles.disabled,
+                        !disabled &&
+                            (pressed
+                                ? stateStyles.active
+                                : (hovered || focused) && stateStyles.focus),
+                    ];
+
+                    return (
+                        <StyledButton
+                            {...sharedProps}
+                            aria-expanded={open ? "true" : "false"}
+                            aria-haspopup="listbox"
+                            data-test-id={testId}
+                            disabled={disabled}
+                            id={id}
+                            style={style}
+                            type="button"
+                            {...childrenProps}
+                        >
+                            <LabelMedium style={styles.text}>
+                                {children}
+                            </LabelMedium>
+                            <Icon
+                                icon={icons.caretDown}
+                                color={iconColor}
+                                size="small"
+                                style={styles.caret}
+                                aria-hidden="true"
+                            />
+                        </StyledButton>
+                    );
+                }}
+            </ClickableBehavior>
+        );
+    }
+}
+
+const buttonRadius = 4;
+
+const styles = StyleSheet.create({
+    // TODO: Dedupe with Button styles
+    shared: {
+        position: "relative",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        color: offBlack,
+        height: DROPDOWN_ITEM_HEIGHT,
+        // This asymmetry arises from the Icon on the right side, which has
+        // extra padding built in. To have the component look more balanced,
+        // we need to take off some paddingRight here.
+        paddingLeft: 16,
+        paddingRight: 12,
+        borderWidth: 0,
+        borderRadius: buttonRadius,
+        borderStyle: "solid",
+        outline: "none",
+        textDecoration: "none",
+        boxSizing: "border-box",
+        whiteSpace: "nowrap",
+        // This removes the 300ms click delay on mobile browsers by indicating that
+        // "double-tap to zoom" shouldn't be used on this element.
+        touchAction: "manipulation",
+    },
+
+    text: {
+        marginRight: Spacing.xSmall_8,
+        whiteSpace: "nowrap",
+        userSelect: "none",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+    },
+
+    caret: {
+        minWidth: 16,
+    },
+});
+
+// These values are default padding (16 and 12) minus 1, because
+// changing the borderWidth to 2 messes up the button width
+// and causes it to move a couple pixels. This fixes that.
+const adjustedPaddingLeft = 16 - 1;
+const adjustedPaddingRight = 12 - 1;
+
+const stateStyles = {};
+
+const _generateStyles = (light, placeholder) => {
+    // "hash" the parameters
+    const styleKey = `${String(light)}-${String(placeholder)}`;
+    if (stateStyles[styleKey]) {
+        return stateStyles[styleKey];
+    }
+
+    let newStyles = {};
+    if (light) {
+        newStyles = {
+            default: {
+                backgroundColor: "transparent",
+                color: placeholder ? white50 : white,
+                borderColor: white50,
+                borderWidth: 1,
+            },
+            focus: {
+                borderColor: white,
+                borderWidth: 2,
+                paddingLeft: adjustedPaddingLeft,
+                paddingRight: adjustedPaddingRight,
+            },
+            active: {
+                paddingLeft: adjustedPaddingLeft,
+                paddingRight: adjustedPaddingRight,
+                borderColor: mix(fade(blue, 0.32), white),
+                borderWidth: 2,
+                color: placeholder
+                    ? mix(fade(white, 0.32), blue)
+                    : mix(fade(blue, 0.32), white),
+                backgroundColor: mix(offBlack32, blue),
+            },
+            disabled: {
+                borderColor: mix(fade(white, 0.32), blue),
+                color: mix(fade(white, 0.32), blue),
+                cursor: "auto",
+            },
+        };
+    } else {
+        newStyles = {
+            default: {
+                backgroundColor: white,
+                borderColor: offBlack16,
+                borderWidth: 1,
+                color: placeholder ? offBlack64 : offBlack,
+            },
+            focus: {
+                borderColor: blue,
+                borderWidth: 2,
+                paddingLeft: adjustedPaddingLeft,
+                paddingRight: adjustedPaddingRight,
+            },
+            active: {
+                background: mix(fade(blue, 0.32), white),
+                borderColor: mix(offBlack32, blue),
+                borderWidth: 2,
+                paddingLeft: adjustedPaddingLeft,
+                paddingRight: adjustedPaddingRight,
+            },
+            disabled: {
+                backgroundColor: "transparent",
+                borderColor: offBlack16,
+                color: offBlack64,
+                cursor: "auto",
+            },
+        };
+    }
+
+    stateStyles[styleKey] = StyleSheet.create(newStyles);
+    return stateStyles[styleKey];
+};

package/src/components/separator-item.js

@@ -0,0 +1,50 @@
+// @flow
+// Separator item in a dropdown, used to denote a semantic break.
+// Actualized as a horizontal line with surrounding whitespace. -----
+
+import * as React from "react";
+import {StyleSheet} from "aphrodite";
+
+import Color from "@khanacademy/wonder-blocks-color";
+import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {View} from "@khanacademy/wonder-blocks-core";
+
+import type {StyleType} from "@khanacademy/wonder-blocks-core";
+
+/**
+ * A separator used in a dropdown menu.
+ */
+export default class SeparatorItem extends React.Component<{|
+    /**
+     * In case we use react-window, this needs to be added in order to inject
+     * styles to calculate the position
+     * @ignore
+     */
+    style?: StyleType,
+|}> {
+    static isClassOf(instance: React.Element<any>): boolean {
+        return instance && instance.type && instance.type.__IS_SEPARATOR_ITEM__;
+    }
+
+    static __IS_SEPARATOR_ITEM__: boolean = true;
+
+    render(): React.Node {
+        return (
+            // pass optional styles from react-window (if applies)
+            <View
+                style={[styles.separator, this.props.style]}
+                aria-hidden="true"
+            />
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    separator: {
+        boxShadow: `0 -1px ${Color.offBlack16}`,
+        height: 1,
+        minHeight: 1,
+        marginTop: Spacing.xxxSmall_4,
+        marginBottom: Spacing.xxxSmall_4,
+    },
+});

package/src/components/single-select.js

@@ -0,0 +1,418 @@
+// @flow
+
+import * as React from "react";
+import ReactDOM from "react-dom";
+
+import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
+
+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,
+
+    /**
+     * The items in this select.
+     */
+    children?: Array<?(React.Element<OptionItem> | false)>,
+
+    /**
+     * Callback for when the selection. Parameter is the value of the newly
+     * selected item.
+     */
+    onChange: (selectedValue: string) => mixed,
+
+    /**
+     * Can be used to override the state of the ActionMenu by parent elements
+     */
+    opened?: boolean,
+
+    /**
+     * In controlled mode, use this prop in case the parent needs to be notified
+     * when the menu opens/closes.
+     */
+    onToggle?: (opened: boolean) => mixed,
+
+    /**
+     * Unique identifier attached to the field control. If used, we need to
+     * guarantee that the ID is unique within everything rendered on a page.
+     * Used to match `<label>` with `<button>` elements for screenreaders.
+     */
+    id?: string,
+
+    /**
+     * Placeholder for the opening component when there are no items selected.
+     */
+    placeholder: string,
+
+    /**
+     * Value of the currently selected item.
+     */
+    selectedValue?: ?string,
+
+    /**
+     * Whether this dropdown should be left-aligned or right-aligned with the
+     * opener component. Defaults to left-aligned.
+     */
+    alignment: "left" | "right",
+
+    /**
+     * Whether this component is disabled. A disabled dropdown may not be opened
+     * and does not support interaction. Defaults to false.
+     */
+    disabled: boolean,
+
+    /**
+     * Whether to display the "light" version of this component instead, for
+     * use when the component is used on a dark background.
+     */
+    light: boolean,
+
+    /**
+     * Optional styling to add to the opener component wrapper.
+     */
+    style?: StyleType,
+
+    /**
+     * Adds CSS classes to the opener component wrapper.
+     */
+    className?: string,
+
+    /**
+     * Test ID used for e2e testing.
+     */
+    testId?: string,
+
+    /**
+     * Optional styling to add to the dropdown wrapper.
+     */
+    dropdownStyle?: StyleType,
+
+    /**
+     * The child function that returns the anchor the ActionMenu will be
+     * activated by. This function takes eventState, which allows the opener
+     * element to access pointer event state.
+     */
+    opener?: (openerProps: OpenerProps) => React.Element<any>,
+
+    /**
+     * When this is true, the dropdown body shows a search text input at the
+     * top. The items will be filtered by the input.
+     */
+    isFilterable?: boolean,
+|};
+
+type State = {|
+    /**
+     * Whether or not the dropdown is open.
+     */
+    open: boolean,
+
+    /**
+     * The text input to filter the items by their label. Defaults to an empty
+     * string.
+     */
+    searchText: string,
+
+    /**
+     * The DOM reference to the opener element. This is mainly used to set focus
+     * to this element, and also to pass the reference to Popper.js.
+     */
+    openerElement: ?HTMLElement,
+|};
+
+type DefaultProps = {|
+    alignment: $PropertyType<Props, "alignment">,
+    disabled: $PropertyType<Props, "disabled">,
+    light: $PropertyType<Props, "light">,
+|};
+
+/**
+ * The single select allows the selection of one item. Clients are responsible
+ * for keeping track of the selected item in the select.
+ *
+ * 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
+ * [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.
+ *
+ */
+export default class SingleSelect extends React.Component<Props, State> {
+    selectedIndex: number;
+
+    static defaultProps: DefaultProps = {
+        alignment: "left",
+        disabled: false,
+        light: false,
+    };
+
+    constructor(props: Props) {
+        super(props);
+
+        this.selectedIndex = 0;
+
+        this.state = {
+            open: false,
+            searchText: "",
+            openerElement: null,
+        };
+    }
+
+    /**
+     * Used to sync the `opened` state when this component acts as a controlled
+     * component
+     */
+    static getDerivedStateFromProps(
+        props: Props,
+        state: State,
+    ): ?Partial<State> {
+        return {
+            open: typeof props.opened === "boolean" ? props.opened : state.open,
+        };
+    }
+
+    handleOpenChanged: (opened: boolean) => void = (opened) => {
+        this.setState({
+            open: opened,
+            searchText: "",
+        });
+
+        if (this.props.onToggle) {
+            this.props.onToggle(opened);
+        }
+    };
+
+    handleToggle: (selectedValue: string) => void = (selectedValue) => {
+        // Call callback if selection changed.
+        if (selectedValue !== this.props.selectedValue) {
+            this.props.onChange(selectedValue);
+        }
+
+        // Bring focus back to the opener element.
+        if (this.state.open && this.state.openerElement) {
+            this.state.openerElement.focus();
+        }
+
+        this.setState({
+            open: false, // close the menu upon selection
+        });
+
+        if (this.props.onToggle) {
+            this.props.onToggle(false);
+        }
+    };
+
+    mapOptionItemsToDropdownItems: (
+        children: Array<React.Element<OptionItem>>,
+    ) => Array<DropdownItem> = (children) => {
+        // Figure out which index should receive focus when this select opens
+        // Needs to exclude counting items that are disabled
+        let indexCounter = 0;
+        this.selectedIndex = 0;
+
+        return children.map((option) => {
+            const {selectedValue} = this.props;
+            const {disabled, value} = option.props;
+            const selected = selectedValue === value;
+
+            if (!disabled) {
+                indexCounter += 1;
+            }
+            if (selected) {
+                this.selectedIndex = indexCounter;
+            }
+            return {
+                component: option,
+                focusable: !disabled,
+                populatedProps: {
+                    onToggle: this.handleToggle,
+                    selected: selected,
+                    variant: "check",
+                },
+            };
+        });
+    };
+
+    filterChildren(
+        children: Array<React.Element<OptionItem>>,
+    ): Array<React.Element<OptionItem>> {
+        const {searchText} = this.state;
+
+        const lowercasedSearchText = searchText.toLowerCase();
+
+        // Filter the children with the searchText if any.
+        return children.filter(
+            ({props}) =>
+                !searchText ||
+                props.label.toLowerCase().indexOf(lowercasedSearchText) > -1,
+        );
+    }
+
+    getMenuItems(
+        children: Array<React.Element<OptionItem>>,
+    ): Array<DropdownItem> {
+        const {isFilterable} = this.props;
+
+        // If it's not filterable, no need to do any extra besides mapping the
+        // option items to dropdown items.
+        return this.mapOptionItemsToDropdownItems(
+            isFilterable ? this.filterChildren(children) : children,
+        );
+    }
+
+    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});
+    };
+
+    handleOpenerRef: (node: any) => void = (node) => {
+        const openerElement = ((ReactDOM.findDOMNode(node): any): HTMLElement);
+        this.setState({openerElement});
+    };
+
+    handleClick: (e: SyntheticEvent<>) => void = (e) => {
+        this.handleOpenChanged(!this.state.open);
+    };
+
+    renderOpener(
+        numItems: number,
+    ):
+        | React.Element<typeof DropdownOpener>
+        | React.Element<typeof SelectOpener> {
+        const {
+            children,
+            disabled,
+            id,
+            light,
+            opener,
+            placeholder,
+            selectedValue,
+            testId,
+            // the following props are being included here to avoid
+            // passing them down to the opener as part of sharedProps
+            /* eslint-disable no-unused-vars */
+            alignment,
+            dropdownStyle,
+            isFilterable,
+            onChange,
+            onToggle,
+            opened,
+            style,
+            className,
+            /* eslint-enable no-unused-vars */
+            ...sharedProps
+        } = this.props;
+
+        const selectedItem = React.Children.toArray(children).find(
+            (option) => option.props.value === selectedValue,
+        );
+        // If nothing is selected, or if the selectedValue doesn't match any
+        // item in the menu, use the placeholder.
+        const menuText = selectedItem ? selectedItem.props.label : placeholder;
+
+        const dropdownOpener = opener ? (
+            <DropdownOpener
+                onClick={this.handleClick}
+                disabled={numItems === 0 || disabled}
+                ref={this.handleOpenerRef}
+                text={menuText}
+            >
+                {opener}
+            </DropdownOpener>
+        ) : (
+            <SelectOpener
+                {...sharedProps}
+                disabled={numItems === 0 || disabled}
+                id={id}
+                isPlaceholder={!selectedItem}
+                light={light}
+                onOpenChanged={this.handleOpenChanged}
+                open={this.state.open}
+                ref={this.handleOpenerRef}
+                testId={testId}
+            >
+                {menuText}
+            </SelectOpener>
+        );
+        return dropdownOpener;
+    }
+
+    render(): React.Node {
+        const {
+            alignment,
+            children,
+            dropdownStyle,
+            isFilterable,
+            light,
+            style,
+            className,
+        } = this.props;
+        const {searchText} = this.state;
+        const allChildren = React.Children.toArray(children).filter(Boolean);
+        const filteredItems = this.getMenuItems(allChildren);
+        const opener = this.renderOpener(allChildren.length);
+        const searchField = this.getSearchField();
+        const items = searchField
+            ? [searchField, ...filteredItems]
+            : filteredItems;
+
+        return (
+            <DropdownCore
+                role="listbox"
+                alignment={alignment}
+                dropdownStyle={[
+                    isFilterable && filterableDropdownStyle,
+                    selectDropdownStyle,
+                    dropdownStyle,
+                ]}
+                initialFocusedIndex={this.selectedIndex}
+                items={items}
+                light={light}
+                onOpenChanged={this.handleOpenChanged}
+                open={this.state.open}
+                opener={opener}
+                openerElement={this.state.openerElement}
+                style={style}
+                className={className}
+                onSearchTextChanged={
+                    isFilterable ? this.handleSearchTextChanged : null
+                }
+                searchText={isFilterable ? searchText : ""}
+            />
+        );
+    }
+}