@khanacademy/wonder-blocks-clickable 2.2.5 → 2.3.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @khanacademy/wonder-blocks-clickable
 
+## 2.3.0
+
+### Minor Changes
+
+-   ee6fc773: Added keyboard support to search items when the dropdown is focused, included "Enter" as a key to trigger actions with the "option" role
+
+## 2.2.7
+
+### Patch Changes
+
+-   Updated dependencies [5f4a4297]
+-   Updated dependencies [2b96fd59]
+    -   @khanacademy/wonder-blocks-core@4.3.2
+
+## 2.2.6
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-core@4.3.1
+
 ## 2.2.5
 
 ### Patch Changes

package/dist/es/index.js

@@ -9,27 +9,24 @@ import Color from '@khanacademy/wonder-blocks-color';
 
 const getAppropriateTriggersForRole = role => {
   switch (role) {
-    // Triggers on ENTER, but not SPACE
     case "link":
       return {
         triggerOnEnter: true,
         triggerOnSpace: false
       };
-    // Triggers on SPACE, but not ENTER
 
     case "checkbox":
     case "radio":
     case "listbox":
-    case "option":
       return {
         triggerOnEnter: false,
         triggerOnSpace: true
       };
-    // Triggers on both ENTER and SPACE
 
     case "button":
     case "menuitem":
     case "menu":
+    case "option":
     default:
       return {
         triggerOnEnter: true,
@@ -50,8 +47,6 @@ const disabledHandlers = {
   onTouchCancel: () => void 0,
   onKeyDown: () => void 0,
   onKeyUp: () => void 0,
-  // Clickable components should still be tabbable so they can
-  // be used as anchors.
   tabIndex: 0
 };
 const keyCodes = {
@@ -64,95 +59,13 @@ const startState = {
   pressed: false,
   waiting: false
 };
-/**
- * Add hover, focus, and active status updates to a clickable component.
- *
- * Via mouse:
- *
- * 1. Hover over button -> hover state
- * 2. Mouse down -> active state
- * 3. Mouse up -> default state
- * 4. Press tab -> focus state
- *
- * Via touch:
- *
- * 1. Touch down -> press state
- * 2. Touch up -> default state
- *
- * Via keyboard:
- *
- * 1. Tab to focus -> focus state
- * 2. Keydown (spacebar/enter) -> active state
- * 3. Keyup (spacebar/enter) -> focus state
- *
- * Warning: The event handlers returned (onClick, onMouseEnter, onMouseLeave,
- * onMouseDown, onMouseUp, onDragStart, onTouchStart, onTouchEnd, onTouchCancel, onKeyDown,
- * onKeyUp, onFocus, onBlur, tabIndex) should be passed on to the component
- * that has the ClickableBehavior. You cannot override these handlers without
- * potentially breaking the functionality of ClickableBehavior.
- *
- * There are internal props triggerOnEnter and triggerOnSpace that can be set
- * to false if one of those keys shouldn't count as a click on this component.
- * Be careful about setting those to false -- make certain that the component
- * shouldn't process that key.
- *
- * See [this document](https://docs.google.com/document/d/1DG5Rg2f0cawIL5R8UqnPQpd7pbdObk8OyjO5ryYQmBM/edit#)
- * for a more thorough explanation of expected behaviors and potential cavaets.
- *
- * `ClickableBehavior` accepts a function as `children` which is passed state
- * and an object containing event handlers and some other props. The `children`
- * function should return a clickable React Element of some sort.
- *
- * Example:
- *
- * ```js
- * class MyClickableComponent extends React.Component<Props> {
- *     render(): React.Node {
- *         const ClickableBehavior = getClickableBehavior();
- *         return <ClickableBehavior
- *             disabled={this.props.disabled}
- *             onClick={this.props.onClick}
- *         >
- *             {({hovered}, childrenProps) =>
- *                 <RoundRect
- *                      textcolor='white'
- *                      backgroundColor={hovered ? 'red' : 'blue'}}
- *                      {...childrenProps}
- *                 >
- *                      {this.props.children}
- *                 </RoundRect>
- *             }
- *         </ClickableBehavior>
- *     }
- * }
- * ```
- *
- * This follows a pattern called [Function as Child Components]
- * (https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9).
- *
- * WARNING: Do not use this component directly, use getClickableBehavior
- * instead. getClickableBehavior takes three arguments (href, directtNav, and
- * router) and returns either the default ClickableBehavior or a react-router
- * aware version.
- *
- * The react-router aware version is returned if `router` is a react-router-dom
- * router, `skipClientNav` is not `true`, and `href` is an internal URL.
- *
- * The `router` can be accessed via __RouterContext (imported from 'react-router')
- * from a component rendered as a descendant of a BrowserRouter.
- * See https://reacttraining.com/react-router/web/guides/basic-components.
- */
-
 class ClickableBehavior extends React.Component {
   static getDerivedStateFromProps(props, state) {
-    // If new props are disabled, reset the hovered/pressed states
     if (props.disabled) {
-      // Keep the focused state for enabling keyboard navigation.
       return _extends({}, startState, {
         focused: state.focused
       });
     } else {
-      // Cannot return undefined
       return null;
     }
   }
@@ -179,7 +92,6 @@ class ClickableBehavior extends React.Component {
     };
 
     this.handleMouseEnter = e => {
-      // When the left button is pressed already, we want it to be pressed
       if (e.buttons === 1) {
         this.dragging = true;
         this.setState({
@@ -263,17 +175,11 @@ class ClickableBehavior extends React.Component {
       } = getAppropriateTriggersForRole(role);
 
       if (triggerOnEnter && keyCode === keyCodes.enter || triggerOnSpace && keyCode === keyCodes.space) {
-        // This prevents space from scrolling down. It also prevents the
-        // space and enter keys from triggering click events. We manually
-        // call the supplied onClick and handle potential navigation in
-        // handleKeyUp instead.
         e.preventDefault();
         this.setState({
           pressed: true
         });
       } else if (!triggerOnEnter && keyCode === keyCodes.enter) {
-        // If the component isn't supposed to trigger on enter, we have to
-        // keep track of the enter keydown to negate the onClick callback
         this.enterClick = true;
       }
     };
@@ -345,8 +251,7 @@ class ClickableBehavior extends React.Component {
             waiting: false
           });
         } else {
-          window.location.assign(href); // We don't bother clearing the waiting state, the full page
-          // load navigation will do that for us by loading a new page.
+          window.location.assign(href);
         }
       }
     } else {
@@ -363,15 +268,11 @@ class ClickableBehavior extends React.Component {
     } = this.props;
 
     if (history && !skipClientNav || this.props.target === "_blank") {
-      // client-side nav
       safeWithNav();
       this.navigateOrReset(shouldNavigate);
       return Promise.resolve();
     } else {
       if (!this.state.waiting) {
-        // We only show the spinner for safeWithNav when doing
-        // a full page load navigation since since the spinner is
-        // indicating that we're waiting for navigation to occur.
         this.setState({
           waiting: true
         });
@@ -379,19 +280,13 @@ class ClickableBehavior extends React.Component {
 
       return safeWithNav().then(() => {
         if (!this.state.waiting) {
-          // We only show the spinner for safeWithNav when doing
-          // a full page load navigation since since the spinner is
-          // indicating that we're waiting for navigation to occur.
           this.setState({
             waiting: true
           });
         }
 
         return;
-      }).catch(error => {// We ignore the error here so that we always
-        // navigate when using safeWithNav regardless of
-        // whether we're doing a client-side nav or not.
-      }).finally(() => {
+      }).catch(error => {}).finally(() => {
         this.navigateOrReset(shouldNavigate);
       });
     }
@@ -410,9 +305,7 @@ class ClickableBehavior extends React.Component {
 
     if (onClick) {
       onClick(e);
-    } // If onClick() has called e.preventDefault() then we shouldn't
-    // navigate.
-
+    }
 
     if (e.defaultPrevented) {
       shouldNavigate = false;
@@ -426,20 +319,12 @@ class ClickableBehavior extends React.Component {
 
       while (target) {
         if (target instanceof window.HTMLFormElement) {
-          // This event must be marked as cancelable otherwise calling
-          // e.preventDefault() on it won't do anything in Firefox.
-          // Chrome and Safari allow calling e.preventDefault() on
-          // non-cancelable events, but really they shouldn't.
           const event = new window.Event("submit", {
             cancelable: true
           });
           target.dispatchEvent(event);
           break;
-        } // All events should be typed as SyntheticEvent<HTMLElement>.
-        // Updating all of the places will take some time so I'll do
-        // this later
-        // $FlowFixMe[prop-missing]
-
+        }
 
         target = target.parentElement;
       }
@@ -465,7 +350,6 @@ class ClickableBehavior extends React.Component {
 
   render() {
     const childrenProps = this.props.disabled ? _extends({}, disabledHandlers, {
-      // Keep these handlers for keyboard accessibility.
       onFocus: this.handleFocus,
       onBlur: this.handleBlur
     }) : {
@@ -482,15 +366,8 @@ class ClickableBehavior extends React.Component {
       onKeyUp: this.handleKeyUp,
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
-      // We set tabIndex to 0 so that users can tab to clickable
-      // things that aren't buttons or anchors.
       tabIndex: 0
-    }; // When the link is set to open in a new window, we want to set some
-    // `rel` attributes. This is to ensure that the links we're sending folks
-    // to can't hijack the existing page.  These defaults can be overriden
-    // by passing in a different value for the `rel` prop.
-    // More info: https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/
-
+    };
     childrenProps.rel = this.props.rel || (this.props.target === "_blank" ? "noopener noreferrer" : undefined);
     const {
       children
@@ -503,12 +380,6 @@ ClickableBehavior.defaultProps = {
   disabled: false
 };
 
-/**
- * Returns:
- * - false for hrefs staring with http://, https://, //.
- * - false for '#', 'javascript:...', 'mailto:...', 'tel:...', etc.
- * - true for all other values, e.g. /foo/bar
- */
 const isClientSideUrl = href => {
   if (typeof href !== "string") {
     return false;
@@ -517,35 +388,9 @@ const isClientSideUrl = href => {
   return !/^(https?:)?\/\//i.test(href) && !/^([^#]*#[\w-]*|[\w\-.]+:)/.test(href);
 };
 
-/**
- * Returns either the default ClickableBehavior or a react-router aware version.
- *
- * The react-router aware version is returned if `router` is a react-router-dom
- * router, `skipClientNav` is not `true`, and `href` is an internal URL.
- *
- * The `router` can be accessed via __RouterContext (imported from 'react-router')
- * from a component rendered as a descendant of a BrowserRouter.
- * See https://reacttraining.com/react-router/web/guides/basic-components.
- */
 const ClickableBehaviorWithRouter = withRouter(ClickableBehavior);
-function getClickableBehavior(
-/**
- * The URL to navigate to.
- */
-href,
-/**
- * Should we skip using the react router and go to the page directly.
- */
-skipClientNav,
-/**
- * router object added to the React context object by react-router-dom.
- */
-router) {
+function getClickableBehavior(href, skipClientNav, router) {
   if (router && skipClientNav !== true && href && isClientSideUrl(href)) {
-    // We cast to `any` here since the type of ClickableBehaviorWithRouter
-    // is slightly different from the return type of this function.
-    // TODO(WB-1037): Always return the wrapped version once all routes have
-    // been ported to the app-shell in webapp.
     return ClickableBehaviorWithRouter;
   }
 
@@ -556,56 +401,30 @@ const _excluded = ["href", "onClick", "skipClientNav", "beforeNav", "safeWithNav
 const StyledAnchor = addStyle("a");
 const StyledButton = addStyle("button");
 const StyledLink = addStyle(Link);
-/**
- * A component to turn any custom component into a clickable one.
- *
- * Works by wrapping ClickableBehavior around the child element and styling the
- * child appropriately and encapsulates routing logic which can be customized.
- * Expects a function which returns an element as it's child.
- *
- * Example usage:
- * ```jsx
- * <Clickable onClick={() => alert("You clicked me!")}>
- *     {({hovered, focused, pressed}) =>
- *         <div
- *             style={[
- *                 hovered && styles.hovered,
- *                 focused && styles.focused,
- *                 pressed && styles.pressed,
- *             ]}
- *         >
- *             Click Me!
- *         </div>
- *     }
- * </Clickable>
- * ```
- */
-
 class Clickable extends React.Component {
   constructor(...args) {
     super(...args);
 
     this.getCorrectTag = (clickableState, router, commonProps) => {
       const activeHref = this.props.href && !this.props.disabled;
-      const useClient = router && !this.props.skipClientNav && isClientSideUrl(this.props.href || ""); // NOTE: checking this.props.href here is redundant, but flow
-      // needs it to refine this.props.href to a string.
+      const useClient = router && !this.props.skipClientNav && isClientSideUrl(this.props.href || "");
 
       if (activeHref && useClient && this.props.href) {
-        return /*#__PURE__*/React.createElement(StyledLink, _extends({}, commonProps, {
+        return React.createElement(StyledLink, _extends({}, commonProps, {
           to: this.props.href,
           role: this.props.role,
           target: this.props.target || undefined,
           "aria-disabled": this.props.disabled ? "true" : undefined
         }), this.props.children(clickableState));
       } else if (activeHref && !useClient) {
-        return /*#__PURE__*/React.createElement(StyledAnchor, _extends({}, commonProps, {
+        return React.createElement(StyledAnchor, _extends({}, commonProps, {
           href: this.props.href,
           role: this.props.role,
           target: this.props.target || undefined,
           "aria-disabled": this.props.disabled ? "true" : undefined
         }), this.props.children(clickableState));
       } else {
-        return /*#__PURE__*/React.createElement(StyledButton, _extends({}, commonProps, {
+        return React.createElement(StyledButton, _extends({}, commonProps, {
           type: "button",
           "aria-disabled": this.props.disabled
         }), this.props.children(clickableState));
@@ -634,10 +453,10 @@ class Clickable extends React.Component {
 
     const ClickableBehavior = getClickableBehavior(href, skipClientNav, router);
 
-    const getStyle = state => [styles.reset, styles.link, !hideDefaultFocusRing && state.focused && (light ? styles.focusedLight : styles.focused), style];
+    const getStyle = state => [styles.reset, styles.link, !hideDefaultFocusRing && state.focused && (light ? styles.focusedLight : styles.focused), disabled && styles.disabled, style];
 
     if (beforeNav) {
-      return /*#__PURE__*/React.createElement(ClickableBehavior, {
+      return React.createElement(ClickableBehavior, {
         href: href,
         onClick: onClick,
         beforeNav: beforeNav,
@@ -650,7 +469,7 @@ class Clickable extends React.Component {
         style: getStyle(state)
       }, childrenProps)));
     } else {
-      return /*#__PURE__*/React.createElement(ClickableBehavior, {
+      return React.createElement(ClickableBehavior, {
         href: href,
         onClick: onClick,
         safeWithNav: safeWithNav,
@@ -666,11 +485,10 @@ class Clickable extends React.Component {
   }
 
   render() {
-    return /*#__PURE__*/React.createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
+    return React.createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
   }
 
-} // Source:  https://gist.github.com/MoOx/9137295
-
+}
 Clickable.defaultProps = {
   light: false,
   disabled: false,
@@ -685,23 +503,13 @@ const styles = StyleSheet.create({
     overflow: "visible",
     background: "transparent",
     textDecoration: "none",
-
-    /* inherit font & color from ancestor */
     color: "inherit",
     font: "inherit",
     boxSizing: "border-box",
-    // This removes the 300ms click delay on mobile browsers by indicating that
-    // "double-tap to zoom" shouldn't be used on this element.
     touchAction: "manipulation",
     userSelect: "none",
-    // This is usual frowned upon b/c of accessibility.  We expect users of Clickable
-    // to define their own focus styles.
     outline: "none",
-
-    /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
     lineHeight: "normal",
-
-    /* Corrects font smoothing for webkit */
     WebkitFontSmoothing: "inherit",
     MozOsxFontSmoothing: "inherit"
   },
@@ -709,10 +517,22 @@ const styles = StyleSheet.create({
     cursor: "pointer"
   },
   focused: {
-    outline: `solid 2px ${Color.blue}`
+    ":focus": {
+      outline: `solid 2px ${Color.blue}`
+    }
   },
   focusedLight: {
     outline: `solid 2px ${Color.white}`
+  },
+  disabled: {
+    color: Color.offBlack32,
+    cursor: "not-allowed",
+    ":focus": {
+      outline: "none"
+    },
+    ":focus-visible": {
+      outline: `solid 2px ${Color.blue}`
+    }
   }
 });