@khanacademy/wonder-blocks-dropdown 5.6.3 → 5.7.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 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/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';
@@ -2845,6 +2845,7 @@ function Combobox({
   opened,
   placeholder,
   selectionType = "single",
+  startIcon,
   testId,
   value = ""
 }) {
@@ -2988,6 +2989,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 +3031,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 +3169,10 @@ const styles = StyleSheet.create({
   },
   clearButton: {
     right: spacing.xLarge_32 + spacing.xSmall_8
+  },
+  iconWrapper: {
+    padding: spacing.xxxSmall_4,
+    minWidth: "auto"
   }
 });
 

package/dist/index.js

@@ -2881,6 +2881,7 @@ function Combobox({
   opened,
   placeholder,
   selectionType = "single",
+  startIcon,
   testId,
   value = ""
 }) {
@@ -3024,6 +3025,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 +3067,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 +3205,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-dropdown",
-  "version": "5.6.3",
+  "version": "5.7.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",