@khanacademy/wonder-blocks-dropdown 5.3.5 → 5.3.7

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 5.3.7
+
+### Patch Changes
+
+-   f7ff9a77: SingleSelect and MultiSelect: Disable keyboard interactions to open the select if the `disabled` prop is set to `true`. Prevent select from being in an open state if
+    `disabled` prop is `true`.
+
+## 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

package/dist/components/dropdown-core.d.ts

@@ -77,6 +77,10 @@ declare const _default: React.ComponentType<Readonly<{
      * top. The items will be filtered by the input.
      */
     isFilterable?: boolean | undefined;
+    /**
+     * Whether the dropdown and it's interactions should be disabled.
+     */
+    disabled?: boolean | undefined;
     /**
      * Whether this menu should be left-aligned or right-aligned with the
      * opener component. Defaults to left-aligned.

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) {
@@ -1275,11 +1274,12 @@ class DropdownCore extends React.Component {
       open,
       opener,
       style,
-      className
+      className,
+      disabled
     } = this.props;
     return React.createElement(View, {
-      onKeyDown: this.handleKeyDown,
-      onKeyUp: this.handleKeyUp,
+      onKeyDown: !disabled ? this.handleKeyDown : undefined,
+      onKeyUp: !disabled ? this.handleKeyUp : undefined,
       style: [styles$4.menuWrapper, style],
       className: className
     }, this.renderLiveRegion(), opener, open && this.renderDropdown());
@@ -1630,16 +1630,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 +1673,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 +1744,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);
@@ -1874,7 +1914,7 @@ class SingleSelect extends React.Component {
   }
   static getDerivedStateFromProps(props, state) {
     return {
-      open: typeof props.opened === "boolean" ? props.opened : state.open
+      open: props.disabled ? false : typeof props.opened === "boolean" ? props.opened : state.open
     };
   }
   filterChildren(children) {
@@ -1941,7 +1981,8 @@ class SingleSelect extends React.Component {
       light,
       style,
       "aria-invalid": ariaInvalid,
-      "aria-required": ariaRequired
+      "aria-required": ariaRequired,
+      disabled
     } = this.props;
     const {
       searchText
@@ -1970,7 +2011,8 @@ class SingleSelect extends React.Component {
       searchText: isFilterable ? searchText : "",
       labels: labels,
       "aria-invalid": ariaInvalid,
-      "aria-required": ariaRequired
+      "aria-required": ariaRequired,
+      disabled: disabled
     });
   }
 }
@@ -2074,7 +2116,7 @@ class MultiSelect extends React.Component {
   }
   static getDerivedStateFromProps(props, state) {
     return {
-      open: typeof props.opened === "boolean" ? props.opened : state.open
+      open: props.disabled ? false : typeof props.opened === "boolean" ? props.opened : state.open
     };
   }
   componentDidUpdate(prevProps) {
@@ -2239,7 +2281,8 @@ class MultiSelect extends React.Component {
       children,
       isFilterable,
       "aria-invalid": ariaInvalid,
-      "aria-required": ariaRequired
+      "aria-required": ariaRequired,
+      disabled
     } = this.props;
     const {
       open,
@@ -2278,7 +2321,8 @@ class MultiSelect extends React.Component {
         someResults: someSelected
       },
       "aria-invalid": ariaInvalid,
-      "aria-required": ariaRequired
+      "aria-required": ariaRequired,
+      disabled: disabled
     });
   }
 }