@khanacademy/wonder-blocks-layout 1.4.8 → 1.4.9

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-layout
 
+## 1.4.9
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-core@4.3.1
+
 ## 1.4.8
 
 ### Patch Changes

package/dist/es/index.js

@@ -4,11 +4,8 @@ import Spacing from '@khanacademy/wonder-blocks-spacing';
 import { StyleSheet } from 'aphrodite';
 import { View } from '@khanacademy/wonder-blocks-core';
 
-// All possible valid media sizes
 const VALID_MEDIA_SIZES = ["small", "medium", "large"];
-const mediaDefaultSpecLargeMarginWidth = Spacing.large_24; // The default spec for media layout, currently available in
-// three different settings (roughly mobile, tablet, and desktop).
-
+const mediaDefaultSpecLargeMarginWidth = Spacing.large_24;
 const MEDIA_DEFAULT_SPEC = {
   small: {
     query: "(max-width: 767px)",
@@ -29,8 +26,7 @@ const MEDIA_DEFAULT_SPEC = {
     marginWidth: mediaDefaultSpecLargeMarginWidth,
     maxWidth: 1120 + mediaDefaultSpecLargeMarginWidth * 2
   }
-}; // Used for internal tools
-
+};
 const MEDIA_INTERNAL_SPEC = {
   large: {
     query: "(min-width: 1px)",
@@ -38,8 +34,7 @@ const MEDIA_INTERNAL_SPEC = {
     gutterWidth: Spacing.xLarge_32,
     marginWidth: Spacing.medium_16
   }
-}; // The default used for modals
-
+};
 const MEDIA_MODAL_SPEC = {
   small: {
     query: "(max-width: 767px)",
@@ -59,24 +54,13 @@ const defaultContext = {
   ssrSize: "large",
   mediaSpec: MEDIA_DEFAULT_SPEC
 };
-var MediaLayoutContext = /*#__PURE__*/React.createContext(defaultContext);
+var MediaLayoutContext = React.createContext(defaultContext);
 
 const queries = [].concat(Object.values(MEDIA_DEFAULT_SPEC).map(spec => spec.query), Object.values(MEDIA_INTERNAL_SPEC).map(spec => spec.query), Object.values(MEDIA_MODAL_SPEC).map(spec => spec.query));
-const mediaQueryLists = {}; // eslint-disable-next-line flowtype/require-exact-type
-
-// If for some reason we're not able to resolve the current media size we
-// fall back to this state.
+const mediaQueryLists = {};
 const DEFAULT_SIZE = "large";
 
-/**
- * `MediaLayout` is responsible for changing the rendering of contents at
- * differently sized viewports.  `MediaLayoutContext.Provider` can be used
- * to specify different breakpoint configurations.  By default it uses
- * `MEDIA_DEFAULT_SPEC`.  See media-layout-context.js for additiional options.
- */
 class MediaLayoutInternal extends React.Component {
-  // A collection of thunks that's used to clean up event listeners
-  // when the component is unmounted.
   constructor(props) {
     super(props);
     this.state = {
@@ -86,11 +70,10 @@ class MediaLayoutInternal extends React.Component {
   }
 
   componentDidMount() {
-    // TODO(WB-534): handle changes to mediaSpec prop
     const entries = Object.entries(this.props.mediaSpec);
 
     for (const [size, spec] of entries) {
-      const mql = mediaQueryLists[spec.query]; // during SSR there are no MediaQueryLists
+      const mql = mediaQueryLists[spec.query];
 
       if (!mql) {
         continue;
@@ -110,14 +93,10 @@ class MediaLayoutInternal extends React.Component {
   }
 
   componentWillUnmount() {
-    // Remove our listeners.
     this.cleanupThunks.forEach(cleaup => cleaup());
   }
 
   getCurrentSize(spec) {
-    // If we have a state with the current size in it then we always want
-    // to use that. This will happen if the viewport changes sizes after
-    // we've already initialized.
     if (this.state.size) {
       return this.state.size;
     } else {
@@ -133,48 +112,33 @@ class MediaLayoutInternal extends React.Component {
     }
 
     return DEFAULT_SIZE;
-  } // We assume that we're running on the server (or, at least, an unsupported
-  // environment) if there is no window object or matchMedia function
-  // available.
-
+  }
 
   isServerSide() {
     return typeof window === "undefined" || !window.matchMedia;
-  } // Generate a mock Aphrodite StyleSheet based upon the current mediaSize
-  // We do this by looking at all of the stylesheets specified in the
-  // styleSheets prop and then all of the individual styles. We merge the
-  // styles together
-  // TODO(WB-533): move to util.js to make it easier to test
-
+  }
 
   getMockStyleSheet(mediaSize) {
     const {
       styleSheets
     } = this.props;
-    const mockStyleSheet = {}; // If no stylesheets were specified then we just return an empty object
+    const mockStyleSheet = {};
 
     if (!styleSheets) {
       return mockStyleSheet;
-    } // Go through all of the stylesheets that were specified
-
+    }
 
     for (const styleSize of Object.keys(styleSheets)) {
       const styleSheet = styleSheets[styleSize];
 
       if (!styleSheet) {
         continue;
-      } // And then through each key of each stylesheet
-
+      }
 
       for (const name of Object.keys(styleSheet)) {
-        if ( // $FlowIgnore[method-unbinding]
-        Object.prototype.hasOwnProperty.call(mockStyleSheet, name)) {
+        if (Object.prototype.hasOwnProperty.call(mockStyleSheet, name)) {
           continue;
-        } // We create an entry that combines the values from all of
-        // the stylesheets together in least-specific to most-specific
-        // priority (thus small/medium/large styles will always have
-        // precedence over "all" or mdOrSmaller/mdOrLarger/etc.).
-
+        }
 
         mockStyleSheet[name] = [styleSheets.all && styleSheets.all[name], mediaSize === "small" && [styleSheets.mdOrSmaller && styleSheets.mdOrSmaller[name], styleSheets.small && styleSheets.small[name]], mediaSize === "medium" && [styleSheets.mdOrSmaller && styleSheets.mdOrSmaller[name], styleSheets.mdOrLarger && styleSheets.mdOrLarger[name], styleSheets.medium && styleSheets.medium[name]], mediaSize === "large" && [styleSheets.mdOrLarger && styleSheets.mdOrLarger[name], styleSheets.large && styleSheets.large[name]]];
       }
@@ -189,23 +153,15 @@ class MediaLayoutInternal extends React.Component {
       mediaSpec,
       ssrSize,
       overrideSize
-    } = this.props; // We need to create the MediaQueryLists during the first render in order
-    // to query whether any of them match.
+    } = this.props;
 
     if (!this.isServerSide()) {
       for (const query of queries.filter(query => !mediaQueryLists[query])) {
         mediaQueryLists[query] = window.matchMedia(query);
       }
-    } // We need to figure out what the current media size is
-    // If an override has been specified, we use that.
-    // If we're rendering on the server then we use the default
-    // SSR rendering size.
-    // Otherwise we attempt to get the current size based on
-    // the current MediaSpec.
-
-
-    const mediaSize = overrideSize || this.isServerSide() && ssrSize || this.getCurrentSize(mediaSpec); // Generate a mock stylesheet
+    }
 
+    const mediaSize = overrideSize || this.isServerSide() && ssrSize || this.getCurrentSize(mediaSpec);
     const styles = this.getMockStyleSheet(mediaSize);
     return children({
       mediaSize,
@@ -214,19 +170,15 @@ class MediaLayoutInternal extends React.Component {
     });
   }
 
-} // gen-snapshot-tests.js only understands `export default class ...`
-
+}
 
 class MediaLayout extends React.Component {
   render() {
-    // We listen to the MediaLayoutContext to see what defaults we're
-    // being given (this can be overriden by wrapping this component in
-    // a MediaLayoutContext.Consumer).
-    return /*#__PURE__*/React.createElement(MediaLayoutContext.Consumer, null, ({
+    return React.createElement(MediaLayoutContext.Consumer, null, ({
       overrideSize,
       ssrSize,
       mediaSpec
-    }) => /*#__PURE__*/React.createElement(MediaLayoutInternal, _extends({}, this.props, {
+    }) => React.createElement(MediaLayoutInternal, _extends({}, this.props, {
       overrideSize: overrideSize,
       ssrSize: ssrSize,
       mediaSpec: mediaSpec
@@ -235,17 +187,12 @@ class MediaLayout extends React.Component {
 
 }
 
-/**
- * Expands to fill space between sibling components.
- *
- * Assumes parent is a View.
- */
 class Spring extends React.Component {
   render() {
     const {
       style
     } = this.props;
-    return /*#__PURE__*/React.createElement(View, {
+    return React.createElement(View, {
       "aria-hidden": "true",
       style: [styles.grow, style]
     });
@@ -258,18 +205,13 @@ const styles = StyleSheet.create({
   }
 });
 
-/**
- * A component for inserting fixed space between components.
- *
- * Assumes parent is a View.
- */
 class Strut extends React.Component {
   render() {
     const {
       size,
       style
     } = this.props;
-    return /*#__PURE__*/React.createElement(View, {
+    return React.createElement(View, {
       "aria-hidden": "true",
       style: [strutStyle(size), style]
     });
@@ -288,16 +230,6 @@ const strutStyle = size => {
   };
 };
 
-/**
- * Return where a media size matches a media query.
- *
- * examples:
- * - `queryMatchesSize("all", "small")` returns `true`
- * - `queryMatchesSize("mdOrLarger", "small")` returns `false`
- *
- * @param {MediaQuery} mediaQuery
- * @param {MediaSize} mediaSize
- */
 const queryMatchesSize = (mediaQuery, mediaSize) => {
   switch (mediaQuery) {
     case "all":

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-layout",
-  "version": "1.4.8",
+  "version": "1.4.9",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -14,11 +14,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@khanacademy/wonder-blocks-core": "^4.3.0",
+    "@khanacademy/wonder-blocks-core": "^4.3.1",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.3.0"
+    "wb-dev-build-settings": "^0.4.0"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",