@khanacademy/wonder-blocks-dropdown 5.6.3 → 5.8.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @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
+
+-   c512e76e: Add `startIcon` prop to Combobox
+
+### Patch Changes
+
+-   Updated dependencies [b5cad0b1]
+    -   @khanacademy/wonder-blocks-modal@5.1.17
+
 ## 5.6.3
 
 ### Patch Changes

package/dist/components/combobox.d.ts

@@ -1,5 +1,6 @@
-/// <reference types="react" />
+import * as React from "react";
 import { StyleType } from "@khanacademy/wonder-blocks-core";
+import { PhosphorIcon } from "@khanacademy/wonder-blocks-icon";
 import { ComboboxLabels, MaybeValueOrValues, OptionItemComponent } from "../util/types";
 type Props = {
     /**
@@ -89,6 +90,10 @@ type Props = {
      * (combobox).
      */
     autoComplete?: "none" | "list" | undefined;
+    /**
+     * An optional decorative icon to display at the start of the combobox.
+     */
+    startIcon?: React.ReactElement<React.ComponentProps<typeof PhosphorIcon>> | null;
 };
 /**
  * A `Combobox` is an input widget that has an associated `listbox`. This
@@ -102,5 +107,5 @@ type Props = {
  *   Open button (🔽) is pressed.
  * - It is displayed when the combobox receives focus.
  */
-export default function Combobox({ autoComplete, children, disabled, error, id, labels, onChange, onToggle, opened, placeholder, selectionType, testId, value, }: Props): JSX.Element;
+export default function Combobox({ autoComplete, children, disabled, error, id, labels, onChange, onToggle, opened, placeholder, selectionType, startIcon, testId, value, }: Props): JSX.Element;
 export {};

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

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { StyleSheet } from 'aphrodite';
 import { CompactCell, DetailCell } from '@khanacademy/wonder-blocks-cell';
 import * as tokens from '@khanacademy/wonder-blocks-tokens';
-import { spacing, color, mix, fade, font, border } from '@khanacademy/wonder-blocks-tokens';
+import { spacing, color, mix, fade, font, border, semanticColor } from '@khanacademy/wonder-blocks-tokens';
 import { LabelMedium, LabelSmall, LabelLarge } from '@khanacademy/wonder-blocks-typography';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
 import { View, addStyle, IDProvider, useUniqueIdWithMock } from '@khanacademy/wonder-blocks-core';
@@ -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 = "") {
@@ -2845,6 +2855,7 @@ function Combobox({
   opened,
   placeholder,
   selectionType = "single",
+  startIcon,
   testId,
   value = ""
 }) {
@@ -2988,6 +2999,20 @@ function Combobox({
     }
     return [labelFromSelected];
   }, [children, labelFromSelected, selected]);
+  const maybeRenderStartIcon = () => {
+    var _startIcon$props$colo;
+    if (!startIcon) {
+      return null;
+    }
+    const startIconElement = React.cloneElement(startIcon, _extends({
+      size: "small"
+    }, startIcon.props, {
+      color: disabled ? color.offBlack32 : (_startIcon$props$colo = startIcon.props.color) != null ? _startIcon$props$colo : semanticColor.icon.primary
+    }));
+    return React.createElement(View, {
+      style: styles.iconWrapper
+    }, startIconElement);
+  };
   const pillIdPrefix = id ? `${id}-pill-` : ids.get("pill");
   const currentActiveDescendant = !openState ? undefined : focusedIndex >= 0 ? (_renderList$focusedIn = renderList[focusedIndex]) == null ? void 0 : (_renderList$focusedIn2 = _renderList$focusedIn.props) == null ? void 0 : _renderList$focusedIn2.id : pillIdPrefix + focusedMultiSelectIndex;
   const controlledWidget = !openState ? undefined : focusedIndex >= 0 ? uniqueId : pillIdPrefix;
@@ -3016,7 +3041,7 @@ function Combobox({
     disabled: disabled,
     testId: testId,
     removeSelectedLabel: labels.removeSelected
-  }), React.createElement(TextField, {
+  }), maybeRenderStartIcon(), React.createElement(TextField, {
     id: ids.get("input"),
     testId: testId,
     style: styles.combobox,
@@ -3154,6 +3179,10 @@ const styles = StyleSheet.create({
   },
   clearButton: {
     right: spacing.xLarge_32 + spacing.xSmall_8
+  },
+  iconWrapper: {
+    padding: spacing.xxxSmall_4,
+    minWidth: "auto"
   }
 });
 

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 = "") {
@@ -2881,6 +2891,7 @@ function Combobox({
   opened,
   placeholder,
   selectionType = "single",
+  startIcon,
   testId,
   value = ""
 }) {
@@ -3024,6 +3035,20 @@ function Combobox({
     }
     return [labelFromSelected];
   }, [children, labelFromSelected, selected]);
+  const maybeRenderStartIcon = () => {
+    var _startIcon$props$colo;
+    if (!startIcon) {
+      return null;
+    }
+    const startIconElement = React__namespace.cloneElement(startIcon, _extends__default["default"]({
+      size: "small"
+    }, startIcon.props, {
+      color: disabled ? tokens.color.offBlack32 : (_startIcon$props$colo = startIcon.props.color) != null ? _startIcon$props$colo : tokens.semanticColor.icon.primary
+    }));
+    return React__namespace.createElement(wonderBlocksCore.View, {
+      style: styles.iconWrapper
+    }, startIconElement);
+  };
   const pillIdPrefix = id ? `${id}-pill-` : ids.get("pill");
   const currentActiveDescendant = !openState ? undefined : focusedIndex >= 0 ? (_renderList$focusedIn = renderList[focusedIndex]) == null ? void 0 : (_renderList$focusedIn2 = _renderList$focusedIn.props) == null ? void 0 : _renderList$focusedIn2.id : pillIdPrefix + focusedMultiSelectIndex;
   const controlledWidget = !openState ? undefined : focusedIndex >= 0 ? uniqueId : pillIdPrefix;
@@ -3052,7 +3077,7 @@ function Combobox({
     disabled: disabled,
     testId: testId,
     removeSelectedLabel: labels.removeSelected
-  }), React__namespace.createElement(wonderBlocksForm.TextField, {
+  }), maybeRenderStartIcon(), React__namespace.createElement(wonderBlocksForm.TextField, {
     id: ids.get("input"),
     testId: testId,
     style: styles.combobox,
@@ -3190,6 +3215,10 @@ const styles = aphrodite.StyleSheet.create({
   },
   clearButton: {
     right: tokens.spacing.xLarge_32 + tokens.spacing.xSmall_8
+  },
+  iconWrapper: {
+    padding: tokens.spacing.xxxSmall_4,
+    minWidth: "auto"
   }
 });
 

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.6.3",
+  "version": "5.8.0",
   "design": "v1",
   "description": "Dropdown variants for Wonder Blocks.",
   "main": "dist/index.js",
@@ -21,7 +21,7 @@
     "@khanacademy/wonder-blocks-core": "^7.0.1",
     "@khanacademy/wonder-blocks-icon": "^4.2.0",
     "@khanacademy/wonder-blocks-layout": "^2.2.2",
-    "@khanacademy/wonder-blocks-modal": "^5.1.16",
+    "@khanacademy/wonder-blocks-modal": "^5.1.17",
     "@khanacademy/wonder-blocks-pill": "^2.5.3",
     "@khanacademy/wonder-blocks-search-field": "^2.3.6",
     "@khanacademy/wonder-blocks-timing": "^5.0.2",