@khanacademy/wonder-blocks-layout 1.4.14 → 1.4.16

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @khanacademy/wonder-blocks-layout
 
+## 1.4.16
+
+### Patch Changes
+
+-   91cb727c: Remove file extensions from imports
+-   Updated dependencies [91cb727c]
+-   Updated dependencies [91cb727c]
+    -   @khanacademy/wonder-blocks-core@4.7.0
+
+## 1.4.15
+
+### Patch Changes
+
+-   Updated dependencies [496119f2]
+    -   @khanacademy/wonder-blocks-core@4.6.2
+
 ## 1.4.14
 
 ### Patch Changes

package/dist/index.js

@@ -0,0 +1,294 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _extends = require('@babel/runtime/helpers/extends');
+var React = require('react');
+var Spacing = require('@khanacademy/wonder-blocks-spacing');
+var aphrodite = require('aphrodite');
+var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var Spacing__default = /*#__PURE__*/_interopDefaultLegacy(Spacing);
+
+const VALID_MEDIA_SIZES = ["small", "medium", "large"];
+const mediaDefaultSpecLargeMarginWidth = Spacing__default["default"].large_24;
+const MEDIA_DEFAULT_SPEC = {
+  small: {
+    query: "(max-width: 767px)",
+    totalColumns: 4,
+    gutterWidth: Spacing__default["default"].medium_16,
+    marginWidth: Spacing__default["default"].medium_16
+  },
+  medium: {
+    query: "(min-width: 768px) and (max-width: 1023px)",
+    totalColumns: 8,
+    gutterWidth: Spacing__default["default"].xLarge_32,
+    marginWidth: Spacing__default["default"].large_24
+  },
+  large: {
+    query: "(min-width: 1024px)",
+    totalColumns: 12,
+    gutterWidth: Spacing__default["default"].xLarge_32,
+    marginWidth: mediaDefaultSpecLargeMarginWidth,
+    maxWidth: 1120 + mediaDefaultSpecLargeMarginWidth * 2
+  }
+};
+const MEDIA_INTERNAL_SPEC = {
+  large: {
+    query: "(min-width: 1px)",
+    totalColumns: 12,
+    gutterWidth: Spacing__default["default"].xLarge_32,
+    marginWidth: Spacing__default["default"].medium_16
+  }
+};
+const MEDIA_MODAL_SPEC = {
+  small: {
+    query: "(max-width: 767px)",
+    totalColumns: 4,
+    gutterWidth: Spacing__default["default"].medium_16,
+    marginWidth: Spacing__default["default"].medium_16
+  },
+  large: {
+    query: "(min-width: 768px)",
+    totalColumns: 12,
+    gutterWidth: Spacing__default["default"].xLarge_32,
+    marginWidth: Spacing__default["default"].xxLarge_48
+  }
+};
+
+const defaultContext = {
+  ssrSize: "large",
+  mediaSpec: MEDIA_DEFAULT_SPEC
+};
+var MediaLayoutContext = React__namespace.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 = {};
+const DEFAULT_SIZE = "large";
+
+class MediaLayoutInternal extends React__namespace.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      size: undefined
+    };
+    this.cleanupThunks = [];
+  }
+
+  componentDidMount() {
+    const entries = Object.entries(this.props.mediaSpec);
+
+    for (const [size, spec] of entries) {
+      const mql = mediaQueryLists[spec.query];
+
+      if (!mql) {
+        continue;
+      }
+
+      const listener = e => {
+        if (e.matches) {
+          this.setState({
+            size
+          });
+        }
+      };
+
+      mql.addListener(listener);
+      this.cleanupThunks.push(() => mql.removeListener(listener));
+    }
+  }
+
+  componentWillUnmount() {
+    this.cleanupThunks.forEach(cleaup => cleaup());
+  }
+
+  getCurrentSize(spec) {
+    if (this.state.size) {
+      return this.state.size;
+    } else {
+      const entries = Object.entries(this.props.mediaSpec);
+
+      for (const [size, _spec] of entries) {
+        const mql = mediaQueryLists[_spec.query];
+
+        if (mql.matches) {
+          return size;
+        }
+      }
+    }
+
+    return DEFAULT_SIZE;
+  }
+
+  isServerSide() {
+    return typeof window === "undefined" || !window.matchMedia;
+  }
+
+  getMockStyleSheet(mediaSize) {
+    const {
+      styleSheets
+    } = this.props;
+    const mockStyleSheet = {};
+
+    if (!styleSheets) {
+      return mockStyleSheet;
+    }
+
+    for (const styleSize of Object.keys(styleSheets)) {
+      const styleSheet = styleSheets[styleSize];
+
+      if (!styleSheet) {
+        continue;
+      }
+
+      for (const name of Object.keys(styleSheet)) {
+        if (Object.prototype.hasOwnProperty.call(mockStyleSheet, name)) {
+          continue;
+        }
+
+        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]]];
+      }
+    }
+
+    return mockStyleSheet;
+  }
+
+  render() {
+    const {
+      children,
+      mediaSpec,
+      ssrSize,
+      overrideSize
+    } = this.props;
+
+    if (!this.isServerSide()) {
+      for (const query of queries.filter(query => !mediaQueryLists[query])) {
+        mediaQueryLists[query] = window.matchMedia(query);
+      }
+    }
+
+    const mediaSize = overrideSize || this.isServerSide() && ssrSize || this.getCurrentSize(mediaSpec);
+    const styles = this.getMockStyleSheet(mediaSize);
+    return children({
+      mediaSize,
+      mediaSpec,
+      styles
+    });
+  }
+
+}
+
+class MediaLayout extends React__namespace.Component {
+  render() {
+    return React__namespace.createElement(MediaLayoutContext.Consumer, null, ({
+      overrideSize,
+      ssrSize,
+      mediaSpec
+    }) => React__namespace.createElement(MediaLayoutInternal, _extends__default["default"]({}, this.props, {
+      overrideSize: overrideSize,
+      ssrSize: ssrSize,
+      mediaSpec: mediaSpec
+    })));
+  }
+
+}
+
+class Spring extends React__namespace.Component {
+  render() {
+    const {
+      style
+    } = this.props;
+    return React__namespace.createElement(wonderBlocksCore.View, {
+      "aria-hidden": "true",
+      style: [styles.grow, style]
+    });
+  }
+
+}
+const styles = aphrodite.StyleSheet.create({
+  grow: {
+    flexGrow: 1
+  }
+});
+
+class Strut extends React__namespace.Component {
+  render() {
+    const {
+      size,
+      style
+    } = this.props;
+    return React__namespace.createElement(wonderBlocksCore.View, {
+      "aria-hidden": "true",
+      style: [strutStyle(size), style]
+    });
+  }
+
+}
+
+const strutStyle = size => {
+  return {
+    width: size,
+    MsFlexBasis: size,
+    MsFlexPreferredSize: size,
+    WebkitFlexBasis: size,
+    flexBasis: size,
+    flexShrink: 0
+  };
+};
+
+const queryMatchesSize = (mediaQuery, mediaSize) => {
+  switch (mediaQuery) {
+    case "all":
+      return true;
+
+    case "small":
+      return mediaSize === "small";
+
+    case "mdOrSmaller":
+      return mediaSize === "medium" || mediaSize === "small";
+
+    case "medium":
+      return mediaSize === "medium";
+
+    case "mdOrLarger":
+      return mediaSize === "medium" || mediaSize === "large";
+
+    case "large":
+      return mediaSize === "large";
+
+    default:
+      throw new Error(`Unsupported mediaSize: ${mediaSize}`);
+  }
+};
+
+exports.MEDIA_DEFAULT_SPEC = MEDIA_DEFAULT_SPEC;
+exports.MEDIA_INTERNAL_SPEC = MEDIA_INTERNAL_SPEC;
+exports.MEDIA_MODAL_SPEC = MEDIA_MODAL_SPEC;
+exports.MediaLayout = MediaLayout;
+exports.MediaLayoutContext = MediaLayoutContext;
+exports.Spring = Spring;
+exports.Strut = Strut;
+exports.VALID_MEDIA_SIZES = VALID_MEDIA_SIZES;
+exports.queryMatchesSize = queryMatchesSize;

