@builder.io/sdk-react 0.1.14 → 0.1.15

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 (5) hide show
  1. package/dist/react/blocks/columns/columns.js +10 -10
  2. package/dist/rsc/blocks/columns/columns.js +10 -10
  3. package/package.json +1 -1
  4. package/packages/react/src/blocks/columns/columns.jsx +10 -10
  5. package/packages/rsc/src/blocks/columns/columns.jsx +10 -10
package/dist/react/blocks/columns/columns.js CHANGED
@@ -42,26 +42,26 @@ function Columns(props) {
42
42
  };
43
43
  }
44
44
  function columnCssVars(index) {
45
- const width = getColumnCssWidth(index);
46
- const gutter = `${index === 0 ? 0 : gutterSize}px`;
45
+ const gutter = index === 0 ? 0 : gutterSize;
47
46
  if (TARGET === "reactNative") {
48
47
  return {
49
- width,
50
48
  marginLeft: props.stackColumnsAt === "never" ? gutter : 0,
51
49
  };
52
50
  }
51
+ const width = getColumnCssWidth(index);
52
+ const gutterPixels = `${gutterSize}px`;
53
53
  const mobileWidth = "100%";
54
54
  const mobileMarginLeft = 0;
55
55
  return {
56
56
  width,
57
- "margin-left": gutter,
57
+ "margin-left": gutterPixels,
58
58
  "--column-width-mobile": getMobileStyle({
59
59
  stackedStyle: mobileWidth,
60
60
  desktopStyle: width,
61
61
  }),
62
62
  "--column-margin-left-mobile": getMobileStyle({
63
63
  stackedStyle: mobileMarginLeft,
64
- desktopStyle: gutter,
64
+ desktopStyle: gutterPixels,
65
65
  }),
66
66
  "--column-width-tablet": getTabletStyle({
67
67
  stackedStyle: mobileWidth,
@@ -69,7 +69,7 @@ function Columns(props) {
69
69
  }),
70
70
  "--column-margin-left-tablet": getTabletStyle({
71
71
  stackedStyle: mobileMarginLeft,
72
- desktopStyle: gutter,
72
+ desktopStyle: gutterPixels,
73
73
  }),
74
74
  };
75
75
  }
@@ -107,21 +107,21 @@ function Columns(props) {
107
107
  const builderContext = useContext(BuilderContext);
108
108
  return (React.createElement(React.Fragment, null,
109
109
  React.createElement("div", { className: `builder-columns ${props.builderBlock.id}-breakpoints` +
110
- " div-5d506a94", style: columnsCssVars(), dataSet: {
110
+ " div-5d70b7a2", style: columnsCssVars(), dataSet: {
111
111
  "builder-block-name": "builder-columns",
112
112
  } },
113
113
  TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
114
114
  React.createElement(RenderInlinedStyles, { styles: columnsStyles() }))) : null,
115
- props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-5d506a94-2", style: columnCssVars(index), dataSet: {
115
+ props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-5d70b7a2-2", style: columnCssVars(index), dataSet: {
116
116
  "builder-block-name": "builder-column",
117
117
  }, key: index },
118
118
  React.createElement(RenderBlocks, { blocks: column.blocks, path: `component.options.columns.${index}.blocks`, parent: props.builderBlock.id, styleProp: {
119
119
  flexGrow: "1",
120
120
  } }))))),
