@khanacademy/wonder-blocks-clickable 2.4.3 → 2.4.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @khanacademy/wonder-blocks-clickable
 
+## 2.4.4
+
+### Patch Changes
+
+-   496119f2: Cleanup WB interdependencies
+-   Updated dependencies [496119f2]
+    -   @khanacademy/wonder-blocks-core@4.6.2
+
 ## 2.4.3
 
 ### Patch Changes

package/dist/index.js

@@ -0,0 +1,551 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
+var _extends = require('@babel/runtime/helpers/extends');
+var React = require('react');
+var aphrodite = require('aphrodite');
+var reactRouterDom = require('react-router-dom');
+var reactRouter = require('react-router');
+var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
+var Color = require('@khanacademy/wonder-blocks-color');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+   if (e && e.__esModule) return e;
+   var n = Object.create(null);
+   if (e) {
+      Object.keys(e).forEach(function (k) {
+         if (k !== 'default') {
+            var d = Object.getOwnPropertyDescriptor(e, k);
+            Object.defineProperty(n, k, d.get ? d : {
+               enumerable: true,
+               get: function () { return e[k]; }
+            });
+         }
+      });
+   }
+   n["default"] = e;
+   return Object.freeze(n);
+}
+
+var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
+
+const getAppropriateTriggersForRole = role => {
+  switch (role) {
+    case "link":
+      return {
+        triggerOnEnter: true,
+        triggerOnSpace: false
+      };
+
+    case "checkbox":
+    case "radio":
+    case "listbox":
+      return {
+        triggerOnEnter: false,
+        triggerOnSpace: true
+      };
+
+    case "button":
+    case "menuitem":
+    case "menu":
+    case "option":
+    default:
+      return {
+        triggerOnEnter: true,
+        triggerOnSpace: true
+      };
+  }
+};
+
+const disabledHandlers = {
+  onClick: () => void 0,
+  onMouseEnter: () => void 0,
+  onMouseLeave: () => void 0,
+  onMouseDown: () => void 0,
+  onMouseUp: () => void 0,
+  onTouchStart: () => void 0,
+  onTouchEnd: () => void 0,
+  onTouchCancel: () => void 0,
+  onKeyDown: () => void 0,
+  onKeyUp: () => void 0
+};
+const keyCodes = {
+  enter: 13,
+  space: 32
+};
+const startState = {
+  hovered: false,
+  focused: false,
+  pressed: false,
+  waiting: false
+};
+class ClickableBehavior extends React__namespace.Component {
+  static getDerivedStateFromProps(props, state) {
+    if (props.disabled) {
+      return _extends__default["default"]({}, startState, {
+        focused: state.focused
+      });
+    } else {
+      return null;
+    }
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.handleClick = e => {
+      const {
+        onClick = undefined,
+        beforeNav = undefined,
+        safeWithNav = undefined
+      } = this.props;
+
+      if (this.enterClick) {
+        return;
+      }
+
+      if (onClick || beforeNav || safeWithNav) {
+        this.waitingForClick = false;
+      }
+
+      this.runCallbackAndMaybeNavigate(e);
+    };
+
+    this.handleMouseEnter = e => {
+      if (!this.waitingForClick) {
+        this.setState({
+          hovered: true
+        });
+      }
+    };
+
+    this.handleMouseLeave = () => {
+      if (!this.waitingForClick) {
+        this.setState({
+          hovered: false,
+          pressed: false,
+          focused: false
+        });
+      }
+    };
+
+    this.handleMouseDown = () => {
+      this.setState({
+        pressed: true
+      });
+    };
+
+    this.handleMouseUp = e => {
+      this.setState({
+        pressed: false,
+        focused: false
+      });
+    };
+
+    this.handleTouchStart = () => {
+      this.setState({
+        pressed: true
+      });
+    };
+
+    this.handleTouchEnd = () => {
+      this.setState({
+        pressed: false
+      });
+      this.waitingForClick = true;
+    };
+
+    this.handleTouchCancel = () => {
+      this.setState({
+        pressed: false
+      });
+      this.waitingForClick = true;
+    };
+
+    this.handleKeyDown = e => {
+      const {
+        onKeyDown,
+        role
+      } = this.props;
+
+      if (onKeyDown) {
+        onKeyDown(e);
+      }
+
+      const keyCode = e.which || e.keyCode;
+      const {
+        triggerOnEnter,
+        triggerOnSpace
+      } = getAppropriateTriggersForRole(role);
+
+      if (triggerOnEnter && keyCode === keyCodes.enter || triggerOnSpace && keyCode === keyCodes.space) {
+        e.preventDefault();
+        this.setState({
+          pressed: true
+        });
+      } else if (!triggerOnEnter && keyCode === keyCodes.enter) {
+        this.enterClick = true;
+      }
+    };
+
+    this.handleKeyUp = e => {
+      const {
+        onKeyUp,
+        role
+      } = this.props;
+
+      if (onKeyUp) {
+        onKeyUp(e);
+      }
+
+      const keyCode = e.which || e.keyCode;
+      const {
+        triggerOnEnter,
+        triggerOnSpace
+      } = getAppropriateTriggersForRole(role);
+
+      if (triggerOnEnter && keyCode === keyCodes.enter || triggerOnSpace && keyCode === keyCodes.space) {
+        this.setState({
+          pressed: false,
+          focused: true
+        });
+        this.runCallbackAndMaybeNavigate(e);
+      } else if (!triggerOnEnter && keyCode === keyCodes.enter) {
+        this.enterClick = false;
+      }
+    };
+
+    this.handleFocus = e => {
+      this.setState({
+        focused: true
+      });
+    };
+
+    this.handleBlur = e => {
+      this.setState({
+        focused: false,
+        pressed: false
+      });
+    };
+
+    this.state = startState;
+    this.waitingForClick = false;
+    this.enterClick = false;
+  }
+
+  navigateOrReset(shouldNavigate) {
+    if (shouldNavigate) {
+      const {
+        history,
+        href,
+        skipClientNav,
+        target = undefined
+      } = this.props;
+
+      if (href) {
+        if (target === "_blank") {
+          window.open(href, "_blank");
+          this.setState({
+            waiting: false
+          });
+        } else if (history && !skipClientNav) {
+          history.push(href);
+          this.setState({
+            waiting: false
+          });
+        } else {
+          window.location.assign(href);
+        }
+      }
+    } else {
+      this.setState({
+        waiting: false
+      });
+    }
+  }
+
+  handleSafeWithNav(safeWithNav, shouldNavigate) {
+    const {
+      skipClientNav,
+      history
+    } = this.props;
+
+    if (history && !skipClientNav || this.props.target === "_blank") {
+      safeWithNav();
+      this.navigateOrReset(shouldNavigate);
+      return Promise.resolve();
+    } else {
+      if (!this.state.waiting) {
+        this.setState({
+          waiting: true
+        });
+      }
+
+      return safeWithNav().then(() => {
+        if (!this.state.waiting) {
+          this.setState({
+            waiting: true
+          });
+        }
+
+        return;
+      }).catch(error => {}).finally(() => {
+        this.navigateOrReset(shouldNavigate);
+      });
+    }
+  }
+
+  runCallbackAndMaybeNavigate(e) {
+    const {
+      onClick = undefined,
+      beforeNav = undefined,
+      safeWithNav = undefined,
+      href,
+      type
+    } = this.props;
+    let shouldNavigate = true;
+    let canSubmit = true;
+
+    if (onClick) {
+      onClick(e);
+    }
+
+    if (e.defaultPrevented) {
+      shouldNavigate = false;
+      canSubmit = false;
+    }
+
+    e.preventDefault();
+
+    if (!href && type === "submit" && canSubmit) {
+      let target = e.currentTarget;
+
+      while (target) {
+        if (target instanceof window.HTMLFormElement) {
+          const event = new window.Event("submit", {
+            cancelable: true
+          });
+          target.dispatchEvent(event);
+          break;
+        }
+
+        target = target.parentElement;
+      }
+    }
+
+    if (beforeNav) {
+      this.setState({
+        waiting: true
+      });
+      beforeNav().then(() => {
+        if (safeWithNav) {
+          return this.handleSafeWithNav(safeWithNav, shouldNavigate);
+        } else {
+          return this.navigateOrReset(shouldNavigate);
+        }
+      }).catch(() => {});
+    } else if (safeWithNav) {
+      return this.handleSafeWithNav(safeWithNav, shouldNavigate);
+    } else {
+      this.navigateOrReset(shouldNavigate);
+    }
+  }
+
+  render() {
+    const childrenProps = this.props.disabled ? _extends__default["default"]({}, disabledHandlers, {
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur,
+      tabIndex: this.props.tabIndex
+    }) : {
+      onClick: this.handleClick,
+      onMouseEnter: this.handleMouseEnter,
+      onMouseLeave: this.handleMouseLeave,
+      onMouseDown: this.handleMouseDown,
+      onMouseUp: this.handleMouseUp,
+      onTouchStart: this.handleTouchStart,
+      onTouchEnd: this.handleTouchEnd,
+      onTouchCancel: this.handleTouchCancel,
+      onKeyDown: this.handleKeyDown,
+      onKeyUp: this.handleKeyUp,
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur,
+      tabIndex: this.props.tabIndex
+    };
+    childrenProps.rel = this.props.rel || (this.props.target === "_blank" ? "noopener noreferrer" : undefined);
+    const {
+      children
+    } = this.props;
+    return children && children(this.state, childrenProps);
+  }
+
+}
+ClickableBehavior.defaultProps = {
+  disabled: false
+};
+
+const isClientSideUrl = href => {
+  if (typeof href !== "string") {
+    return false;
+  }
+
+  return !/^(https?:)?\/\//i.test(href) && !/^([^#]*#[\w-]*|[\w\-.]+:)/.test(href);
+};
+
+const ClickableBehaviorWithRouter = reactRouterDom.withRouter(ClickableBehavior);
+function getClickableBehavior(href, skipClientNav, router) {
+  if (router && skipClientNav !== true && href && isClientSideUrl(href)) {
+    return ClickableBehaviorWithRouter;
+  }
+
+  return ClickableBehavior;
+}
+
+const _excluded = ["href", "onClick", "skipClientNav", "beforeNav", "safeWithNav", "style", "target", "testId", "onKeyDown", "onKeyUp", "hideDefaultFocusRing", "light", "disabled"];
+const StyledAnchor = wonderBlocksCore.addStyle("a");
+const StyledButton = wonderBlocksCore.addStyle("button");
+const StyledLink = wonderBlocksCore.addStyle(reactRouterDom.Link);
+class Clickable extends React__namespace.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 || "");
+
+      if (activeHref && useClient && this.props.href) {
+        return React__namespace.createElement(StyledLink, _extends__default["default"]({}, 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 React__namespace.createElement(StyledAnchor, _extends__default["default"]({}, 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 React__namespace.createElement(StyledButton, _extends__default["default"]({}, commonProps, {
+          type: "button",
+          "aria-disabled": this.props.disabled
+        }), this.props.children(clickableState));
+      }
+    };
+  }
+
+  renderClickableBehavior(router) {
+    const _this$props = this.props,
+          {
+      href,
+      onClick,
+      skipClientNav,
+      beforeNav = undefined,
+      safeWithNav = undefined,
+      style,
+      target = undefined,
+      testId,
+      onKeyDown,
+      onKeyUp,
+      hideDefaultFocusRing,
+      light,
+      disabled
+    } = _this$props,
+          restProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded);
+
+    const ClickableBehavior = getClickableBehavior(href, skipClientNav, router);
+
+    const getStyle = state => [styles.reset, styles.link, !hideDefaultFocusRing && state.focused && (light ? styles.focusedLight : styles.focused), disabled && styles.disabled, style];
+
+    if (beforeNav) {
+      return React__namespace.createElement(ClickableBehavior, {
+        href: href,
+        onClick: onClick,
+        beforeNav: beforeNav,
+        safeWithNav: safeWithNav,
+        onKeyDown: onKeyDown,
+        onKeyUp: onKeyUp,
+        disabled: disabled
+      }, (state, childrenProps) => this.getCorrectTag(state, router, _extends__default["default"]({}, restProps, {
+        "data-test-id": testId,
+        style: getStyle(state)
+      }, childrenProps)));
+    } else {
+      return React__namespace.createElement(ClickableBehavior, {
+        href: href,
+        onClick: onClick,
+        safeWithNav: safeWithNav,
+        onKeyDown: onKeyDown,
+        onKeyUp: onKeyUp,
+        target: target,
+        disabled: disabled
+      }, (state, childrenProps) => this.getCorrectTag(state, router, _extends__default["default"]({}, restProps, {
+        "data-test-id": testId,
+        style: getStyle(state)
+      }, childrenProps)));
+    }
+  }
+
+  render() {
+    return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
+  }
+
+}
+Clickable.defaultProps = {
+  light: false,
+  disabled: false
+};
+const styles = aphrodite.StyleSheet.create({
+  reset: {
+    border: "none",
+    margin: 0,
+    padding: 0,
+    width: "auto",
+    overflow: "visible",
+    background: "transparent",
+    textDecoration: "none",
+    color: "inherit",
+    font: "inherit",
+    boxSizing: "border-box",
+    touchAction: "manipulation",
+    userSelect: "none",
+    outline: "none",
+    lineHeight: "normal",
+    WebkitFontSmoothing: "inherit",
+    MozOsxFontSmoothing: "inherit"
+  },
+  link: {
+    cursor: "pointer"
+  },
+  focused: {
+    ":focus": {
+      outline: `solid 2px ${Color__default["default"].blue}`
+    }
+  },
+  focusedLight: {
+    outline: `solid 2px ${Color__default["default"].white}`
+  },
+  disabled: {
+    color: Color__default["default"].offBlack32,
+    cursor: "not-allowed",
+    ":focus": {
+      outline: "none"
+    },
+    ":focus-visible": {
+      outline: `solid 2px ${Color__default["default"].blue}`
+    }
+  }
+});
+
+exports.ClickableBehavior = ClickableBehavior;
+exports["default"] = Clickable;
+exports.getClickableBehavior = getClickableBehavior;
+exports.isClientSideUrl = isClientSideUrl;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-clickable",
-  "version": "2.4.3",
+  "version": "2.4.4",
   "design": "v1",
   "description": "Clickable component for Wonder-Blocks.",
   "main": "dist/index.js",
@@ -16,7 +16,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-core": "^4.6.1"
+    "@khanacademy/wonder-blocks-color": "^1.2.0",
+    "@khanacademy/wonder-blocks-core": "^4.6.2"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
@@ -26,6 +27,6 @@
     "react-router-dom": "5.3.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.6.0"
+    "wb-dev-build-settings": "^0.7.0"
   }
-}
+}