@khanacademy/wonder-blocks-dropdown 5.7.0 → 5.8.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 5.8.0
+
+### Minor Changes
+
+-   2b8424ca: Allow use of JSX Element as label in SingleSelect and MultiSelect
+
 ## 5.7.0
 
 ### Minor Changes

package/dist/components/multi-select.d.ts

@@ -66,6 +66,13 @@ type DefaultProps = Readonly<{
      * Whether to display shortcuts for Select All and Select None.
      */
     shortcuts: boolean;
+    /**
+     * When false, the SelectOpener can show a Node as a label. When true, the
+     * SelectOpener will use a string as a label. If using custom OptionItems, a
+     * plain text label can be provided with the `labelAsText` prop.
+     * Defaults to true.
+     */
+    showOpenerLabelAsText: boolean;
 }>;
 type Props = AriaProps & DefaultProps & Readonly<{
     /**
@@ -196,7 +203,7 @@ export default class MultiSelect extends React.Component<Props, State> {
     handleToggle: (selectedValue: string) => void;
     handleSelectAll: () => void;
     handleSelectNone: () => void;
-    getMenuText(children: OptionItemComponentArray): string;
+    getMenuText(children: OptionItemComponentArray): string | JSX.Element;
     getShortcuts(numOptions: number): DropdownItem[];
     getMenuItems(children: OptionItemComponentArray): DropdownItem[];
     mapOptionItemToDropdownItem: (option: OptionItemComponent) => DropdownItem;

package/dist/components/single-select.d.ts

@@ -64,6 +64,13 @@ type DefaultProps = Readonly<{
      * The object containing the custom labels used inside this component.
      */
     labels: SingleSelectLabels;
+    /**
+     * When false, the SelectOpener can show a Node as a label. When true, the
+     * SelectOpener will use a string as a label. If using custom OptionItems, a
+     * plain text label can be provided with the `labelAsText` prop.
+     * Defaults to true.
+     */
+    showOpenerLabelAsText: boolean;
 }>;
 type Props = AriaProps & DefaultProps & Readonly<{
     /**

package/dist/es/index.js

@@ -778,6 +778,12 @@ function getLabel(props) {
   }
   return "";
 }
+function getSelectOpenerLabel(showOpenerLabelAsText, props) {
+  if (showOpenerLabelAsText) {
+    return getLabel(props);
+  }
+  return props.label;
+}
 
 const VIRTUALIZE_THRESHOLD = 125;
 const StyledSpan$1 = addStyle("span");
@@ -1862,7 +1868,7 @@ const _generateStyles = (light, placeholder, error) => {
   return stateStyles[styleKey];
 };
 
-const _excluded$1 = ["children", "error", "id", "light", "opener", "placeholder", "selectedValue", "testId", "alignment", "autoFocus", "dropdownStyle", "enableTypeAhead", "isFilterable", "labels", "onChange", "onToggle", "opened", "style", "className", "aria-invalid", "aria-required"];
+const _excluded$1 = ["children", "error", "id", "light", "opener", "placeholder", "selectedValue", "testId", "alignment", "autoFocus", "dropdownStyle", "enableTypeAhead", "isFilterable", "labels", "onChange", "onToggle", "opened", "style", "className", "aria-invalid", "aria-required", "showOpenerLabelAsText"];
 class SingleSelect extends React.Component {
   constructor(props) {
     super(props);
@@ -1969,12 +1975,13 @@ class SingleSelect extends React.Component {
         opener,
         placeholder,
         selectedValue,
-        testId
+        testId,
+        showOpenerLabelAsText
       } = _this$props,
       sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
     const items = React.Children.toArray(children);
     const selectedItem = items.find(option => option.props.value === selectedValue);
-    const menuText = selectedItem ? getLabel(selectedItem.props) : placeholder;
+    const menuText = selectedItem ? getSelectOpenerLabel(showOpenerLabelAsText, selectedItem.props) : placeholder;
     const dropdownOpener = React.createElement(IDProvider, {
       id: id,
       scope: "single-select-opener"
@@ -2069,7 +2076,8 @@ SingleSelect.defaultProps = {
     filter: defaultLabels.filter,
     noResults: defaultLabels.noResults,
     someResults: defaultLabels.someSelected
-  }
+  },
+  showOpenerLabelAsText: true
 };
 
 const _excluded = ["id", "light", "opener", "testId", "alignment", "dropdownStyle", "implicitAllEnabled", "isFilterable", "labels", "onChange", "onToggle", "opened", "selectedValues", "shortcuts", "style", "className", "aria-invalid", "aria-required"];
@@ -2170,7 +2178,8 @@ class MultiSelect extends React.Component {
   getMenuText(children) {
     const {
       implicitAllEnabled,
-      selectedValues
+      selectedValues,
+      showOpenerLabelAsText
     } = this.props;
     const {
       noneSelected,
@@ -2185,7 +2194,7 @@ class MultiSelect extends React.Component {
       case 1:
         const selectedItem = children.find(option => option.props.value === selectedValues[0]);
         if (selectedItem) {
-          const selectedLabel = getLabel(selectedItem == null ? void 0 : selectedItem.props);
+          const selectedLabel = getSelectOpenerLabel(showOpenerLabelAsText, selectedItem == null ? void 0 : selectedItem.props);
           if (selectedLabel) {
             return selectedLabel;
           } else {
@@ -2385,7 +2394,8 @@ MultiSelect.defaultProps = {
   error: false,
   light: false,
   shortcuts: false,
-  selectedValues: []
+  selectedValues: [],
+  showOpenerLabelAsText: true
 };
 
 function updateMultipleSelection(previousSelection, value = "") {

package/dist/index.js

@@ -814,6 +814,12 @@ function getLabel(props) {
   }
   return "";
 }
+function getSelectOpenerLabel(showOpenerLabelAsText, props) {
+  if (showOpenerLabelAsText) {
+    return getLabel(props);
+  }
+  return props.label;
+}
 
 const VIRTUALIZE_THRESHOLD = 125;
 const StyledSpan$1 = wonderBlocksCore.addStyle("span");
@@ -1898,7 +1904,7 @@ const _generateStyles = (light, placeholder, error) => {
   return stateStyles[styleKey];
 };
 
-const _excluded$1 = ["children", "error", "id", "light", "opener", "placeholder", "selectedValue", "testId", "alignment", "autoFocus", "dropdownStyle", "enableTypeAhead", "isFilterable", "labels", "onChange", "onToggle", "opened", "style", "className", "aria-invalid", "aria-required"];
+const _excluded$1 = ["children", "error", "id", "light", "opener", "placeholder", "selectedValue", "testId", "alignment", "autoFocus", "dropdownStyle", "enableTypeAhead", "isFilterable", "labels", "onChange", "onToggle", "opened", "style", "className", "aria-invalid", "aria-required", "showOpenerLabelAsText"];
 class SingleSelect extends React__namespace.Component {
   constructor(props) {
     super(props);
@@ -2005,12 +2011,13 @@ class SingleSelect extends React__namespace.Component {
         opener,
         placeholder,
         selectedValue,
-        testId
+        testId,
+        showOpenerLabelAsText
       } = _this$props,
       sharedProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$1);
     const items = React__namespace.Children.toArray(children);
     const selectedItem = items.find(option => option.props.value === selectedValue);
-    const menuText = selectedItem ? getLabel(selectedItem.props) : placeholder;
+    const menuText = selectedItem ? getSelectOpenerLabel(showOpenerLabelAsText, selectedItem.props) : placeholder;
     const dropdownOpener = React__namespace.createElement(wonderBlocksCore.IDProvider, {
       id: id,
       scope: "single-select-opener"
@@ -2105,7 +2112,8 @@ SingleSelect.defaultProps = {
     filter: defaultLabels.filter,
     noResults: defaultLabels.noResults,
     someResults: defaultLabels.someSelected
-  }
+  },
+  showOpenerLabelAsText: true
 };
 
 const _excluded = ["id", "light", "opener", "testId", "alignment", "dropdownStyle", "implicitAllEnabled", "isFilterable", "labels", "onChange", "onToggle", "opened", "selectedValues", "shortcuts", "style", "className", "aria-invalid", "aria-required"];
@@ -2206,7 +2214,8 @@ class MultiSelect extends React__namespace.Component {
   getMenuText(children) {
     const {
       implicitAllEnabled,
-      selectedValues
+      selectedValues,
+      showOpenerLabelAsText
     } = this.props;
     const {
       noneSelected,
@@ -2221,7 +2230,7 @@ class MultiSelect extends React__namespace.Component {
       case 1:
         const selectedItem = children.find(option => option.props.value === selectedValues[0]);
         if (selectedItem) {
-          const selectedLabel = getLabel(selectedItem == null ? void 0 : selectedItem.props);
+          const selectedLabel = getSelectOpenerLabel(showOpenerLabelAsText, selectedItem == null ? void 0 : selectedItem.props);
           if (selectedLabel) {
             return selectedLabel;
           } else {
@@ -2421,7 +2430,8 @@ MultiSelect.defaultProps = {
   error: false,
   light: false,
   shortcuts: false,
-  selectedValues: []
+  selectedValues: [],
+  showOpenerLabelAsText: true
 };
 
 function updateMultipleSelection(previousSelection, value = "") {

package/dist/util/helpers.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { PropsFor } from "@khanacademy/wonder-blocks-core";
 import OptionItem from "../components/option-item";
 /**
@@ -21,4 +22,9 @@ type OptionItemProps = PropsFor<typeof OptionItem>;
  * Returns a valid label for the given props.
  */
 export declare function getLabel(props: OptionItemProps): string;
+/**
+ * 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 declare function getSelectOpenerLabel(showOpenerLabelAsText: boolean, props: OptionItemProps): string | JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-dropdown",
-  "version": "5.7.0",
+  "version": "5.8.0",
   "design": "v1",
   "description": "Dropdown variants for Wonder Blocks.",
   "main": "dist/index.js",