Update label in SingleSelect and MultiSelect

.changeset/thirty-shirts-leave.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-dropdown": patch
+---
+
+Allow use of JSX Element as label in SingleSelect and MultiSelect

__docs__/wonder-blocks-dropdown/multi-select.stories.tsx

@@ -18,7 +18,12 @@ import ComponentInfo from "../../.storybook/components/component-info";
 import packageConfig from "../../packages/wonder-blocks-dropdown/package.json";
 import multiSelectArgtypes from "./multi-select.argtypes";
 import {defaultLabels} from "../../packages/wonder-blocks-dropdown/src/util/constants";
-import {allCountries, allProfilesWithPictures} from "./option-item-examples";
+import {
+    allCountries,
+    allProfilesWithPictures,
+    locales,
+    chatIcon,
+} from "./option-item-examples";
 import {OpenerProps} from "../../packages/wonder-blocks-dropdown/src/util/types";
 import Strut from "../../packages/wonder-blocks-layout/src/components/strut";
 
@@ -650,3 +655,51 @@ export const CustomOptionItems: StoryComponentType = {
         ),
     ],
 };
+
+/**
+ * This example illustrates how a JSX Element can appear as the label when only
+ * one option is selected and `labelAsText` is undefined.
+ * **Note** this is only supported for SingleSelect and MultiSelect, not Combobox.
+ */
+export const CustomOptionItemsWithNodeLabel: StoryComponentType = {
+    render: function Render() {
+        const [opened, setOpened] = React.useState(true);
+        const [selectedValues, setSelectedValues] = React.useState<
+            Array<string>
+        >([]);
+
+        const handleChange = (selectedValues: Array<string>) => {
+            setSelectedValues(selectedValues);
+        };
+
+        const handleToggle = (opened: boolean) => {
+            setOpened(opened);
+        };
+
+        return (
+            <MultiSelect
+                onChange={handleChange}
+                selectedValues={selectedValues}
+                onToggle={handleToggle}
+                opened={opened}
+            >
+                {locales.map((locale, index) => (
+                    <OptionItem
+                        key={index}
+                        value={String(index)}
+                        label={
+                            <span>
+                                {chatIcon} {locale}
+                            </span>
+                        }
+                    />
+                ))}
+            </MultiSelect>
+        );
+    },
+    decorators: [
+        (Story): React.ReactElement<React.ComponentProps<typeof View>> => (
+            <View style={styles.wrapper}>{Story()}</View>
+        ),
+    ],
+};

__docs__/wonder-blocks-dropdown/option-item-examples.tsx

@@ -1,5 +1,10 @@
 import * as React from "react";
 import userCircleIcon from "@phosphor-icons/core/duotone/user-circle-duotone.svg";
+import chatBubbleIcon from "@phosphor-icons/core/regular/chats.svg";
+import bitcoinIcon from "@phosphor-icons/core/regular/currency-btc.svg";
+import euroIcon from "@phosphor-icons/core/regular/currency-eur.svg";
+import dollarIcon from "@phosphor-icons/core/regular/currency-dollar.svg";
+import yenIcon from "@phosphor-icons/core/regular/currency-jpy.svg";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 
 export const allCountries = [
@@ -301,3 +306,23 @@ export const allProfilesWithPictures = [
         picture: icon,
     },
 ];
+
+export const currencies = [
+    {name: "Bitcoin", icon: bitcoinIcon},
+    {name: "Dollars", icon: dollarIcon},
+    {name: "Yen", icon: yenIcon},
+    {name: "Euros", icon: euroIcon},
+];
+
+export const locales = [
+    "অসমীয়া",
+    "Azərbaycanca",
+    "čeština",
+    "dansk",
+    "Ελληνικά",
+    "ગુજરાતી",
+    "magyar",
+    "Bahasa Indonesia",
+];
+
+export const chatIcon = <PhosphorIcon icon={chatBubbleIcon} size={"small"} />;

__docs__/wonder-blocks-dropdown/single-select.stories.tsx

@@ -31,7 +31,11 @@ import ComponentInfo from "../../.storybook/components/component-info";
 import singleSelectArgtypes from "./single-select.argtypes";
 import {IconMappings} from "../wonder-blocks-icon/phosphor-icon.argtypes";
 import {defaultLabels} from "../../packages/wonder-blocks-dropdown/src/util/constants";
-import {allCountries, allProfilesWithPictures} from "./option-item-examples";
+import {
+    allCountries,
+    allProfilesWithPictures,
+    currencies,
+} from "./option-item-examples";
 import {OpenerProps} from "../../packages/wonder-blocks-dropdown/src/util/types";
 
 type StoryComponentType = StoryObj<typeof SingleSelect>;
@@ -884,6 +888,55 @@ export const CustomOptionItems: StoryComponentType = {
     },
 };
 
