Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@khanacademy/wonder-blocks-core

Package Overview
Dependencies
Maintainers
1
Versions
175
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@khanacademy/wonder-blocks-core - npm Package Compare versions

Comparing version 1.2.5 to 1.2.6

1170

dist/es/index.js

@@ -1,2 +0,2 @@

import React__default, { Component, createElement, Fragment, createContext } from 'react';
import React__default, { createElement, Component, Fragment, createContext } from 'react';
import Spacing from '@khanacademy/wonder-blocks-spacing';

@@ -7,2 +7,24 @@ import { StyleSheet, css } 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) {

@@ -60,2 +82,33 @@ if (key in obj) {

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 _objectWithoutPropertiesLoose(source, excluded) {

@@ -97,2 +150,18 @@ if (source == null) return {};

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 _slicedToArray(arr, i) {

@@ -102,2 +171,14 @@ return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();

function _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
}
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) {
for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
return arr2;
}
}
function _arrayWithHoles(arr) {

@@ -107,2 +188,6 @@ if (Array.isArray(arr)) return arr;

function _iterableToArray(iter) {
if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
}
function _iterableToArrayLimit(arr, i) {

@@ -134,2 +219,6 @@ var _arr = [];

function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance");
}
function _nonIterableRest() {

@@ -139,3 +228,3 @@ throw new TypeError("Invalid attempt to destructure non-iterable instance");

const getAppropriateTriggersForRole = role => {
var getAppropriateTriggersForRole = function getAppropriateTriggersForRole(role) {
switch (role) {

@@ -171,23 +260,49 @@ // Triggers on ENTER, but not SPACE

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,
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
};
const keyCodes = {
var keyCodes = {
enter: 13,
space: 32
};
const startState = {
var startState = {
hovered: false,

@@ -276,40 +391,53 @@ focused: false,

class ClickableBehavior extends React__default.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;
var ClickableBehavior =
/*#__PURE__*/
function (_React$Component) {
_inherits(ClickableBehavior, _React$Component);
_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;
}
}
}
}]);
constructor(props) {
super(props);
function ClickableBehavior(props) {
var _this;
_defineProperty(this, "waitingForClick", void 0);
_classCallCheck(this, ClickableBehavior);
_defineProperty(this, "enterClick", void 0);
_this = _possibleConstructorReturn(this, _getPrototypeOf(ClickableBehavior).call(this, props));
_defineProperty(this, "dragging", void 0);
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "waitingForClick", void 0);
_defineProperty(this, "handleClick", e => {
if (this.enterClick) {
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "enterClick", void 0);
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "dragging", void 0);
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleClick", function (e) {
if (_this.enterClick) {
return;
} else if (this.props.onClick) {
this.waitingForClick = false;
this.props.onClick(e);
} else if (_this.props.onClick) {
_this.waitingForClick = false;
_this.props.onClick(e);
}
});
_defineProperty(this, "handleMouseEnter", e => {
_defineProperty(_assertThisInitialized(_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({
_this.dragging = true;
_this.setState({
pressed: true
});
} else if (!this.waitingForClick) {
this.setState({
} else if (!_this.waitingForClick) {
_this.setState({
hovered: true

@@ -320,6 +448,7 @@ });

_defineProperty(this, "handleMouseLeave", () => {
if (!this.waitingForClick) {
this.dragging = false;
this.setState({
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleMouseLeave", function () {
if (!_this.waitingForClick) {
_this.dragging = false;
_this.setState({
hovered: false,

@@ -332,4 +461,4 @@ pressed: false,

_defineProperty(this, "handleMouseDown", () => {
this.setState({
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleMouseDown", function () {
_this.setState({
pressed: true

@@ -339,9 +468,10 @@ });

_defineProperty(this, "handleMouseUp", e => {
if (this.dragging) {
this.dragging = false;
this.handleClick(e);
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleMouseUp", function (e) {
if (_this.dragging) {
_this.dragging = false;
_this.handleClick(e);
}
this.setState({
_this.setState({
pressed: false,

@@ -352,9 +482,9 @@ focused: false

_defineProperty(this, "handleDragStart", e => {
this.dragging = true;
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleDragStart", function (e) {
_this.dragging = true;
e.preventDefault();
});
_defineProperty(this, "handleTouchStart", () => {
this.setState({
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleTouchStart", function () {
_this.setState({
pressed: true

@@ -364,22 +494,24 @@ });

_defineProperty(this, "handleTouchEnd", () => {
this.setState({
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleTouchEnd", function () {
_this.setState({
pressed: false
});
this.waitingForClick = true;
_this.waitingForClick = true;
});
_defineProperty(this, "handleTouchCancel", () => {
this.setState({
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleTouchCancel", function () {
_this.setState({
pressed: false
});
this.waitingForClick = true;
_this.waitingForClick = true;
});
_defineProperty(this, "handleKeyDown", e => {
const keyCode = e.which || e.keyCode;
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleKeyDown", function (e) {
var keyCode = e.which || e.keyCode;
const _getAppropriateTrigge = getAppropriateTriggersForRole(this.props.role),
triggerOnEnter = _getAppropriateTrigge.triggerOnEnter,
triggerOnSpace = _getAppropriateTrigge.triggerOnSpace;
var _getAppropriateTrigge = getAppropriateTriggersForRole(_this.props.role),
triggerOnEnter = _getAppropriateTrigge.triggerOnEnter,
triggerOnSpace = _getAppropriateTrigge.triggerOnSpace;

@@ -392,3 +524,4 @@ if (triggerOnEnter && keyCode === keyCodes.enter || triggerOnSpace && keyCode === keyCodes.space) {

e.preventDefault();
this.setState({
_this.setState({
pressed: true

@@ -399,12 +532,12 @@ });

// keep track of the enter keydown to negate the onClick callback
this.enterClick = true;
_this.enterClick = true;
}
});
_defineProperty(this, "handleKeyUp", e => {
const keyCode = e.which || e.keyCode;
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleKeyUp", function (e) {
var keyCode = e.which || e.keyCode;
const _getAppropriateTrigge2 = getAppropriateTriggersForRole(this.props.role),
triggerOnEnter = _getAppropriateTrigge2.triggerOnEnter,
triggerOnSpace = _getAppropriateTrigge2.triggerOnSpace;
var _getAppropriateTrigge2 = getAppropriateTriggersForRole(_this.props.role),
triggerOnEnter = _getAppropriateTrigge2.triggerOnEnter,
triggerOnSpace = _getAppropriateTrigge2.triggerOnSpace;

@@ -419,3 +552,3 @@ if (triggerOnEnter && keyCode === keyCodes.enter || triggerOnSpace && keyCode === keyCodes.space) {

this.setState({
_this.setState({
pressed: false,

@@ -425,14 +558,14 @@ focused: true

if (this.props.onClick) {
this.props.onClick(e);
if (_this.props.onClick) {
_this.props.onClick(e);
}
this.maybeNavigate();
_this.maybeNavigate();
} else if (!triggerOnEnter && keyCode === keyCodes.enter) {
this.enterClick = false;
_this.enterClick = false;
}
});
_defineProperty(this, "handleFocus", e => {
this.setState({
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleFocus", function (e) {
_this.setState({
focused: true

@@ -442,4 +575,4 @@ });

_defineProperty(this, "handleBlur", e => {
this.setState({
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleBlur", function (e) {
_this.setState({
focused: false,

@@ -450,6 +583,6 @@ pressed: false

_defineProperty(this, "maybeNavigate", () => {
const _this$props = this.props,
history = _this$props.history,
href = _this$props.href;
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "maybeNavigate", function () {
var _this$props = _this.props,
history = _this$props.history,
href = _this$props.href;

@@ -465,32 +598,37 @@ if (href) {

this.state = startState;
this.waitingForClick = false;
this.enterClick = false;
this.dragging = false;
_this.state = startState;
_this.waitingForClick = false;
_this.enterClick = false;
_this.dragging = false;
return _this;
}
render() {
const handlers = 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
};
const children = this.props.children;
return children && children(this.state, handlers);
}
_createClass(ClickableBehavior, [{
key: "render",
value: function render() {
var handlers = 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
};
var children = this.props.children;
return children && children(this.state, handlers);
}
}]);
}
return ClickableBehavior;
}(React__default.Component);

@@ -502,7 +640,7 @@ _defineProperty(ClickableBehavior, "defaultProps", {

// All possible valid media sizes
const VALID_MEDIA_SIZES = ["small", "medium", "large"];
const mediaDefaultSpecLargeMarginWidth = Spacing.large; // The default spec for media layout, currently available in
var VALID_MEDIA_SIZES = ["small", "medium", "large"];
var mediaDefaultSpecLargeMarginWidth = Spacing.large; // The default spec for media layout, currently available in
// three different settings (roughly mobile, tablet, and desktop).
const MEDIA_DEFAULT_SPEC = {
var MEDIA_DEFAULT_SPEC = {
small: {

@@ -529,3 +667,3 @@ query: "(max-width: 767px)",

const MEDIA_INTERNAL_SPEC = {
var MEDIA_INTERNAL_SPEC = {
large: {

@@ -539,3 +677,3 @@ query: "(min-width: 1px)",

const MEDIA_MODAL_SPEC = {
var MEDIA_MODAL_SPEC = {
small: {

@@ -556,3 +694,3 @@ query: "(max-width: 767px)",

function flatten(list) {
const result = [];
var result = [];

@@ -562,4 +700,24 @@ if (!list) {

} else if (Array.isArray(list)) {
for (const item of list) {
result.push(...flatten(item));
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = list[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var item = _step.value;
result.push.apply(result, _toConsumableArray(flatten(item)));
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return != null) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}

@@ -574,4 +732,4 @@ } else {

function processStyleList(style) {
const stylesheetStyles = [];
const inlineStyles = [];
var stylesheetStyles = [];
var inlineStyles = [];

@@ -586,20 +744,24 @@ if (!style) {

const shouldInlineStyles = typeof global !== "undefined" && global.SNAPSHOT_INLINE_APHRODITE;
flatten(style).forEach(child => {
var shouldInlineStyles = typeof global !== "undefined" && global.SNAPSHOT_INLINE_APHRODITE;
flatten(style).forEach(function (child) {
// Check for aphrodite internal property
if (child._definition) {
if (shouldInlineStyles) {
const def = {}; // React 16 complains about invalid keys in inline styles.
var def = {}; // React 16 complains about invalid keys in inline styles.
// It doesn't accept kebab-case in media queries and instead
// prefers camelCase.
for (const _ref of Object.entries(child._definition)) {
var _ref2 = _slicedToArray(_ref, 2);
var _arr = Object.entries(child._definition);
const key = _ref2[0];
const value = _ref2[1];
for (var _i = 0; _i < _arr.length; _i++) {
var _arr$_i = _slicedToArray(_arr[_i], 2),
key = _arr$_i[0],
value = _arr$_i[1];
// This regex converts all instances of -{lowercaseLetter}
// to the uppercase version of that letter, without the
// leading dash.
def[key.replace(/-[a-z]/g, match => match[1].toUpperCase())] = value;
def[key.replace(/-[a-z]/g, function (match) {
return match[1].toUpperCase();
})] = value;
}

@@ -615,3 +777,3 @@

});
const inlineStylesObject = Object.assign({}, ...inlineStyles); // TODO(somewhatabstract): When aphrodite no longer puts "!important" on
var inlineStylesObject = Object.assign.apply(Object, [{}].concat(inlineStyles)); // TODO(somewhatabstract): When aphrodite no longer puts "!important" on
// all the styles, remove this <ADD JIRA ISSUE HERE IF THIS PASSES REVIEW>

@@ -623,3 +785,3 @@ // If we're not snapshotting styles, let's create a class for the inline

if (inlineStyles.length > 0 && !shouldInlineStyles) {
const inlineStylesStyleSheet = StyleSheet.create({
var inlineStylesStyleSheet = StyleSheet.create({
inlineStyles: inlineStylesObject

@@ -632,6 +794,6 @@ });

style: shouldInlineStyles ? inlineStylesObject : {},
className: css(...stylesheetStyles)
className: css.apply(void 0, stylesheetStyles)
};
}
const mediaContextTypes = {
var mediaContextTypes = {
mediaSize: propTypes.string,

@@ -641,6 +803,5 @@ mediaSpec: propTypes.object

function MediaLayoutWrapper(Component$$1) {
const WrappedComponent = (props, {
mediaSize,
mediaSpec
}) => {
var WrappedComponent = function WrappedComponent(props, _ref) {
var mediaSize = _ref.mediaSize,
mediaSpec = _ref.mediaSpec;
return createElement(Component$$1, _extends({}, props, {

@@ -697,17 +858,25 @@ mediaSize: mediaSize,

*/
class MediaLayout extends Component {
constructor(props) {
super(props);
var MediaLayout =
/*#__PURE__*/
function (_React$Component) {
_inherits(MediaLayout, _React$Component);
_defineProperty(this, "watchHandlers", void 0);
function MediaLayout(props) {
var _this;
const ssrSize = props.ssrSize,
size = props.size,
spec = props.spec; // If a size was explicitly defined then we use that
_classCallCheck(this, MediaLayout);
_this = _possibleConstructorReturn(this, _getPrototypeOf(MediaLayout).call(this, props));
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "watchHandlers", void 0);
var ssrSize = props.ssrSize,
size = props.size,
spec = props.spec; // If a size was explicitly defined then we use that
if (size) {
this.state = {
size
_this.state = {
size: size
};
return;
return _possibleConstructorReturn(_this);
} // If we're rendering this on the server then we use the server-side

@@ -717,7 +886,7 @@ // size (which defaults to "large")

if (ssrSize && this.isServerSide()) {
this.state = {
if (ssrSize && _this.isServerSide()) {
_this.state = {
size: ssrSize
};
return;
return _possibleConstructorReturn(_this);
} // We then go through and set up matchMedia watchers for each breakpoint

@@ -728,71 +897,106 @@ // (if they haven't been created already) and we add listeners to

this.watchHandlers = {};
_this.watchHandlers = {};
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
for (const size of VALID_MEDIA_SIZES) {
if (!spec[size]) {
continue;
}
try {
var _loop = function _loop() {
var size = _step.value;
const query = spec[size].query; // Don't watch sizes that don't have an associated query
if (!spec[size]) {
return "continue";
}
if (!query) {
continue;
} // Create a new matchMedia watcher if one doesn't exist yet
var query = spec[size].query; // Don't watch sizes that don't have an associated query
if (!query) {
return "continue";
} // Create a new matchMedia watcher if one doesn't exist yet
if (!MediaLayout.WATCHERS[query]) {
MediaLayout.WATCHERS[query] = window.matchMedia(query);
}
const watcher = MediaLayout.WATCHERS[query]; // Attach a handler that watches for the change, saving a
// references to it so we can remove it later
if (!MediaLayout.WATCHERS[query]) {
MediaLayout.WATCHERS[query] = window.matchMedia(query);
}
const handler = this.watchHandlers[query] = e => {
if (e.matches) {
this.setState({
size
});
var watcher = MediaLayout.WATCHERS[query]; // Attach a handler that watches for the change, saving a
// references to it so we can remove it later
var handler = _this.watchHandlers[query] = function (e) {
if (e.matches) {
_this.setState({
size: size
});
}
};
watcher.addListener(handler); // If the watcher already matches then we set the size immediately
if (watcher.matches) {
_this.state = {
size: size
};
}
};
watcher.addListener(handler); // If the watcher already matches then we set the size immediately
for (var _iterator = VALID_MEDIA_SIZES[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var _ret = _loop();
if (watcher.matches) {
this.state = {
size
};
if (_ret === "continue") continue;
} // If a size was never defined, or matched, then we complain!
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return != null) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
} // If a size was never defined, or matched, then we complain!
}
if (!this.state || !this.state.size) {
if (!_this.state || !_this.state.size) {
throw new Error("Matching media query not found for MediaLayout.");
}
return _this;
}
componentWillUnmount() {
if (this.isServerSide()) {
return;
} // We go through the component and remove all of the listeners
// that this MediaLayout attached.
_createClass(MediaLayout, [{
key: "componentWillUnmount",
value: function componentWillUnmount() {
if (this.isServerSide()) {
return;
} // We go through the component and remove all of the listeners
// that this MediaLayout attached.
for (const query of Object.keys(MediaLayout.WATCHERS)) {
const watcher = MediaLayout.WATCHERS[query];
var _arr = Object.keys(MediaLayout.WATCHERS);
if (watcher) {
const handler = this.watchHandlers[query];
watcher.removeListener(handler);
delete this.watchHandlers[query];
for (var _i = 0; _i < _arr.length; _i++) {
var _query = _arr[_i];
var watcher = MediaLayout.WATCHERS[_query];
if (watcher) {
var handler = this.watchHandlers[_query];
watcher.removeListener(handler);
delete this.watchHandlers[_query];
}
}
}
}
isServerSide() {
return typeof window === "undefined" || !window.matchMedia;
}
render() {
// eslint-disable-next-line no-unused-vars
const _this$props = this.props,
}, {
key: "isServerSide",
value: function isServerSide() {
return typeof window === "undefined" || !window.matchMedia;
}
}, {
key: "render",
value: function render() {
// eslint-disable-next-line no-unused-vars
var _this$props = this.props,
ssrSize = _this$props.ssrSize,

@@ -803,8 +1007,10 @@ size = _this$props.size,

return createElement(MediaLayoutContext, _extends({}, otherProps, {
size: this.state.size
}), children);
}
return createElement(MediaLayoutContext, _extends({}, otherProps, {
size: this.state.size
}), children);
}
}]);
}
return MediaLayout;
}(Component);
/**

@@ -815,2 +1021,3 @@ * MediaLayoutContext is used to set the Context for all descendent children

_defineProperty(MediaLayout, "WATCHERS", {});

@@ -823,20 +1030,35 @@

class MediaLayoutContext extends Component {
getChildContext() {
return {
mediaSize: this.props.size,
mediaSpec: this.props.spec
};
}
var MediaLayoutContext =
/*#__PURE__*/
function (_React$Component2) {
_inherits(MediaLayoutContext, _React$Component2);
render() {
return createElement(Fragment, null, this.props.children);
function MediaLayoutContext() {
_classCallCheck(this, MediaLayoutContext);
return _possibleConstructorReturn(this, _getPrototypeOf(MediaLayoutContext).apply(this, arguments));
}
}
_createClass(MediaLayoutContext, [{
key: "getChildContext",
value: function getChildContext() {
return {
mediaSize: this.props.size,
mediaSpec: this.props.spec
};
}
}, {
key: "render",
value: function render() {
return createElement(Fragment, null, this.props.children);
}
}]);
return MediaLayoutContext;
}(Component);
_defineProperty(MediaLayoutContext, "childContextTypes", mediaContextTypes);
const isHeaderRegex = /^h[1-6]$/;
const styles = StyleSheet.create({
var isHeaderRegex = /^h[1-6]$/;
var styles = StyleSheet.create({
text: {

@@ -869,5 +1091,17 @@ // Disable subpixel antialiasing on Mac desktop for consistency of

class Text extends React__default.Component {
render() {
const _this$props = this.props,
var Text =
/*#__PURE__*/
function (_React$Component) {
_inherits(Text, _React$Component);
function Text() {
_classCallCheck(this, Text);
return _possibleConstructorReturn(this, _getPrototypeOf(Text).apply(this, arguments));
}
_createClass(Text, [{
key: "render",
value: function render() {
var _this$props = this.props,
children = _this$props.children,

@@ -878,11 +1112,13 @@ style = _this$props.style,

const isHeader = isHeaderRegex.test(Tag);
const styleAttributes = processStyleList([styles.text, isHeader && styles.header, style]);
return React__default.createElement(Tag, _extends({}, otherProps, {
style: styleAttributes.style,
className: styleAttributes.className
}), children);
}
var isHeader = isHeaderRegex.test(Tag);
var styleAttributes = processStyleList([styles.text, isHeader && styles.header, style]);
return React__default.createElement(Tag, _extends({}, otherProps, {
style: styleAttributes.style,
className: styleAttributes.className
}), children);
}
}]);
}
return Text;
}(React__default.Component);

@@ -895,10 +1131,10 @@ _defineProperty(Text, "defaultProps", {

function StyleComponent(props) {
const style = props.style,
otherProps = _objectWithoutProperties(props, ["style"]);
var style = props.style,
otherProps = _objectWithoutProperties(props, ["style"]);
const reset = typeof Component$$1 === "string" ? overrides[Component$$1] : null;
var reset = typeof Component$$1 === "string" ? overrides[Component$$1] : null;
const _processStyleList = processStyleList([reset, defaultStyle, style]),
className = _processStyleList.className,
inlineStyles = _processStyleList.style;
var _processStyleList = processStyleList([reset, defaultStyle, style]),
className = _processStyleList.className,
inlineStyles = _processStyleList.style;

@@ -919,3 +1155,3 @@ return createElement(Component$$1, _extends({}, otherProps, {

const overrides = StyleSheet.create({
var overrides = StyleSheet.create({
button: {

@@ -931,3 +1167,3 @@ margin: 0,

const styles$1 = StyleSheet.create({
var styles$1 = StyleSheet.create({
// https://github.com/facebook/css-layout#default-values

@@ -950,3 +1186,3 @@ default: {

});
const StyledDiv = addStyle("div", styles$1.default);
var StyledDiv = addStyle("div", styles$1.default);
/**

@@ -966,9 +1202,23 @@ * View is a building block for constructing other components. `View` roughly

class View extends React__default.Component {
render() {
return React__default.createElement(StyledDiv, this.props);
var View =
/*#__PURE__*/
function (_React$Component) {
_inherits(View, _React$Component);
function View() {
_classCallCheck(this, View);
return _possibleConstructorReturn(this, _getPrototypeOf(View).apply(this, arguments));
}
}
_createClass(View, [{
key: "render",
value: function render() {
return React__default.createElement(StyledDiv, this.props);
}
}]);
return View;
}(React__default.Component);
/**

@@ -979,3 +1229,3 @@ * We use render functions so that we don't do any work unless we need to.

const HasHadFirstRenderContext = createContext(false);
var HasHadFirstRenderContext = createContext(false);
/**

@@ -1005,64 +1255,90 @@ * Defer or change rendering until the component did mount.

class NoSSR extends Component {
constructor(...args) {
super(...args);
var NoSSR =
/*#__PURE__*/
function (_React$Component) {
_inherits(NoSSR, _React$Component);
_defineProperty(this, "state", {
function NoSSR() {
var _getPrototypeOf2;
var _this;
_classCallCheck(this, NoSSR);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(NoSSR)).call.apply(_getPrototypeOf2, [this].concat(args)));
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
mounted: false
});
_defineProperty(this, "_alreadyPerformedFirstRender", false);
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_alreadyPerformedFirstRender", false);
return _this;
}
componentDidMount() {
if (!this._alreadyPerformedFirstRender) {
// We only want to force a new render if we were responsible for
// the first render, so we guard that state change here.
// eslint-disable-next-line react/no-did-mount-set-state
this.setState({
mounted: true
});
_createClass(NoSSR, [{
key: "componentDidMount",
value: function componentDidMount() {
if (!this._alreadyPerformedFirstRender) {
// We only want to force a new render if we were responsible for
// the first render, so we guard that state change here.
// eslint-disable-next-line react/no-did-mount-set-state
this.setState({
mounted: true
});
}
}
}
_maybeRenderPlaceholderOrChildren(alreadyPerformedFirstRender) {
const mounted = this.state.mounted;
const _this$props = this.props,
}, {
key: "_maybeRenderPlaceholderOrChildren",
value: function _maybeRenderPlaceholderOrChildren(alreadyPerformedFirstRender) {
var mounted = this.state.mounted;
var _this$props = this.props,
children = _this$props.children,
placeholder = _this$props.placeholder; // We just get on with rendering if we're passed truthiness as we
// are reliably told a NoSSR component further up the chain already
// handled our SSR case.
// are reliably told a NoSSR component further up the chain already
// handled our SSR case.
if (alreadyPerformedFirstRender) {
// We need to stop the forced second render and to do that, we have
// to influence our componentDidMount. Fortunately, that occurs
// after this, so let's save a member value to then use there.
this._alreadyPerformedFirstRender = alreadyPerformedFirstRender;
return children();
} // We are mounted and we no higher SSR component handled the first
// render so let's tell our children that we did.
if (alreadyPerformedFirstRender) {
// We need to stop the forced second render and to do that, we have
// to influence our componentDidMount. Fortunately, that occurs
// after this, so let's save a member value to then use there.
this._alreadyPerformedFirstRender = alreadyPerformedFirstRender;
return children();
} // We are mounted and we no higher SSR component handled the first
// render so let's tell our children that we did.
if (mounted) {
return createElement(HasHadFirstRenderContext.Provider, {
value: true
}, children());
} // We don't have a parent that handled SSR, and this must be our
// first render, and we have a placeholder, so render the placeholder.
if (mounted) {
return createElement(HasHadFirstRenderContext.Provider, {
value: true
}, children());
} // We don't have a parent that handled SSR, and this must be our
// first render, and we have a placeholder, so render the placeholder.
if (placeholder) {
return placeholder();
} // We don't have a parent that handled SSR, and this must be our
// first render and we don't have a placeholder, so return nothing.
if (placeholder) {
return placeholder();
} // We don't have a parent that handled SSR, and this must be our
// first render and we don't have a placeholder, so return nothing.
return null;
}
return null;
}
}, {
key: "render",
value: function render() {
var _this2 = this;
render() {
return createElement(HasHadFirstRenderContext.Consumer, null, value => this._maybeRenderPlaceholderOrChildren(value));
}
return createElement(HasHadFirstRenderContext.Consumer, null, function (value) {
return _this2._maybeRenderPlaceholderOrChildren(value);
});
}
}]);
}
return NoSSR;
}(Component);

@@ -1074,3 +1350,5 @@ /**

*/
class UniqueIDFactory {
var UniqueIDFactory =
/*#__PURE__*/
function () {
/**

@@ -1085,23 +1363,27 @@ * Creates a UniqueIDFactory instance.

*/
constructor(scope) {
function UniqueIDFactory(scope) {
var _this = this;
_classCallCheck(this, UniqueIDFactory);
_defineProperty(this, "_uniqueFactoryName", void 0);
_defineProperty(this, "get", key => {
const normalizedKey = key.toLowerCase();
_defineProperty(this, "get", function (key) {
var normalizedKey = key.toLowerCase();
if (!this._hasValidIdChars(key)) {
throw new Error(`Invalid identifier key: ${key}`);
if (!_this._hasValidIdChars(key)) {
throw new Error("Invalid identifier key: ".concat(key));
}
return `${this._uniqueFactoryName}-${normalizedKey}`;
return "".concat(_this._uniqueFactoryName, "-").concat(normalizedKey);
});
scope = typeof scope === "string" ? scope : "";
const normalizedScope = scope.toLowerCase();
var normalizedScope = scope.toLowerCase();
if (!this._hasValidIdChars(normalizedScope)) {
throw new Error(`Invalid factory scope: ${scope}`);
throw new Error("Invalid factory scope: ".concat(scope));
}
this._uniqueFactoryName = `uid-${normalizedScope}-${UniqueIDFactory._factoryUniquenessCounter++}`;
this._uniqueFactoryName = "uid-".concat(normalizedScope, "-").concat(UniqueIDFactory._factoryUniquenessCounter++);
}

@@ -1116,23 +1398,27 @@ /**

_hasValidIdChars(value) {
if (typeof value !== "string") {
return false;
_createClass(UniqueIDFactory, [{
key: "_hasValidIdChars",
value: function _hasValidIdChars(value) {
if (typeof value !== "string") {
return false;
}
var invalidCharsReplaced = value.replace(/[^\d\w-]/g, "-");
return value === invalidCharsReplaced;
}
/**
* Provides a unique identifier with the given key.
*
* @param {string} key The case-insensitive key of the identifier.
*
* @returns {string} A unique identifier that will remain the same for this
* key in this factory. This must contain only hyphen and alphanumeric
* characters.
*/
const invalidCharsReplaced = value.replace(/[^\d\w-]/g, "-");
return value === invalidCharsReplaced;
}
/**
* Provides a unique identifier with the given key.
*
* @param {string} key The case-insensitive key of the identifier.
*
* @returns {string} A unique identifier that will remain the same for this
* key in this factory. This must contain only hyphen and alphanumeric
* characters.
*/
}]);
return UniqueIDFactory;
}();
}
_defineProperty(UniqueIDFactory, "_factoryUniquenessCounter", 0);

@@ -1150,9 +1436,19 @@

*/
class SsrIDFactory {
get(id) {
return id;
var SsrIDFactory =
/*#__PURE__*/
function () {
function SsrIDFactory() {
_classCallCheck(this, SsrIDFactory);
}
}
_createClass(SsrIDFactory, [{
key: "get",
value: function get(id) {
return id;
}
}]);
return SsrIDFactory;
}();
_defineProperty(SsrIDFactory, "Default", new SsrIDFactory());

@@ -1178,45 +1474,72 @@

*/
class UniqueIDProvider extends Component {
constructor(...args) {
super(...args);
var UniqueIDProvider =
/*#__PURE__*/
function (_React$Component) {
_inherits(UniqueIDProvider, _React$Component);
_defineProperty(this, "_idFactory", void 0);
function UniqueIDProvider() {
var _getPrototypeOf2;
var _this;
_classCallCheck(this, UniqueIDProvider);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(UniqueIDProvider)).call.apply(_getPrototypeOf2, [this].concat(args)));
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_idFactory", void 0);
return _this;
}
_performRender(firstRender) {
const _this$props = this.props,
_createClass(UniqueIDProvider, [{
key: "_performRender",
value: function _performRender(firstRender) {
var _this$props = this.props,
children = _this$props.children,
mockOnFirstRender = _this$props.mockOnFirstRender,
scope = _this$props.scope; // If this is our first render, we're going to stop right here.
// Note: `firstRender` will be `false` on the first render if this
// component is a descendant of a `NoSSR`.
// Note: `firstRender` will be `false` on the first render if this
// component is a descendant of a `NoSSR`.
if (firstRender) {
if (mockOnFirstRender) {
// We're allowing an initial render, so let's pass our mock
// identifier factory to support SSR.
return children(SsrIDFactory$1);
}
if (firstRender) {
if (mockOnFirstRender) {
// We're allowing an initial render, so let's pass our mock
// identifier factory to support SSR.
return children(SsrIDFactory$1);
}
return null;
} // Create an identifier factory if we don't already have one
return null;
} // Create an identifier factory if we don't already have one
if (!this._idFactory) {
this._idFactory = new UniqueIDFactory(scope);
} // It's a regular render, so let's use our identifier factory.
if (!this._idFactory) {
this._idFactory = new UniqueIDFactory(scope);
} // It's a regular render, so let's use our identifier factory.
return children(this._idFactory);
}
return children(this._idFactory);
}
}, {
key: "render",
value: function render() {
var _this2 = this;
render() {
// Here we use the NoSSR component to control when we render and whether
// we provide a mock or real identifier factory.
return createElement(NoSSR, {
placeholder: () => this._performRender(true)
}, () => this._performRender(false));
}
// Here we use the NoSSR component to control when we render and whether
// we provide a mock or real identifier factory.
return createElement(NoSSR, {
placeholder: function placeholder() {
return _this2._performRender(true);
}
}, function () {
return _this2._performRender(false);
});
}
}]);
}
return UniqueIDProvider;
}(Component);

@@ -1241,3 +1564,3 @@ /**

*/
const ClickableBehaviorWithRouter = withRouter(ClickableBehavior);
var ClickableBehaviorWithRouter = withRouter(ClickableBehavior);
function getClickableBehavior(

@@ -1272,11 +1595,11 @@ /**

*/
const getElementStyle = function getElementStyle(node, prop) {
var getElementStyle = function getElementStyle(node, prop) {
return getComputedStyle(node).getPropertyValue(prop);
};
const getElementOverflow = function getElementOverflow(node) {
var getElementOverflow = function getElementOverflow(node) {
return getElementStyle(node, "overflow") + getElementStyle(node, "overflow-y") + getElementStyle(node, "overflow-x");
};
const canScroll = function canScroll(node) {
var canScroll = function canScroll(node) {
return /(auto|scroll)/.test(getElementOverflow(node));

@@ -1292,4 +1615,8 @@ }; // NOTE(somewhatabstract): Flow includes the @@iterator value in the Iterator

class ScrollAncestorsIterator {
constructor(element) {
var ScrollAncestorsIterator =
/*#__PURE__*/
function () {
function ScrollAncestorsIterator(element) {
_classCallCheck(this, ScrollAncestorsIterator);
_defineProperty(this, "done", false);

@@ -1307,34 +1634,44 @@

[_Symbol$iterator]() {
return this;
}
_createClass(ScrollAncestorsIterator, [{
key: _Symbol$iterator,
value: function value() {
return this;
}
}, {
key: "next",
value: function next() {
if (this.done) {
return {
done: true
};
} // Climb the DOM looking for the next scroll candidate.
next() {
if (this.done) {
return {
done: true
};
} // Climb the DOM looking for the next scroll candidate.
var scrollCandidate;
let scrollCandidate;
do {
scrollCandidate = this.parentElement;
this.parentElement = this.parentElement && this.parentElement.parentElement;
} while (scrollCandidate && !canScroll(scrollCandidate));
do {
scrollCandidate = this.parentElement;
this.parentElement = this.parentElement && this.parentElement.parentElement;
} while (scrollCandidate && !canScroll(scrollCandidate));
if (!scrollCandidate) {
// If we don't have a scroll candidate, we'll definitely be done
// iterating by the next call to next().
// So let's remember that.
this.done = true; // If we don't have a documentElement, we are actually done right
// now, rather than on the next call.
if (!scrollCandidate) {
// If we don't have a scroll candidate, we'll definitely be done
// iterating by the next call to next().
// So let's remember that.
this.done = true; // If we don't have a documentElement, we are actually done right
// now, rather than on the next call.
if (!document.documentElement) {
return {
done: true
};
} // Otherwise, as we have a documentElement, this is our penultimate
// iteration .
if (!document.documentElement) {
return {
done: true
done: false,
value: document.documentElement
};
} // Otherwise, as we have a documentElement, this is our penultimate
// iteration .
} // We found a scroll ancestor, so let's return that.

@@ -1344,18 +1681,15 @@

done: false,
value: document.documentElement
value: scrollCandidate
};
} // We found a scroll ancestor, so let's return that.
}
}]);
return ScrollAncestorsIterator;
}();
return {
done: false,
value: scrollCandidate
};
}
}
function enumerateScrollAncestors(element) {
return Object.defineProperty({}, Symbol.iterator, {
value: () => new ScrollAncestorsIterator(element),
value: function value() {
return new ScrollAncestorsIterator(element);
},
writable: true

@@ -1384,5 +1718,9 @@ });

function getAxisIntersection(intersectingRect, boundsRect, axis) {
const start = rect => axis === "horizontal" ? rect.left : rect.top;
var start = function start(rect) {
return axis === "horizontal" ? rect.left : rect.top;
};
const end = rect => axis === "horizontal" ? rect.right : rect.bottom;
var end = function end(rect) {
return axis === "horizontal" ? rect.right : rect.bottom;
};

@@ -1410,5 +1748,5 @@ if (end(intersectingRect) <= start(boundsRect)) {

// So, let's get the style for the element and use the overflow values.
const style = boundsElement.currentStyle || window.getComputedStyle(boundsElement);
var style = boundsElement.currentStyle || window.getComputedStyle(boundsElement);
const boundsRect = _objectSpread({}, boundsElement.getBoundingClientRect()); // In webapp we set height: 100% on html, body and overflow-y: scroll on body.
var boundsRect = _objectSpread({}, boundsElement.getBoundingClientRect()); // In webapp we set height: 100% on html, body and overflow-y: scroll on body.
// This results in the height reported by getBoundingClientRect being the height

@@ -1427,9 +1765,9 @@ // of the viewport instead of the height of the page. We use the scrollHeight

const horizontal = style.overflowX === "visible" ? "within" : getAxisIntersection(intersectingRect, boundsRect, "horizontal"); // We assume we're within this specific bounds element if it's overflow is
var horizontal = style.overflowX === "visible" ? "within" : getAxisIntersection(intersectingRect, boundsRect, "horizontal"); // We assume we're within this specific bounds element if it's overflow is
// visible.
const vertical = style.overflowY === "visible" ? "within" : getAxisIntersection(intersectingRect, boundsRect, "vertical");
var vertical = style.overflowY === "visible" ? "within" : getAxisIntersection(intersectingRect, boundsRect, "vertical");
return {
horizontal,
vertical
horizontal: horizontal,
vertical: vertical
};

@@ -1449,3 +1787,3 @@ }

const intersectingRect = element.getBoundingClientRect(); // If we're looking against a single boundary element, then we just do that.
var intersectingRect = element.getBoundingClientRect(); // If we're looking against a single boundary element, then we just do that.

@@ -1458,14 +1796,34 @@ if (boundsElement) {

for (const scrollParent of enumerateScrollAncestors(element)) {
const intersection = getElementIntersectionAgainstParent(intersectingRect, scrollParent); // If the intersectingRect is before or after the parent in one or both
// dimensions, then return our intersection result. Otherwise, we'll
// keep on searching up our parents.
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
if (intersection.vertical !== "within" || intersection.horizontal !== "within") {
// Stop looking, we've found something that is hiding the element.
return intersection;
try {
for (var _iterator = enumerateScrollAncestors(element)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var scrollParent = _step.value;
var intersection = getElementIntersectionAgainstParent(intersectingRect, scrollParent); // If the intersectingRect is before or after the parent in one or both
// dimensions, then return our intersection result. Otherwise, we'll
// keep on searching up our parents.
if (intersection.vertical !== "within" || intersection.horizontal !== "within") {
// Stop looking, we've found something that is hiding the element.
return intersection;
}
} // If we got here, the element is within the bounds of its parents.
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return != null) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
} // If we got here, the element is within the bounds of its parents.
}
return FullIntersection();

@@ -1472,0 +1830,0 @@ }

7

package.json
{
"name": "@khanacademy/wonder-blocks-core",
"version": "1.2.5",
"version": "1.2.6",
"design": "v1",

@@ -16,3 +16,3 @@ "publishConfig": {

"dependencies": {
"@khanacademy/wonder-blocks-spacing": "^2.0.10"
"@khanacademy/wonder-blocks-spacing": "^2.0.11"
},

@@ -26,4 +26,7 @@ "peerDependencies": {

},
"devDependencies": {
"wb-dev-build-settings": "^0.0.2"
},
"author": "",
"license": "MIT"
}
dist/index.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc