@khanacademy/wonder-blocks-clickable 2.4.4 → 2.4.6

package/dist/index.js

@@ -2,8 +2,6 @@
 
 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');
@@ -14,28 +12,68 @@ 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);
+  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);
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  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":
@@ -43,7 +81,6 @@ const getAppropriateTriggersForRole = role => {
         triggerOnEnter: true,
         triggerOnSpace: false
       };
-
     case "checkbox":
     case "radio":
     case "listbox":
@@ -51,7 +88,6 @@ const getAppropriateTriggersForRole = role => {
         triggerOnEnter: false,
         triggerOnSpace: true
       };
-
     case "button":
     case "menuitem":
     case "menu":
@@ -63,7 +99,6 @@ const getAppropriateTriggersForRole = role => {
       };
   }
 };
-
 const disabledHandlers = {
   onClick: () => void 0,
   onMouseEnter: () => void 0,
@@ -86,161 +121,143 @@ const startState = {
   pressed: false,
   waiting: false
 };
-class ClickableBehavior extends React__namespace.Component {
-  static getDerivedStateFromProps(props, state) {
+let ClickableBehavior = function (_React$Component) {
+  _inheritsLoose(ClickableBehavior, _React$Component);
+  ClickableBehavior.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
     if (props.disabled) {
-      return _extends__default["default"]({}, startState, {
+      return _extends({}, startState, {
         focused: state.focused
       });
     } else {
       return null;
     }
-  }
-
-  constructor(props) {
-    super(props);
-
-    this.handleClick = e => {
+  };
+  function ClickableBehavior(props) {
+    var _this;
+    _this = _React$Component.call(this, props) || this;
+    _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);
       }
-
       const keyCode = e.which || e.keyCode;
       const {
         triggerOnEnter,
         triggerOnSpace
       } = 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);
       }
-
       const keyCode = e.which || e.keyCode;
       const {
         triggerOnEnter,
         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;
+    _this.state = startState;
+    _this.waitingForClick = false;
+    _this.enterClick = false;
+    return _this;
   }
-
-  navigateOrReset(shouldNavigate) {
+  var _proto = ClickableBehavior.prototype;
+  _proto.navigateOrReset = function navigateOrReset(shouldNavigate) {
     if (shouldNavigate) {
       const {
         history,
@@ -248,7 +265,6 @@ class ClickableBehavior extends React__namespace.Component {
         skipClientNav,
         target = undefined
       } = this.props;
-
       if (href) {
         if (target === "_blank") {
           window.open(href, "_blank");
@@ -269,14 +285,12 @@ class ClickableBehavior extends React__namespace.Component {
         waiting: false
       });
     }
-  }
-
-  handleSafeWithNav(safeWithNav, shouldNavigate) {
+  };
+  _proto.handleSafeWithNav = function handleSafeWithNav(safeWithNav, shouldNavigate) {
     const {
       skipClientNav,
       history
     } = this.props;
-
     if (history && !skipClientNav || this.props.target === "_blank") {
       safeWithNav();
       this.navigateOrReset(shouldNavigate);
@@ -287,22 +301,19 @@ class ClickableBehavior extends React__namespace.Component {
           waiting: true
         });
       }
-
       return safeWithNav().then(() => {
         if (!this.state.waiting) {
           this.setState({
             waiting: true
           });
         }
-
         return;
       }).catch(error => {}).finally(() => {
         this.navigateOrReset(shouldNavigate);
       });
     }
-  }
-
-  runCallbackAndMaybeNavigate(e) {
+  };
+  _proto.runCallbackAndMaybeNavigate = function runCallbackAndMaybeNavigate(e) {
     const {
       onClick = undefined,
       beforeNav = undefined,
@@ -312,21 +323,16 @@ class ClickableBehavior extends React__namespace.Component {
     } = 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", {
@@ -335,11 +341,9 @@ class ClickableBehavior extends React__namespace.Component {
           target.dispatchEvent(event);
           break;
         }
-
         target = target.parentElement;
       }
     }
-
     if (beforeNav) {
       this.setState({
         waiting: true
@@ -356,10 +360,9 @@ class ClickableBehavior extends React__namespace.Component {
     } else {
       this.navigateOrReset(shouldNavigate);
     }
-  }
-
-  render() {
-    const childrenProps = this.props.disabled ? _extends__default["default"]({}, disabledHandlers, {
+  };
+  _proto.render = function render() {
+    const childrenProps = this.props.disabled ? _extends({}, disabledHandlers, {
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
       tabIndex: this.props.tabIndex
@@ -383,9 +386,9 @@ class ClickableBehavior extends React__namespace.Component {
       children
     } = this.props;
     return children && children(this.state, childrenProps);
-  }
-
-}
+  };
+  return ClickableBehavior;
+}(React__namespace.Component);
 ClickableBehavior.defaultProps = {
   disabled: false
 };
@@ -394,7 +397,6 @@ const isClientSideUrl = href => {
   if (typeof href !== "string") {
     return false;
   }
-
   return !/^(https?:)?\/\//i.test(href) && !/^([^#]*#[\w-]*|[\w\-.]+:)/.test(href);
 };
 
@@ -403,7 +405,6 @@ function getClickableBehavior(href, skipClientNav, router) {
   if (router && skipClientNav !== true && href && isClientSideUrl(href)) {
     return ClickableBehaviorWithRouter;
   }
-
   return ClickableBehavior;
 }
 
@@ -411,60 +412,58 @@ const _excluded = ["href", "onClick", "skipClientNav", "beforeNav", "safeWithNav
 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));
+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) {
+        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));
       } 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));
+        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));
       } else {
-        return React__namespace.createElement(StyledButton, _extends__default["default"]({}, commonProps, {
+        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;
   }
-
-  renderClickableBehavior(router) {
+  var _proto = Clickable.prototype;
+  _proto.renderClickableBehavior = function 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);
-
+      {
+        href,
+        onClick,
+        skipClientNav,
+        beforeNav = undefined,
+        safeWithNav = undefined,
+        style,
+        target = undefined,
+        testId,
+        onKeyDown,
+        onKeyUp,
+        hideDefaultFocusRing,
+        light,
+        disabled
+      } = _this$props,
+      restProps = _objectWithoutPropertiesLoose(_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,
@@ -474,7 +473,7 @@ class Clickable extends React__namespace.Component {
         onKeyDown: onKeyDown,
         onKeyUp: onKeyUp,
         disabled: disabled
-      }, (state, childrenProps) => this.getCorrectTag(state, router, _extends__default["default"]({}, restProps, {
+      }, (state, childrenProps) => this.getCorrectTag(state, router, _extends({}, restProps, {
         "data-test-id": testId,
         style: getStyle(state)
       }, childrenProps)));
@@ -487,18 +486,17 @@ class Clickable extends React__namespace.Component {
         onKeyUp: onKeyUp,
         target: target,
         disabled: disabled
-      }, (state, childrenProps) => this.getCorrectTag(state, router, _extends__default["default"]({}, restProps, {
+      }, (state, childrenProps) => this.getCorrectTag(state, router, _extends({}, restProps, {
         "data-test-id": testId,
         style: getStyle(state)
       }, childrenProps)));
     }
-  }
-
-  render() {
+  };
+  _proto.render = function 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/dist/index.js.flow

@@ -1,2 +1,18 @@
-// @flow
-export * from "../src/index.js";
+/**
+ * Flowtype definitions for index
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import type {
+  ChildrenProps,
+  ClickableState,
+  ClickableRole,
+} from "./components/clickable-behavior";
+import Clickable from "./components/clickable";
+declare export { default as ClickableBehavior } from "./components/clickable-behavior";
+declare export { default as getClickableBehavior } from "./util/get-clickable-behavior";
+declare export { isClientSideUrl } from "./util/is-client-side-url";
+declare export { Clickable as default };
+export type { ChildrenProps, ClickableState, ClickableRole };

package/dist/util/get-clickable-behavior.d.ts

@@ -0,0 +1,25 @@
+/**
+ * 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.
+ */
+import * as React from "react";
+import ClickableBehavior from "../components/clickable-behavior";
+export default function getClickableBehavior(
+/**
+ * The URL to navigate to.
+ */
+href?: string, 
+/**
+ * Should we skip using the react router and go to the page directly.
+ */
+skipClientNav?: boolean, 
+/**
+ * router object added to the React context object by react-router-dom.
+ */
+router?: any): React.ComponentType<JSX.LibraryManagedAttributes<typeof ClickableBehavior, React.ComponentProps<typeof ClickableBehavior>>>;

package/dist/util/get-clickable-behavior.js.flow

@@ -0,0 +1,19 @@
+/**
+ * Flowtype definitions for get-clickable-behavior
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+import ClickableBehavior from "../components/clickable-behavior";
+declare export default function getClickableBehavior(
+  href?: string,
+  skipClientNav?: boolean,
+  router?: any
+): React.ComponentType<
+  JSX.LibraryManagedAttributes<
+    typeof ClickableBehavior,
+    React.ComponentProps<typeof ClickableBehavior>
+  >
+>;

package/dist/util/is-client-side-url.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Returns:
+ * - false for hrefs staring with http://, https://, //.
+ * - false for '#', 'javascript:...', 'mailto:...', 'tel:...', etc.
+ * - true for all other values, e.g. /foo/bar
+ */
+export declare const isClientSideUrl: (href: string) => boolean;

package/dist/util/is-client-side-url.js.flow

@@ -0,0 +1,14 @@
+/**
+ * Flowtype definitions for is-client-side-url
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+/**
+ * Returns:
+ * - false for hrefs staring with http://, https://, //.
+ * - false for '#', 'javascript:...', 'mailto:...', 'tel:...', etc.
+ * - true for all other values, e.g. /foo/bar
+ */
+declare export var isClientSideUrl: (href: string) => boolean;