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

Comparing version 0.0.0-PR2231-20240520192816 to 0.0.0-PR2242-20240610182012

CHANGELOG.md

 # @khanacademy/wonder-blocks-layout
 
-## 0.0.0-PR2231-20240520192816
+## 0.0.0-PR2242-20240610182012
 
+### Major Changes
+
+-   1f82251b: Migrate Strut to PandaCss
+
+### Minor Changes
+
+-   47a758b6: Fix hydration issue in MediaLayout component
+
 ### Patch Changes
 
--   Updated dependencies [e384dff4]
-    -   @khanacademy/wonder-blocks-core@0.0.0-PR2231-20240520192816
+-   Updated dependencies [48a65fb3]
+    -   @khanacademy/wonder-blocks-core@0.0.0-PR2242-20240610182012
 
+## 2.0.33
+
+### Patch Changes
+
+-   Updated dependencies [5dfac06e]
+    -   @khanacademy/wonder-blocks-core@6.4.1
+
 ## 2.0.32
@@ -11,0 +26,0 @@

dist/components/media-layout.d.ts

@@ -0,1 +1,3 @@
+/// <reference path="../../../wonder-blocks-core/types/aphrodite.d.ts" />
+/// <reference path="../../types/aphrodite.d.ts" />
 import * as React from "react";
@@ -2,0 +4,0 @@ import type { StyleDeclaration } from "aphrodite";

dist/es/index.js

 import * as React from 'react';
-import { Server, View } from '@khanacademy/wonder-blocks-core';
+import { WithSSRPlaceholder, View } from '@khanacademy/wonder-blocks-core';
 import { spacing } from '@khanacademy/wonder-blocks-tokens';
 import { StyleSheet } from 'aphrodite';
+import { css, cx } from '@/styled-system/css';
 
@@ -120,4 +121,4 @@ function _extends() {
   }
