@khanacademy/wonder-blocks-grid 3.1.8 → 3.1.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/es/index.js +6 -166
  3. package/dist/index.js +6 -166
  4. package/package.json +4 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @khanacademy/wonder-blocks-grid
2
2
 
3
+ ## 3.1.10
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [b9e4946]
8
+ - @khanacademy/wonder-blocks-tokens@10.0.0
9
+ - @khanacademy/wonder-blocks-layout@3.1.10
10
+ - @khanacademy/wonder-blocks-core@12.2.1
11
+
12
+ ## 3.1.9
13
+
14
+ ### Patch Changes
15
+
16
+ - Updated dependencies [2656fd4]
17
+ - Updated dependencies [6018552]
18
+ - Updated dependencies [7bbf311]
19
+ - Updated dependencies [7f79943]
20
+ - @khanacademy/wonder-blocks-tokens@9.0.0
21
+ - @khanacademy/wonder-blocks-layout@3.1.9
22
+
3
23
  ## 3.1.8
4
24
 
5
25
  ### Patch Changes
package/dist/es/index.js CHANGED
@@ -1,177 +1,17 @@
1
+ import { jsx, jsxs } from 'react/jsx-runtime';
1
2
  import * as React from 'react';
2
3
  import { MediaLayout, queryMatchesSize, Strut } from '@khanacademy/wonder-blocks-layout';
3
4
  import { View } from '@khanacademy/wonder-blocks-core';
4
5
  import { StyleSheet } from 'aphrodite';
5
6
 
6
- const WIDE_SCREEN = "@media (min-width: 1168px)";
7
- const styles = StyleSheet.create({
8
- row: {
9
- flexDirection: "row",
10
- alignItems: "center",
11
- width: "100%"
12
- },
13
- rowMaxWidth: {
14
- [WIDE_SCREEN]: {
15
- margin: "0 auto"
16
- }
17
- },
18
- cellGrow: {
19
- flexGrow: 1
20
- },
21
- cellFixed: {
22
- flexShrink: 0
23
- }
24
- });
7
+ const WIDE_SCREEN="@media (min-width: 1168px)";const styles=StyleSheet.create({row:{flexDirection:"row",alignItems:"center",width:"100%"},rowMaxWidth:{[WIDE_SCREEN]:{margin:"0 auto"}},cellGrow:{flexGrow:1},cellFixed:{flexShrink:0}});
25
8
 
26
- const flexBasis = size => {
27
- return {
28
- MsFlexBasis: size,
29
- MsFlexPreferredSize: size,
30
- WebkitFlexBasis: size,
31
- flexBasis: size
32
- };
33
- };
9
+ const flexBasis=size=>{return {MsFlexBasis:size,MsFlexPreferredSize:size,WebkitFlexBasis:size,flexBasis:size}};
34
10
 