121
- React.createElement("style", null, `.div-5d506a94 {
121
+ React.createElement("style", null, `.div-5d70b7a2 {
122
122
  display: flex;
123
123
  line-height: normal;
124
- }.div-5d506a94-2 {
124
+ }.div-5d70b7a2-2 {
125
125
  display: flex;
126
126
  flex-direction: column;
127
127
  align-items: stretch;
package/dist/rsc/blocks/columns/columns.js CHANGED
@@ -43,26 +43,26 @@ function Columns(props) {
43
43
  };
44
44
  },
45
45
  columnCssVars(index) {
46
- const width = state.getColumnCssWidth(index);
47
- const gutter = `${index === 0 ? 0 : state.gutterSize}px`;
46
+ const gutter = index === 0 ? 0 : state.gutterSize;
48
47
  if (TARGET === "reactNative") {
49
48
  return {
50
- width,
51
49
  marginLeft: props.stackColumnsAt === "never" ? gutter : 0,
52
50
  };
53
51
  }
52
+ const width = state.getColumnCssWidth(index);
53
+ const gutterPixels = `${state.gutterSize}px`;
54
54
  const mobileWidth = "100%";
55
55
  const mobileMarginLeft = 0;
56
56
  return {
57
57
  width,
58
- "margin-left": gutter,
58
+ "margin-left": gutterPixels,
59
59
  "--column-width-mobile": state.getMobileStyle({
60
60
  stackedStyle: mobileWidth,
61
61
  desktopStyle: width,
62
62
  }),
63
63
  "--column-margin-left-mobile": state.getMobileStyle({
64
64
  stackedStyle: mobileMarginLeft,
65
- desktopStyle: gutter,
65
+ desktopStyle: gutterPixels,
66
66
  }),
67
67
  "--column-width-tablet": state.getTabletStyle({
68
68
  stackedStyle: mobileWidth,
@@ -70,7 +70,7 @@ function Columns(props) {
70
70
  }),
71
71
  "--column-margin-left-tablet": state.getTabletStyle({
72
72
  stackedStyle: mobileMarginLeft,
73
- desktopStyle: gutter,
73
+ desktopStyle: gutterPixels,
74
74
  }),
75
75
  };
76
76
  },
@@ -109,21 +109,21 @@ function Columns(props) {
109
109
  const builderContext = _context["BuilderContext"];
110
110
  return (React.createElement(React.Fragment, null,
111
111
  React.createElement("div", { className: `builder-columns ${props.builderBlock.id}-breakpoints` +
112
- " div-34a79a14", style: state.columnsCssVars, dataSet: {
112
+ " div-6ea80494", style: state.columnsCssVars, dataSet: {
113
113
  "builder-block-name": "builder-columns",
114
114
  } },
115
115
  TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
116
116
  React.createElement(RenderInlinedStyles, { styles: state.columnsStyles, _context: _context }))) : null,
117
- props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-34a79a14-2", style: state.columnCssVars(index), dataSet: {
117
+ props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-6ea80494-2", style: state.columnCssVars(index), dataSet: {
118
118
  "builder-block-name": "builder-column",
119
119
  }, key: index },
120
120
  React.createElement(RenderBlocks, { blocks: column.blocks, path: `component.options.columns.${index}.blocks`, parent: props.builderBlock.id, styleProp: {
121
121
  flexGrow: "1",
122
122
  }, _context: _context }))))),
