@plasmicapp/react-web 0.2.395 → 0.2.396

package/dist/react-web.esm.js

@@ -637,18 +637,20 @@ function getElementTypeName(element) {
     }
 }
 
-function renderStack(as, props, ref) {
+function renderStack(as, props, hasGap, ref) {
     var children = props.children, rest = __rest(props, ["children"]);
-    return createElementWithChildren(as, __assign({ ref: ref }, rest), children);
+    var wrappedChildren = wrapFlexContainerChildren(children, hasGap !== null && hasGap !== void 0 ? hasGap : false);
+    return createElementWithChildren(as, __assign({ ref: ref }, rest), wrappedChildren);
 }
 function FlexStack_(props, outerRef) {
-    var as = props.as, rest = __rest(props, ["as"]);
-    return renderStack(as !== null && as !== void 0 ? as : "div", rest, outerRef);
+    var as = props.as, hasGap = props.hasGap, rest = __rest(props, ["as", "hasGap"]);
+    return renderStack(as !== null && as !== void 0 ? as : "div", rest, hasGap, outerRef);
 }
 var FlexStack = React.forwardRef(FlexStack_);
 var makeStackImpl = function (as) {
     return React.forwardRef(function (props, ref) {
-        return renderStack(as, props, ref);
+        var hasGap = props.hasGap, rest = __rest(props, ["hasGap"]);
+        return renderStack(as, rest, hasGap, ref);
     });
 };
 var Stack = Object.assign(FlexStack, {
@@ -693,7 +695,23 @@ function hasVariant(variants, groupName, variant) {
         return (groupVariants[variant] !== undefined && groupVariants[variant] !== false);
     }
 }
-function createPlasmicElement(override, defaultRoot, defaultProps) {
+function wrapFlexContainerChildren(children, hasGap) {
+    // We need to always wrap the children, even if there are no gaps, because
+    // otherwise if we toggle between with and without gap, React reconciliation
+    // will blow away the children tree and all state if we switch from having
+    // a wrapper and not.
+    var className = hasGap ? "__wab_flex-container ρfc" : "__wab_passthrough";
+    if (!children) {
+        return null;
+    }
+    else if (Array.isArray(children)) {
+        return React.createElement.apply(React, __spreadArray(["div", { className: className }], __read(children), false));
+    }
+    else {
+        return React.createElement("div", { className: className }, children);
+    }
+}
+function createPlasmicElement(override, defaultRoot, defaultProps, wrapChildrenInFlex) {
     if (!override ||
         (typeof override === "object" && Object.keys(override).length === 0)) {
         return createElementWithChildren(defaultRoot, defaultProps, defaultProps.children);
@@ -720,6 +738,10 @@ function createPlasmicElement(override, defaultRoot, defaultProps) {
     if (override2.wrapChildren) {
         children = override2.wrapChildren(ensureNotArray(children));
     }
+    if (wrapChildrenInFlex) {
+        // For legacy, we still support data-plasmic-wrap-flex-children
+        children = wrapFlexContainerChildren(children, true);
+    }
     var result = createElementWithChildren(root, props, children);
     if (override2.wrap) {
         result = override2.wrap(result);
@@ -780,13 +802,15 @@ function createPlasmicElementFromJsx(defaultElement, props) {
         children[_i - 2] = arguments[_i];
     }
     var override = props["data-plasmic-override"];
+    var wrapFlexChild = props["data-plasmic-wrap-flex-child"];
     var triggerProps = ((_a = props["data-plasmic-trigger-props"]) !== null && _a !== void 0 ? _a : []);
     delete props["data-plasmic-override"];
+    delete props["data-plasmic-wrap-flex-child"];
     delete props["data-plasmic-trigger-props"];
     return createPlasmicElement(override, defaultElement, mergeProps.apply(void 0, __spreadArray([props,
         children.length === 0
             ? {}
-            : { children: children.length === 1 ? children[0] : children }], __read(triggerProps), false)));
+            : { children: children.length === 1 ? children[0] : children }], __read(triggerProps), false)), wrapFlexChild);
 }
 function makeFragment() {
     var children = [];