35
- class Cell extends React.Component {
36
- static isClassOf(instance) {
37
- return instance && instance.type && instance.type.__IS_CELL__;
38
- }
39
- static getCols(props, mediaSize) {
40
- if (!props.smallCols && !props.mediumCols && !props.largeCols && !props.cols) {
41
- return undefined;
42
- } else if (props.smallCols && mediaSize === "small") {
43
- return props.smallCols;
44
- } else if (props.mediumCols && mediaSize === "medium") {
45
- return props.mediumCols;
46
- } else if (props.largeCols && mediaSize === "large") {
47
- return props.largeCols;
48
- } else if (typeof props.cols === "function") {
49
- return props.cols(mediaSize);
50
- } else if (props.cols) {
51
- return props.cols;
52
- }
53
- return null;
54
- }
55
- static shouldDisplay(props, mediaSize) {
56
- const cols = Cell.getCols(props, mediaSize);
57
- return cols !== null && cols !== 0;
58
- }
59
- render() {
60
- const {
61
- children,
62
- style
63
- } = this.props;
64
- return React.createElement(MediaLayout, null, ({
65
- mediaSize,
66
- mediaSpec
67
- }) => {
68
- const spec = mediaSpec[mediaSize];
69
- if (!spec) {
70
- throw new Error(`mediaSpec.${mediaSize} is undefined`);
71
- }
72
- const {
73
- totalColumns,
74
- gutterWidth,
75
- marginWidth
76
- } = spec;
77
- const cols = Cell.getCols(this.props, mediaSize);
78
- if (cols === undefined || cols === null || cols === 0) {
79
- return null;
80
- }
81
- if (cols > totalColumns) {
82
- throw new Error(`Specified columns ${cols} is greater than the maximum ` + `${totalColumns} at the ${mediaSize} grid size.`);
83
- }
84
- const contentWidth = `(100% - ${gutterWidth * (totalColumns - 1)}px - ${marginWidth * 2}px)`;
85
- const calcWidth = `calc(${contentWidth} * ${cols / totalColumns} + ${gutterWidth * (cols - 1)}px)`;
86
- const contents = typeof children === "function" ? children({
87
- mediaSize,
88
- totalColumns,
89
- cols
90
- }) : children;
91
- return React.createElement(View, {
92
- style: [styles.cellFixed, flexBasis(calcWidth), style]
93
- }, contents);
94
- });
95
- }
96
- }
97
- Cell.defaultProps = {
98
- smallCols: 0,
99
- mediumCols: 0,
100
- largeCols: 0,
101
- cols: 0
102
- };
103
- Cell.__IS_CELL__ = true;
11
+ class Cell extends React.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_CELL__}static getCols(props,mediaSize){if(!props.smallCols&&!props.mediumCols&&!props.largeCols&&!props.cols){return undefined}else if(props.smallCols&&mediaSize==="small"){return props.smallCols}else if(props.mediumCols&&mediaSize==="medium"){return props.mediumCols}else if(props.largeCols&&mediaSize==="large"){return props.largeCols}else if(typeof props.cols==="function"){return props.cols(mediaSize)}else if(props.cols){return props.cols}return null}static shouldDisplay(props,mediaSize){const cols=Cell.getCols(props,mediaSize);return cols!==null&&cols!==0}render(){const{children,style}=this.props;return jsx(MediaLayout,{children:({mediaSize,mediaSpec})=>{const spec=mediaSpec[mediaSize];if(!spec){throw new Error(`mediaSpec.${mediaSize} is undefined`)}const{totalColumns,gutterWidth,marginWidth}=spec;const cols=Cell.getCols(this.props,mediaSize);if(cols===undefined||cols===null||cols===0){return null}if(cols>totalColumns){throw new Error(`Specified columns ${cols} is greater than the maximum `+`${totalColumns} at the ${mediaSize} grid size.`)}const contentWidth=`(100% - ${gutterWidth*(totalColumns-1)}px - ${marginWidth*2}px)`;const calcWidth=`calc(${contentWidth} * ${cols/totalColumns} + ${gutterWidth*(cols-1)}px)`;const contents=typeof children==="function"?children({mediaSize,totalColumns,cols}):children;return jsx(View,{style:[styles.cellFixed,flexBasis(calcWidth),style],children:contents})}})}}Cell.defaultProps={smallCols:0,mediumCols:0,largeCols:0,cols:0};Cell.__IS_CELL__=true;
104
12
 
