@buildcanada/charts 0.1.0

package/src/grapher/controls/Dropdown.scss

@@ -0,0 +1,252 @@
+@import "dropdown-icons";
+
+$grapher-dropdown-hover-fill: $gray-10;
+$grapher-dropdown-active-fill: $blue-20;
+$grapher-dropdown-selected-fill: #c7ced7;
+
+.grapher-dropdown {
+    position: relative;
+    font: 400 13px/16px $sans-serif-font-stack;
+
+    // fixes a bug in Firefox where long labels would cause the dropdown to resize,
+    // see https://github.com/JedWatson/react-select/issues/5170
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+
+    .clear-indicator {
+        padding-right: 10px;
+        position: absolute;
+        right: 29px; // Leave space for the dropdown caret
+        top: 50%;
+        transform: translateY(-50%);
+        cursor: pointer;
+        border-right: 1px solid #dadada;
+        background: none;
+        display: flex;
+        align-items: center;
+        z-index: 1;
+        height: calc(100% - 12px);
+
+        &::after {
+            content: " ";
+            background: url($clear) no-repeat center;
+            width: 12px;
+            height: 12px;
+        }
+
+        &:hover::after {
+            background-image: url($clear-hover);
+        }
+    }
+
+    .control {
+        min-height: auto;
+        font: 400 13px/16px $sans-serif-font-stack;
+        letter-spacing: 0.01em;
+        text-align: left;
+        display: flex;
+        align-items: center;
+        border: 1px solid $gray-20;
+        border-radius: 4px;
+        padding: 7px;
+        color: $gray-90;
+        background: white;
+        cursor: pointer;
+        position: relative;
+        width: 100%;
+
+        &:focus-visible {
+            // Override global focus-visible style.
+            outline: 1px solid $blue-30;
+            outline-offset: -1px;
+        }
+
+        &:hover {
+            background: $grapher-dropdown-hover-fill;
+        }
+
+        &[data-disabled] {
+            opacity: 0.75;
+            cursor: default;
+            background: $gray-10;
+        }
+
+        &:after {
+            content: " ";
+            background: url($menu-caret-down) no-repeat center;
+            width: 16px;
+            height: 16px;
+            margin-left: auto;
+        }
+
+        &.loading:after {
+            opacity: 0.5;
+        }
+
+        &[data-pressed] {
+            border-color: $blue-30;
+            &:after {
+                background: url($menu-caret-up) no-repeat center;
+            }
+        }
+
+        .label {
+            color: $gray-70;
+
+            svg {
+                margin-left: 1px;
+                margin-right: 5px;
+            }
+        }
+    }
+
+    .select-value {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        width: 100%;
+
+        &[data-placeholder] {
+            color: $gray-60;
+            white-space: nowrap;
+        }
+    }
+}
+
+.grapher-dropdown-listbox {
+    max-height: 400px;
+    overflow-y: auto;
+
+    &:focus-visible {
+        // Override global focus-visible style.
+        outline: none;
+    }
+}
+
+.grapher-dropdown-menu {
+    $option-checkmark: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMS4wMTU2IDAuOTg0Mzc1QzExLjMyMDMgMS4yNjU2MiAxMS4zMjAzIDEuNzU3ODEgMTEuMDE1NiAyLjAzOTA2TDUuMDE1NjIgOC4wMzkwNkM0LjczNDM4IDguMzQzNzUgNC4yNDIxOSA4LjM0Mzc1IDMuOTYwOTQgOC4wMzkwNkwwLjk2MDkzOCA1LjAzOTA2QzAuNjU2MjUgNC43NTc4MSAwLjY1NjI1IDQuMjY1NjIgMC45NjA5MzggMy45ODQzOEMxLjI0MjE5IDMuNjc5NjkgMS43MzQzOCAzLjY3OTY5IDIuMDE1NjIgMy45ODQzOEw0LjQ3NjU2IDYuNDQ1MzFMOS45NjA5NCAwLjk4NDM3NUMxMC4yNDIyIDAuNjc5Njg4IDEwLjczNDQgMC42Nzk2ODggMTEuMDE1NiAwLjk4NDM3NVoiIGZpbGw9IiMxRDNENjMiLz4KPC9zdmc+";
+    $option-checkmark-width: 12px;
+    font: 400 13px/16px $sans-serif-font-stack;
+
+    margin-top: 3px;
+    border-radius: 4px;
+    background: white;
+    box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.15);
+    z-index: $zindex-controls-popup;
+    color: $gray-90;
+    width: var(--trigger-width);
+    overflow-y: hidden;
+
+    .group-heading {
+        @include grapher_h5-black-caps;
+        font-size: 11px;
+        color: $light-text;
+        margin: 12px 8px 2px 8px;
+        font-weight: 700;
+    }
+
+    .group + .group .group-heading {
+        margin-top: 8px;
+        padding: 12px 0 2px 0;
+        border-top: 1px solid #f2f2f2;
+    }
+
+    .option {
+        padding: 10px calc(16px + $option-checkmark-width + 2px) 10px 16px;
+        cursor: pointer;
+
+        &[data-hovered],
+        &[data-focused] {
+            background: $grapher-dropdown-hover-fill;
+        }
+
+        &:focus-visible {
+            // Override global focus-visible style.
+            outline: none !important;
+        }
+
+        &[data-pressed] {
+            color: $active-text;
+            background: $grapher-dropdown-active-fill;
+        }
+
+        &[data-selected] {
+            position: relative;
+            color: $active-text;
+            background: $grapher-dropdown-active-fill;
+
+            &:hover {
+                background: $grapher-dropdown-selected-fill;
+            }
+
+            &:after {
+                content: " ";
+                background: url($option-checkmark) no-repeat;
+                width: $option-checkmark-width;
+                height: 9px;
+                position: absolute;
+                right: 18px;
+                top: 50%;
+                transform: translateY(-50%);
+            }
+        }
+
+        .detail {
+            color: $gray-70;
+        }
+
+        &[data-selected] .detail {
+            color: $blue-60;
+        }
+    }
+}
+
+.grapher-dropdown-search {
+    display: flex;
+    align-items: center;
+    margin: 4px;
+    border: 1px solid $gray-20;
+    border-radius: 4px;
+    height: 32px;
+}
+
+.grapher-dropdown-search-input {
+    flex: 1;
+    min-width: 0;
+    border: none;
+    outline: 0;
+    font: 400 13px/16px $sans-serif-font-stack;
+    color: $dark-text;
+    background: white;
+    padding: 4px 6px;
+
+    &:focus-visible {
+        // Override global focus-visible style.
+        outline: none;
+    }
+}
+
+.grapher-dropdown-search-icon {
+    $magnifying-glass: "data:image/svg+xml;base64,PHN2ZwogICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICAgdmlld0JveD0iMCAwIDUxMiA1MTIiCj4KICA8cGF0aAogICAgZD0iTTQxNiAyMDhjMCA0NS45LTE0LjkgODguMy00MCAxMjIuN0w1MDIuNiA0NTcuNGMxMi41IDEyLjUgMTIuNSAzMi44IDAgNDUuM3MtMzIuOCAxMi41LTQ1LjMgMEwzMzAuNyAzNzZjLTM0LjQgMjUuMi03Ni44IDQwLTEyMi43IDQwQzkzLjEgNDE2IDAgMzIyLjkgMCAyMDhTOTMuMSAwIDIwOCAwUzQxNiA5My4xIDQxNiAyMDh6TTIwOCAzNTJhMTQ0IDE0NCAwIDEgMCAwLTI4OCAxNDQgMTQ0IDAgMSAwIDAgMjg4eiIKICAgIGZpbGw9IiM4NTg1ODUiCiAgLz4KPC9zdmc+Cg==";
+    margin-left: 8px;
+    width: 12px;
+    height: 12px;
+    background: url($magnifying-glass) no-repeat center;
+}
+
+.grapher-dropdown-search-reset {
+    margin-right: 8px;
+    border: none;
+    background: none;
+    padding: 0;
+    cursor: pointer;
+    color: $gray-60;
+
+    &:hover {
+        color: $dark-text;
+    }
+}
+
+.grapher-dropdown-search[data-empty] .grapher-dropdown-search-reset {
+    visibility: hidden;
+}

