@khanacademy/wonder-blocks-dropdown 5.3.4 → 5.3.6

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 5.3.6
+
+### Patch Changes
+
+-   cc2d8e86: - Update styling for variants of `SingleSelect` and `MultiSelect`. This addresses some styling edge cases around error/disabled states, focus/hover/active states, and light mode. The `not-allowed` cursor is also applied to the disabled state.
+    -   Styling in the `SelectOpener` (`SingleSelect` and `MultiSelect`) is now applied using css pseudo-classes (`:focus-visible`, `:hover`, `:active`) instead of applying styles using js.
+    -   Replaced internal use of `ClickableBehaviour` in `SelectOpener` for normalized keyboard interaction behaviour across browsers.
+-   13f49f85: Allow `SingleSelect` and `MultiSelect` to be focusable when disabled. These components now have `aria-disabled` when the `disabled` prop is `true`. This makes it so screenreaders will continue to communicate that the component is disabled, while allowing focus on the disabled component. Focus styling is also added to the disabled state.
+-   Updated dependencies [47a758b6]
+    -   @khanacademy/wonder-blocks-layout@2.1.0
+    -   @khanacademy/wonder-blocks-cell@3.3.7
+    -   @khanacademy/wonder-blocks-modal@5.1.4
+    -   @khanacademy/wonder-blocks-search-field@2.2.15
+
+## 5.3.5
+
+### Patch Changes
+
+-   Updated dependencies [01fce89e]
+    -   @khanacademy/wonder-blocks-search-field@2.2.14
+
 ## 5.3.4
 
 ### Patch Changes

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

@@ -49,13 +49,25 @@ type DefaultProps = {
     light: SelectOpenerProps["light"];
     isPlaceholder: SelectOpenerProps["isPlaceholder"];
 };
+type SelectOpenerState = {
+    /**
+     * We only keep track of the pressed state to apply styling for when the select
+     * opener is pressed using Enter/Space. Other states (active, hover, focus)
+     * are not tracked because we use css pseudo-classes to handle those styles
+     * instead. Note: `:active` styling is only applied on clicks across browsers,
+     * and not on keyboard interaction.
+     */
+    pressed: boolean;
+};
 /**
  * An opener that opens select boxes.
  */