+/**
+ * This example illustrates how a JSX Element can appear as the label if
+ * `labelAsText` is undefined.
+ * **Note** this is only supported for SingleSelect and MultiSelect, not Combobox.
+ */
+export const CustomOptionItemWithNodeLabel: StoryComponentType = {
+    render: function Render() {
+        const [opened, setOpened] = React.useState(true);
+        const [selectedValue, setSelectedValue] = React.useState("");
+
+        const handleChange = (selectedValue: string) => {
+            setSelectedValue(selectedValue);
+        };
+
+        const handleToggle = (opened: boolean) => {
+            setOpened(opened);
+        };
+
+        return (
+            <View style={styles.wrapper}>
+                <SingleSelect
+                    placeholder="Select your currency"
+                    onChange={handleChange}
+                    selectedValue={selectedValue}
+                    onToggle={handleToggle}
+                    opened={opened}
+                >
+                    {currencies.map((currency, index) => (
+                        <OptionItem
+                            key={index}
+                            value={String(index)}
+                            horizontalRule="full-width"
+                            label={
+                                <span>
+                                    <PhosphorIcon
+                                        icon={currency.icon}
+                                        size={"small"}
+                                    />
+                                    {currency.name}
+                                </span>
+                            }
+                        />
+                    ))}
+                </SingleSelect>
+            </View>
+        );
+    },
+};
+
 /**
  * This example illustrates how you can use the `OptionItem` component to
  * display a virtualized list with custom option items. Note that in this

packages/wonder-blocks-dropdown/src/components/__tests__/multi-select.test.tsx

@@ -150,7 +150,7 @@ describe("MultiSelect", () => {
 
             // Assert
             expect(await screen.findByRole("button")).toHaveTextContent(
-                "1 student",
+                "custom item 1",
             );
         });
 

packages/wonder-blocks-dropdown/src/components/multi-select.tsx

@@ -25,7 +25,7 @@ import type {
     OptionItemComponent,
     OptionItemComponentArray,
 } from "../util/types";
-import {getLabel} from "../util/helpers";
+import {getLabel, getSelectOpenerLabel} from "../util/helpers";
 
 export type Labels = {
     /**
@@ -315,7 +315,7 @@ export default class MultiSelect extends React.Component<Props, State> {
         onChange([]);
     };
 
-    getMenuText(children: OptionItemComponentArray): string {
+    getMenuText(children: OptionItemComponentArray): string | JSX.Element {
         const {implicitAllEnabled, selectedValues} = this.props;
         const {noneSelected, someSelected, allSelected} = this.state.labels;
         const numSelectedAll = children.filter(
@@ -345,7 +345,7 @@ export default class MultiSelect extends React.Component<Props, State> {
                         // we fallback to, the default label for the case where only
                         // one item is selected.
                     } else {
-                        return someSelected(1);
+                        return getSelectOpenerLabel(selectedItem?.props);
                     }
                 }
 

packages/wonder-blocks-dropdown/src/components/single-select.tsx

@@ -22,7 +22,7 @@ import type {
     OpenerProps,
     OptionItemComponentArray,
 } from "../util/types";
-import {getLabel} from "../util/helpers";
+import {getLabel, getSelectOpenerLabel} from "../util/helpers";
 
 export type SingleSelectLabels = {
     /**
@@ -418,7 +418,7 @@ export default class SingleSelect extends React.Component<Props, State> {
         // If nothing is selected, or if the selectedValue doesn't match any
         // item in the menu, use the placeholder.
         const menuText = selectedItem
-            ? getLabel(selectedItem.props)
+            ? getSelectOpenerLabel(selectedItem.props)
             : placeholder;
 
         const dropdownOpener = (

packages/wonder-blocks-dropdown/src/util/__tests__/helpers.test.tsx

@@ -1,7 +1,12 @@
 import * as React from "react";
 import {PropsFor} from "@khanacademy/wonder-blocks-core";
 import OptionItem from "../../components/option-item";
-import {debounce, getLabel, getStringForKey} from "../helpers";
+import {
+    debounce,
+    getLabel,
+    getSelectOpenerLabel,
+    getStringForKey,
+} from "../helpers";
 
 describe("getStringForKey", () => {
     it("should get a valid string", () => {
@@ -119,3 +124,49 @@ describe("getLabel", () => {
         expect(label).toBe("");
     });
 });
+
+describe("getSelectOpenerLabel", () => {
+    it("should return the label if the label is a Node and labelAsText is not defined", () => {
+        // Arrange
+        const props: PropsFor<typeof OptionItem> = {
+            label: <div>a custom node</div>,
+            labelAsText: undefined,
+            value: "foo",
+        };
+
+        // Act
+        const label = getSelectOpenerLabel(props);
+
+        // Assert
+        expect(label).toStrictEqual(<div>a custom node</div>);
+    });
+
+    it("should return a string if the label is a string", () => {
+        // Arrange
+        const props: PropsFor<typeof OptionItem> = {
+            label: "option 1",
+            value: "foo",
+        };
+
+        // Act
+        const label = getSelectOpenerLabel(props);
+
+        // Assert
+        expect(label).toBe("option 1");
+    });
+
+    it("should return a string if the label is a Node and labelAsText is defined", () => {
+        // Arrange
+        const props: PropsFor<typeof OptionItem> = {
+            label: <div>a custom node</div>,
+            labelAsText: "plain text",
+            value: "foo",
+        };
+
+        // Act
+        const label = getSelectOpenerLabel(props);
+
+        // Assert
+        expect(label).toBe("plain text");
+    });
+});

packages/wonder-blocks-dropdown/src/util/helpers.ts

@@ -70,3 +70,17 @@ export function getLabel(props: OptionItemProps): string {
 
     return "";
 }
+
+/**
+ * Returns the label for the SelectOpener in the SingleSelect and MultiSelect.
+ * If the label is a Node, and `labelAsText` is undefined, returns the label.
+ */
+export function getSelectOpenerLabel(
+    props: OptionItemProps,
+): string | JSX.Element {
+    const labelText = getLabel(props);
+    if (labelText === "") {
+        return props.label;
+    }
+    return labelText;
+}