123
- React.createElement("style", null, `.div-34a79a14 {
123
+ React.createElement("style", null, `.div-6ea80494 {
124
124
  display: flex;
125
125
  line-height: normal;
126
- }.div-34a79a14-2 {
126
+ }.div-6ea80494-2 {
127
127
  display: flex;
128
128
  flex-direction: column;
129
129
  align-items: stretch;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@builder.io/sdk-react",
3
3
  "description": "Builder.io SDK for React",
4
- "version": "0.1.14",
4
+ "version": "0.1.15",
5
5
  "main": "src/index.js",
6
6
  "type": "module",
7
7
  "exports": {
package/packages/react/src/blocks/columns/columns.jsx CHANGED
@@ -58,26 +58,26 @@ function Columns(props) {
58
58
  }
59
59
 
60
60
  function columnCssVars(index) {
61
- const width = getColumnCssWidth(index);
62
- const gutter = `${index === 0 ? 0 : gutterSize}px`;
61
+ const gutter = index === 0 ? 0 : gutterSize;
63
62
  if (TARGET === "reactNative") {
64
63
  return {
65
- width,
66
64
  marginLeft: props.stackColumnsAt === "never" ? gutter : 0,
67
65
  };
68
66
  }
67
+ const width = getColumnCssWidth(index);
68
+ const gutterPixels = `${gutterSize}px`;
69
69
  const mobileWidth = "100%";
70
70
  const mobileMarginLeft = 0;
71
71
  return {
72
72
  width,
73
- "margin-left": gutter,
73
+ "margin-left": gutterPixels,
74
74
  "--column-width-mobile": getMobileStyle({
75
75
  stackedStyle: mobileWidth,
76
76
  desktopStyle: width,
77
77
  }),
78
78
  "--column-margin-left-mobile": getMobileStyle({
79
79
  stackedStyle: mobileMarginLeft,
80
- desktopStyle: gutter,
80
+ desktopStyle: gutterPixels,
81
81
  }),
82
82
  "--column-width-tablet": getTabletStyle({
83
83
  stackedStyle: mobileWidth,
@@ -85,7 +85,7 @@ function Columns(props) {
85
85
  }),
86
86
  "--column-margin-left-tablet": getTabletStyle({
87
87
  stackedStyle: mobileMarginLeft,
88
- desktopStyle: gutter,
88
+ desktopStyle: gutterPixels,
89
89
  }),
90
90
  };
91
91
  }
@@ -132,7 +132,7 @@ function Columns(props) {
132
132
  <div
133
133
  className={
134
134
  `builder-columns ${props.builderBlock.id}-breakpoints` +
135
- " div-5d506a94"
135
+ " div-5d70b7a2"
136
136
  }
137
137
  style={columnsCssVars()}
138
138
  dataSet={{
@@ -147,7 +147,7 @@ function Columns(props) {
147
147
 
148
148
  {props.columns?.map((column, index) => (
149
149
  <div
150
- className="builder-column div-5d506a94-2"
150
+ className="builder-column div-5d70b7a2-2"
151
151
  style={columnCssVars(index)}
152
152
  dataSet={{
153
153
  "builder-block-name": "builder-column",
@@ -165,10 +165,10 @@ function Columns(props) {
165
165
  </div>
166
166
  ))}
167
167
  </div>
168
- <style>{`.div-5d506a94 {
168
+ <style>{`.div-5d70b7a2 {
169
169
  display: flex;
170
170
  line-height: normal;
171
- }.div-5d506a94-2 {
171
+ }.div-5d70b7a2-2 {
172
172
  display: flex;
173
173
  flex-direction: column;
174
174
  align-items: stretch;
package/packages/rsc/src/blocks/columns/columns.jsx CHANGED
@@ -47,26 +47,26 @@ function Columns(props) {
47
47
  };
48
48
  },
49
49
  columnCssVars(index) {
50
- const width = state.getColumnCssWidth(index);
51
- const gutter = `${index === 0 ? 0 : state.gutterSize}px`;
50
+ const gutter = index === 0 ? 0 : state.gutterSize;
52
51
  if (TARGET === "reactNative") {
53
52
  return {
54
- width,
55
53
  marginLeft: props.stackColumnsAt === "never" ? gutter : 0,
56
54
  };
57
55
  }
56
+ const width = state.getColumnCssWidth(index);
57
+ const gutterPixels = `${state.gutterSize}px`;
58
58
  const mobileWidth = "100%";
59
59
  const mobileMarginLeft = 0;
60
60
  return {
61
61
  width,
62
- "margin-left": gutter,
62
+ "margin-left": gutterPixels,
63
63
  "--column-width-mobile": state.getMobileStyle({
64
64
  stackedStyle: mobileWidth,
65
65
  desktopStyle: width,
66
66
  }),
67
67
  "--column-margin-left-mobile": state.getMobileStyle({
68
68
  stackedStyle: mobileMarginLeft,
69
- desktopStyle: gutter,
69
+ desktopStyle: gutterPixels,
70
70
  }),
71
71
  "--column-width-tablet": state.getTabletStyle({
72
72
  stackedStyle: mobileWidth,
@@ -74,7 +74,7 @@ function Columns(props) {
74
74
  }),
75
75
  "--column-margin-left-tablet": state.getTabletStyle({
76
76
  stackedStyle: mobileMarginLeft,
77
- desktopStyle: gutter,
77
+ desktopStyle: gutterPixels,
78
78
  }),
79
79
  };
80
80
  },
@@ -120,7 +120,7 @@ function Columns(props) {
120
120
  <div
121
121
  className={
122
122
  `builder-columns ${props.builderBlock.id}-breakpoints` +
123
- " div-34a79a14"
123
+ " div-6ea80494"
124
124
  }
125
125
  style={state.columnsCssVars}
126
126
  dataSet={{
@@ -138,7 +138,7 @@ function Columns(props) {
138
138
 
139
139
  {props.columns?.map((column, index) => (
140
140
  <div
141
- className="builder-column div-34a79a14-2"
141
+ className="builder-column div-6ea80494-2"
142
142
  style={state.columnCssVars(index)}
143
143
  dataSet={{
144
144
  "builder-block-name": "builder-column",
@@ -157,10 +157,10 @@ function Columns(props) {
157
157
  </div>
158
158
  ))}
159
159
  </div>
160
- <style>{`.div-34a79a14 {
160
+ <style>{`.div-6ea80494 {
161
161
  display: flex;
162
162
  line-height: normal;
163
- }.div-34a79a14-2 {
163
+ }.div-6ea80494-2 {
164
164
  display: flex;
165
165
  flex-direction: column;
166
166
  align-items: stretch;