@khanacademy/wonder-blocks-dropdown 5.2.1 → 5.3.1

package/dist/index.js

@@ -118,13 +118,13 @@ class ActionItem extends React__namespace.Component {
       style,
       testId
     } = this.props;
-    const defaultStyle = [styles$8.wrapper, style];
+    const defaultStyle = [styles$9.wrapper, style];
     const labelComponent = typeof label === "string" ? React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
       lang: lang,
-      style: styles$8.label
+      style: styles$9.label
     }, label) : React__namespace.cloneElement(label, _extends({
       lang,
-      style: styles$8.label
+      style: styles$9.label
     }, label.props));
     return React__namespace.createElement(wonderBlocksCell.CompactCell, {
       disabled: disabled,
@@ -132,7 +132,7 @@ class ActionItem extends React__namespace.Component {
       rootStyle: defaultStyle,
       leftAccessory: leftAccessory,
       rightAccessory: rightAccessory,
-      style: [styles$8.shared, indent && styles$8.indent],
+      style: [styles$9.shared, indent && styles$9.indent],
       role: role,
       testId: testId,
       title: labelComponent,
@@ -149,7 +149,7 @@ ActionItem.defaultProps = {
   role: "menuitem"
 };
 ActionItem.__IS_ACTION_ITEM__ = true;
-const styles$8 = aphrodite.StyleSheet.create({
+const styles$9 = aphrodite.StyleSheet.create({
   wrapper: {
     minHeight: DROPDOWN_ITEM_HEIGHT,
     touchAction: "manipulation",
@@ -206,10 +206,10 @@ const Check = function Check(props) {
   return React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
     icon: checkIcon__default["default"],
     size: "small",
-    style: [styles$7.bounds, !selected && styles$7.hide]
+    style: [styles$8.bounds, !selected && styles$8.hide]
   });
 };
-const styles$7 = aphrodite.StyleSheet.create({
+const styles$8 = aphrodite.StyleSheet.create({
   bounds: {
     alignSelf: "center",
     height: tokens.spacing.medium_16,
@@ -233,7 +233,7 @@ const Checkbox = function Checkbox(props) {
   } = props;
   return React__namespace.createElement(wonderBlocksCore.View, {
     className: "checkbox",
-    style: [styles$6.checkbox, selected && !disabled && styles$6.noBorder, disabled && styles$6.disabledCheckbox]
+    style: [styles$7.checkbox, selected && !disabled && styles$7.noBorder, disabled && styles$7.disabledCheckbox]
   }, selected && React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
     icon: checkIcon__default["default"],
     size: "small",
@@ -242,10 +242,10 @@ const Checkbox = function Checkbox(props) {
       width: tokens.spacing.small_12,
       height: tokens.spacing.small_12,
       margin: tokens.spacing.xxxxSmall_2
-    }, disabled && selected && styles$6.disabledCheckFormatting]
+    }, disabled && selected && styles$7.disabledCheckFormatting]
   }));
 };
-const styles$6 = aphrodite.StyleSheet.create({
+const styles$7 = aphrodite.StyleSheet.create({
   checkbox: {
     alignSelf: "center",
     minHeight: tokens.spacing.medium_16,
@@ -270,7 +270,8 @@ const styles$6 = aphrodite.StyleSheet.create({
   }
 });
 
-const _excluded$5 = ["disabled", "label", "role", "selected", "testId", "style", "leftAccessory", "horizontalRule", "rightAccessory", "subtitle1", "subtitle2", "value", "onClick", "onToggle", "variant"];
+const _excluded$5 = ["disabled", "label", "selected", "testId", "leftAccessory", "horizontalRule", "parentComponent", "rightAccessory", "style", "subtitle1", "subtitle2", "value", "onClick", "onToggle", "variant", "role"];
+const StyledListItem = wonderBlocksCore.addStyle("li");
 class OptionItem extends React__namespace.Component {
   constructor(...args) {
     super(...args);
@@ -296,31 +297,32 @@ class OptionItem extends React__namespace.Component {
       return Checkbox;
     }
   }
-  render() {
+  renderCell() {
     const _this$props = this.props,
       {
         disabled,
         label,
-        role,
         selected,
         testId,
-        style,
         leftAccessory,
         horizontalRule,
+        parentComponent,
         rightAccessory,
+        style,
         subtitle1,
-        subtitle2
+        subtitle2,
+        role
       } = _this$props,
       sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$5);
     const CheckComponent = this.getCheckComponent();
-    const defaultStyle = [styles$5.item, style];
+    const defaultStyle = [styles$6.item, style];
     return React__namespace.createElement(wonderBlocksCell.DetailCell, _extends({
       disabled: disabled,
       horizontalRule: horizontalRule,
-      rootStyle: defaultStyle,
-      style: styles$5.itemContainer,
-      "aria-selected": selected ? "true" : "false",
-      role: role,
+      rootStyle: parentComponent === "listbox" ? styles$6.listboxItem : defaultStyle,
+      style: styles$6.itemContainer,
+      "aria-selected": parentComponent !== "listbox" && selected ? "true" : "false",
+      role: parentComponent !== "listbox" ? role : undefined,
       testId: testId,
       leftAccessory: React__namespace.createElement(React__namespace.Fragment, null, leftAccessory ? React__namespace.createElement(wonderBlocksCore.View, {
         style: {
@@ -340,17 +342,42 @@ class OptionItem extends React__namespace.Component {
         className: "subtitle"
       }, subtitle1) : undefined,
       title: React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-        style: styles$5.label
+        style: styles$6.label
       }, label),
       subtitle2: subtitle2 ? React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
         className: "subtitle"
       }, subtitle2) : undefined,
-      onClick: this.handleClick
+      onClick: parentComponent !== "listbox" ? this.handleClick : undefined
     }, sharedProps));
   }
+  render() {
+    const {
+      disabled,
+      focused,
+      parentComponent,
+      role,
+      selected
+    } = this.props;
+    if (parentComponent === "listbox") {
+      return React__namespace.createElement(StyledListItem, {
+        onMouseDown: e => {
+          e.preventDefault();
+        },
+        onClick: this.handleClick,
+        style: [styles$6.reset, styles$6.item, focused && styles$6.itemFocused, disabled && styles$6.itemDisabled],
+        role: role,
+        "aria-selected": selected ? "true" : "false",
+        "aria-disabled": disabled ? "true" : "false",
+        id: this.props.id,
+        tabIndex: -1
+      }, this.renderCell());
+    }
+    return this.renderCell();
+  }
 }
 OptionItem.defaultProps = {
   disabled: false,
+  focused: false,
   horizontalRule: "none",
   onToggle: () => void 0,
   role: "option",
@@ -362,14 +389,33 @@ const {
   white,
   offBlack
 } = tokens.color;
-const styles$5 = aphrodite.StyleSheet.create({
+const focusedStyle = {
+  borderRadius: tokens.spacing.xxxSmall_4,
+  outline: `${tokens.spacing.xxxxSmall_2}px solid ${tokens.color.blue}`,
+  outlineOffset: -tokens.spacing.xxxxSmall_2
+};
+const styles$6 = aphrodite.StyleSheet.create({
+  reset: {
+    margin: 0,
+    padding: 0,
+    border: 0,
+    background: "none",
+    outline: "none",
+    fontSize: "100%",
+    verticalAlign: "baseline",
+    textAlign: "left",
+    textDecoration: "none",
+    listStyle: "none",
+    cursor: "pointer"
+  },
+  listboxItem: {
+    backgroundColor: "transparent",
+    color: "inherit"
+  },
   item: {
+    backgroundColor: tokens.color.white,
     minHeight: "unset",
-    ":focus": {
-      borderRadius: tokens.spacing.xxxSmall_4,
-      outline: `${tokens.spacing.xxxxSmall_2}px solid ${tokens.color.blue}`,
-      outlineOffset: -tokens.spacing.xxxxSmall_2
-    },
+    ":focus": focusedStyle,
     ":focus-visible": {
       overflow: "visible"
     },
@@ -377,6 +423,16 @@ const styles$5 = aphrodite.StyleSheet.create({
       color: white,
       background: blue
     },
+    [":active[aria-selected=false]"]: {},
+    [":hover[aria-disabled=true]"]: {
+      cursor: "not-allowed"
+    },
+    [":is([aria-disabled=true])"]: {
+      color: tokens.color.offBlack32,
+      ":focus-visible": {
+        outline: "none"
+      }
+    },
     ["@media not (hover: hover)"]: {
       [":hover[aria-disabled=false]"]: {
         color: white,
@@ -412,6 +468,10 @@ const styles$5 = aphrodite.StyleSheet.create({
       color: tokens.mix(tokens.color.fadedBlue16, white)
     }
   },
+  itemFocused: focusedStyle,
+  itemDisabled: {
+    outlineColor: tokens.color.offBlack32
+  },
   itemContainer: {
     minHeight: "unset",
     padding: `${tokens.spacing.xSmall_8 + tokens.spacing.xxxxSmall_2}px ${tokens.spacing.xSmall_8}px`,
@@ -435,13 +495,13 @@ class SeparatorItem extends React__namespace.Component {
   }
   render() {
     return React__namespace.createElement(wonderBlocksCore.View, {
-      style: [styles$4.separator, this.props.style],
+      style: [styles$5.separator, this.props.style],
       "aria-hidden": "true"
     });
   }
 }
 SeparatorItem.__IS_SEPARATOR_ITEM__ = true;
-const styles$4 = aphrodite.StyleSheet.create({
+const styles$5 = aphrodite.StyleSheet.create({
   separator: {
     boxShadow: `0 -1px ${tokens.color.offBlack16}`,
     height: 1,
@@ -1107,7 +1167,7 @@ class DropdownCore extends React__namespace.Component {
     const numResults = items.length;
     if (numResults === 0) {
       return React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-        style: styles$3.noResult,
+        style: styles$4.noResult,
         testId: "dropdown-core-no-results"
       }, noResults);
     }
@@ -1179,7 +1239,7 @@ class DropdownCore extends React__namespace.Component {
       onChange: this.handleSearchTextChanged,
       placeholder: labels.filter,
       ref: this.searchFieldRef,
-      style: styles$3.searchInputStyle,
+      style: styles$4.searchInputStyle,
       value: searchText || ""
     });
   }
@@ -1197,11 +1257,11 @@ class DropdownCore extends React__namespace.Component {
     const minDropdownWidth = openerStyle ? openerStyle.getPropertyValue("width") : 0;
     return React__namespace.createElement(wonderBlocksCore.View, {
       onMouseUp: this.handleDropdownMouseUp,
-      style: [styles$3.dropdown, light && styles$3.light, isReferenceHidden && styles$3.hidden, dropdownStyle],
+      style: [styles$4.dropdown, light && styles$4.light, isReferenceHidden && styles$4.hidden, dropdownStyle],
       testId: "dropdown-core-container"
     }, isFilterable && this.renderSearchField(), React__namespace.createElement(wonderBlocksCore.View, {
       role: role,
-      style: [styles$3.listboxOrMenu, {
+      style: [styles$4.listboxOrMenu, {
         minWidth: minDropdownWidth
       }],
       "aria-invalid": role === "listbox" ? ariaInvalid : undefined,
@@ -1235,7 +1295,7 @@ class DropdownCore extends React__namespace.Component {
       "aria-live": "polite",
       "aria-atomic": "true",
       "aria-relevant": "additions text",
-      style: styles$3.srOnly,
+      style: styles$4.srOnly,
       "data-testid": "dropdown-live-region"
     }, open && labels.someResults(totalItems));
   }
@@ -1249,7 +1309,7 @@ class DropdownCore extends React__namespace.Component {
     return React__namespace.createElement(wonderBlocksCore.View, {
       onKeyDown: this.handleKeyDown,
       onKeyUp: this.handleKeyUp,
-      style: [styles$3.menuWrapper, style],
+      style: [styles$4.menuWrapper, style],
       className: className
     }, this.renderLiveRegion(), opener, open && this.renderDropdown());
   }
@@ -1267,7 +1327,7 @@ DropdownCore.defaultProps = {
   light: false,
   selectionType: "single"
 };
-const styles$3 = aphrodite.StyleSheet.create({
+const styles$4 = aphrodite.StyleSheet.create({
   menuWrapper: {
     width: "fit-content"
   },
@@ -1400,11 +1460,11 @@ const sharedStyles = aphrodite.StyleSheet.create({
     position: "absolute"
   }
 });
-const styles$2 = {};
+const styles$3 = {};
 const _generateStyles$1 = localColor => {
   const buttonType = localColor;
-  if (styles$2[buttonType]) {
-    return styles$2[buttonType];
+  if (styles$3[buttonType]) {
+    return styles$3[buttonType];
   }
   const {
     offBlack32
@@ -1436,8 +1496,8 @@ const _generateStyles$1 = localColor => {
       cursor: "default"
     }
   };
-  styles$2[buttonType] = aphrodite.StyleSheet.create(newStyles);
-  return styles$2[buttonType];
+  styles$3[buttonType] = aphrodite.StyleSheet.create(newStyles);
+  return styles$3[buttonType];
 };
 
 const _excluded$3 = ["text", "opened"];
@@ -1573,7 +1633,7 @@ class ActionMenu extends React__namespace.Component {
       items: items,
       openerElement: this.openerElement,
       onOpenChanged: this.handleOpenChanged,
-      dropdownStyle: [styles$1.menuTopSpace, dropdownStyle]
+      dropdownStyle: [styles$2.menuTopSpace, dropdownStyle]
     });
   }
 }
@@ -1581,7 +1641,7 @@ ActionMenu.defaultProps = {
   alignment: "left",
   disabled: false
 };
-const styles$1 = aphrodite.StyleSheet.create({
+const styles$2 = aphrodite.StyleSheet.create({
   caret: {
     marginLeft: 4
   },
@@ -1633,7 +1693,7 @@ class SelectOpener extends React__namespace.Component {
         pressed
       } = state;
       const iconColor = light ? disabled || pressed ? "currentColor" : tokens__namespace.color.white : disabled ? tokens__namespace.color.offBlack32 : tokens__namespace.color.offBlack64;
-      const style = [styles.shared, stateStyles.default, disabled && stateStyles.disabled, !disabled && (pressed ? stateStyles.active : (hovered || focused) && stateStyles.focus)];
+      const style = [styles$1.shared, stateStyles.default, disabled && stateStyles.disabled, !disabled && (pressed ? stateStyles.active : (hovered || focused) && stateStyles.focus)];
       return React__namespace.createElement(StyledButton, _extends({}, sharedProps, {
         "aria-expanded": open ? "true" : "false",
         "aria-haspopup": "listbox",
@@ -1643,12 +1703,12 @@ class SelectOpener extends React__namespace.Component {
         style: style,
         type: "button"
       }, childrenProps), React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-        style: styles.text
+        style: styles$1.text
       }, children || "\u00A0"), React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
         icon: caretDownIcon__default["default"],
         color: iconColor,
         size: "small",
-        style: styles.caret,
+        style: styles$1.caret,
         "aria-hidden": "true"
       }));
     });
@@ -1663,7 +1723,7 @@ SelectOpener.defaultProps = {
   light: false,
   isPlaceholder: false
 };
-const styles = aphrodite.StyleSheet.create({
+const styles$1 = aphrodite.StyleSheet.create({
   shared: {
     position: "relative",
     display: "inline-flex",
@@ -2260,8 +2320,212 @@ MultiSelect.defaultProps = {
   selectedValues: []
 };
 
+function updateMultipleSelection(previousSelection, value = "") {
+  if (!previousSelection) {
+    return [value];
+  }
+  return previousSelection.includes(value) ? previousSelection.filter(item => item !== value) : [...previousSelection, value];
+}
+
+function useListbox({
+  children: options,
+  disabled,
+  id,
+  selectionType = "single",
+  value
+}) {
+  const selectedValueIndex = React__namespace.useMemo(() => {
+    const firstValue = Array.isArray(value) ? value[0] : value;
+    if (!firstValue || firstValue === "") {
+      return 0;
+    }
+    return options.findIndex(item => item.props.value === firstValue);
+  }, [options, value]);
+  const [focusedIndex, setFocusedIndex] = React__namespace.useState(selectedValueIndex);
+  const [isListboxFocused, setIsListboxFocused] = React__namespace.useState(false);
+  const [selected, setSelected] = React__namespace.useState(value);
+  const focusItem = index => {
+    setFocusedIndex(index);
+  };
+  const focusPreviousItem = React__namespace.useCallback(() => {
+    if (focusedIndex === 0) {
+      focusItem(options.length - 1);
+    } else {
+      focusItem(focusedIndex - 1);
+    }
+  }, [options, focusedIndex]);
+  const focusNextItem = React__namespace.useCallback(() => {
+    if (focusedIndex === options.length - 1) {
+      focusItem(0);
+    } else {
+      focusItem(focusedIndex + 1);
+    }
+  }, [options, focusedIndex]);
+  const selectOption = React__namespace.useCallback(index => {
+    const optionItem = options[index];
+    if (optionItem.props.disabled) {
+      return;
+    }
+    if (selectionType === "single") {
+      setSelected(optionItem.props.value);
+    } else {
+      setSelected(prevSelected => {
+        const newSelectedValue = updateMultipleSelection(prevSelected, optionItem.props.value);
+        return newSelectedValue;
+      });
+    }
+  }, [options, selectionType]);
+  const handleKeyDown = React__namespace.useCallback(event => {
+    const {
+      key
+    } = event;
+    switch (key) {
+      case "ArrowUp":
+        event.preventDefault();
+        focusPreviousItem();
+        return;
+      case "ArrowDown":
+        event.preventDefault();
+        focusNextItem();
+        return;
+      case "Home":
+        event.preventDefault();
+        focusItem(0);
+        return;
+      case "End":
+        event.preventDefault();
+        focusItem(options.length - 1);
+        return;
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        selectOption(focusedIndex);
+        return;
+    }
+  }, [focusNextItem, focusPreviousItem, focusedIndex, options, selectOption]);
+  const handleKeyUp = React__namespace.useCallback(event => {
+    switch (event.key) {
+      case " ":
+        event.preventDefault();
+        return;
+    }
+  }, []);
+  const handleFocus = React__namespace.useCallback(() => {
+    if (!disabled) {
+      setIsListboxFocused(true);
+    }
+  }, [disabled]);
+  const handleBlur = React__namespace.useCallback(() => {
+    if (!disabled) {
+      setIsListboxFocused(false);
+    }
+  }, [disabled]);
+  const handleClick = React__namespace.useCallback(value => {
+    const index = options.findIndex(item => item.props.value === value);
+    const isOptionDisabled = options[index].props.disabled;
+    if (disabled || isOptionDisabled) {
+      return;
+    }
+    focusItem(index);
+    selectOption(index);
+  }, [disabled, options, selectOption]);
+  const renderList = React__namespace.useMemo(() => {
+    return options.map((component, index) => {
+      const isSelected = (selected == null ? void 0 : selected.includes(component.props.value)) || false;
+      const optionId = id ? `${id}-option-${index}` : `option-${index}`;
+      return React__namespace.cloneElement(component, {
+        key: index,
+        focused: isListboxFocused && index === focusedIndex,
+        disabled: component.props.disabled || disabled || false,
+        selected: isSelected,
+        variant: selectionType === "single" ? "check" : "checkbox",
+        parentComponent: "listbox",
+        id: optionId,
+        onToggle: () => {
+          handleClick(component.props.value);
+        },
+        role: "option"
+      });
+    });
+  }, [options, selected, id, isListboxFocused, focusedIndex, disabled, selectionType, handleClick]);
+  return {
+    isListboxFocused,
+    focusedIndex,
+    renderList,
+    selected,
+    handleKeyDown,
+    handleKeyUp,
+    handleFocus,
+    handleBlur
+  };
+}
+
+function Listbox(props) {
+  const {
+    children,
+    disabled,
+    id,
+    onChange,
+    selectionType = "single",
+    style,
+    tabIndex = 0,
+    testId,
+    value,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby
+  } = props;
+  const ids = wonderBlocksCore.useUniqueIdWithMock("listbox");
+  const uniqueId = id != null ? id : ids.get("id");
+  const {
+    focusedIndex,
+    isListboxFocused,
+    renderList,
+    selected,
+    handleKeyDown,
+    handleKeyUp,
+    handleFocus,
+    handleBlur
+  } = useListbox({
+    children,
+    disabled,
+    id: uniqueId,
+    selectionType,
+    value
+  });
+  React__namespace.useEffect(() => {
+    if (selected && selected !== value) {
+      onChange == null ? void 0 : onChange(selected);
+    }
+  }, [onChange, selected, value]);
+  return React__namespace.createElement(wonderBlocksCore.View, {
+    role: "listbox",
+    "aria-disabled": disabled,
+    id: uniqueId,
+    style: [styles.listbox, style, disabled && styles.disabled],
+    tabIndex: tabIndex,
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    testId: testId,
+    "aria-activedescendant": isListboxFocused ? renderList[focusedIndex].props.id : undefined,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-multiselectable": selectionType === "multiple"
+  }, renderList);
+}
+const styles = aphrodite.StyleSheet.create({
+  listbox: {
+    outline: "none"
+  },
+  disabled: {
+    color: tokens.color.offBlack64
+  }
+});
+
 exports.ActionItem = ActionItem;
 exports.ActionMenu = ActionMenu;
+exports.Listbox = Listbox;
 exports.MultiSelect = MultiSelect;
 exports.OptionItem = OptionItem;
 exports.SeparatorItem = SeparatorItem;

package/dist/util/selection.d.ts

@@ -0,0 +1,2 @@
+import { MaybeString } from "./types";
+export declare function updateMultipleSelection(previousSelection: Array<MaybeString> | null | undefined, value?: string): MaybeString[];

package/dist/util/types.d.ts

@@ -26,4 +26,10 @@ export type OpenerProps = ClickableState & {
     text: OptionLabel;
     opened: boolean;
 };
-export type OptionItemComponentArray = React.ReactElement<React.ComponentProps<typeof OptionItem>>[];
+export type OptionItemComponent = React.ReactElement<PropsFor<typeof OptionItem>>;
+export type OptionItemComponentArray = OptionItemComponent[];
+/**
+ * Allows optional values to be passed to the listbox.
+ */
+export type MaybeString = string | null | undefined;
+export type MaybeValueOrValues = MaybeString | Array<MaybeString>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-dropdown",
-  "version": "5.2.1",
+  "version": "5.3.1",
   "design": "v1",
   "description": "Dropdown variants for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,16 +16,16 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-cell": "^3.3.5",
-    "@khanacademy/wonder-blocks-clickable": "^4.2.1",
-    "@khanacademy/wonder-blocks-core": "^6.4.0",
-    "@khanacademy/wonder-blocks-icon": "^4.1.0",
-    "@khanacademy/wonder-blocks-layout": "^2.0.32",
-    "@khanacademy/wonder-blocks-modal": "^5.1.1",
-    "@khanacademy/wonder-blocks-search-field": "^2.2.10",
-    "@khanacademy/wonder-blocks-timing": "^4.0.2",
+    "@khanacademy/wonder-blocks-cell": "^3.3.6",
+    "@khanacademy/wonder-blocks-clickable": "^4.2.2",
+    "@khanacademy/wonder-blocks-core": "^6.4.1",
+    "@khanacademy/wonder-blocks-icon": "^4.1.1",
+    "@khanacademy/wonder-blocks-layout": "^2.0.33",
+    "@khanacademy/wonder-blocks-modal": "^5.1.3",
+    "@khanacademy/wonder-blocks-search-field": "^2.2.11",
+    "@khanacademy/wonder-blocks-timing": "^5.0.0",
     "@khanacademy/wonder-blocks-tokens": "^1.3.0",
-    "@khanacademy/wonder-blocks-typography": "^2.1.11"
+    "@khanacademy/wonder-blocks-typography": "^2.1.12"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",
@@ -39,7 +39,7 @@
     "react-window": "^1.8.5"
   },
   "devDependencies": {
-    "@khanacademy/wonder-blocks-button": "^6.3.1",
+    "@khanacademy/wonder-blocks-button": "^6.3.2",
     "@khanacademy/wb-dev-build-settings": "^1.0.0"
   }
 }