package/src/grapher/controls/Dropdown.tsx

@@ -0,0 +1,235 @@
+import cx from "classnames"
+import * as React from "react"
+import { useMemo } from "react"
+import {
+    Autocomplete,
+    Button,
+    Header,
+    Input,
+    Key,
+    ListBox,
+    ListBoxItem,
+    ListBoxSection,
+    Popover,
+    SearchField,
+    Select,
+    SelectValue,
+    useFilter,
+} from "react-aria-components"
+import { faTimesCircle } from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { isTouchDevice } from "../../utils/index.js"
+
+export interface BasicDropdownOption {
+    trackNote?: string
+    value: string
+    label: React.ReactNode
+}
+
+export interface DropdownOptionGroup<
+    DropdownOption extends BasicDropdownOption,
+> {
+    label: React.ReactNode
+    options: DropdownOption[]
+}
+
+export type DropdownCollectionItem<DropdownOption extends BasicDropdownOption> =
+    DropdownOption | DropdownOptionGroup<DropdownOption>
+
+export type DropdownCollection<DropdownOption extends BasicDropdownOption> =
+    DropdownCollectionItem<DropdownOption>[]
+
+export interface DropdownProps<DropdownOption extends BasicDropdownOption> {
+    className?: string
+    menuClassName?: string
+    options: DropdownCollection<DropdownOption>
+    value?: DropdownOption | null
+    inputValue?: string
+    onChange?: (option: DropdownOption | null) => void
+    onInputChange?: (value: string) => void
+    placeholder?: string
+    isDisabled?: boolean
+    isClearable?: boolean
+    isLoading?: boolean
+    isSearchable?: boolean
+    renderTriggerValue?: (
+        option: DropdownOption | null
+    ) => React.ReactNode | undefined
+    renderMenuOption?: (option: DropdownOption) => React.ReactNode
+    portalContainer?: HTMLElement
+    "data-track-note"?: string
+    "aria-label"?: string
+}
+
+function isOptionGroup<DropdownOption extends BasicDropdownOption>(
+    item: DropdownCollectionItem<DropdownOption>
+): item is DropdownOptionGroup<DropdownOption> {
+    return (item as DropdownOptionGroup<DropdownOption>).options !== undefined
+}
+
+function flattenOptions<DropdownOption extends BasicDropdownOption>(
+    options: DropdownCollection<DropdownOption>
+): DropdownOption[] {
+    return options.flatMap((item) =>
+        isOptionGroup(item) ? item.options : [item]
+    )
+}
+
+export function Dropdown<DropdownOption extends BasicDropdownOption>({
+    className,
+    // We use a separate prop for the menu's className because the Popover
+    // (menu) doesn't render as a child of the select, so it's not trivial to
+    // style it using the main className.
+    menuClassName,
+    options,
+    value,
+    inputValue,
+    onChange,
+    onInputChange,
+    placeholder,
+    isDisabled,
+    isClearable,
+    isLoading,
+    isSearchable,
+    renderTriggerValue,
+    renderMenuOption,
+    portalContainer,
+    ...otherProps
+}: DropdownProps<DropdownOption>): React.ReactElement {
+    const { contains } = useFilter({ sensitivity: "base" })
+    const flatOptions = useMemo(() => flattenOptions(options), [options])
+    const selectedValue = value ?? null
+
+    function handleSelectionChange(key: Key | null): void {
+        if (key === null) {
+            onChange?.(null)
+            return
+        }
+
+        if (typeof key === "number") return
+        const selected = flatOptions.find((option) => option.value === key)
+        if (selected) {
+            onChange?.(selected)
+        }
+    }
+
+    const listBox = (
+        <ListBox className="grapher-dropdown-listbox">
+            {options.map((item, index) =>
+                isOptionGroup(item) ? (
+                    <ListBoxSection
+                        key={`section-${index}`}
+                        id={`section-${index}`}
+                        className="group"
+                    >
+                        <Header className="group-heading">{item.label}</Header>
+                        {item.options.map((option) => (
+                            <ListBoxItem
+                                className="option"
+                                key={option.value}
+                                id={option.value}
+                                textValue={
+                                    typeof option.label === "string"
+                                        ? option.label
+                                        : String(option.value)
+                                }
+                                data-track-note={option.trackNote}
+                            >
+                                {renderMenuOption
+                                    ? renderMenuOption(option)
+                                    : option.label}
+                            </ListBoxItem>
+                        ))}
+                    </ListBoxSection>
+                ) : (
+                    <ListBoxItem
+                        className="option"
+                        key={item.value}
+                        id={item.value}
+                        textValue={
+                            typeof item.label === "string"
+                                ? item.label
+                                : String(item.value)
+                        }
+                        data-track-note={item.trackNote}
+                    >
+                        {renderMenuOption ? renderMenuOption(item) : item.label}
+                    </ListBoxItem>
+                )
+            )}
+        </ListBox>
+    )
+
+    return (
+        <Select
+            className={cx("grapher-dropdown", className)}
+            // null means no selection, undefined means the component is
+            // uncontrolled, so we need to set it explicitly.
+            selectedKey={value?.value ?? null}
+            onSelectionChange={handleSelectionChange}
+            placeholder={placeholder}
+            isDisabled={isDisabled}
+            {...otherProps}
+        >
+            <Button
+                className={cx("control", {
+                    loading: isLoading,
+                })}
+            >
+                <SelectValue className="select-value">
+                    {({ selectedItems, defaultChildren }) => {
+                        if (renderTriggerValue && selectedItems.length === 1) {
+                            return renderTriggerValue(selectedValue)
+                        }
+                        return defaultChildren
+                    }}
+                </SelectValue>
+            </Button>
+            {isClearable && value && (
+                <Button
+                    className="clear-indicator"
+                    slot={null}
+                    type="button"
+                    onPress={() => onChange?.(null)}
+                    aria-label="Clear selection"
+                />
+            )}
+            <Popover
+                className={cx("grapher-dropdown-menu", menuClassName)}
+                offset={4}
+                UNSTABLE_portalContainer={portalContainer}
+            >
+                {isSearchable ? (
+                    // If inputValue is provided, the component is controlled
+                    // and we expect the filtering to happen outside of it.
+                    <Autocomplete filter={inputValue ? undefined : contains}>
+                        <SearchField
+                            className="grapher-dropdown-search"
+                            aria-label="Search"
+                            autoFocus
+                            value={inputValue}
+                            onChange={onInputChange}
+                        >
+                            <span className="grapher-dropdown-search-icon" />
+                            <Input
+                                className="grapher-dropdown-search-input"
+                                style={{
+                                    fontSize: isTouchDevice() ? 16 : undefined,
+                                }}
+                            />
+                            <Button className="grapher-dropdown-search-reset">
+                                <FontAwesomeIcon
+                                    icon={faTimesCircle}
+                                    aria-hidden
+                                />
+                            </Button>
+                        </SearchField>
+                        {listBox}
+                    </Autocomplete>
+                ) : (
+                    listBox
+                )}
+            </Popover>
+        </Select>
+    )
+}