105
- class Gutter extends React.Component {
106
- render() {
107
- return React.createElement(MediaLayout, null, ({
108
- mediaSize,
109
- mediaSpec
110
- }) => {
111
- const spec = mediaSpec[mediaSize];
112
- if (!spec) {
113
- throw new Error(`mediaSpec.${mediaSize} is undefined`);
114
- }
115
- const {
116
- gutterWidth
117
- } = spec;
118
- if (!queryMatchesSize(this.props.mediaQuery, mediaSize)) {
119
- return null;
120
- }
121
- return React.createElement(Strut, {
122
- size: gutterWidth
123
- });
124
- });
125
- }
126
- }
127
- Gutter.defaultProps = {
128
- mediaQuery: "all"
129
- };
13
+ class Gutter extends React.Component{render(){return jsx(MediaLayout,{children:({mediaSize,mediaSpec})=>{const spec=mediaSpec[mediaSize];if(!spec){throw new Error(`mediaSpec.${mediaSize} is undefined`)}const{gutterWidth}=spec;if(!queryMatchesSize(this.props.mediaQuery,mediaSize)){return null}return jsx(Strut,{size:gutterWidth})}})}}Gutter.defaultProps={mediaQuery:"all"};
130
14
 
131
- class Row extends React.Component {
132
- render() {
133
- const {
134
- style,
135
- children
136
- } = this.props;
137
- return React.createElement(MediaLayout, null, ({
138
- mediaSize,
139
- mediaSpec
140
- }) => {
141
- const spec = mediaSpec[mediaSize];
142
- if (!spec) {
143
- throw new Error(`mediaSpec.${mediaSize} is undefined`);
144
- }
145
- const {
146
- marginWidth,
147
- maxWidth,
148
- totalColumns
149
- } = spec;
150
- const shouldDisplay = queryMatchesSize(this.props.mediaQuery, mediaSize);
151
- if (!shouldDisplay) {
152
- return null;
153
- }
154
- const contents = typeof children === "function" ? children({
155
- mediaSize,
156
- totalColumns
157
- }) : children;
158
- const filteredContents = React.Children.toArray(contents).filter(item => Cell.isClassOf(item) ? Cell.shouldDisplay(item.props, mediaSize) : true).reduce((acc, elem, index) => [...acc, elem, React.createElement(Gutter, {
159
- key: `gutter-${index}`
160
- })], []).slice(0, -1);
161
- return React.createElement(View, {
162
- style: [styles.row, !!maxWidth && styles.rowMaxWidth, !!maxWidth && {
163
- maxWidth
164
- }, style]
165
- }, React.createElement(Strut, {
166
- size: marginWidth
167
- }), filteredContents, React.createElement(Strut, {
168
- size: marginWidth
169
- }));
170
- });
171
- }
172
- }
173
- Row.defaultProps = {
174
- mediaQuery: "all"
175
- };
15
+ class Row extends React.Component{render(){const{style,children}=this.props;return jsx(MediaLayout,{children:({mediaSize,mediaSpec})=>{const spec=mediaSpec[mediaSize];if(!spec){throw new Error(`mediaSpec.${mediaSize} is undefined`)}const{marginWidth,maxWidth,totalColumns}=spec;const shouldDisplay=queryMatchesSize(this.props.mediaQuery,mediaSize);if(!shouldDisplay){return null}const contents=typeof children==="function"?children({mediaSize,totalColumns}):children;const filteredContents=React.Children.toArray(contents).filter(item=>Cell.isClassOf(item)?Cell.shouldDisplay(item.props,mediaSize):true).reduce((acc,elem,index)=>[...acc,elem,jsx(Gutter,{},`gutter-${index}`)],[]).slice(0,-1);return jsxs(View,{style:[styles.row,!!maxWidth&&styles.rowMaxWidth,!!maxWidth&&{maxWidth},style],children:[jsx(Strut,{size:marginWidth}),filteredContents,jsx(Strut,{size:marginWidth})]})}})}}Row.defaultProps={mediaQuery:"all"};
176
16
 
177
17
  export { Cell, Row };
package/dist/index.js CHANGED
@@ -2,6 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ var jsxRuntime = require('react/jsx-runtime');
5
6
  var React = require('react');
6
7
  var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
7
8
  var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