package/dist/index.js.flow

@@ -1,2 +1,2 @@
 // @flow
-export * from "../src/index.js";
+export * from "../src/index";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-layout",
-  "version": "1.4.14",
+  "version": "1.4.16",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -14,11 +14,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-core": "^4.6.1",
+    "@khanacademy/wonder-blocks-core": "^4.7.0",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.6.0"
+    "wb-dev-build-settings": "^0.7.1"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",

package/src/components/__docs__/media-layout.stories.js

@@ -21,7 +21,7 @@ import {
 
 import type {StoryComponentType} from "@storybook/react";
 
-import ComponentInfo from "../../../../../.storybook/components/component-info.js";
+import ComponentInfo from "../../../../../.storybook/components/component-info";
 import {name, version} from "../../../package.json";
 
 export default {

package/src/components/__docs__/spring.stories.js

@@ -9,7 +9,7 @@ import Button from "@khanacademy/wonder-blocks-button";
 
 import type {StoryComponentType} from "@storybook/react";
 
-import ComponentInfo from "../../../../../.storybook/components/component-info.js";
+import ComponentInfo from "../../../../../.storybook/components/component-info";
 import {name, version} from "../../../package.json";
 
 export default {

package/src/components/__docs__/strut.stories.js

@@ -10,7 +10,7 @@ import Spacing from "@khanacademy/wonder-blocks-spacing";
 
 import type {StoryComponentType} from "@storybook/react";
 
-import ComponentInfo from "../../../../../.storybook/components/component-info.js";
+import ComponentInfo from "../../../../../.storybook/components/component-info";
 import {name, version} from "../../../package.json";
 
 export default {

package/src/components/__tests__/media-layout-context.test.js

@@ -3,15 +3,15 @@ import * as React from "react";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {render} from "@testing-library/react";
 
-import MediaLayout from "../media-layout.js";
-import MediaLayoutContext from "../media-layout-context.js";
-import {resizeWindow, matchMedia} from "../../util/test-util.js";
+import MediaLayout from "../media-layout";
+import MediaLayoutContext from "../media-layout-context";
+import {resizeWindow, matchMedia} from "../../util/test-util";
 
 import {
     MEDIA_DEFAULT_SPEC,
     MEDIA_INTERNAL_SPEC,
     MEDIA_MODAL_SPEC,
-} from "../../util/specs.js";
+} from "../../util/specs";
 
 describe("MediaLayoutContext", () => {
     beforeEach(() => {

package/src/components/__tests__/media-layout.test.js

@@ -4,8 +4,8 @@ import {StyleSheet} from "aphrodite";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {render, screen} from "@testing-library/react";
 
-import MediaLayout from "../media-layout.js";
-import {resizeWindow, matchMedia} from "../../util/test-util.js";
+import MediaLayout from "../media-layout";
+import {resizeWindow, matchMedia} from "../../util/test-util";
 
 describe("MediaLayout", () => {
     beforeEach(() => {

package/src/components/media-layout-context.js

@@ -1,8 +1,8 @@
 // @flow
 import * as React from "react";
 
-import {MEDIA_DEFAULT_SPEC} from "../util/specs.js";
-import type {MediaSize, MediaSpec} from "../util/types.js";
+import {MEDIA_DEFAULT_SPEC} from "../util/specs";
+import type {MediaSize, MediaSpec} from "../util/types";
 
 export type Context = {|
     /**

package/src/components/media-layout.js

@@ -3,14 +3,14 @@ import * as React from "react";
 import type {StyleDeclaration} from "aphrodite";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
-import MediaLayoutContext from "./media-layout-context.js";
-import type {MediaSize, MediaSpec} from "../util/types.js";
-import type {Context} from "./media-layout-context.js";
+import MediaLayoutContext from "./media-layout-context";
+import type {MediaSize, MediaSpec} from "../util/types";
+import type {Context} from "./media-layout-context";
 import {
     MEDIA_DEFAULT_SPEC,
     MEDIA_INTERNAL_SPEC,
     MEDIA_MODAL_SPEC,
-} from "../util/specs.js";
+} from "../util/specs";
 
 const queries = [
     ...Object.values(MEDIA_DEFAULT_SPEC).map((spec: any) => spec.query),

package/src/index.js

@@ -1,14 +1,14 @@
 // @flow
-import type {MediaQuery, MediaSize, MediaSpec} from "./util/types.js";
-import type {Context} from "./components/media-layout-context.js";
-import type {MockStyleSheet} from "./components/media-layout.js";
+import type {MediaQuery, MediaSize, MediaSpec} from "./util/types";
+import type {Context} from "./components/media-layout-context";
+import type {MockStyleSheet} from "./components/media-layout";
 
-export {default as MediaLayout} from "./components/media-layout.js";
-export {default as MediaLayoutContext} from "./components/media-layout-context.js";
-export {default as Spring} from "./components/spring.js";
-export {default as Strut} from "./components/strut.js";
-export * from "./util/specs.js";
-export {queryMatchesSize} from "./util/util.js";
+export {default as MediaLayout} from "./components/media-layout";
+export {default as MediaLayoutContext} from "./components/media-layout-context";
+export {default as Spring} from "./components/spring";
+export {default as Strut} from "./components/strut";
+export * from "./util/specs";
+export {queryMatchesSize} from "./util/util";
 export type {
     MediaQuery,
     MediaSize,

package/src/util/specs.js

@@ -2,7 +2,7 @@
 
 import Spacing from "@khanacademy/wonder-blocks-spacing";
 
-import type {MediaSize, MediaSpec} from "./types.js";
+import type {MediaSize, MediaSpec} from "./types";
 
 // All possible valid media sizes
 export const VALID_MEDIA_SIZES: Array<MediaSize> = ["small", "medium", "large"];

package/src/util/test-util.js

@@ -1,5 +1,5 @@
 // @flow
-import type {MediaSize} from "./types.js";
+import type {MediaSize} from "./types";
 
 /**
  * Helper function for setting the window size, for use in tests.

package/src/util/test-util.test.js

@@ -1,5 +1,5 @@
 // @flow
-import {resizeWindow, checkQuery, matchMedia} from "./test-util.js";
+import {resizeWindow, checkQuery, matchMedia} from "./test-util";
 
 describe("Test utils", () => {
     describe("resizeWindow", () => {

package/src/util/util.js

@@ -1,5 +1,5 @@
 // @flow
-import type {MediaQuery, MediaSize} from "./types.js";
+import type {MediaQuery, MediaSize} from "./types";
 
 /**
  * Return where a media size matches a media query.

package/src/util/util.test.js

@@ -1,5 +1,5 @@
 // @flow
-import {queryMatchesSize} from "./util.js";
+import {queryMatchesSize} from "./util";
 
 describe("queryMatchesSize", () => {
     describe("all", () => {