package/src/grapher/controls/EntitySelectionToggle.tsx

@@ -0,0 +1,135 @@
+import * as React from "react"
+import { action, computed, makeObservable } from "mobx"
+import { observer } from "mobx-react"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faEye, faRightLeft, faPen } from "@fortawesome/free-solid-svg-icons"
+import classnames from "classnames"
+import { GrapherWindowType } from "../../types/index.js"
+
+export interface EntitySelectionManager {
+    canHighlightEntities?: boolean
+    canChangeEntity?: boolean
+    canAddEntities?: boolean
+    canChangeAddOrHighlightEntities?: boolean
+    entityType?: string
+    entityTypePlural?: string
+    isEntitySelectorModalOrDrawerOpen?: boolean
+    isOnChartTab?: boolean
+    isOnMapTab?: boolean
+    hideEntityControls?: boolean
+    shouldShowEntitySelectorAs?: GrapherWindowType
+}
+
+interface EntitySelectionLabel {
+    icon: React.ReactElement
+    action: string
+    entity: string
+}
+
+@observer
+export class EntitySelectionToggle extends React.Component<{
+    manager: EntitySelectionManager
+}> {
+    constructor(props: { manager: EntitySelectionManager }) {
+        super(props)
+        makeObservable(this)
+    }
+
+    static shouldShow(manager: EntitySelectionManager): boolean {
+        const toggle = new EntitySelectionToggle({ manager })
+        return toggle.showToggle
+    }
+
+    @computed get showToggle(): boolean {
+        const {
+            isOnChartTab,
+            isOnMapTab,
+            hideEntityControls,
+            shouldShowEntitySelectorAs,
+            canChangeAddOrHighlightEntities,
+        } = this.props.manager
+
+        if (hideEntityControls) return false
+
+        const shouldShowDrawer =
+            shouldShowEntitySelectorAs === GrapherWindowType.drawer
+        const shouldShowModal =
+            shouldShowEntitySelectorAs === GrapherWindowType.modal
+
+        if (isOnMapTab) return shouldShowDrawer
+
+        return !!(
+            isOnChartTab &&
+            canChangeAddOrHighlightEntities &&
+            (shouldShowModal || shouldShowDrawer) &&
+            this.label
+        )
+    }
+
+    @computed get label(): EntitySelectionLabel | null {
+        const {
+            entityType = "",
+            entityTypePlural = "",
+            canHighlightEntities,
+            canChangeEntity,
+            canAddEntities,
+            isOnMapTab,
+        } = this.props.manager
+
+        if (isOnMapTab)
+            return {
+                action: "Select",
+                entity: "countries",
+                icon: <FontAwesomeIcon icon={faPen} />,
+            }
+
+        if (canHighlightEntities)
+            return {
+                action: "Select",
+                entity: entityTypePlural,
+                icon: <FontAwesomeIcon icon={faEye} />,
+            }
+
+        if (canChangeEntity)
+            return {
+                action: "Change",
+                entity: entityType,
+                icon: <FontAwesomeIcon icon={faRightLeft} />,
+            }
+
+        if (canAddEntities)
+            return {
+                action: "Edit",
+                entity: entityTypePlural,
+                icon: <FontAwesomeIcon icon={faPen} />,
+            }
+
+        return null
+    }
+
+    override render(): React.ReactElement | null {
+        const { showToggle, label } = this
+        const { isEntitySelectorModalOrDrawerOpen: active } = this.props.manager
+
+        return showToggle && label ? (
+            <div className="entity-selection-menu">
+                <button
+                    className={classnames("menu-toggle", { active })}
+                    onClick={action((e): void => {
+                        this.props.manager.isEntitySelectorModalOrDrawerOpen =
+                            !active
+                        e.stopPropagation()
+                    })}
+                    type="button"
+                    data-track-note="chart_add_entity"
+                    aria-label={`${label.action} ${label.entity}`}
+                >
+                    {label.icon}
+                    <label>
+                        {label.action} <span>{label.entity}</span>
+                    </label>
+                </button>
+            </div>
+        ) : null
+    }
+}

package/src/grapher/controls/MapRegionDropdown.scss

@@ -0,0 +1,3 @@
+.map-region-dropdown {
+    flex: 0 1 155px;
+}