@khanacademy/wonder-blocks-clickable 3.0.5 → 3.0.6

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @khanacademy/wonder-blocks-clickable
 
+## 3.0.6
+
+### Patch Changes
+
+-   c20f48f3: Don't transpile classes when building bundles
+-   Updated dependencies [c20f48f3]
+    -   @khanacademy/wonder-blocks-core@5.0.4
+
 ## 3.0.5
 
 ## 3.0.4

package/dist/es/index.js

@@ -33,20 +33,6 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-  return _setPrototypeOf(o, p);
-}
-
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-  _setPrototypeOf(subClass, superClass);
-}
-
 const getAppropriateTriggersForRole = role => {
   switch (role) {
     case "link":
@@ -94,9 +80,8 @@ const startState = {
   pressed: false,
   waiting: false
 };
-let ClickableBehavior = function (_React$Component) {
-  _inheritsLoose(ClickableBehavior, _React$Component);
-  ClickableBehavior.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
+class ClickableBehavior extends React.Component {
+  static getDerivedStateFromProps(props, state) {
     if (props.disabled) {
       return _extends({}, startState, {
         focused: state.focused
@@ -104,75 +89,74 @@ let ClickableBehavior = function (_React$Component) {
     } else {
       return null;
     }
-  };
-  function ClickableBehavior(props) {
-    var _this;
-    _this = _React$Component.call(this, props) || this;
-    _this.waitingForClick = void 0;
-    _this.enterClick = void 0;
-    _this.handleClick = e => {
+  }
+  constructor(props) {
+    super(props);
+    this.waitingForClick = void 0;
+    this.enterClick = void 0;
+    this.handleClick = e => {
       const {
         onClick = undefined,
         beforeNav = undefined,
         safeWithNav = undefined
-      } = _this.props;
-      if (_this.enterClick) {
+      } = this.props;
+      if (this.enterClick) {
         return;
       }
       if (onClick || beforeNav || safeWithNav) {
-        _this.waitingForClick = false;
+        this.waitingForClick = false;
       }
-      _this.runCallbackAndMaybeNavigate(e);
+      this.runCallbackAndMaybeNavigate(e);
     };
-    _this.handleMouseEnter = e => {
-      if (!_this.waitingForClick) {
-        _this.setState({
+    this.handleMouseEnter = e => {
+      if (!this.waitingForClick) {
+        this.setState({
           hovered: true
         });
       }
     };
-    _this.handleMouseLeave = () => {
-      if (!_this.waitingForClick) {
-        _this.setState({
+    this.handleMouseLeave = () => {
+      if (!this.waitingForClick) {
+        this.setState({
           hovered: false,
           pressed: false,
           focused: false
         });
       }
     };
-    _this.handleMouseDown = () => {
-      _this.setState({
+    this.handleMouseDown = () => {
+      this.setState({
         pressed: true
       });
     };
-    _this.handleMouseUp = e => {
-      _this.setState({
+    this.handleMouseUp = e => {
+      this.setState({
         pressed: false,
         focused: false
       });
     };
-    _this.handleTouchStart = () => {
-      _this.setState({
+    this.handleTouchStart = () => {
+      this.setState({
         pressed: true
       });
     };
-    _this.handleTouchEnd = () => {
-      _this.setState({
+    this.handleTouchEnd = () => {
+      this.setState({
         pressed: false
       });
-      _this.waitingForClick = true;
+      this.waitingForClick = true;
     };
-    _this.handleTouchCancel = () => {
-      _this.setState({
+    this.handleTouchCancel = () => {
+      this.setState({
         pressed: false
       });
-      _this.waitingForClick = true;
+      this.waitingForClick = true;
     };
-    _this.handleKeyDown = e => {
+    this.handleKeyDown = e => {
       const {
         onKeyDown,
         role
-      } = _this.props;
+      } = this.props;
       if (onKeyDown) {
         onKeyDown(e);
       }
@@ -183,18 +167,18 @@ let ClickableBehavior = function (_React$Component) {
       } = getAppropriateTriggersForRole(role);
       if (triggerOnEnter && keyCode === keyCodes.enter || triggerOnSpace && keyCode === keyCodes.space) {
         e.preventDefault();
-        _this.setState({
+        this.setState({
           pressed: true
         });
       } else if (!triggerOnEnter && keyCode === keyCodes.enter) {
-        _this.enterClick = true;
+        this.enterClick = true;
       }
     };
-    _this.handleKeyUp = e => {
+    this.handleKeyUp = e => {
       const {
         onKeyUp,
         role
-      } = _this.props;
+      } = this.props;
       if (onKeyUp) {
         onKeyUp(e);
       }
@@ -204,33 +188,31 @@ let ClickableBehavior = function (_React$Component) {
         triggerOnSpace
       } = getAppropriateTriggersForRole(role);
       if (triggerOnEnter && keyCode === keyCodes.enter || triggerOnSpace && keyCode === keyCodes.space) {
-        _this.setState({
+        this.setState({
           pressed: false,
           focused: true
         });
-        _this.runCallbackAndMaybeNavigate(e);
+        this.runCallbackAndMaybeNavigate(e);
       } else if (!triggerOnEnter && keyCode === keyCodes.enter) {
-        _this.enterClick = false;
+        this.enterClick = false;
       }
     };
-    _this.handleFocus = e => {
-      _this.setState({
+    this.handleFocus = e => {
+      this.setState({
         focused: true
       });
     };
-    _this.handleBlur = e => {
-      _this.setState({
+    this.handleBlur = e => {
+      this.setState({
         focused: false,
         pressed: false
       });
     };
-    _this.state = startState;
-    _this.waitingForClick = false;
-    _this.enterClick = false;
-    return _this;
+    this.state = startState;
+    this.waitingForClick = false;
+    this.enterClick = false;
   }
-  var _proto = ClickableBehavior.prototype;
-  _proto.navigateOrReset = function navigateOrReset(shouldNavigate) {
+  navigateOrReset(shouldNavigate) {
     if (shouldNavigate) {
       const {
         history,
@@ -258,8 +240,8 @@ let ClickableBehavior = function (_React$Component) {
         waiting: false
       });
     }
-  };
-  _proto.handleSafeWithNav = function handleSafeWithNav(safeWithNav, shouldNavigate) {
+  }
+  handleSafeWithNav(safeWithNav, shouldNavigate) {
     const {
       skipClientNav,
       history
@@ -285,8 +267,8 @@ let ClickableBehavior = function (_React$Component) {
         this.navigateOrReset(shouldNavigate);
       });
     }
-  };
-  _proto.runCallbackAndMaybeNavigate = function runCallbackAndMaybeNavigate(e) {
+  }
+  runCallbackAndMaybeNavigate(e) {
     const {
       onClick = undefined,
       beforeNav = undefined,
@@ -333,8 +315,8 @@ let ClickableBehavior = function (_React$Component) {
     } else {
       this.navigateOrReset(shouldNavigate);
     }
-  };
-  _proto.render = function render() {
+  }
+  render() {
     const childrenProps = this.props.disabled ? _extends({}, disabledHandlers, {
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
@@ -359,9 +341,8 @@ let ClickableBehavior = function (_React$Component) {
       children
     } = this.props;
     return children && children(this.state, childrenProps);
-  };
-  return ClickableBehavior;
-}(React.Component);
+  }
+}
 ClickableBehavior.defaultProps = {
   disabled: false
 };
@@ -385,39 +366,35 @@ const _excluded = ["href", "onClick", "skipClientNav", "beforeNav", "safeWithNav
 const StyledAnchor = addStyle("a");
 const StyledButton = addStyle("button");
 const StyledLink = addStyle(Link);
-let Clickable = function (_React$Component) {
-  _inheritsLoose(Clickable, _React$Component);
-  function Clickable(...args) {
-    var _this;
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-    _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) {
+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 || "");
+      if (activeHref && useClient && this.props.href) {
         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));
+          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.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));
+          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.createElement(StyledButton, _extends({}, commonProps, {
           type: "button",
-          "aria-disabled": _this.props.disabled
-        }), _this.props.children(clickableState));
+          "aria-disabled": this.props.disabled
+        }), this.props.children(clickableState));
       }
     };
-    return _this;
   }
-  var _proto = Clickable.prototype;
-  _proto.renderClickableBehavior = function renderClickableBehavior(router) {
+  renderClickableBehavior(router) {
     const _this$props = this.props,
       {
         href,
@@ -464,12 +441,11 @@ let Clickable = function (_React$Component) {
         style: getStyle(state)
       }, childrenProps)));
     }
-  };
-  _proto.render = function render() {
+  }
+  render() {
     return React.createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
-  };
-  return Clickable;
-}(React.Component);
+  }
+}
 Clickable.defaultProps = {
   light: false,
   disabled: false

package/dist/index.js

@@ -60,20 +60,6 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-  return _setPrototypeOf(o, p);
-}
-
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-  _setPrototypeOf(subClass, superClass);
-}
-
 const getAppropriateTriggersForRole = role => {
   switch (role) {
     case "link":
@@ -121,9 +107,8 @@ const startState = {
   pressed: false,
   waiting: false
 };
-let ClickableBehavior = function (_React$Component) {
-  _inheritsLoose(ClickableBehavior, _React$Component);
-  ClickableBehavior.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
+class ClickableBehavior extends React__namespace.Component {
+  static getDerivedStateFromProps(props, state) {
     if (props.disabled) {
       return _extends({}, startState, {
         focused: state.focused
@@ -131,75 +116,74 @@ let ClickableBehavior = function (_React$Component) {
     } else {
       return null;
     }
-  };
-  function ClickableBehavior(props) {
-    var _this;
-    _this = _React$Component.call(this, props) || this;
-    _this.waitingForClick = void 0;
-    _this.enterClick = void 0;
-    _this.handleClick = e => {
+  }
+  constructor(props) {
+    super(props);
+    this.waitingForClick = void 0;
+    this.enterClick = void 0;
+    this.handleClick = e => {
       const {
         onClick = undefined,
         beforeNav = undefined,
         safeWithNav = undefined
-      } = _this.props;
-      if (_this.enterClick) {
+      } = this.props;
+      if (this.enterClick) {
         return;
       }
       if (onClick || beforeNav || safeWithNav) {
-        _this.waitingForClick = false;
+        this.waitingForClick = false;
       }
-      _this.runCallbackAndMaybeNavigate(e);
+      this.runCallbackAndMaybeNavigate(e);
     };
-    _this.handleMouseEnter = e => {
-      if (!_this.waitingForClick) {
-        _this.setState({
+    this.handleMouseEnter = e => {
+      if (!this.waitingForClick) {
+        this.setState({
           hovered: true
         });
       }
     };
-    _this.handleMouseLeave = () => {
-      if (!_this.waitingForClick) {
-        _this.setState({
+    this.handleMouseLeave = () => {
+      if (!this.waitingForClick) {
+        this.setState({
           hovered: false,
           pressed: false,
           focused: false
         });
       }
     };
-    _this.handleMouseDown = () => {
-      _this.setState({
+    this.handleMouseDown = () => {
+      this.setState({
         pressed: true
       });
     };
-    _this.handleMouseUp = e => {
-      _this.setState({
+    this.handleMouseUp = e => {
+      this.setState({
         pressed: false,
         focused: false
       });
     };
-    _this.handleTouchStart = () => {
-      _this.setState({
+    this.handleTouchStart = () => {
+      this.setState({
         pressed: true
       });
     };
-    _this.handleTouchEnd = () => {
-      _this.setState({
+    this.handleTouchEnd = () => {
+      this.setState({
         pressed: false
       });
-      _this.waitingForClick = true;
+      this.waitingForClick = true;
     };
-    _this.handleTouchCancel = () => {
-      _this.setState({
+    this.handleTouchCancel = () => {
+      this.setState({
         pressed: false
       });
-      _this.waitingForClick = true;
+      this.waitingForClick = true;
     };
-    _this.handleKeyDown = e => {
+    this.handleKeyDown = e => {
       const {
         onKeyDown,
         role
-      } = _this.props;
+      } = this.props;
       if (onKeyDown) {
         onKeyDown(e);
       }
@@ -210,18 +194,18 @@ let ClickableBehavior = function (_React$Component) {
       } = getAppropriateTriggersForRole(role);
       if (triggerOnEnter && keyCode === keyCodes.enter || triggerOnSpace && keyCode === keyCodes.space) {
         e.preventDefault();
-        _this.setState({
+        this.setState({
           pressed: true
         });
       } else if (!triggerOnEnter && keyCode === keyCodes.enter) {
-        _this.enterClick = true;
+        this.enterClick = true;
       }
     };
-    _this.handleKeyUp = e => {
+    this.handleKeyUp = e => {
       const {
         onKeyUp,
         role
-      } = _this.props;
+      } = this.props;
       if (onKeyUp) {
         onKeyUp(e);
       }
@@ -231,33 +215,31 @@ let ClickableBehavior = function (_React$Component) {
         triggerOnSpace
       } = getAppropriateTriggersForRole(role);
       if (triggerOnEnter && keyCode === keyCodes.enter || triggerOnSpace && keyCode === keyCodes.space) {
-        _this.setState({
+        this.setState({
           pressed: false,
           focused: true
         });
-        _this.runCallbackAndMaybeNavigate(e);
+        this.runCallbackAndMaybeNavigate(e);
       } else if (!triggerOnEnter && keyCode === keyCodes.enter) {
-        _this.enterClick = false;
+        this.enterClick = false;
       }
     };
-    _this.handleFocus = e => {
-      _this.setState({
+    this.handleFocus = e => {
+      this.setState({
         focused: true
       });
     };
-    _this.handleBlur = e => {
-      _this.setState({
+    this.handleBlur = e => {
+      this.setState({
         focused: false,
         pressed: false
       });
     };
-    _this.state = startState;
-    _this.waitingForClick = false;
-    _this.enterClick = false;
-    return _this;
+    this.state = startState;
+    this.waitingForClick = false;
+    this.enterClick = false;
   }
-  var _proto = ClickableBehavior.prototype;
-  _proto.navigateOrReset = function navigateOrReset(shouldNavigate) {
+  navigateOrReset(shouldNavigate) {
     if (shouldNavigate) {
       const {
         history,
@@ -285,8 +267,8 @@ let ClickableBehavior = function (_React$Component) {
         waiting: false
       });
     }
-  };
-  _proto.handleSafeWithNav = function handleSafeWithNav(safeWithNav, shouldNavigate) {
+  }
+  handleSafeWithNav(safeWithNav, shouldNavigate) {
     const {
       skipClientNav,
       history
@@ -312,8 +294,8 @@ let ClickableBehavior = function (_React$Component) {
         this.navigateOrReset(shouldNavigate);
       });
     }
-  };
-  _proto.runCallbackAndMaybeNavigate = function runCallbackAndMaybeNavigate(e) {
+  }
+  runCallbackAndMaybeNavigate(e) {
     const {
       onClick = undefined,
       beforeNav = undefined,
@@ -360,8 +342,8 @@ let ClickableBehavior = function (_React$Component) {
     } else {
       this.navigateOrReset(shouldNavigate);
     }
-  };
-  _proto.render = function render() {
+  }
+  render() {
     const childrenProps = this.props.disabled ? _extends({}, disabledHandlers, {
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
@@ -386,9 +368,8 @@ let ClickableBehavior = function (_React$Component) {
       children
     } = this.props;
     return children && children(this.state, childrenProps);
-  };
-  return ClickableBehavior;
-}(React__namespace.Component);
+  }
+}
 ClickableBehavior.defaultProps = {
   disabled: false
 };
@@ -412,39 +393,35 @@ const _excluded = ["href", "onClick", "skipClientNav", "beforeNav", "safeWithNav
 const StyledAnchor = wonderBlocksCore.addStyle("a");
 const StyledButton = wonderBlocksCore.addStyle("button");
 const StyledLink = wonderBlocksCore.addStyle(reactRouterDom.Link);
-let Clickable = function (_React$Component) {
-  _inheritsLoose(Clickable, _React$Component);
-  function Clickable(...args) {
-    var _this;
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-    _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) {
+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({}, 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));
+          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({}, 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));
+          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({}, commonProps, {
           type: "button",
-          "aria-disabled": _this.props.disabled
-        }), _this.props.children(clickableState));
+          "aria-disabled": this.props.disabled
+        }), this.props.children(clickableState));
       }
     };
-    return _this;
   }
-  var _proto = Clickable.prototype;
-  _proto.renderClickableBehavior = function renderClickableBehavior(router) {
+  renderClickableBehavior(router) {
     const _this$props = this.props,
       {
         href,
@@ -491,12 +468,11 @@ let Clickable = function (_React$Component) {
         style: getStyle(state)
       }, childrenProps)));
     }
-  };
-  _proto.render = function render() {
+  }
+  render() {
     return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
-  };
-  return Clickable;
-}(React__namespace.Component);
+  }
+}
 Clickable.defaultProps = {
   light: false,
   disabled: false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-clickable",
-  "version": "3.0.5",
+  "version": "3.0.6",
   "design": "v1",
   "description": "Clickable component for Wonder-Blocks.",
   "main": "dist/index.js",
@@ -17,7 +17,7 @@
   "dependencies": {
     "@babel/runtime": "^7.18.6",
     "@khanacademy/wonder-blocks-color": "^2.0.1",
-    "@khanacademy/wonder-blocks-core": "^5.0.3"
+    "@khanacademy/wonder-blocks-core": "^5.0.4"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
@@ -27,6 +27,6 @@
     "react-router-dom": "5.3.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.9.4"
+    "wb-dev-build-settings": "^0.9.5"
   }
 }