@khanacademy/wonder-blocks-clickable
Advanced tools
@khanacademy/wonder-blocks-clickable - npm Package Compare versions
Comparing version 2.1.1 to 2.1.2
@@ -0,1 +1,3 @@ | ||
| import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose'; | ||
| import _extends from '@babel/runtime/helpers/extends'; | ||
| import { Component, createElement } from 'react'; | ||
@@ -8,207 +10,3 @@ import { StyleSheet } from 'aphrodite'; | ||
| 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 _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; | ||
| } | ||
| return 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 _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) { | ||
| const getAppropriateTriggersForRole = role => { | ||
| switch (role) { | ||
@@ -244,49 +42,23 @@ // Triggers on ENTER, but not SPACE | ||
| 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; | ||
| }, | ||
| const disabledHandlers = { | ||
| onClick: () => void 0, | ||
| onMouseEnter: () => void 0, | ||
| onMouseLeave: () => void 0, | ||
| onMouseDown: () => void 0, | ||
| onMouseUp: () => void 0, | ||
| onDragStart: () => void 0, | ||
| onTouchStart: () => void 0, | ||
| onTouchEnd: () => void 0, | ||
| onTouchCancel: () => void 0, | ||
| onKeyDown: () => void 0, | ||
| onKeyUp: () => void 0, | ||
| onFocus: () => void 0, | ||
| onBlur: () => void 0, | ||
| tabIndex: -1 | ||
| }; | ||
| var keyCodes = { | ||
| const keyCodes = { | ||
| enter: 13, | ||
| space: 32 | ||
| }; | ||
| var startState = { | ||
| const startState = { | ||
| hovered: false, | ||
@@ -376,43 +148,24 @@ focused: false, | ||
| var 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; | ||
| } | ||
| class ClickableBehavior extends Component { | ||
| static 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; | ||
| constructor(props) { | ||
| super(props); | ||
| _classCallCheck(this, ClickableBehavior); | ||
| this.handleClick = e => { | ||
| const { | ||
| onClick = undefined, | ||
| beforeNav = undefined, | ||
| safeWithNav = undefined | ||
| } = this.props; | ||
| _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) { | ||
| if (this.enterClick) { | ||
| return; | ||
@@ -422,28 +175,26 @@ } | ||
| if (onClick || beforeNav || safeWithNav) { | ||
| _this.waitingForClick = false; | ||
| this.waitingForClick = false; | ||
| } | ||
| _this.runCallbackAndMaybeNavigate(e); | ||
| }); | ||
| this.runCallbackAndMaybeNavigate(e); | ||
| }; | ||
| _defineProperty(_assertThisInitialized(_this), "handleMouseEnter", function (e) { | ||
| this.handleMouseEnter = e => { | ||
| // When the left button is pressed already, we want it to be pressed | ||
| if (e.buttons === 1) { | ||
| _this.dragging = true; | ||
| _this.setState({ | ||
| this.dragging = true; | ||
| this.setState({ | ||
| pressed: true | ||
| }); | ||
| } else if (!_this.waitingForClick) { | ||
| _this.setState({ | ||
| } else if (!this.waitingForClick) { | ||
| this.setState({ | ||
| hovered: true | ||
| }); | ||
| } | ||
| }); | ||
| }; | ||
| _defineProperty(_assertThisInitialized(_this), "handleMouseLeave", function () { | ||
| if (!_this.waitingForClick) { | ||
| _this.dragging = false; | ||
| _this.setState({ | ||
| this.handleMouseLeave = () => { | ||
| if (!this.waitingForClick) { | ||
| this.dragging = false; | ||
| this.setState({ | ||
| hovered: false, | ||
@@ -454,55 +205,53 @@ pressed: false, | ||
| } | ||
| }); | ||
| }; | ||
| _defineProperty(_assertThisInitialized(_this), "handleMouseDown", function () { | ||
| _this.setState({ | ||
| this.handleMouseDown = () => { | ||
| this.setState({ | ||
| pressed: true | ||
| }); | ||
| }); | ||
| }; | ||
| _defineProperty(_assertThisInitialized(_this), "handleMouseUp", function (e) { | ||
| if (_this.dragging) { | ||
| _this.dragging = false; | ||
| _this.handleClick(e); | ||
| this.handleMouseUp = e => { | ||
| if (this.dragging) { | ||
| this.dragging = false; | ||
| this.handleClick(e); | ||
| } | ||
| _this.setState({ | ||
| this.setState({ | ||
| pressed: false, | ||
| focused: false | ||
| }); | ||
| }); | ||
| }; | ||
| _defineProperty(_assertThisInitialized(_this), "handleDragStart", function (e) { | ||
| _this.dragging = true; | ||
| this.handleDragStart = e => { | ||
| this.dragging = true; | ||
| e.preventDefault(); | ||
| }); | ||
| }; | ||
| _defineProperty(_assertThisInitialized(_this), "handleTouchStart", function () { | ||
| _this.setState({ | ||
| this.handleTouchStart = () => { | ||
| this.setState({ | ||
| pressed: true | ||
| }); | ||
| }); | ||
| }; | ||
| _defineProperty(_assertThisInitialized(_this), "handleTouchEnd", function () { | ||
| _this.setState({ | ||
| this.handleTouchEnd = () => { | ||
| this.setState({ | ||
| pressed: false | ||
| }); | ||
| this.waitingForClick = true; | ||
| }; | ||
| _this.waitingForClick = true; | ||
| }); | ||
| _defineProperty(_assertThisInitialized(_this), "handleTouchCancel", function () { | ||
| _this.setState({ | ||
| this.handleTouchCancel = () => { | ||
| this.setState({ | ||
| pressed: false | ||
| }); | ||
| this.waitingForClick = true; | ||
| }; | ||
| _this.waitingForClick = true; | ||
| }); | ||
| this.handleKeyDown = e => { | ||
| const { | ||
| onKeyDown, | ||
| role | ||
| } = this.props; | ||
| _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (e) { | ||
| var _this$props2 = _this.props, | ||
| onKeyDown = _this$props2.onKeyDown, | ||
| role = _this$props2.role; | ||
| if (onKeyDown) { | ||
@@ -512,8 +261,8 @@ onKeyDown(e); | ||
| var keyCode = e.which || e.keyCode; | ||
| const keyCode = e.which || e.keyCode; | ||
| const { | ||
| triggerOnEnter, | ||
| triggerOnSpace | ||
| } = getAppropriateTriggersForRole(role); | ||
| var _getAppropriateTrigge = getAppropriateTriggersForRole(role), | ||
| triggerOnEnter = _getAppropriateTrigge.triggerOnEnter, | ||
| triggerOnSpace = _getAppropriateTrigge.triggerOnSpace; | ||
| if (triggerOnEnter && keyCode === keyCodes.enter || triggerOnSpace && keyCode === keyCodes.space) { | ||
@@ -525,4 +274,3 @@ // This prevents space from scrolling down. It also prevents the | ||
| e.preventDefault(); | ||
| _this.setState({ | ||
| this.setState({ | ||
| pressed: true | ||
@@ -533,10 +281,11 @@ }); | ||
| // keep track of the enter keydown to negate the onClick callback | ||
| _this.enterClick = true; | ||
| this.enterClick = true; | ||
| } | ||
| }); | ||
| }; | ||
| _defineProperty(_assertThisInitialized(_this), "handleKeyUp", function (e) { | ||
| var _this$props3 = _this.props, | ||
| onKeyUp = _this$props3.onKeyUp, | ||
| role = _this$props3.role; | ||
| this.handleKeyUp = e => { | ||
| const { | ||
| onKeyUp, | ||
| role | ||
| } = this.props; | ||
@@ -547,88 +296,92 @@ if (onKeyUp) { | ||
| var keyCode = e.which || e.keyCode; | ||
| const keyCode = e.which || e.keyCode; | ||
| const { | ||
| triggerOnEnter, | ||
| triggerOnSpace | ||
| } = getAppropriateTriggersForRole(role); | ||
| var _getAppropriateTrigge2 = getAppropriateTriggersForRole(role), | ||
| triggerOnEnter = _getAppropriateTrigge2.triggerOnEnter, | ||
| triggerOnSpace = _getAppropriateTrigge2.triggerOnSpace; | ||
| 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; | ||
| } | ||
| }); | ||
| }; | ||
| _defineProperty(_assertThisInitialized(_this), "handleFocus", function (e) { | ||
| _this.setState({ | ||
| this.handleFocus = e => { | ||
| this.setState({ | ||
| focused: true | ||
| }); | ||
| }); | ||
| }; | ||
| _defineProperty(_assertThisInitialized(_this), "handleBlur", function (e) { | ||
| _this.setState({ | ||
| this.handleBlur = e => { | ||
| this.setState({ | ||
| focused: false, | ||
| pressed: false | ||
| }); | ||
| }); | ||
| }; | ||
| _this.state = startState; | ||
| _this.waitingForClick = false; | ||
| _this.enterClick = false; | ||
| _this.dragging = false; | ||
| return _this; | ||
| this.state = startState; | ||
| this.waitingForClick = false; | ||
| this.enterClick = false; | ||
| this.dragging = false; | ||
| } | ||
| _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; | ||
| 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); // We don't bother clearing the waiting state, the full page | ||
| // load navigation will do that for us by loading a new page. | ||
| } | ||
| 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 { | ||
| } | ||
| } else { | ||
| this.setState({ | ||
| waiting: false | ||
| }); | ||
| } | ||
| } | ||
| handleSafeWithNav(safeWithNav, shouldNavigate) { | ||
| const { | ||
| skipClientNav, | ||
| history | ||
| } = this.props; | ||
| if (history && !skipClientNav || this.props.target === "_blank") { | ||
| // client-side nav | ||
| safeWithNav(); | ||
| this.navigateOrReset(shouldNavigate); | ||
| return Promise.resolve(); | ||
| } else { | ||
| if (!this.state.waiting) { | ||
| // We only show the spinner for safeWithNav when doing | ||
| // a full page load navigation since since the spinner is | ||
| // indicating that we're waiting for navigation to occur. | ||
| this.setState({ | ||
| waiting: false | ||
| waiting: true | ||
| }); | ||
| } | ||
| } | ||
| }, { | ||
| 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 { | ||
| return safeWithNav().then(() => { | ||
| if (!this.state.waiting) { | ||
@@ -643,130 +396,113 @@ // We only show the spinner for safeWithNav when doing | ||
| 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); | ||
| }); | ||
| } | ||
| return; | ||
| }).catch(error => {// We ignore the error here so that we always | ||
| // navigate when using safeWithNav regardless of | ||
| // whether we're doing a client-side nav or not. | ||
| }).finally(() => { | ||
| this.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; | ||
| runCallbackAndMaybeNavigate(e) { | ||
| const { | ||
| onClick = undefined, | ||
| beforeNav = undefined, | ||
| safeWithNav = undefined, | ||
| href, | ||
| type | ||
| } = this.props; | ||
| let shouldNavigate = true; | ||
| let canSubmit = true; | ||
| if (onClick) { | ||
| onClick(e); | ||
| } // If onClick() has called e.preventDefault() then we shouldn't | ||
| // navigate. | ||
| if (onClick) { | ||
| onClick(e); | ||
| } // If onClick() has called e.preventDefault() then we shouldn't | ||
| // navigate. | ||
| if (e.defaultPrevented) { | ||
| shouldNavigate = false; | ||
| canSubmit = false; | ||
| } | ||
| if (e.defaultPrevented) { | ||
| shouldNavigate = false; | ||
| canSubmit = false; | ||
| } | ||
| e.preventDefault(); | ||
| e.preventDefault(); | ||
| if (!href && type === "submit" && canSubmit) { | ||
| var target = e.currentTarget; | ||
| if (!href && type === "submit" && canSubmit) { | ||
| let target = e.currentTarget; | ||
| while (target) { | ||
| if (target instanceof window.HTMLFormElement) { | ||
| // This event must be marked as cancelable otherwise calling | ||
| // e.preventDefault() on it won't do anything in Firefox. | ||
| // Chrome and Safari allow calling e.preventDefault() on | ||
| // non-cancelable events, but really they shouldn't. | ||
| var event = new window.Event("submit", { | ||
| cancelable: true | ||
| }); | ||
| target.dispatchEvent(event); | ||
| break; | ||
| } // All events should be typed as SyntheticEvent<HTMLElement>. | ||
| // Updating all of the places will take some time so I'll do | ||
| // this later | ||
| // $FlowFixMe[prop-missing] | ||
| while (target) { | ||
| if (target instanceof window.HTMLFormElement) { | ||
| // This event must be marked as cancelable otherwise calling | ||
| // e.preventDefault() on it won't do anything in Firefox. | ||
| // Chrome and Safari allow calling e.preventDefault() on | ||
| // non-cancelable events, but really they shouldn't. | ||
| const event = new window.Event("submit", { | ||
| cancelable: true | ||
| }); | ||
| target.dispatchEvent(event); | ||
| break; | ||
| } // All events should be typed as SyntheticEvent<HTMLElement>. | ||
| // Updating all of the places will take some time so I'll do | ||
| // this later | ||
| // $FlowFixMe[prop-missing] | ||
| target = target.parentElement; | ||
| } | ||
| 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); | ||
| 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); | ||
| } | ||
| }]); | ||
| } | ||
| return ClickableBehavior; | ||
| }(Component); | ||
| render() { | ||
| const 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/ | ||
| _defineProperty(ClickableBehavior, "defaultProps", { | ||
| 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 | ||
| }); | ||
| }; | ||
@@ -779,3 +515,3 @@ /** | ||
| */ | ||
| var isClientSideUrl = function isClientSideUrl(href) { | ||
| const isClientSideUrl = href => { | ||
| if (typeof href !== "string") { | ||
@@ -798,3 +534,3 @@ return false; | ||
| */ | ||
| var ClickableBehaviorWithRouter = withRouter(ClickableBehavior); | ||
| const ClickableBehaviorWithRouter = withRouter(ClickableBehavior); | ||
| function getClickableBehavior( | ||
@@ -824,5 +560,6 @@ /** | ||
| var StyledAnchor = addStyle("a"); | ||
| var StyledButton = addStyle("button"); | ||
| var StyledLink = addStyle(Link); | ||
| const _excluded = ["href", "onClick", "skipClientNav", "beforeNav", "safeWithNav", "style", "target", "testId", "onKeyDown", "onKeyUp", "hideDefaultFocusRing", "light", "disabled"]; | ||
| const StyledAnchor = addStyle("a"); | ||
| const StyledButton = addStyle("button"); | ||
| const StyledLink = addStyle(Link); | ||
| /** | ||
@@ -853,126 +590,97 @@ * A component to turn any custom component into a clickable one. | ||
| var Clickable = /*#__PURE__*/function (_React$Component) { | ||
| _inherits(Clickable, _React$Component); | ||
| class Clickable extends Component { | ||
| constructor(...args) { | ||
| super(...args); | ||
| 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 && isClientSideUrl(_this.props.href || ""); // NOTE: checking this.props.href here is redundant, but flow | ||
| this.getCorrectTag = (clickableState, commonProps) => { | ||
| const activeHref = this.props.href && !this.props.disabled; | ||
| const useClient = this.context.router && !this.props.skipClientNav && isClientSideUrl(this.props.href || ""); // NOTE: checking this.props.href here is redundant, but flow | ||
| // needs it to refine this.props.href to a string. | ||
| if (activeHref && useClient && _this.props.href) { | ||
| if (activeHref && useClient && this.props.href) { | ||
| return /*#__PURE__*/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 /*#__PURE__*/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 /*#__PURE__*/createElement(StyledButton, _extends({}, commonProps, { | ||
| type: "button", | ||
| disabled: _this.props.disabled | ||
| }), _this.props.children(clickableState)); | ||
| disabled: this.props.disabled | ||
| }), this.props.children(clickableState)); | ||
| } | ||
| }); | ||
| return _this; | ||
| }; | ||
| } | ||
| _createClass(Clickable, [{ | ||
| key: "render", | ||
| value: function render() { | ||
| var _this2 = this; | ||
| render() { | ||
| 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(_this$props, _excluded); | ||
| 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, | ||
| light = _this$props.light, | ||
| disabled = _this$props.disabled, | ||
| restProps = _objectWithoutProperties(_this$props, ["href", "onClick", "skipClientNav", "beforeNav", "safeWithNav", "style", "target", "testId", "onKeyDown", "onKeyUp", "hideDefaultFocusRing", "light", "disabled"]); | ||
| const ClickableBehavior = getClickableBehavior(href, skipClientNav, this.context.router); | ||
| var ClickableBehavior = getClickableBehavior(href, skipClientNav, this.context.router); | ||
| const getStyle = state => [styles.reset, styles.link, !hideDefaultFocusRing && state.focused && (light ? styles.focusedLight : styles.focused), style]; | ||
| var getStyle = function getStyle(state) { | ||
| return [styles.reset, styles.link, !hideDefaultFocusRing && state.focused && (light ? styles.focusedLight : styles.focused), style]; | ||
| }; | ||
| if (beforeNav) { | ||
| return /*#__PURE__*/createElement(ClickableBehavior, { | ||
| href: href, | ||
| onClick: onClick, | ||
| beforeNav: beforeNav, | ||
| safeWithNav: safeWithNav, | ||
| onKeyDown: onKeyDown, | ||
| onKeyUp: onKeyUp, | ||
| disabled: disabled | ||
| }, function (state, childrenProps) { | ||
| return _this2.getCorrectTag(state, _objectSpread2(_objectSpread2({}, restProps), {}, { | ||
| "data-test-id": testId, | ||
| style: getStyle(state) | ||
| }, childrenProps)); | ||
| }); | ||
| } else { | ||
| return /*#__PURE__*/createElement(ClickableBehavior, { | ||
| href: href, | ||
| onClick: onClick, | ||
| safeWithNav: safeWithNav, | ||
| onKeyDown: onKeyDown, | ||
| onKeyUp: onKeyUp, | ||
| target: target, | ||
| disabled: disabled | ||
| }, function (state, childrenProps) { | ||
| return _this2.getCorrectTag(state, _objectSpread2(_objectSpread2({}, restProps), {}, { | ||
| "data-test-id": testId, | ||
| style: getStyle(state) | ||
| }, childrenProps)); | ||
| }); | ||
| } | ||
| if (beforeNav) { | ||
| return /*#__PURE__*/createElement(ClickableBehavior, { | ||
| href: href, | ||
| onClick: onClick, | ||
| beforeNav: beforeNav, | ||
| safeWithNav: safeWithNav, | ||
| onKeyDown: onKeyDown, | ||
| onKeyUp: onKeyUp, | ||
| disabled: disabled | ||
| }, (state, childrenProps) => this.getCorrectTag(state, _extends({}, restProps, { | ||
| "data-test-id": testId, | ||
| style: getStyle(state) | ||
| }, childrenProps))); | ||
| } else { | ||
| return /*#__PURE__*/createElement(ClickableBehavior, { | ||
| href: href, | ||
| onClick: onClick, | ||
| safeWithNav: safeWithNav, | ||
| onKeyDown: onKeyDown, | ||
| onKeyUp: onKeyUp, | ||
| target: target, | ||
| disabled: disabled | ||
| }, (state, childrenProps) => this.getCorrectTag(state, _extends({}, restProps, { | ||
| "data-test-id": testId, | ||
| style: getStyle(state) | ||
| }, childrenProps))); | ||
| } | ||
| }]); | ||
| } | ||
| return Clickable; | ||
| }(Component); // Source: https://gist.github.com/MoOx/9137295 | ||
| } // Source: https://gist.github.com/MoOx/9137295 | ||
| _defineProperty(Clickable, "contextTypes", { | ||
| Clickable.contextTypes = { | ||
| router: any | ||
| }); | ||
| _defineProperty(Clickable, "defaultProps", { | ||
| }; | ||
| Clickable.defaultProps = { | ||
| light: false, | ||
| disabled: false, | ||
| "aria-label": "" | ||
| }); | ||
| var styles = StyleSheet.create({ | ||
| }; | ||
| const styles = StyleSheet.create({ | ||
| reset: { | ||
@@ -1010,6 +718,6 @@ border: "none", | ||
| focused: { | ||
| outline: "solid 2px ".concat(Color.blue) | ||
| outline: `solid 2px ${Color.blue}` | ||
| }, | ||
| focusedLight: { | ||
| outline: "solid 2px ".concat(Color.white) | ||
| outline: `solid 2px ${Color.white}` | ||
| } | ||
@@ -1016,0 +724,0 @@ }); |
1006
dist/index.js
@@ -85,3 +85,3 @@ module.exports = | ||
| /******/ // Load entry module and return exports | ||
| /******/ return __webpack_require__(__webpack_require__.s = 5); | ||
| /******/ return __webpack_require__(__webpack_require__.s = 7); | ||
| /******/ }) | ||
@@ -99,4 +99,24 @@ /************************************************************************/ | ||
| module.exports = require("react-router-dom"); | ||
| function _extends() { | ||
| module.exports = _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; | ||
| }; | ||
| module.exports["default"] = module.exports, module.exports.__esModule = true; | ||
| return _extends.apply(this, arguments); | ||
| } | ||
| module.exports = _extends; | ||
| module.exports["default"] = module.exports, module.exports.__esModule = true; | ||
| /***/ }), | ||
@@ -106,3 +126,3 @@ /* 2 */ | ||
| module.exports = require("@khanacademy/wonder-blocks-core"); | ||
| module.exports = require("react-router-dom"); | ||
@@ -113,3 +133,3 @@ /***/ }), | ||
| module.exports = require("aphrodite"); | ||
| module.exports = require("@khanacademy/wonder-blocks-core"); | ||
@@ -120,6 +140,34 @@ /***/ }), | ||
| 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; | ||
| } | ||
| module.exports = _objectWithoutPropertiesLoose; | ||
| module.exports["default"] = module.exports, module.exports.__esModule = true; | ||
| /***/ }), | ||
| /* 5 */ | ||
| /***/ (function(module, exports) { | ||
| module.exports = require("aphrodite"); | ||
| /***/ }), | ||
| /* 6 */ | ||
| /***/ (function(module, exports) { | ||
| module.exports = require("prop-types"); | ||
| /***/ }), | ||
| /* 5 */ | ||
| /* 7 */ | ||
| /***/ (function(module, __webpack_exports__, __webpack_require__) { | ||
@@ -137,2 +185,10 @@ | ||
| // EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js | ||
| var objectWithoutPropertiesLoose = __webpack_require__(4); | ||
| var objectWithoutPropertiesLoose_default = /*#__PURE__*/__webpack_require__.n(objectWithoutPropertiesLoose); | ||
| // EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/extends.js | ||
| var helpers_extends = __webpack_require__(1); | ||
| var extends_default = /*#__PURE__*/__webpack_require__.n(helpers_extends); | ||
| // EXTERNAL MODULE: external "react" | ||
@@ -142,62 +198,15 @@ var external_react_ = __webpack_require__(0); | ||
| // EXTERNAL MODULE: external "aphrodite" | ||
| var external_aphrodite_ = __webpack_require__(3); | ||
| var external_aphrodite_ = __webpack_require__(5); | ||
| // EXTERNAL MODULE: external "prop-types" | ||
| var external_prop_types_ = __webpack_require__(4); | ||
| var external_prop_types_ = __webpack_require__(6); | ||
| // EXTERNAL MODULE: external "react-router-dom" | ||
| var external_react_router_dom_ = __webpack_require__(1); | ||
| var external_react_router_dom_ = __webpack_require__(2); | ||
| // EXTERNAL MODULE: external "@khanacademy/wonder-blocks-core" | ||
| var wonder_blocks_core_ = __webpack_require__(2); | ||
| var wonder_blocks_core_ = __webpack_require__(3); | ||
| // CONCATENATED MODULE: ./packages/wonder-blocks-color/dist/es/index.js | ||
| 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; | ||
| } | ||
| 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 _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; | ||
| } | ||
| /** | ||
@@ -208,20 +217,19 @@ * A color manipulation library useful for dynamically | ||
| var color6Regexp = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i; | ||
| var color3Regexp = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/i; | ||
| var rgbaRegexp = /^rgba?\(\s*(\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\s*\)$/i; // Parse a color in #abcdef, rgb(...), or rgba(...) form into an object | ||
| const color6Regexp = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i; | ||
| const color3Regexp = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/i; | ||
| const rgbaRegexp = /^rgba?\(\s*(\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\s*\)$/i; // Parse a color in #abcdef, rgb(...), or rgba(...) form into an object | ||
| // with r,g,b,a keys. | ||
| var parse = function parse(color) { | ||
| const parse = color => { | ||
| if (typeof color !== "string") { | ||
| throw new Error("Failed to parse color: ".concat(color)); | ||
| throw new Error(`Failed to parse color: ${color}`); | ||
| } | ||
| var color3Match = color.match(color3Regexp); | ||
| const color3Match = color.match(color3Regexp); | ||
| if (color3Match) { | ||
| return { | ||
| r: parseInt("".concat(color3Match[1]).concat(color3Match[1]), 16), | ||
| g: parseInt("".concat(color3Match[2]).concat(color3Match[2]), 16), | ||
| b: parseInt("".concat(color3Match[3]).concat(color3Match[3]), 16), | ||
| r: parseInt(`${color3Match[1]}${color3Match[1]}`, 16), | ||
| g: parseInt(`${color3Match[2]}${color3Match[2]}`, 16), | ||
| b: parseInt(`${color3Match[3]}${color3Match[3]}`, 16), | ||
| a: 1 | ||
@@ -231,3 +239,3 @@ }; | ||
| var color6Match = color.match(color6Regexp); | ||
| const color6Match = color.match(color6Regexp); | ||
@@ -243,3 +251,3 @@ if (color6Match) { | ||
| var rgbaMatch = color.match(rgbaRegexp); | ||
| const rgbaMatch = color.match(rgbaRegexp); | ||
@@ -255,20 +263,20 @@ if (rgbaMatch) { | ||
| throw new Error("Failed to parse color: ".concat(color)); | ||
| throw new Error(`Failed to parse color: ${color}`); | ||
| }; // Stringify the color in an `rgba()` or `#abcdef` format. | ||
| var format = function format(color) { | ||
| var r = Math.round(color.r); | ||
| var g = Math.round(color.g); | ||
| var b = Math.round(color.b); | ||
| const format = color => { | ||
| const r = Math.round(color.r); | ||
| const g = Math.round(color.g); | ||
| const b = Math.round(color.b); | ||
| if (color.a === 1) { | ||
| var _s = function _s(c) { | ||
| var asString = c.toString(16); | ||
| const _s = c => { | ||
| const asString = c.toString(16); | ||
| return asString.length === 1 ? asString + asString : asString; | ||
| }; | ||
| return "#".concat(_s(r)).concat(_s(g)).concat(_s(b)); | ||
| return `#${_s(r)}${_s(g)}${_s(b)}`; | ||
| } else { | ||
| return "rgba(".concat(r, ",").concat(g, ",").concat(b, ",").concat(color.a.toFixed(2), ")"); | ||
| return `rgba(${r},${g},${b},${color.a.toFixed(2)})`; | ||
| } | ||
@@ -278,3 +286,3 @@ }; // Adjust the alpha value of a color. | ||
| var fade = function fade(color, percentage) { | ||
| const fade = (color, percentage) => { | ||
| if (percentage < 0 || percentage > 1) { | ||
@@ -284,4 +292,4 @@ throw new Error("Percentage must be between 0 and 1"); | ||
| var components = parse(color); | ||
| return format(_objectSpread2(_objectSpread2({}, components), {}, { | ||
| const components = parse(color); | ||
| return format(extends_default()({}, components, { | ||
| a: components.a * percentage | ||
@@ -293,5 +301,5 @@ })); | ||
| var mix = function mix(color, background) { | ||
| var colorObj = parse(color); | ||
| var bgObj = parse(background); | ||
| const mix = (color, background) => { | ||
| const colorObj = parse(color); | ||
| const bgObj = parse(background); | ||
| return format({ | ||
@@ -305,5 +313,5 @@ r: colorObj.r * colorObj.a + bgObj.r * (1 - colorObj.a), | ||
| var offBlack = "#21242c"; | ||
| var white = "#ffffff"; | ||
| var Color = { | ||
| const offBlack = "#21242c"; | ||
| const white = "#ffffff"; | ||
| const Color = { | ||
| // Product | ||
@@ -316,3 +324,3 @@ blue: "#1865f2", | ||
| // Neutral | ||
| offBlack: offBlack, | ||
| offBlack, | ||
| offBlack64: fade(offBlack, 0.64), | ||
@@ -324,3 +332,3 @@ offBlack50: fade(offBlack, 0.5), | ||
| offWhite: "#f7f8fa", | ||
| white: white, | ||
| white, | ||
| white64: fade(white, 0.64), | ||
@@ -334,3 +342,3 @@ white50: fade(white, 0.5), | ||
| }; | ||
| var SemanticColor = { | ||
| const SemanticColor = { | ||
| controlDefault: Color.blue, | ||
@@ -342,29 +350,5 @@ controlDestructive: Color.red | ||
| // CONCATENATED MODULE: ./packages/wonder-blocks-clickable/src/components/clickable-behavior.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 _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 _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } | ||
| 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 _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } | ||
| 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); }; } | ||
| function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } | ||
| function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } | ||
| 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 _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } | ||
| function clickable_behavior_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; } | ||
| // NOTE: Potentially add to this as more cases come up. | ||
| var getAppropriateTriggersForRole = function getAppropriateTriggersForRole(role) { | ||
| const getAppropriateTriggersForRole = role => { | ||
| switch (role) { | ||
@@ -400,49 +384,23 @@ // Triggers on ENTER, but not SPACE | ||
| 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; | ||
| }, | ||
| const disabledHandlers = { | ||
| onClick: () => void 0, | ||
| onMouseEnter: () => void 0, | ||
| onMouseLeave: () => void 0, | ||
| onMouseDown: () => void 0, | ||
| onMouseUp: () => void 0, | ||
| onDragStart: () => void 0, | ||
| onTouchStart: () => void 0, | ||
| onTouchEnd: () => void 0, | ||
| onTouchCancel: () => void 0, | ||
| onKeyDown: () => void 0, | ||
| onKeyUp: () => void 0, | ||
| onFocus: () => void 0, | ||
| onBlur: () => void 0, | ||
| tabIndex: -1 | ||
| }; | ||
| var keyCodes = { | ||
| const keyCodes = { | ||
| enter: 13, | ||
| space: 32 | ||
| }; | ||
| var startState = { | ||
| const startState = { | ||
| hovered: false, | ||
@@ -532,43 +490,24 @@ focused: false, | ||
| var clickable_behavior_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; | ||
| } | ||
| class clickable_behavior_ClickableBehavior extends external_react_["Component"] { | ||
| static 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; | ||
| constructor(props) { | ||
| super(props); | ||
| _classCallCheck(this, ClickableBehavior); | ||
| this.handleClick = e => { | ||
| const { | ||
| onClick = undefined, | ||
| beforeNav = undefined, | ||
| safeWithNav = undefined | ||
| } = this.props; | ||
| _this = _super.call(this, props); | ||
| clickable_behavior_defineProperty(_assertThisInitialized(_this), "waitingForClick", void 0); | ||
| clickable_behavior_defineProperty(_assertThisInitialized(_this), "enterClick", void 0); | ||
| clickable_behavior_defineProperty(_assertThisInitialized(_this), "dragging", void 0); | ||
| clickable_behavior_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) { | ||
| if (this.enterClick) { | ||
| return; | ||
@@ -578,28 +517,26 @@ } | ||
| if (onClick || beforeNav || safeWithNav) { | ||
| _this.waitingForClick = false; | ||
| this.waitingForClick = false; | ||
| } | ||
| _this.runCallbackAndMaybeNavigate(e); | ||
| }); | ||
| this.runCallbackAndMaybeNavigate(e); | ||
| }; | ||
| clickable_behavior_defineProperty(_assertThisInitialized(_this), "handleMouseEnter", function (e) { | ||
| this.handleMouseEnter = e => { | ||
| // When the left button is pressed already, we want it to be pressed | ||
| if (e.buttons === 1) { | ||
| _this.dragging = true; | ||
| _this.setState({ | ||
| this.dragging = true; | ||
| this.setState({ | ||
| pressed: true | ||
| }); | ||
| } else if (!_this.waitingForClick) { | ||
| _this.setState({ | ||
| } else if (!this.waitingForClick) { | ||
| this.setState({ | ||
| hovered: true | ||
| }); | ||
| } | ||
| }); | ||
| }; | ||
| clickable_behavior_defineProperty(_assertThisInitialized(_this), "handleMouseLeave", function () { | ||
| if (!_this.waitingForClick) { | ||
| _this.dragging = false; | ||
| _this.setState({ | ||
| this.handleMouseLeave = () => { | ||
| if (!this.waitingForClick) { | ||
| this.dragging = false; | ||
| this.setState({ | ||
| hovered: false, | ||
@@ -610,55 +547,53 @@ pressed: false, | ||
| } | ||
| }); | ||
| }; | ||
| clickable_behavior_defineProperty(_assertThisInitialized(_this), "handleMouseDown", function () { | ||
| _this.setState({ | ||
| this.handleMouseDown = () => { | ||
| this.setState({ | ||
| pressed: true | ||
| }); | ||
| }); | ||
| }; | ||
| clickable_behavior_defineProperty(_assertThisInitialized(_this), "handleMouseUp", function (e) { | ||
| if (_this.dragging) { | ||
| _this.dragging = false; | ||
| _this.handleClick(e); | ||
| this.handleMouseUp = e => { | ||
| if (this.dragging) { | ||
| this.dragging = false; | ||
| this.handleClick(e); | ||
| } | ||
| _this.setState({ | ||
| this.setState({ | ||
| pressed: false, | ||
| focused: false | ||
| }); | ||
| }); | ||
| }; | ||
| clickable_behavior_defineProperty(_assertThisInitialized(_this), "handleDragStart", function (e) { | ||
| _this.dragging = true; | ||
| this.handleDragStart = e => { | ||
| this.dragging = true; | ||
| e.preventDefault(); | ||
| }); | ||
| }; | ||
| clickable_behavior_defineProperty(_assertThisInitialized(_this), "handleTouchStart", function () { | ||
| _this.setState({ | ||
| this.handleTouchStart = () => { | ||
| this.setState({ | ||
| pressed: true | ||
| }); | ||
| }); | ||
| }; | ||
| clickable_behavior_defineProperty(_assertThisInitialized(_this), "handleTouchEnd", function () { | ||
| _this.setState({ | ||
| this.handleTouchEnd = () => { | ||
| this.setState({ | ||
| pressed: false | ||
| }); | ||
| this.waitingForClick = true; | ||
| }; | ||
| _this.waitingForClick = true; | ||
| }); | ||
| clickable_behavior_defineProperty(_assertThisInitialized(_this), "handleTouchCancel", function () { | ||
| _this.setState({ | ||
| this.handleTouchCancel = () => { | ||
| this.setState({ | ||
| pressed: false | ||
| }); | ||
| this.waitingForClick = true; | ||
| }; | ||
| _this.waitingForClick = true; | ||
| }); | ||
| this.handleKeyDown = e => { | ||
| const { | ||
| onKeyDown, | ||
| role | ||
| } = this.props; | ||
| clickable_behavior_defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (e) { | ||
| var _this$props2 = _this.props, | ||
| onKeyDown = _this$props2.onKeyDown, | ||
| role = _this$props2.role; | ||
| if (onKeyDown) { | ||
@@ -668,8 +603,8 @@ onKeyDown(e); | ||
| var keyCode = e.which || e.keyCode; | ||
| const keyCode = e.which || e.keyCode; | ||
| const { | ||
| triggerOnEnter, | ||
| triggerOnSpace | ||
| } = getAppropriateTriggersForRole(role); | ||
| var _getAppropriateTrigge = getAppropriateTriggersForRole(role), | ||
| triggerOnEnter = _getAppropriateTrigge.triggerOnEnter, | ||
| triggerOnSpace = _getAppropriateTrigge.triggerOnSpace; | ||
| if (triggerOnEnter && keyCode === keyCodes.enter || triggerOnSpace && keyCode === keyCodes.space) { | ||
@@ -681,4 +616,3 @@ // This prevents space from scrolling down. It also prevents the | ||
| e.preventDefault(); | ||
| _this.setState({ | ||
| this.setState({ | ||
| pressed: true | ||
@@ -689,10 +623,11 @@ }); | ||
| // keep track of the enter keydown to negate the onClick callback | ||
| _this.enterClick = true; | ||
| this.enterClick = true; | ||
| } | ||
| }); | ||
| }; | ||
| clickable_behavior_defineProperty(_assertThisInitialized(_this), "handleKeyUp", function (e) { | ||
| var _this$props3 = _this.props, | ||
| onKeyUp = _this$props3.onKeyUp, | ||
| role = _this$props3.role; | ||
| this.handleKeyUp = e => { | ||
| const { | ||
| onKeyUp, | ||
| role | ||
| } = this.props; | ||
@@ -703,88 +638,92 @@ if (onKeyUp) { | ||
| var keyCode = e.which || e.keyCode; | ||
| const keyCode = e.which || e.keyCode; | ||
| const { | ||
| triggerOnEnter, | ||
| triggerOnSpace | ||
| } = getAppropriateTriggersForRole(role); | ||
| var _getAppropriateTrigge2 = getAppropriateTriggersForRole(role), | ||
| triggerOnEnter = _getAppropriateTrigge2.triggerOnEnter, | ||
| triggerOnSpace = _getAppropriateTrigge2.triggerOnSpace; | ||
| 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; | ||
| } | ||
| }); | ||
| }; | ||
| clickable_behavior_defineProperty(_assertThisInitialized(_this), "handleFocus", function (e) { | ||
| _this.setState({ | ||
| this.handleFocus = e => { | ||
| this.setState({ | ||
| focused: true | ||
| }); | ||
| }); | ||
| }; | ||
| clickable_behavior_defineProperty(_assertThisInitialized(_this), "handleBlur", function (e) { | ||
| _this.setState({ | ||
| this.handleBlur = e => { | ||
| this.setState({ | ||
| focused: false, | ||
| pressed: false | ||
| }); | ||
| }); | ||
| }; | ||
| _this.state = startState; | ||
| _this.waitingForClick = false; | ||
| _this.enterClick = false; | ||
| _this.dragging = false; | ||
| return _this; | ||
| this.state = startState; | ||
| this.waitingForClick = false; | ||
| this.enterClick = false; | ||
| this.dragging = false; | ||
| } | ||
| _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; | ||
| 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); // We don't bother clearing the waiting state, the full page | ||
| // load navigation will do that for us by loading a new page. | ||
| } | ||
| 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 { | ||
| } | ||
| } else { | ||
| this.setState({ | ||
| waiting: false | ||
| }); | ||
| } | ||
| } | ||
| handleSafeWithNav(safeWithNav, shouldNavigate) { | ||
| const { | ||
| skipClientNav, | ||
| history | ||
| } = this.props; | ||
| if (history && !skipClientNav || this.props.target === "_blank") { | ||
| // client-side nav | ||
| safeWithNav(); | ||
| this.navigateOrReset(shouldNavigate); | ||
| return Promise.resolve(); | ||
| } else { | ||
| if (!this.state.waiting) { | ||
| // We only show the spinner for safeWithNav when doing | ||
| // a full page load navigation since since the spinner is | ||
| // indicating that we're waiting for navigation to occur. | ||
| this.setState({ | ||
| waiting: false | ||
| waiting: true | ||
| }); | ||
| } | ||
| } | ||
| }, { | ||
| 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 { | ||
| return safeWithNav().then(() => { | ||
| if (!this.state.waiting) { | ||
@@ -799,132 +738,113 @@ // We only show the spinner for safeWithNav when doing | ||
| 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); | ||
| }); | ||
| } | ||
| return; | ||
| }).catch(error => {// We ignore the error here so that we always | ||
| // navigate when using safeWithNav regardless of | ||
| // whether we're doing a client-side nav or not. | ||
| }).finally(() => { | ||
| this.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; | ||
| runCallbackAndMaybeNavigate(e) { | ||
| const { | ||
| onClick = undefined, | ||
| beforeNav = undefined, | ||
| safeWithNav = undefined, | ||
| href, | ||
| type | ||
| } = this.props; | ||
| let shouldNavigate = true; | ||
| let canSubmit = true; | ||
| if (onClick) { | ||
| onClick(e); | ||
| } // If onClick() has called e.preventDefault() then we shouldn't | ||
| // navigate. | ||
| if (onClick) { | ||
| onClick(e); | ||
| } // If onClick() has called e.preventDefault() then we shouldn't | ||
| // navigate. | ||
| if (e.defaultPrevented) { | ||
| shouldNavigate = false; | ||
| canSubmit = false; | ||
| } | ||
| if (e.defaultPrevented) { | ||
| shouldNavigate = false; | ||
| canSubmit = false; | ||
| } | ||
| e.preventDefault(); | ||
| e.preventDefault(); | ||
| if (!href && type === "submit" && canSubmit) { | ||
| var target = e.currentTarget; | ||
| if (!href && type === "submit" && canSubmit) { | ||
| let target = e.currentTarget; | ||
| while (target) { | ||
| if (target instanceof window.HTMLFormElement) { | ||
| // This event must be marked as cancelable otherwise calling | ||
| // e.preventDefault() on it won't do anything in Firefox. | ||
| // Chrome and Safari allow calling e.preventDefault() on | ||
| // non-cancelable events, but really they shouldn't. | ||
| var event = new window.Event("submit", { | ||
| cancelable: true | ||
| }); | ||
| target.dispatchEvent(event); | ||
| break; | ||
| } // All events should be typed as SyntheticEvent<HTMLElement>. | ||
| // Updating all of the places will take some time so I'll do | ||
| // this later | ||
| // $FlowFixMe[prop-missing] | ||
| while (target) { | ||
| if (target instanceof window.HTMLFormElement) { | ||
| // This event must be marked as cancelable otherwise calling | ||
| // e.preventDefault() on it won't do anything in Firefox. | ||
| // Chrome and Safari allow calling e.preventDefault() on | ||
| // non-cancelable events, but really they shouldn't. | ||
| const event = new window.Event("submit", { | ||
| cancelable: true | ||
| }); | ||
| target.dispatchEvent(event); | ||
| break; | ||
| } // All events should be typed as SyntheticEvent<HTMLElement>. | ||
| // Updating all of the places will take some time so I'll do | ||
| // this later | ||
| // $FlowFixMe[prop-missing] | ||
| target = target.parentElement; | ||
| } | ||
| 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); | ||
| 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); | ||
| } | ||
| }]); | ||
| } | ||
| return ClickableBehavior; | ||
| }(external_react_["Component"]); | ||
| render() { | ||
| const 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/ | ||
| clickable_behavior_defineProperty(clickable_behavior_ClickableBehavior, "defaultProps", { | ||
| childrenProps.rel = this.props.rel || (this.props.target === "_blank" ? "noopener noreferrer" : undefined); | ||
| const { | ||
| children | ||
| } = this.props; | ||
| return children && children(this.state, childrenProps); | ||
| } | ||
| } | ||
| clickable_behavior_ClickableBehavior.defaultProps = { | ||
| disabled: false | ||
| }); | ||
| }; | ||
| // CONCATENATED MODULE: ./packages/wonder-blocks-clickable/src/util/is-client-side-url.js | ||
@@ -937,3 +857,3 @@ /** | ||
| */ | ||
| var isClientSideUrl = function isClientSideUrl(href) { | ||
| const isClientSideUrl = href => { | ||
| if (typeof href !== "string") { | ||
@@ -960,3 +880,3 @@ return false; | ||
| var ClickableBehaviorWithRouter = Object(external_react_router_dom_["withRouter"])(clickable_behavior_ClickableBehavior); | ||
| const ClickableBehaviorWithRouter = Object(external_react_router_dom_["withRouter"])(clickable_behavior_ClickableBehavior); | ||
| function getClickableBehavior( | ||
@@ -986,47 +906,16 @@ /** | ||
| // CONCATENATED MODULE: ./packages/wonder-blocks-clickable/src/components/clickable.js | ||
| function clickable_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { clickable_typeof = function _typeof(obj) { return typeof obj; }; } else { clickable_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return clickable_typeof(obj); } | ||
| function clickable_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) { clickable_ownKeys(Object(source), true).forEach(function (key) { clickable_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { clickable_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } | ||
| const _excluded = ["href", "onClick", "skipClientNav", "beforeNav", "safeWithNav", "style", "target", "testId", "onKeyDown", "onKeyUp", "hideDefaultFocusRing", "light", "disabled"]; | ||
| 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 _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 clickable_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
| function clickable_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 clickable_createClass(Constructor, protoProps, staticProps) { if (protoProps) clickable_defineProperties(Constructor.prototype, protoProps); if (staticProps) clickable_defineProperties(Constructor, staticProps); return Constructor; } | ||
| function clickable_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) clickable_setPrototypeOf(subClass, superClass); } | ||
| function clickable_setPrototypeOf(o, p) { clickable_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return clickable_setPrototypeOf(o, p); } | ||
| function clickable_createSuper(Derived) { var hasNativeReflectConstruct = clickable_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = clickable_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = clickable_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return clickable_possibleConstructorReturn(this, result); }; } | ||
| function clickable_possibleConstructorReturn(self, call) { if (call && (clickable_typeof(call) === "object" || typeof call === "function")) { return call; } return clickable_assertThisInitialized(self); } | ||
| function clickable_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } | ||
| function clickable_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 clickable_getPrototypeOf(o) { clickable_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return clickable_getPrototypeOf(o); } | ||
| function clickable_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 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"]); | ||
| const StyledAnchor = Object(wonder_blocks_core_["addStyle"])("a"); | ||
| const StyledButton = Object(wonder_blocks_core_["addStyle"])("button"); | ||
| const StyledLink = Object(wonder_blocks_core_["addStyle"])(external_react_router_dom_["Link"]); | ||
| /** | ||
@@ -1057,128 +946,97 @@ * A component to turn any custom component into a clickable one. | ||
| var clickable_Clickable = /*#__PURE__*/function (_React$Component) { | ||
| clickable_inherits(Clickable, _React$Component); | ||
| class clickable_Clickable extends external_react_["Component"] { | ||
| constructor(...args) { | ||
| super(...args); | ||
| var _super = clickable_createSuper(Clickable); | ||
| function Clickable() { | ||
| var _this; | ||
| clickable_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)); | ||
| clickable_defineProperty(clickable_assertThisInitialized(_this), "getCorrectTag", function (clickableState, commonProps) { | ||
| var activeHref = _this.props.href && !_this.props.disabled; | ||
| var useClient = _this.context.router && !_this.props.skipClientNav && isClientSideUrl(_this.props.href || ""); // NOTE: checking this.props.href here is redundant, but flow | ||
| this.getCorrectTag = (clickableState, commonProps) => { | ||
| const activeHref = this.props.href && !this.props.disabled; | ||
| const useClient = this.context.router && !this.props.skipClientNav && isClientSideUrl(this.props.href || ""); // NOTE: checking this.props.href here is redundant, but flow | ||
| // needs it to refine this.props.href to a string. | ||
| if (activeHref && useClient && _this.props.href) { | ||
| return /*#__PURE__*/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)); | ||
| if (activeHref && useClient && this.props.href) { | ||
| return /*#__PURE__*/external_react_["createElement"](StyledLink, extends_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 /*#__PURE__*/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)); | ||
| return /*#__PURE__*/external_react_["createElement"](StyledAnchor, extends_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 /*#__PURE__*/external_react_["createElement"](StyledButton, _extends({}, commonProps, { | ||
| return /*#__PURE__*/external_react_["createElement"](StyledButton, extends_default()({}, commonProps, { | ||
| type: "button", | ||
| disabled: _this.props.disabled | ||
| }), _this.props.children(clickableState)); | ||
| disabled: this.props.disabled | ||
| }), this.props.children(clickableState)); | ||
| } | ||
| }); | ||
| return _this; | ||
| }; | ||
| } | ||
| clickable_createClass(Clickable, [{ | ||
| key: "render", | ||
| value: function render() { | ||
| var _this2 = this; | ||
| render() { | ||
| 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()(_this$props, _excluded); | ||
| 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, | ||
| light = _this$props.light, | ||
| disabled = _this$props.disabled, | ||
| restProps = _objectWithoutProperties(_this$props, ["href", "onClick", "skipClientNav", "beforeNav", "safeWithNav", "style", "target", "testId", "onKeyDown", "onKeyUp", "hideDefaultFocusRing", "light", "disabled"]); | ||
| const ClickableBehavior = getClickableBehavior(href, skipClientNav, this.context.router); | ||
| var ClickableBehavior = getClickableBehavior(href, skipClientNav, this.context.router); | ||
| const getStyle = state => [styles.reset, styles.link, !hideDefaultFocusRing && state.focused && (light ? styles.focusedLight : styles.focused), style]; | ||
| var getStyle = function getStyle(state) { | ||
| return [styles.reset, styles.link, !hideDefaultFocusRing && state.focused && (light ? styles.focusedLight : styles.focused), style]; | ||
| }; | ||
| if (beforeNav) { | ||
| return /*#__PURE__*/external_react_["createElement"](ClickableBehavior, { | ||
| href: href, | ||
| onClick: onClick, | ||
| beforeNav: beforeNav, | ||
| safeWithNav: safeWithNav, | ||
| onKeyDown: onKeyDown, | ||
| onKeyUp: onKeyUp, | ||
| disabled: disabled | ||
| }, function (state, childrenProps) { | ||
| return _this2.getCorrectTag(state, _objectSpread(_objectSpread({}, restProps), {}, { | ||
| "data-test-id": testId, | ||
| style: getStyle(state) | ||
| }, childrenProps)); | ||
| }); | ||
| } else { | ||
| return /*#__PURE__*/external_react_["createElement"](ClickableBehavior, { | ||
| href: href, | ||
| onClick: onClick, | ||
| safeWithNav: safeWithNav, | ||
| onKeyDown: onKeyDown, | ||
| onKeyUp: onKeyUp, | ||
| target: target, | ||
| disabled: disabled | ||
| }, function (state, childrenProps) { | ||
| return _this2.getCorrectTag(state, _objectSpread(_objectSpread({}, restProps), {}, { | ||
| "data-test-id": testId, | ||
| style: getStyle(state) | ||
| }, childrenProps)); | ||
| }); | ||
| } | ||
| if (beforeNav) { | ||
| return /*#__PURE__*/external_react_["createElement"](ClickableBehavior, { | ||
| href: href, | ||
| onClick: onClick, | ||
| beforeNav: beforeNav, | ||
| safeWithNav: safeWithNav, | ||
| onKeyDown: onKeyDown, | ||
| onKeyUp: onKeyUp, | ||
| disabled: disabled | ||
| }, (state, childrenProps) => this.getCorrectTag(state, extends_default()({}, restProps, { | ||
| "data-test-id": testId, | ||
| style: getStyle(state) | ||
| }, childrenProps))); | ||
| } else { | ||
| return /*#__PURE__*/external_react_["createElement"](ClickableBehavior, { | ||
| href: href, | ||
| onClick: onClick, | ||
| safeWithNav: safeWithNav, | ||
| onKeyDown: onKeyDown, | ||
| onKeyUp: onKeyUp, | ||
| target: target, | ||
| disabled: disabled | ||
| }, (state, childrenProps) => this.getCorrectTag(state, extends_default()({}, restProps, { | ||
| "data-test-id": testId, | ||
| style: getStyle(state) | ||
| }, childrenProps))); | ||
| } | ||
| }]); | ||
| } | ||
| return Clickable; | ||
| }(external_react_["Component"]); // Source: https://gist.github.com/MoOx/9137295 | ||
| } // Source: https://gist.github.com/MoOx/9137295 | ||
| clickable_defineProperty(clickable_Clickable, "contextTypes", { | ||
| clickable_Clickable.contextTypes = { | ||
| router: external_prop_types_["any"] | ||
| }); | ||
| clickable_defineProperty(clickable_Clickable, "defaultProps", { | ||
| }; | ||
| clickable_Clickable.defaultProps = { | ||
| light: false, | ||
| disabled: false, | ||
| "aria-label": "" | ||
| }); | ||
| var styles = external_aphrodite_["StyleSheet"].create({ | ||
| }; | ||
| const styles = external_aphrodite_["StyleSheet"].create({ | ||
| reset: { | ||
@@ -1216,6 +1074,6 @@ border: "none", | ||
| focused: { | ||
| outline: "solid 2px ".concat(es.blue) | ||
| outline: `solid 2px ${es.blue}` | ||
| }, | ||
| focusedLight: { | ||
| outline: "solid 2px ".concat(es.white) | ||
| outline: `solid 2px ${es.white}` | ||
| } | ||
@@ -1222,0 +1080,0 @@ }); |
| { | ||
| "name": "@khanacademy/wonder-blocks-clickable", | ||
| "version": "2.1.1", | ||
| "version": "2.1.2", | ||
| "design": "v1", | ||
@@ -18,3 +18,4 @@ "description": "Clickable component for Wonder-Blocks.", | ||
| "dependencies": { | ||
| "@khanacademy/wonder-blocks-core": "^3.1.3" | ||
| "@babel/runtime": "^7.13.10", | ||
| "@khanacademy/wonder-blocks-core": "^3.1.4" | ||
| }, | ||
@@ -29,5 +30,5 @@ "peerDependencies": { | ||
| "devDependencies": { | ||
| "wb-dev-build-settings": "^0.0.4" | ||
| "wb-dev-build-settings": "^0.1.0" | ||
| }, | ||
| "gitHead": "b7d7425c7f2e02cd9b9ac6ac7e9fe12ead2bd8ab" | ||
| "gitHead": "8022bb419eed74be37f71f71c7621854794a731c" | ||
| } |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-11.54%
188445
- Dependency count
- increased by16.67%
7
- Number of package files
- decreased by-5%
19
- Lines of code
- decreased by-7.09%
4616