-export default class SelectOpener extends React.Component<SelectOpenerProps> {
+export default class SelectOpener extends React.Component<SelectOpenerProps, SelectOpenerState> {
     static defaultProps: DefaultProps;
+    constructor(props: SelectOpenerProps);
     handleClick: (e: React.SyntheticEvent) => void;
-    renderClickableBehavior(router: any): React.ReactNode;
+    handleKeyDown: (e: React.KeyboardEvent) => void;
+    handleKeyUp: (e: React.KeyboardEvent) => void;
     render(): React.ReactNode;
 }
 export {};

package/dist/es/index.js

@@ -9,7 +9,7 @@ import { Strut } from '@khanacademy/wonder-blocks-layout';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import checkIcon from '@phosphor-icons/core/bold/check-bold.svg';
 import * as ReactDOM from 'react-dom';
-import { ClickableBehavior, getClickableBehavior } from '@khanacademy/wonder-blocks-clickable';
+import { ClickableBehavior } from '@khanacademy/wonder-blocks-clickable';
 import SearchField from '@khanacademy/wonder-blocks-search-field';
 import { withActionScheduler } from '@khanacademy/wonder-blocks-timing';
 import { VariableSizeList } from 'react-window';
@@ -17,7 +17,6 @@ import { Popper } from 'react-popper';
 import { maybeGetPortalMountedModalHostElement } from '@khanacademy/wonder-blocks-modal';
 import { detectOverflow } from '@popperjs/core';
 import caretDownIcon from '@phosphor-icons/core/bold/caret-down-bold.svg';
-import { __RouterContext } from 'react-router';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -1630,16 +1629,37 @@ const styles$2 = StyleSheet.create({
 const _excluded$2 = ["children", "disabled", "error", "id", "isPlaceholder", "light", "open", "testId", "onOpenChanged"];
 const StyledButton = addStyle("button");
 class SelectOpener extends React.Component {
-  constructor(...args) {
-    super(...args);
+  constructor(props) {
+    super(props);
     this.handleClick = e => {
       const {
         open
       } = this.props;
       this.props.onOpenChanged(!open);
     };
+    this.handleKeyDown = e => {
+      const keyCode = e.key;
+      if (keyCode === "Enter" || keyCode === " ") {
+        this.setState({
+          pressed: true
+        });
+        e.preventDefault();
+      }
+    };
+    this.handleKeyUp = e => {
+      const keyCode = e.key;
+      if (keyCode === "Enter" || keyCode === " ") {
+        this.setState({
+          pressed: false
+        });
+        this.handleClick(e);
+      }
+    };
+    this.state = {
+      pressed: false
+    };
   }
-  renderClickableBehavior(router) {
+  render() {
     const _this$props = this.props,
       {
         children,
@@ -1652,40 +1672,29 @@ class SelectOpener extends React.Component {
         testId
       } = _this$props,
       sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$2);
-    const ClickableBehavior = getClickableBehavior(router);
-    return React.createElement(ClickableBehavior, {
-      disabled: disabled,
-      onClick: this.handleClick
-    }, (state, childrenProps) => {
-      const stateStyles = _generateStyles(light, isPlaceholder, error);
-      const {
-        hovered,
-        focused,
-        pressed
-      } = state;
-      const iconColor = light ? disabled || pressed ? "currentColor" : tokens.color.white : disabled ? tokens.color.offBlack32 : tokens.color.offBlack64;
-      const style = [styles$1.shared, stateStyles.default, disabled && stateStyles.disabled, !disabled && (pressed ? stateStyles.active : (hovered || focused) && stateStyles.focus)];
-      return React.createElement(StyledButton, _extends({}, sharedProps, {
-        "aria-expanded": open ? "true" : "false",
-        "aria-haspopup": "listbox",
-        "data-testid": testId,
-        disabled: disabled,
-        id: id,
-        style: style,
-        type: "button"
-      }, childrenProps), React.createElement(LabelMedium, {
-        style: styles$1.text
-      }, children || "\u00A0"), React.createElement(PhosphorIcon, {
-        icon: caretDownIcon,
-        color: iconColor,
-        size: "small",
-        style: styles$1.caret,
-        "aria-hidden": "true"
-      }));
-    });
-  }
-  render() {
-    return React.createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
+    const stateStyles = _generateStyles(light, isPlaceholder, error);
+    const iconColor = light ? disabled || error ? "currentColor" : tokens.color.white : disabled ? tokens.color.offBlack32 : tokens.color.offBlack64;
+    const style = [styles$1.shared, stateStyles.default, disabled && stateStyles.disabled, !disabled && this.state.pressed && stateStyles.pressed];
+    return React.createElement(StyledButton, _extends({}, sharedProps, {
+      "aria-disabled": disabled,
+      "aria-expanded": open ? "true" : "false",
+      "aria-haspopup": "listbox",
+      "data-testid": testId,
+      id: id,
+      style: style,
+      type: "button",
+      onClick: !disabled ? this.handleClick : undefined,
+      onKeyDown: !disabled ? this.handleKeyDown : undefined,
+      onKeyUp: !disabled ? this.handleKeyUp : undefined
+    }), React.createElement(LabelMedium, {
+      style: styles$1.text
+    }, children || "\u00A0"), React.createElement(PhosphorIcon, {
+      icon: caretDownIcon,
+      color: iconColor,
+      size: "small",
+      style: styles$1.caret,
+      "aria-hidden": "true"
+    }));
   }
 }
 SelectOpener.defaultProps = {
@@ -1734,61 +1743,91 @@ const _generateStyles = (light, placeholder, error) => {
   }
   let newStyles = {};
   if (light) {
+    const focusHoverStyling = {
+      borderColor: error ? tokens.color.red : tokens.color.white,
+      borderWidth: tokens.spacing.xxxxSmall_2,
+      paddingLeft: adjustedPaddingLeft,
+      paddingRight: adjustedPaddingRight
+    };
+    const activePressedStyling = {
+      paddingLeft: adjustedPaddingLeft,
+      paddingRight: adjustedPaddingRight,
+      borderColor: error ? tokens.color.red : tokens.color.fadedBlue,
+      borderWidth: tokens.border.width.thin,
+      color: error ? tokens.color.offBlack64 : placeholder ? mix(tokens.color.white32, tokens.color.blue) : tokens.color.fadedBlue,
+      backgroundColor: error ? tokens.color.fadedRed : tokens.color.activeBlue
+    };
     newStyles = {
       default: {
         background: error ? tokens.color.fadedRed8 : "transparent",
-        color: placeholder ? tokens.color.white50 : tokens.color.white,
+        color: error ? tokens.color.offBlack64 : placeholder ? tokens.color.white50 : tokens.color.white,
         borderColor: error ? tokens.color.red : tokens.color.white50,
-        borderWidth: tokens.border.width.hairline
-      },
-      focus: {
-        borderColor: error ? tokens.color.fadedRed8 : tokens.color.white,
-        borderWidth: tokens.spacing.xxxxSmall_2,
-        paddingLeft: adjustedPaddingLeft,
-        paddingRight: adjustedPaddingRight
-      },
-      active: {
-        paddingLeft: adjustedPaddingLeft,
-        paddingRight: adjustedPaddingRight,
-        borderColor: error ? tokens.color.red : tokens.color.fadedBlue,
-        borderWidth: tokens.border.width.thin,
-        color: placeholder ? mix(tokens.color.white32, tokens.color.blue) : tokens.color.fadedBlue,
-        backgroundColor: error ? tokens.color.fadedRed : tokens.color.activeBlue
+        borderWidth: tokens.border.width.hairline,
+        ":hover:not([aria-disabled=true])": focusHoverStyling,
+        ["@media not (hover: hover)"]: {
+          ":hover:not([aria-disabled=true])": {
+            borderColor: error ? tokens.color.red : tokens.color.white50,
+            borderWidth: tokens.border.width.hairline,
+            paddingLeft: tokens.spacing.medium_16,
+            paddingRight: tokens.spacing.small_12
+          }
+        },
+        ":focus-visible:not([aria-disabled=true])": focusHoverStyling,
+        ":active:not([aria-disabled=true])": activePressedStyling
       },
       disabled: {
         background: "transparent",
         borderColor: mix(tokens.color.white32, tokens.color.blue),
         color: mix(tokens.color.white32, tokens.color.blue),
-        cursor: "auto"
-      }
+        cursor: "not-allowed",
+        ":focus-visible": {
+          boxShadow: `0 0 0 1px ${tokens.color.offBlack32}, 0 0 0 3px ${tokens.color.fadedBlue}`
+        }
+      },
+      pressed: activePressedStyling
     };
   } else {
+    const focusHoverStyling = {
+      borderColor: error ? tokens.color.red : tokens.color.blue,
+      borderWidth: tokens.border.width.thin,
+      paddingLeft: adjustedPaddingLeft,
+      paddingRight: adjustedPaddingRight
+    };
+    const activePressedStyling = {
+      background: error ? tokens.color.fadedRed : tokens.color.fadedBlue,
+      borderColor: error ? tokens.color.red : tokens.color.activeBlue,
+      borderWidth: tokens.border.width.thin,
+      paddingLeft: adjustedPaddingLeft,
+      paddingRight: adjustedPaddingRight
+    };
     newStyles = {
       default: {
         background: error ? tokens.color.fadedRed8 : tokens.color.white,
         borderColor: error ? tokens.color.red : tokens.color.offBlack16,
         borderWidth: tokens.border.width.hairline,
-        color: placeholder ? tokens.color.offBlack64 : tokens.color.offBlack
-      },
-      focus: {
-        borderColor: error ? tokens.color.red : tokens.color.blue,
-        borderWidth: tokens.border.width.thin,
-        paddingLeft: adjustedPaddingLeft,
-        paddingRight: adjustedPaddingRight
-      },
-      active: {
-        background: error ? tokens.color.fadedRed : tokens.color.fadedBlue,
-        borderColor: error ? tokens.color.red : tokens.color.activeBlue,
-        borderWidth: tokens.border.width.thin,
-        paddingLeft: adjustedPaddingLeft,
-        paddingRight: adjustedPaddingRight
+        color: placeholder ? tokens.color.offBlack64 : tokens.color.offBlack,
+        ":hover:not([aria-disabled=true])": focusHoverStyling,
+        ["@media not (hover: hover)"]: {
+          ":hover:not([aria-disabled=true])": {
+            borderColor: error ? tokens.color.red : tokens.color.offBlack16,
+            borderWidth: tokens.border.width.hairline,
+            paddingLeft: tokens.spacing.medium_16,
+            paddingRight: tokens.spacing.small_12
+          }
+        },
+        ":focus-visible:not([aria-disabled=true])": focusHoverStyling,
+        ":active:not([aria-disabled=true])": activePressedStyling
       },
       disabled: {
         background: tokens.color.offWhite,
         borderColor: tokens.color.offBlack16,
         color: tokens.color.offBlack64,
-        cursor: "auto"
-      }
+        cursor: "not-allowed",
+        ":focus-visible": {
+          boxShadow: `0 0 0 1px ${tokens.color.white}, 0 0 0 3px ${tokens.color.offBlack32}`
+        }
+      },
+      pressed: activePressedStyling
     };
   }
   stateStyles[styleKey] = StyleSheet.create(newStyles);

package/dist/index.js

@@ -20,7 +20,6 @@ var reactPopper = require('react-popper');
 var wonderBlocksModal = require('@khanacademy/wonder-blocks-modal');
 var core = require('@popperjs/core');
 var caretDownIcon = require('@phosphor-icons/core/bold/caret-down-bold.svg');
-var reactRouter = require('react-router');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -1660,16 +1659,37 @@ const styles$2 = aphrodite.StyleSheet.create({
 const _excluded$2 = ["children", "disabled", "error", "id", "isPlaceholder", "light", "open", "testId", "onOpenChanged"];
 const StyledButton = wonderBlocksCore.addStyle("button");
 class SelectOpener extends React__namespace.Component {
-  constructor(...args) {
-    super(...args);
+  constructor(props) {
+    super(props);
     this.handleClick = e => {
       const {
         open
       } = this.props;
       this.props.onOpenChanged(!open);
     };
+    this.handleKeyDown = e => {
+      const keyCode = e.key;
+      if (keyCode === "Enter" || keyCode === " ") {
+        this.setState({
+          pressed: true
+        });
+        e.preventDefault();
+      }
+    };
+    this.handleKeyUp = e => {
+      const keyCode = e.key;
+      if (keyCode === "Enter" || keyCode === " ") {
+        this.setState({
+          pressed: false
+        });
+        this.handleClick(e);
+      }
+    };
+    this.state = {
+      pressed: false
+    };
   }
-  renderClickableBehavior(router) {
+  render() {
     const _this$props = this.props,
       {
         children,
@@ -1682,40 +1702,29 @@ class SelectOpener extends React__namespace.Component {
         testId
       } = _this$props,
       sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$2);
-    const ClickableBehavior = wonderBlocksClickable.getClickableBehavior(router);
-    return React__namespace.createElement(ClickableBehavior, {
-      disabled: disabled,
-      onClick: this.handleClick
-    }, (state, childrenProps) => {
-      const stateStyles = _generateStyles(light, isPlaceholder, error);
-      const {
-        hovered,
-        focused,
-        pressed
-      } = state;
-      const iconColor = light ? disabled || pressed ? "currentColor" : tokens__namespace.color.white : disabled ? tokens__namespace.color.offBlack32 : tokens__namespace.color.offBlack64;
-      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",
-        "data-testid": testId,
-        disabled: disabled,
-        id: id,
-        style: style,
-        type: "button"
-      }, childrenProps), React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-        style: styles$1.text
-      }, children || "\u00A0"), React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
-        icon: caretDownIcon__default["default"],
-        color: iconColor,
-        size: "small",
-        style: styles$1.caret,
-        "aria-hidden": "true"
-      }));
-    });
-  }
-  render() {
-    return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
+    const stateStyles = _generateStyles(light, isPlaceholder, error);
+    const iconColor = light ? disabled || error ? "currentColor" : tokens__namespace.color.white : disabled ? tokens__namespace.color.offBlack32 : tokens__namespace.color.offBlack64;
+    const style = [styles$1.shared, stateStyles.default, disabled && stateStyles.disabled, !disabled && this.state.pressed && stateStyles.pressed];
+    return React__namespace.createElement(StyledButton, _extends({}, sharedProps, {
+      "aria-disabled": disabled,
+      "aria-expanded": open ? "true" : "false",
+      "aria-haspopup": "listbox",
+      "data-testid": testId,
+      id: id,
+      style: style,
+      type: "button",
+      onClick: !disabled ? this.handleClick : undefined,
+      onKeyDown: !disabled ? this.handleKeyDown : undefined,
+      onKeyUp: !disabled ? this.handleKeyUp : undefined
+    }), React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
+      style: styles$1.text
+    }, children || "\u00A0"), React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
+      icon: caretDownIcon__default["default"],
+      color: iconColor,
+      size: "small",
+      style: styles$1.caret,
+      "aria-hidden": "true"
+    }));
   }
 }
 SelectOpener.defaultProps = {
@@ -1764,61 +1773,91 @@ const _generateStyles = (light, placeholder, error) => {
   }
   let newStyles = {};
   if (light) {
+    const focusHoverStyling = {
+      borderColor: error ? tokens__namespace.color.red : tokens__namespace.color.white,
+      borderWidth: tokens__namespace.spacing.xxxxSmall_2,
+      paddingLeft: adjustedPaddingLeft,
+      paddingRight: adjustedPaddingRight
+    };
+    const activePressedStyling = {
+      paddingLeft: adjustedPaddingLeft,
+      paddingRight: adjustedPaddingRight,
+      borderColor: error ? tokens__namespace.color.red : tokens__namespace.color.fadedBlue,
+      borderWidth: tokens__namespace.border.width.thin,
+      color: error ? tokens__namespace.color.offBlack64 : placeholder ? tokens.mix(tokens__namespace.color.white32, tokens__namespace.color.blue) : tokens__namespace.color.fadedBlue,
+      backgroundColor: error ? tokens__namespace.color.fadedRed : tokens__namespace.color.activeBlue
+    };
     newStyles = {
       default: {
         background: error ? tokens__namespace.color.fadedRed8 : "transparent",
-        color: placeholder ? tokens__namespace.color.white50 : tokens__namespace.color.white,
+        color: error ? tokens__namespace.color.offBlack64 : placeholder ? tokens__namespace.color.white50 : tokens__namespace.color.white,
         borderColor: error ? tokens__namespace.color.red : tokens__namespace.color.white50,
-        borderWidth: tokens__namespace.border.width.hairline
-      },
-      focus: {
-        borderColor: error ? tokens__namespace.color.fadedRed8 : tokens__namespace.color.white,
-        borderWidth: tokens__namespace.spacing.xxxxSmall_2,
-        paddingLeft: adjustedPaddingLeft,
-        paddingRight: adjustedPaddingRight
-      },
-      active: {
-        paddingLeft: adjustedPaddingLeft,
-        paddingRight: adjustedPaddingRight,
-        borderColor: error ? tokens__namespace.color.red : tokens__namespace.color.fadedBlue,
-        borderWidth: tokens__namespace.border.width.thin,
-        color: placeholder ? tokens.mix(tokens__namespace.color.white32, tokens__namespace.color.blue) : tokens__namespace.color.fadedBlue,
-        backgroundColor: error ? tokens__namespace.color.fadedRed : tokens__namespace.color.activeBlue
+        borderWidth: tokens__namespace.border.width.hairline,
+        ":hover:not([aria-disabled=true])": focusHoverStyling,
+        ["@media not (hover: hover)"]: {
+          ":hover:not([aria-disabled=true])": {
+            borderColor: error ? tokens__namespace.color.red : tokens__namespace.color.white50,
+            borderWidth: tokens__namespace.border.width.hairline,
+            paddingLeft: tokens__namespace.spacing.medium_16,
+            paddingRight: tokens__namespace.spacing.small_12
+          }
+        },
+        ":focus-visible:not([aria-disabled=true])": focusHoverStyling,
+        ":active:not([aria-disabled=true])": activePressedStyling
       },
       disabled: {
         background: "transparent",
         borderColor: tokens.mix(tokens__namespace.color.white32, tokens__namespace.color.blue),
         color: tokens.mix(tokens__namespace.color.white32, tokens__namespace.color.blue),
-        cursor: "auto"
-      }
+        cursor: "not-allowed",
+        ":focus-visible": {
+          boxShadow: `0 0 0 1px ${tokens__namespace.color.offBlack32}, 0 0 0 3px ${tokens__namespace.color.fadedBlue}`
+        }
+      },
+      pressed: activePressedStyling
     };
   } else {
+    const focusHoverStyling = {
+      borderColor: error ? tokens__namespace.color.red : tokens__namespace.color.blue,
+      borderWidth: tokens__namespace.border.width.thin,
+      paddingLeft: adjustedPaddingLeft,
+      paddingRight: adjustedPaddingRight
+    };
+    const activePressedStyling = {
+      background: error ? tokens__namespace.color.fadedRed : tokens__namespace.color.fadedBlue,
+      borderColor: error ? tokens__namespace.color.red : tokens__namespace.color.activeBlue,
+      borderWidth: tokens__namespace.border.width.thin,
+      paddingLeft: adjustedPaddingLeft,
+      paddingRight: adjustedPaddingRight
+    };
     newStyles = {
       default: {
         background: error ? tokens__namespace.color.fadedRed8 : tokens__namespace.color.white,
         borderColor: error ? tokens__namespace.color.red : tokens__namespace.color.offBlack16,
         borderWidth: tokens__namespace.border.width.hairline,
-        color: placeholder ? tokens__namespace.color.offBlack64 : tokens__namespace.color.offBlack
-      },
-      focus: {
-        borderColor: error ? tokens__namespace.color.red : tokens__namespace.color.blue,
-        borderWidth: tokens__namespace.border.width.thin,
-        paddingLeft: adjustedPaddingLeft,
-        paddingRight: adjustedPaddingRight
-      },
-      active: {
-        background: error ? tokens__namespace.color.fadedRed : tokens__namespace.color.fadedBlue,
-        borderColor: error ? tokens__namespace.color.red : tokens__namespace.color.activeBlue,
-        borderWidth: tokens__namespace.border.width.thin,
-        paddingLeft: adjustedPaddingLeft,
-        paddingRight: adjustedPaddingRight
+        color: placeholder ? tokens__namespace.color.offBlack64 : tokens__namespace.color.offBlack,
+        ":hover:not([aria-disabled=true])": focusHoverStyling,
+        ["@media not (hover: hover)"]: {
+          ":hover:not([aria-disabled=true])": {
+            borderColor: error ? tokens__namespace.color.red : tokens__namespace.color.offBlack16,
+            borderWidth: tokens__namespace.border.width.hairline,
+            paddingLeft: tokens__namespace.spacing.medium_16,
+            paddingRight: tokens__namespace.spacing.small_12
+          }
+        },
+        ":focus-visible:not([aria-disabled=true])": focusHoverStyling,
+        ":active:not([aria-disabled=true])": activePressedStyling
       },
       disabled: {
         background: tokens__namespace.color.offWhite,
         borderColor: tokens__namespace.color.offBlack16,
         color: tokens__namespace.color.offBlack64,
-        cursor: "auto"
-      }
+        cursor: "not-allowed",
+        ":focus-visible": {
+          boxShadow: `0 0 0 1px ${tokens__namespace.color.white}, 0 0 0 3px ${tokens__namespace.color.offBlack32}`
+        }
+      },
+      pressed: activePressedStyling
     };
   }
   stateStyles[styleKey] = aphrodite.StyleSheet.create(newStyles);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-dropdown",
-  "version": "5.3.4",
+  "version": "5.3.6",
   "design": "v1",
   "description": "Dropdown variants for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,13 +16,13 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-cell": "^3.3.6",
+    "@khanacademy/wonder-blocks-cell": "^3.3.7",
     "@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.13",
+    "@khanacademy/wonder-blocks-layout": "^2.1.0",
+    "@khanacademy/wonder-blocks-modal": "^5.1.4",
+    "@khanacademy/wonder-blocks-search-field": "^2.2.15",
     "@khanacademy/wonder-blocks-timing": "^5.0.0",
     "@khanacademy/wonder-blocks-tokens": "^1.3.0",
     "@khanacademy/wonder-blocks-typography": "^2.1.12"