-  isServerSide() {
-    return Server.isServerSide() || typeof window === "undefined" || !window.matchMedia;
+  isUnsupportedEnvironment() {
+    return typeof window === "undefined" || !window.matchMedia;
   }
@@ -146,3 +147,3 @@ getMockStyleSheet(mediaSize) {
   }
-  render() {
+  renderContent(initialRender) {
     const {
@@ -155,3 +156,3 @@ children,
     const queries = [...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), ...Object.values(mediaSpec).map(spec => spec.query)];
-    if (!this.isServerSide()) {
+    if (!initialRender) {
       for (const query of queries.filter(query => !mediaQueryLists[query])) {
@@ -161,3 +162,3 @@ mediaQueryLists[query] = window.matchMedia(query);
     }
-    const mediaSize = overrideSize || this.isServerSide() && ssrSize || this.getCurrentSize(mediaSpec);
+    const mediaSize = overrideSize || initialRender && ssrSize || this.getCurrentSize(mediaSpec);
     const styles = this.getMockStyleSheet(mediaSize);
@@ -170,2 +171,7 @@ return children({
   }
+  render() {
+    return React.createElement(WithSSRPlaceholder, {
+      placeholder: () => this.renderContent(true)
+    }, () => this.renderContent(this.isUnsupportedEnvironment()));
+  }
 }
@@ -209,18 +215,31 @@ class MediaLayout extends React.Component {
     } = this.props;
-    return React.createElement(View, {
+    const rawStyle = Array.isArray(style) ? css(...style) : typeof style === "object" ? css(style) : undefined;
+    return React.createElement("div", {
       "aria-hidden": "true",
-      style: [strutStyle(size), style]
+      className: cx(viewStyle, strutStyle, rawStyle),
+      style: {
+        "--strut-size": size + "px"
+      }
     });
   }
 }
-const strutStyle = size => {
-  return {
-    width: size,
-    MsFlexBasis: size,
-    MsFlexPreferredSize: size,
-    WebkitFlexBasis: size,
-    flexBasis: size,
-    flexShrink: 0
-  };
-};
+const viewStyle = css({
+  alignItems: "stretch",
+  borderWidth: 0,
+  borderStyle: "solid",
+  boxSizing: "border-box",
+  display: "flex",
+  flexDirection: "column",
+  margin: 0,
+  padding: 0,
+  position: "relative",
+  zIndex: 0,
+  minHeight: 0,
+  minWidth: 0
+});
+const strutStyle = css({
+  width: "var(--strut-size)",
+  flexBasis: "var(--strut-size)",
+  flexShrink: 0
+});
 
@@ -227,0 +246,0 @@ const queryMatchesSize = (mediaQuery, mediaSize) => {

dist/index.js

@@ -9,2 +9,3 @@ 'use strict';
 var aphrodite = require('aphrodite');
+var css = require('@/styled-system/css');
 
@@ -145,4 +146,4 @@ function _interopNamespace(e) {
   }
-  isServerSide() {
-    return wonderBlocksCore.Server.isServerSide() || typeof window === "undefined" || !window.matchMedia;
+  isUnsupportedEnvironment() {
+    return typeof window === "undefined" || !window.matchMedia;
   }
@@ -171,3 +172,3 @@ getMockStyleSheet(mediaSize) {
   }
-  render() {
+  renderContent(initialRender) {
     const {
@@ -180,3 +181,3 @@ children,
     const queries = [...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), ...Object.values(mediaSpec).map(spec => spec.query)];
-    if (!this.isServerSide()) {
+    if (!initialRender) {
       for (const query of queries.filter(query => !mediaQueryLists[query])) {
@@ -186,3 +187,3 @@ mediaQueryLists[query] = window.matchMedia(query);
     }
-    const mediaSize = overrideSize || this.isServerSide() && ssrSize || this.getCurrentSize(mediaSpec);
+    const mediaSize = overrideSize || initialRender && ssrSize || this.getCurrentSize(mediaSpec);
     const styles = this.getMockStyleSheet(mediaSize);
@@ -195,2 +196,7 @@ return children({
   }
+  render() {
+    return React__namespace.createElement(wonderBlocksCore.WithSSRPlaceholder, {
+      placeholder: () => this.renderContent(true)
+    }, () => this.renderContent(this.isUnsupportedEnvironment()));
+  }
 }
@@ -234,18 +240,31 @@ class MediaLayout extends React__namespace.Component {
     } = this.props;
-    return React__namespace.createElement(wonderBlocksCore.View, {
+    const rawStyle = Array.isArray(style) ? css.css(...style) : typeof style === "object" ? css.css(style) : undefined;
+    return React__namespace.createElement("div", {
       "aria-hidden": "true",
-      style: [strutStyle(size), style]
+      className: css.cx(viewStyle, strutStyle, rawStyle),
+      style: {
+        "--strut-size": size + "px"
+      }
     });
   }
 }
-const strutStyle = size => {
-  return {
-    width: size,
-    MsFlexBasis: size,
-    MsFlexPreferredSize: size,
-    WebkitFlexBasis: size,
-    flexBasis: size,
-    flexShrink: 0
-  };
-};
+const viewStyle = css.css({
+  alignItems: "stretch",
+  borderWidth: 0,
+  borderStyle: "solid",
+  boxSizing: "border-box",
+  display: "flex",
+  flexDirection: "column",
+  margin: 0,
+  padding: 0,
+  position: "relative",
+  zIndex: 0,
+  minHeight: 0,
+  minWidth: 0
+});
+const strutStyle = css.css({
+  width: "var(--strut-size)",
+  flexBasis: "var(--strut-size)",
+  flexShrink: 0
+});
 
@@ -252,0 +271,0 @@ const queryMatchesSize = (mediaQuery, mediaSize) => {

package.json

 {
   "name": "@khanacademy/wonder-blocks-layout",
-  "version": "0.0.0-PR2231-20240520192816",
+  "version": "0.0.0-PR2242-20240610182012",
   "design": "v1",
@@ -17,3 +17,3 @@ "publishConfig": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-core": "0.0.0-PR2231-20240520192816",
+    "@khanacademy/wonder-blocks-core": "0.0.0-PR2242-20240610182012",
     "@khanacademy/wonder-blocks-tokens": "^1.3.0"
@@ -20,0 +20,0 @@ },

New alerts

License Policy Violation

License

This 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

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

155113

increased by9.22%

Lines of code

2247

increased by3.22%

Dependency changes

• + Added@khanacademy/wonder-blocks-core@0.0.0-PR2242-20240610182012(transitive)

• - Removed@khanacademy/wonder-blocks-core@0.0.0-PR2231-20240520192816(transitive)

• Updated@khanacademy/wonder-blocks-core@0.0.0-PR2242-20240610182012