@@ -27,176 +28,15 @@ function _interopNamespace(e) {
27
28
 
28
29
  var React__namespace = /*#__PURE__*/_interopNamespace(React);
29
30
 
30
- const WIDE_SCREEN = "@media (min-width: 1168px)";
31
- const styles = aphrodite.StyleSheet.create({
32
- row: {
33
- flexDirection: "row",
34
- alignItems: "center",
35
- width: "100%"
36
- },
37
- rowMaxWidth: {
38
- [WIDE_SCREEN]: {
39
- margin: "0 auto"
40
- }
41
- },
42
- cellGrow: {
43
- flexGrow: 1
44
- },
45
- cellFixed: {
46
- flexShrink: 0
47
- }
48
- });
31
+ const WIDE_SCREEN="@media (min-width: 1168px)";const styles=aphrodite.StyleSheet.create({row:{flexDirection:"row",alignItems:"center",width:"100%"},rowMaxWidth:{[WIDE_SCREEN]:{margin:"0 auto"}},cellGrow:{flexGrow:1},cellFixed:{flexShrink:0}});
49
32
 
50
- const flexBasis = size => {
51
- return {
52
- MsFlexBasis: size,
53
- MsFlexPreferredSize: size,
54
- WebkitFlexBasis: size,
55
- flexBasis: size
56
- };
57
- };
33
+ const flexBasis=size=>{return {MsFlexBasis:size,MsFlexPreferredSize:size,WebkitFlexBasis:size,flexBasis:size}};
58
34
 
59
- class Cell extends React__namespace.Component {
60
- static isClassOf(instance) {
61
- return instance && instance.type && instance.type.__IS_CELL__;
62
- }
63
- static getCols(props, mediaSize) {
64
- if (!props.smallCols && !props.mediumCols && !props.largeCols && !props.cols) {
65
- return undefined;
66
- } else if (props.smallCols && mediaSize === "small") {
67
- return props.smallCols;
68
- } else if (props.mediumCols && mediaSize === "medium") {
69
- return props.mediumCols;
70
- } else if (props.largeCols && mediaSize === "large") {
71
- return props.largeCols;
72
- } else if (typeof props.cols === "function") {
73
- return props.cols(mediaSize);
74
- } else if (props.cols) {
75
- return props.cols;
76
- }
77
- return null;
78
- }
79
- static shouldDisplay(props, mediaSize) {
80
- const cols = Cell.getCols(props, mediaSize);
81
- return cols !== null && cols !== 0;
82
- }
83
- render() {
84
- const {
85
- children,
86
- style
87
- } = this.props;
88
- return React__namespace.createElement(wonderBlocksLayout.MediaLayout, null, ({
89
- mediaSize,
90
- mediaSpec
91
- }) => {
92
- const spec = mediaSpec[mediaSize];
93
- if (!spec) {
94
- throw new Error(`mediaSpec.${mediaSize} is undefined`);
95
- }
96
- const {
97
- totalColumns,
98
- gutterWidth,
99
- marginWidth
100
- } = spec;
101
- const cols = Cell.getCols(this.props, mediaSize);
102
- if (cols === undefined || cols === null || cols === 0) {
103
- return null;
104
- }
105
- if (cols > totalColumns) {
106
- throw new Error(`Specified columns ${cols} is greater than the maximum ` + `${totalColumns} at the ${mediaSize} grid size.`);
107
- }
108
- const contentWidth = `(100% - ${gutterWidth * (totalColumns - 1)}px - ${marginWidth * 2}px)`;
109
- const calcWidth = `calc(${contentWidth} * ${cols / totalColumns} + ${gutterWidth * (cols - 1)}px)`;
110
- const contents = typeof children === "function" ? children({
111
- mediaSize,
112
- totalColumns,
113
- cols
114
- }) : children;
115
- return React__namespace.createElement(wonderBlocksCore.View, {
116
- style: [styles.cellFixed, flexBasis(calcWidth), style]
117
- }, contents);
118
- });
119
- }
120
- }
121
- Cell.defaultProps = {
122
- smallCols: 0,
123
- mediumCols: 0,
124
- largeCols: 0,
125
- cols: 0
126
- };
127
- Cell.__IS_CELL__ = true;
35
+ class Cell extends React__namespace.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_CELL__}static getCols(props,mediaSize){if(!props.smallCols&&!props.mediumCols&&!props.largeCols&&!props.cols){return undefined}else if(props.smallCols&&mediaSize==="small"){return props.smallCols}else if(props.mediumCols&&mediaSize==="medium"){return props.mediumCols}else if(props.largeCols&&mediaSize==="large"){return props.largeCols}else if(typeof props.cols==="function"){return props.cols(mediaSize)}else if(props.cols){return props.cols}return null}static shouldDisplay(props,mediaSize){const cols=Cell.getCols(props,mediaSize);return cols!==null&&cols!==0}render(){const{children,style}=this.props;return jsxRuntime.jsx(wonderBlocksLayout.MediaLayout,{children:({mediaSize,mediaSpec})=>{const spec=mediaSpec[mediaSize];if(!spec){throw new Error(`mediaSpec.${mediaSize} is undefined`)}const{totalColumns,gutterWidth,marginWidth}=spec;const cols=Cell.getCols(this.props,mediaSize);if(cols===undefined||cols===null||cols===0){return null}if(cols>totalColumns){throw new Error(`Specified columns ${cols} is greater than the maximum `+`${totalColumns} at the ${mediaSize} grid size.`)}const contentWidth=`(100% - ${gutterWidth*(totalColumns-1)}px - ${marginWidth*2}px)`;const calcWidth=`calc(${contentWidth} * ${cols/totalColumns} + ${gutterWidth*(cols-1)}px)`;const contents=typeof children==="function"?children({mediaSize,totalColumns,cols}):children;return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles.cellFixed,flexBasis(calcWidth),style],children:contents})}})}}Cell.defaultProps={smallCols:0,mediumCols:0,largeCols:0,cols:0};Cell.__IS_CELL__=true;
128
36
 
