@khanacademy/wonder-blocks-icon-button - npm Package Compare versions

Comparing version 3.3.3 to 3.3.4

1092

dist/index.js

		@@ -85,3 +85,3 @@ module.exports =
		/******/ // Load entry module and return exports
		/******/ return __webpack_require__(__webpack_require__.s = 7);
		/******/ return __webpack_require__(__webpack_require__.s = 8);
		/******/ })
		@@ -93,3 +93,3 @@ /************************************************************************/

		module.exports = require("react");
		module.exports = require("@khanacademy/wonder-blocks-color");

		@@ -100,3 +100,3 @@ /***/ }),

		module.exports = require("@khanacademy/wonder-blocks-color");
		module.exports = require("react");

		@@ -107,3 +107,3 @@ /***/ }),

		module.exports = require("@khanacademy/wonder-blocks-core");
		module.exports = require("prop-types");

		@@ -114,3 +114,3 @@ /***/ }),

		module.exports = require("prop-types");
		module.exports = require("@khanacademy/wonder-blocks-core");

		@@ -127,3 +127,3 @@ /***/ }),

		module.exports = require("react-router-dom");
		module.exports = require("@khanacademy/wonder-blocks-clickable");

		@@ -134,6 +134,12 @@ /***/ }),

		module.exports = require("react-router-dom");

		/***/ }),
		/* 7 */
		/***/ (function(module, exports) {

		module.exports = require("@khanacademy/wonder-blocks-icon");

		/***/ }),
		/* 7 */
		/* 8 */
		/***/ (function(module, __webpack_exports__, __webpack_require__) {
		@@ -149,8 +155,11 @@
		// EXTERNAL MODULE: external "react"
		var external_react_ = __webpack_require__(0);
		var external_react_ = __webpack_require__(1);

		// EXTERNAL MODULE: external "prop-types"
		var external_prop_types_ = __webpack_require__(3);
		var external_prop_types_ = __webpack_require__(2);
		var external_prop_types_default = /#__PURE__/__webpack_require__.n(external_prop_types_);

		// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-clickable"
		var wonder_blocks_clickable_ = __webpack_require__(5);

		// EXTERNAL MODULE: external "aphrodite"
		@@ -160,1053 +169,68 @@ var external_aphrodite_ = __webpack_require__(4);
		// EXTERNAL MODULE: external "react-router-dom"
		var external_react_router_dom_ = __webpack_require__(5);
		var external_react_router_dom_ = __webpack_require__(6);

		// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-core"
		var wonder_blocks_core_ = __webpack_require__(2);

		// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-color"
		var wonder_blocks_color_ = __webpack_require__(1);
		var wonder_blocks_color_ = __webpack_require__(0);
		var wonder_blocks_color_default = /#__PURE__/__webpack_require__.n(wonder_blocks_color_);

		// CONCATENATED MODULE: ./packages/wonder-blocks-clickable/dist/es/index.js
		function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
		// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-core"
		var wonder_blocks_core_ = __webpack_require__(3);

		// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-icon"
		var wonder_blocks_icon_ = __webpack_require__(7);
		var wonder_blocks_icon_default = /#__PURE__/__webpack_require__.n(wonder_blocks_icon_);

		// CONCATENATED MODULE: ./packages/wonder-blocks-icon-button/components/icon-button-core.js
		function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

		function _extends() { _extends = Object.assign \|\| 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

		function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

		function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

		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 _classCallCheck(instance, Constructor) {
		if (!(instance instanceof Constructor)) {
		throw new TypeError("Cannot call a class as a function");
		}
		}
		function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

		function _defineProperties(target, props) {
		for (var i = 0; i < props.length; i++) {
		var descriptor = props[i];
		descriptor.enumerable = descriptor.enumerable \|\| false;
		descriptor.configurable = true;
		if ("value" in descriptor) descriptor.writable = true;
		Object.defineProperty(target, descriptor.key, descriptor);
		}
		}
		function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

		function _createClass(Constructor, protoProps, staticProps) {
		if (protoProps) _defineProperties(Constructor.prototype, protoProps);
		if (staticProps) _defineProperties(Constructor, staticProps);
		return Constructor;
		}
		function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

		function _defineProperty(obj, key, value) {
		if (key in obj) {
		Object.defineProperty(obj, key, {
		value: value,
		enumerable: true,
		configurable: true,
		writable: true
		});
		} else {
		obj[key] = value;
		}
		function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

		return obj;
		}
		function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf \|\| function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

		function _extends() {
		_extends = Object.assign \|\| function (target) {
		for (var i = 1; i < arguments.length; i++) {
		var source = arguments[i];
		function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

		for (var key in source) {
		if (Object.prototype.hasOwnProperty.call(source, key)) {
		target[key] = source[key];
		}
		}
		}
		function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" \|\| typeof call === "function")) { return call; } return _assertThisInitialized(self); }

		return target;
		};
		function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

		return _extends.apply(this, arguments);
		}
		function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" \|\| !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

		function ownKeys(object, enumerableOnly) {
		var keys = Object.keys(object);
		function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ \|\| Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

		if (Object.getOwnPropertySymbols) {
		var symbols = Object.getOwnPropertySymbols(object);
		if (enumerableOnly) symbols = symbols.filter(function (sym) {
		return Object.getOwnPropertyDescriptor(object, sym).enumerable;
		});
		keys.push.apply(keys, symbols);
		}
		function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

		return keys;
		}

		function _objectSpread2(target) {
		for (var i = 1; i < arguments.length; i++) {
		var source = arguments[i] != null ? arguments[i] : {};

		if (i % 2) {
		ownKeys(Object(source), true).forEach(function (key) {
		_defineProperty(target, key, source[key]);
		});
		} else if (Object.getOwnPropertyDescriptors) {
		Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
		} else {
		ownKeys(Object(source)).forEach(function (key) {
		Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
		});
		}
		}

		return target;
		}

		function _inherits(subClass, superClass) {
		if (typeof superClass !== "function" && superClass !== null) {
		throw new TypeError("Super expression must either be null or a function");
		}

		subClass.prototype = Object.create(superClass && superClass.prototype, {
		constructor: {
		value: subClass,
		writable: true,
		configurable: true
		}
		});
		if (superClass) _setPrototypeOf(subClass, superClass);
		}

		function _getPrototypeOf(o) {
		_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
		return o.__proto__ \|\| Object.getPrototypeOf(o);
		};
		return _getPrototypeOf(o);
		}

		function _setPrototypeOf(o, p) {
		_setPrototypeOf = Object.setPrototypeOf \|\| function _setPrototypeOf(o, p) {
		o.__proto__ = p;
		return o;
		};

		return _setPrototypeOf(o, p);
		}

		function _isNativeReflectConstruct() {
		if (typeof Reflect === "undefined" \|\| !Reflect.construct) return false;
		if (Reflect.construct.sham) return false;
		if (typeof Proxy === "function") return true;

		try {
		Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
		return true;
		} catch (e) {
		return false;
		}
		}

		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 _objectWithoutProperties(source, excluded) {
		if (source == null) return {};

		var target = _objectWithoutPropertiesLoose(source, excluded);

		var key, i;

		if (Object.getOwnPropertySymbols) {
		var sourceSymbolKeys = Object.getOwnPropertySymbols(source);

		for (i = 0; i < sourceSymbolKeys.length; i++) {
		key = sourceSymbolKeys[i];
		if (excluded.indexOf(key) >= 0) continue;
		if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
		target[key] = source[key];
		}
		}

		return target;
		}

		function _assertThisInitialized(self) {
		if (self === void 0) {
		throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
		}

		return self;
		}

		function _possibleConstructorReturn(self, call) {
		if (call && (_typeof(call) === "object" \|\| typeof call === "function")) {
		return call;
		}

		return _assertThisInitialized(self);
		}

		function _createSuper(Derived) {
		var hasNativeReflectConstruct = _isNativeReflectConstruct();

		return function _createSuperInternal() {
		var Super = _getPrototypeOf(Derived),
		result;

		if (hasNativeReflectConstruct) {
		var NewTarget = _getPrototypeOf(this).constructor;

		result = Reflect.construct(Super, arguments, NewTarget);
		} else {
		result = Super.apply(this, arguments);
		}

		return _possibleConstructorReturn(this, result);
		};
		}

		var getAppropriateTriggersForRole = function 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":
		default:
		return {
		triggerOnEnter: true,
		triggerOnSpace: true
		};
		}
		};

		var disabledHandlers = {
		onClick: function onClick() {
		return void 0;
		},
		onMouseEnter: function onMouseEnter() {
		return void 0;
		},
		onMouseLeave: function onMouseLeave() {
		return void 0;
		},
		onMouseDown: function onMouseDown() {
		return void 0;
		},
		onMouseUp: function onMouseUp() {
		return void 0;
		},
		onDragStart: function onDragStart() {
		return void 0;
		},
		onTouchStart: function onTouchStart() {
		return void 0;
		},
		onTouchEnd: function onTouchEnd() {
		return void 0;
		},
		onTouchCancel: function onTouchCancel() {
		return void 0;
		},
		onKeyDown: function onKeyDown() {
		return void 0;
		},
		onKeyUp: function onKeyUp() {
		return void 0;
		},
		onFocus: function onFocus() {
		return void 0;
		},
		onBlur: function onBlur() {
		return void 0;
		},
		tabIndex: -1
		};
		var keyCodes = {
		enter: 13,
		space: 32
		};
		var startState = {
		hovered: false,
		focused: false,
		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 this.context.router from a component
		* rendered as a descendant of a BrowserRouter.
		* See https://reacttraining.com/react-router/web/guides/basic-components.
		*/

		var es_ClickableBehavior = /#__PURE__/function (_React$Component) {
		_inherits(ClickableBehavior, _React$Component);

		var _super = _createSuper(ClickableBehavior);

		_createClass(ClickableBehavior, null, [{
		key: "getDerivedStateFromProps",
		value: function getDerivedStateFromProps(props, state) {
		// If new props are disabled, reset the hovered/focused/pressed states
		if (props.disabled) {
		return startState;
		} else {
		// Cannot return undefined
		return null;
		}
		}
		}]);

		function ClickableBehavior(props) {
		var _this;

		_classCallCheck(this, ClickableBehavior);

		_this = _super.call(this, props);

		_defineProperty(_assertThisInitialized(_this), "waitingForClick", void 0);

		_defineProperty(_assertThisInitialized(_this), "enterClick", void 0);

		_defineProperty(_assertThisInitialized(_this), "dragging", void 0);

		_defineProperty(_assertThisInitialized(_this), "handleClick", function (e) {
		var _this$props = _this.props,
		_this$props$onClick = _this$props.onClick,
		onClick = _this$props$onClick === void 0 ? undefined : _this$props$onClick,
		_this$props$beforeNav = _this$props.beforeNav,
		beforeNav = _this$props$beforeNav === void 0 ? undefined : _this$props$beforeNav,
		_this$props$safeWithN = _this$props.safeWithNav,
		safeWithNav = _this$props$safeWithN === void 0 ? undefined : _this$props$safeWithN;

		if (_this.enterClick) {
		return;
		}

		if (onClick \|\| beforeNav \|\| safeWithNav) {
		_this.waitingForClick = false;
		}

		_this.runCallbackAndMaybeNavigate(e);
		});

		_defineProperty(_assertThisInitialized(_this), "handleMouseEnter", function (e) {
		// When the left button is pressed already, we want it to be pressed
		if (e.buttons === 1) {
		_this.dragging = true;

		_this.setState({
		pressed: true
		});
		} else if (!_this.waitingForClick) {
		_this.setState({
		hovered: true
		});
		}
		});

		_defineProperty(_assertThisInitialized(_this), "handleMouseLeave", function () {
		if (!_this.waitingForClick) {
		_this.dragging = false;

		_this.setState({
		hovered: false,
		pressed: false,
		focused: false
		});
		}
		});

		_defineProperty(_assertThisInitialized(_this), "handleMouseDown", function () {
		_this.setState({
		pressed: true
		});
		});

		_defineProperty(_assertThisInitialized(_this), "handleMouseUp", function (e) {
		if (_this.dragging) {
		_this.dragging = false;

		_this.handleClick(e);
		}

		_this.setState({
		pressed: false,
		focused: false
		});
		});

		_defineProperty(_assertThisInitialized(_this), "handleDragStart", function (e) {
		_this.dragging = true;
		e.preventDefault();
		});

		_defineProperty(_assertThisInitialized(_this), "handleTouchStart", function () {
		_this.setState({
		pressed: true
		});
		});

		_defineProperty(_assertThisInitialized(_this), "handleTouchEnd", function () {
		_this.setState({
		pressed: false
		});

		_this.waitingForClick = true;
		});

		_defineProperty(_assertThisInitialized(_this), "handleTouchCancel", function () {
		_this.setState({
		pressed: false
		});

		_this.waitingForClick = true;
		});

		_defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (e) {
		var _this$props2 = _this.props,
		onKeyDown = _this$props2.onKeyDown,
		role = _this$props2.role;

		if (onKeyDown) {
		onKeyDown(e);
		}

		var keyCode = e.which \|\| e.keyCode;

		var _getAppropriateTrigge = getAppropriateTriggersForRole(role),
		triggerOnEnter = _getAppropriateTrigge.triggerOnEnter,
		triggerOnSpace = _getAppropriateTrigge.triggerOnSpace;

		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;
		}
		});

		_defineProperty(_assertThisInitialized(_this), "handleKeyUp", function (e) {
		var _this$props3 = _this.props,
		onKeyUp = _this$props3.onKeyUp,
		role = _this$props3.role;

		if (onKeyUp) {
		onKeyUp(e);
		}

		var keyCode = e.which \|\| e.keyCode;

		var _getAppropriateTrigge2 = getAppropriateTriggersForRole(role),
		triggerOnEnter = _getAppropriateTrigge2.triggerOnEnter,
		triggerOnSpace = _getAppropriateTrigge2.triggerOnSpace;

		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;
		}
		});

		_defineProperty(_assertThisInitialized(_this), "handleFocus", function (e) {
		_this.setState({
		focused: true
		});
		});

		_defineProperty(_assertThisInitialized(_this), "handleBlur", function (e) {
		_this.setState({
		focused: false,
		pressed: false
		});
		});

		_this.state = startState;
		_this.waitingForClick = false;
		_this.enterClick = false;
		_this.dragging = false;
		return _this;
		}

		_createClass(ClickableBehavior, [{
		key: "navigateOrReset",
		value: function navigateOrReset(shouldNavigate) {
		if (shouldNavigate) {
		var _this$props4 = this.props,
		history = _this$props4.history,
		href = _this$props4.href,
		skipClientNav = _this$props4.skipClientNav,
		_this$props4$target = _this$props4.target,
		target = _this$props4$target === void 0 ? undefined : _this$props4$target;

		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); // We don't bother clearing the waiting state, the full page
		// load navigation will do that for us by loading a new page.
		}
		}
		} else {
		this.setState({
		waiting: false
		});
		}
		}
		}, {
		key: "handleSafeWithNav",
		value: function handleSafeWithNav(safeWithNav, shouldNavigate) {
		var _this2 = this;

		var _this$props5 = this.props,
		skipClientNav = _this$props5.skipClientNav,
		history = _this$props5.history;

		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
		});
		}

		return safeWithNav().then(function () {
		if (!_this2.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.
		_this2.setState({
		waiting: true
		});
		}

		return;
		}).catch(function (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(function () {
		_this2.navigateOrReset(shouldNavigate);
		});
		}
		}
		}, {
		key: "runCallbackAndMaybeNavigate",
		value: function runCallbackAndMaybeNavigate(e) {
		var _this3 = this;

		var _this$props6 = this.props,
		_this$props6$onClick = _this$props6.onClick,
		onClick = _this$props6$onClick === void 0 ? undefined : _this$props6$onClick,
		_this$props6$beforeNa = _this$props6.beforeNav,
		beforeNav = _this$props6$beforeNa === void 0 ? undefined : _this$props6$beforeNa,
		_this$props6$safeWith = _this$props6.safeWithNav,
		safeWithNav = _this$props6$safeWith === void 0 ? undefined : _this$props6$safeWith,
		href = _this$props6.href,
		type = _this$props6.type;
		var shouldNavigate = true;
		var canSubmit = true;

		if (onClick) {
		onClick(e);
		} // If onClick() has called e.preventDefault() then we shouldn't
		// navigate.


		if (e.defaultPrevented) {
		shouldNavigate = false;
		canSubmit = false;
		}

		e.preventDefault();

		if (!href && type === "submit" && canSubmit) {
		var target = e.currentTarget;

		while (target) {
		if (target instanceof window.HTMLFormElement) {
		var event = new window.Event("submit");
		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.


		target = target.parentElement;
		}
		}

		if (beforeNav) {
		this.setState({
		waiting: true
		});
		beforeNav().then(function () {
		if (safeWithNav) {
		return _this3.handleSafeWithNav(safeWithNav, shouldNavigate);
		} else {
		return _this3.navigateOrReset(shouldNavigate);
		}
		}).catch(function () {});
		} else if (safeWithNav) {
		return this.handleSafeWithNav(safeWithNav, shouldNavigate);
		} else {
		this.navigateOrReset(shouldNavigate);
		}
		}
		}, {
		key: "render",
		value: function render() {
		var childrenProps = this.props.disabled ? disabledHandlers : {
		onClick: this.handleClick,
		onMouseEnter: this.handleMouseEnter,
		onMouseLeave: this.handleMouseLeave,
		onMouseDown: this.handleMouseDown,
		onMouseUp: this.handleMouseUp,
		onDragStart: this.handleDragStart,
		onTouchStart: this.handleTouchStart,
		onTouchEnd: this.handleTouchEnd,
		onTouchCancel: this.handleTouchCancel,
		onKeyDown: this.handleKeyDown,
		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);
		var children = this.props.children;
		return children && children(this.state, childrenProps);
		}
		}]);

		return ClickableBehavior;
		}(external_react_["Component"]);

		_defineProperty(es_ClickableBehavior, "defaultProps", {
		disabled: false
		});
		/**
		* Returns true for external url.
		* Such as http://, https://, //
		*/


		function isExternalUrl(url) {
		return /^(https?:)?\/\//i.test(url);
		}
		/**
		* 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 this.context.router from a component rendered
		* as a descendant of a BrowserRouter.
		* See https://reacttraining.com/react-router/web/guides/basic-components.
		*/


		var ClickableBehaviorWithRouter = Object(external_react_router_dom_["withRouter"])(es_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) {
		if (router && skipClientNav !== true && href && !isExternalUrl(href)) {
		return ClickableBehaviorWithRouter;
		}

		return es_ClickableBehavior;
		}

		var StyledAnchor = Object(wonder_blocks_core_["addStyle"])("a");
		var StyledButton = Object(wonder_blocks_core_["addStyle"])("button");
		var StyledLink = Object(wonder_blocks_core_["addStyle"])(external_react_router_dom_["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>
		* ```
		*/

		var es_Clickable = /#__PURE__/function (_React$Component) {
		_inherits(Clickable, _React$Component);

		var _super = _createSuper(Clickable);

		function Clickable() {
		var _this;

		_classCallCheck(this, Clickable);

		for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
		args[_key] = arguments[_key];
		}

		_this = _super.call.apply(_super, [this].concat(args));

		_defineProperty(_assertThisInitialized(_this), "getCorrectTag", function (clickableState, commonProps) {
		var activeHref = _this.props.href && !_this.props.disabled;
		var useClient = _this.context.router && !_this.props.skipClientNav; // NOTE: checking this.props.href here is redundant, but flow
		// needs it to refine this.props.href to a string.

		if (activeHref && useClient && _this.props.href) {
		return /#__PURE__/Object(external_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__/Object(external_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__/Object(external_react_["createElement"])(StyledButton, _extends({}, commonProps, {
		type: "button",
		disabled: _this.props.disabled
		}), _this.props.children(clickableState));
		}
		});

		return _this;
		}

		_createClass(Clickable, [{
		key: "render",
		value: function render() {
		var _this2 = this;

		var _this$props = this.props,
		href = _this$props.href,
		onClick = _this$props.onClick,
		skipClientNav = _this$props.skipClientNav,
		_this$props$beforeNav = _this$props.beforeNav,
		beforeNav = _this$props$beforeNav === void 0 ? undefined : _this$props$beforeNav,
		_this$props$safeWithN = _this$props.safeWithNav,
		safeWithNav = _this$props$safeWithN === void 0 ? undefined : _this$props$safeWithN,
		style = _this$props.style,
		_this$props$target = _this$props.target,
		target = _this$props$target === void 0 ? undefined : _this$props$target,
		testId = _this$props.testId,
		onKeyDown = _this$props.onKeyDown,
		onKeyUp = _this$props.onKeyUp,
		hideDefaultFocusRing = _this$props.hideDefaultFocusRing,
		restProps = _objectWithoutProperties(_this$props, ["href", "onClick", "skipClientNav", "beforeNav", "safeWithNav", "style", "target", "testId", "onKeyDown", "onKeyUp", "hideDefaultFocusRing"]);

		var ClickableBehavior = getClickableBehavior(href, skipClientNav, this.context.router);

		var getStyle = function getStyle(state) {
		return [styles.reset, styles.link, !hideDefaultFocusRing && state.focused && styles.focused, style];
		};

		if (beforeNav) {
		return /#__PURE__/Object(external_react_["createElement"])(ClickableBehavior, {
		href: href,
		onClick: onClick,
		beforeNav: beforeNav,
		safeWithNav: safeWithNav,
		onKeyDown: onKeyDown,
		onKeyUp: onKeyUp
		}, function (state, childrenProps) {
		return _this2.getCorrectTag(state, _objectSpread2(_objectSpread2({}, restProps), {}, {
		"data-test-id": testId,
		style: getStyle(state)
		}, childrenProps));
		});
		} else {
		return /#__PURE__/Object(external_react_["createElement"])(ClickableBehavior, {
		href: href,
		onClick: onClick,
		safeWithNav: safeWithNav,
		onKeyDown: onKeyDown,
		onKeyUp: onKeyUp,
		target: target
		}, function (state, childrenProps) {
		return _this2.getCorrectTag(state, _objectSpread2(_objectSpread2({}, restProps), {}, {
		"data-test-id": testId,
		style: getStyle(state)
		}, childrenProps));
		});
		}
		}
		}]);

		return Clickable;
		}(external_react_["Component"]); // Source: https://gist.github.com/MoOx/9137295


		_defineProperty(es_Clickable, "contextTypes", {
		router: external_prop_types_default.a.any
		});

		_defineProperty(es_Clickable, "defaultProps", {
		disabled: false,
		"aria-label": ""
		});

		var styles = external_aphrodite_["StyleSheet"].create({
		reset: {
		border: "none",
		margin: 0,
		padding: 0,
		width: "auto",
		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"
		},
		link: {
		cursor: "pointer"
		},
		focused: {
		outline: "solid 2px ".concat(wonder_blocks_color_default.a.blue)
		}
		});
		/* harmony default export */ var es = (es_Clickable);

		// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-icon"
		var wonder_blocks_icon_ = __webpack_require__(6);
		var wonder_blocks_icon_default = /#__PURE__/__webpack_require__.n(wonder_blocks_icon_);

		// CONCATENATED MODULE: ./packages/wonder-blocks-icon-button/components/icon-button-core.js
		function icon_button_core_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { icon_button_core_typeof = function _typeof(obj) { return typeof obj; }; } else { icon_button_core_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return icon_button_core_typeof(obj); }

		function icon_button_core_extends() { icon_button_core_extends = Object.assign \|\| 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 icon_button_core_extends.apply(this, arguments); }

		function icon_button_core_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

		function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { icon_button_core_ownKeys(Object(source), true).forEach(function (key) { icon_button_core_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { icon_button_core_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

		function icon_button_core_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = icon_button_core_objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

		function icon_button_core_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 icon_button_core_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

		function icon_button_core_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

		function icon_button_core_createClass(Constructor, protoProps, staticProps) { if (protoProps) icon_button_core_defineProperties(Constructor.prototype, protoProps); if (staticProps) icon_button_core_defineProperties(Constructor, staticProps); return Constructor; }

		function icon_button_core_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) icon_button_core_setPrototypeOf(subClass, superClass); }

		function icon_button_core_setPrototypeOf(o, p) { icon_button_core_setPrototypeOf = Object.setPrototypeOf \|\| function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return icon_button_core_setPrototypeOf(o, p); }

		function icon_button_core_createSuper(Derived) { var hasNativeReflectConstruct = icon_button_core_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = icon_button_core_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = icon_button_core_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return icon_button_core_possibleConstructorReturn(this, result); }; }

		function icon_button_core_possibleConstructorReturn(self, call) { if (call && (icon_button_core_typeof(call) === "object" \|\| typeof call === "function")) { return call; } return icon_button_core_assertThisInitialized(self); }

		function icon_button_core_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

		function icon_button_core_isNativeReflectConstruct() { if (typeof Reflect === "undefined" \|\| !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

		function icon_button_core_getPrototypeOf(o) { icon_button_core_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ \|\| Object.getPrototypeOf(o); }; return icon_button_core_getPrototypeOf(o); }

		function icon_button_core_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }








		var icon_button_core_StyledAnchor = Object(wonder_blocks_core_["addStyle"])("a");
		var icon_button_core_StyledButton = Object(wonder_blocks_core_["addStyle"])("button");
		var icon_button_core_StyledLink = Object(wonder_blocks_core_["addStyle"])(external_react_router_dom_["Link"]);

		var icon_button_core_IconButtonCore = /#__PURE__/function (_React$Component) {
		icon_button_core_inherits(IconButtonCore, _React$Component);
		_inherits(IconButtonCore, _React$Component);

		var _super = icon_button_core_createSuper(IconButtonCore);
		var _super = _createSuper(IconButtonCore);

		function IconButtonCore() {
		icon_button_core_classCallCheck(this, IconButtonCore);
		_classCallCheck(this, IconButtonCore);

		@@ -1216,3 +240,3 @@ return _super.apply(this, arguments);

		icon_button_core_createClass(IconButtonCore, [{
		_createClass(IconButtonCore, [{
		key: "render",
		@@ -1234,3 +258,3 @@ value: function render() {
		_ = _this$props.waiting,
		restProps = icon_button_core_objectWithoutProperties(_this$props, ["skipClientNav", "color", "disabled", "focused", "hovered", "href", "icon", "kind", "light", "pressed", "style", "testId", "waiting"]);
		restProps = _objectWithoutProperties(_this$props, ["skipClientNav", "color", "disabled", "focused", "hovered", "href", "icon", "kind", "light", "pressed", "style", "testId", "waiting"]);

		@@ -1255,9 +279,9 @@ var router = this.context.router;
		if (href && !disabled) {
		return router && !skipClientNav ? /#__PURE__/external_react_["createElement"](icon_button_core_StyledLink, icon_button_core_extends({}, commonProps, {
		return router && !skipClientNav ? /#__PURE__/external_react_["createElement"](StyledLink, _extends({}, commonProps, {
		to: href
		}), child) : /#__PURE__/external_react_["createElement"](icon_button_core_StyledAnchor, icon_button_core_extends({}, commonProps, {
		}), child) : /#__PURE__/external_react_["createElement"](StyledAnchor, _extends({}, commonProps, {
		href: href
		}), child);
		} else {
		return /#__PURE__/external_react_["createElement"](icon_button_core_StyledButton, icon_button_core_extends({
		return /#__PURE__/external_react_["createElement"](StyledButton, _extends({
		type: "button"
		@@ -1274,3 +298,3 @@ }, commonProps, {

		icon_button_core_defineProperty(icon_button_core_IconButtonCore, "contextTypes", {
		_defineProperty(icon_button_core_IconButtonCore, "contextTypes", {
		router: external_prop_types_default.a.any
		@@ -1308,3 +332,3 @@ });
		});
		var icon_button_core_styles = {};
		var styles = {};

		@@ -1314,4 +338,4 @@ var icon_button_core_generateStyles = function _generateStyles(color, kind, light) {

		if (icon_button_core_styles[buttonType]) {
		return icon_button_core_styles[buttonType];
		if (styles[buttonType]) {
		return styles[buttonType];
		}
		@@ -1365,4 +389,4 @@

		icon_button_core_styles[buttonType] = external_aphrodite_["StyleSheet"].create(newStyles);
		return icon_button_core_styles[buttonType];
		styles[buttonType] = external_aphrodite_["StyleSheet"].create(newStyles);
		return styles[buttonType];
		};
		@@ -1463,3 +487,3 @@ // CONCATENATED MODULE: ./packages/wonder-blocks-icon-button/components/icon-button.js

		var ClickableBehavior = getClickableBehavior(href, skipClientNav, this.context.router);
		var ClickableBehavior = Object(wonder_blocks_clickable_["getClickableBehavior"])(href, skipClientNav, this.context.router);
		return /#__PURE__/external_react_["createElement"](ClickableBehavior, {
		@@ -1466,0 +490,0 @@ disabled: sharedProps.disabled,

package.json

		{
		"name": "@khanacademy/wonder-blocks-icon-button",
		"version": "3.3.3",
		"version": "3.3.4",
		"design": "v1",
		@@ -18,2 +18,3 @@ "publishConfig": {
		"dependencies": {
		"@khanacademy/wonder-blocks-clickable": "^2.0.4",
		"@khanacademy/wonder-blocks-color": "^1.1.16",
		@@ -32,3 +33,3 @@ "@khanacademy/wonder-blocks-core": "^3.1.0",
		},
		"gitHead": "59ba7fd38c7639ee60b4e8bfc14117db7ee16761"
		"gitHead": "9e9cffd1bf5922c8fb9406e85746749acf0ffe54"
		}

@khanacademy/wonder-blocks-icon-button - npm Package Compare versions

New alerts

Fixed alerts

Worsened metrics

Dependency changes