129
- class Gutter extends React__namespace.Component {
130
- render() {
131
- return React__namespace.createElement(wonderBlocksLayout.MediaLayout, null, ({
132
- mediaSize,
133
- mediaSpec
134
- }) => {
135
- const spec = mediaSpec[mediaSize];
136
- if (!spec) {
137
- throw new Error(`mediaSpec.${mediaSize} is undefined`);
138
- }
139
- const {
140
- gutterWidth
141
- } = spec;
142
- if (!wonderBlocksLayout.queryMatchesSize(this.props.mediaQuery, mediaSize)) {
143
- return null;
144
- }
145
- return React__namespace.createElement(wonderBlocksLayout.Strut, {
146
- size: gutterWidth
147
- });
148
- });
149
- }
150
- }
151
- Gutter.defaultProps = {
152
- mediaQuery: "all"
153
- };
37
+ class Gutter extends React__namespace.Component{render(){return jsxRuntime.jsx(wonderBlocksLayout.MediaLayout,{children:({mediaSize,mediaSpec})=>{const spec=mediaSpec[mediaSize];if(!spec){throw new Error(`mediaSpec.${mediaSize} is undefined`)}const{gutterWidth}=spec;if(!wonderBlocksLayout.queryMatchesSize(this.props.mediaQuery,mediaSize)){return null}return jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:gutterWidth})}})}}Gutter.defaultProps={mediaQuery:"all"};
154
38
 
155
- class Row extends React__namespace.Component {
156
- render() {
157
- const {
158
- style,
159
- children
160
- } = this.props;
161
- return React__namespace.createElement(wonderBlocksLayout.MediaLayout, null, ({
162
- mediaSize,
163
- mediaSpec
164
- }) => {
165
- const spec = mediaSpec[mediaSize];
166
- if (!spec) {
167
- throw new Error(`mediaSpec.${mediaSize} is undefined`);
168
- }
169
- const {
170
- marginWidth,
171
- maxWidth,
172
- totalColumns
173
- } = spec;
174
- const shouldDisplay = wonderBlocksLayout.queryMatchesSize(this.props.mediaQuery, mediaSize);
175
- if (!shouldDisplay) {
176
- return null;
177
- }
178
- const contents = typeof children === "function" ? children({
179
- mediaSize,
180
- totalColumns
181
- }) : children;
182
- const filteredContents = React__namespace.Children.toArray(contents).filter(item => Cell.isClassOf(item) ? Cell.shouldDisplay(item.props, mediaSize) : true).reduce((acc, elem, index) => [...acc, elem, React__namespace.createElement(Gutter, {
183
- key: `gutter-${index}`
184
- })], []).slice(0, -1);
185
- return React__namespace.createElement(wonderBlocksCore.View, {
186
- style: [styles.row, !!maxWidth && styles.rowMaxWidth, !!maxWidth && {
187
- maxWidth
188
- }, style]
189
- }, React__namespace.createElement(wonderBlocksLayout.Strut, {
190
- size: marginWidth
191
- }), filteredContents, React__namespace.createElement(wonderBlocksLayout.Strut, {
192
- size: marginWidth
193
- }));
194
- });
195
- }
196
- }
197
- Row.defaultProps = {
198
- mediaQuery: "all"
199
- };
39
+ class Row extends React__namespace.Component{render(){const{style,children}=this.props;return jsxRuntime.jsx(wonderBlocksLayout.MediaLayout,{children:({mediaSize,mediaSpec})=>{const spec=mediaSpec[mediaSize];if(!spec){throw new Error(`mediaSpec.${mediaSize} is undefined`)}const{marginWidth,maxWidth,totalColumns}=spec;const shouldDisplay=wonderBlocksLayout.queryMatchesSize(this.props.mediaQuery,mediaSize);if(!shouldDisplay){return null}const contents=typeof children==="function"?children({mediaSize,totalColumns}):children;const filteredContents=React__namespace.Children.toArray(contents).filter(item=>Cell.isClassOf(item)?Cell.shouldDisplay(item.props,mediaSize):true).reduce((acc,elem,index)=>[...acc,elem,jsxRuntime.jsx(Gutter,{},`gutter-${index}`)],[]).slice(0,-1);return jsxRuntime.jsxs(wonderBlocksCore.View,{style:[styles.row,!!maxWidth&&styles.rowMaxWidth,!!maxWidth&&{maxWidth},style],children:[jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:marginWidth}),filteredContents,jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:marginWidth})]})}})}}Row.defaultProps={mediaQuery:"all"};
200
40
 
201
41
  exports.Cell = Cell;
202
42
  exports.Row = Row;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-grid",
3
- "version": "3.1.8",
3
+ "version": "3.1.10",
4
4
  "design": "v1",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -12,17 +12,16 @@
12
12
  "author": "",
13
13
  "license": "MIT",
14
14
  "dependencies": {
15
- "@babel/runtime": "^7.24.5",
16
15
  "@khanacademy/wonder-blocks-core": "12.2.1",
17
- "@khanacademy/wonder-blocks-layout": "3.1.8",
18
- "@khanacademy/wonder-blocks-tokens": "8.0.0"
16
+ "@khanacademy/wonder-blocks-layout": "3.1.10",
17
+ "@khanacademy/wonder-blocks-tokens": "10.0.0"
19
18
  },
20
19
  "peerDependencies": {
21
20
  "aphrodite": "^1.2.5",
22
21
  "react": "18.2.0"
23
22
  },
24
23
  "devDependencies": {
25
- "@khanacademy/wb-dev-build-settings": "2.1.1"
24
+ "@khanacademy/wb-dev-build-settings": "3.0.0"
26
25
  },
27
26
  "scripts": {
28
27
  "test": "echo \"Error: no test specified\" && exit 1"