@plasmicapp/react-web 0.2.395 → 0.2.397

package/dist/all.d.ts

@@ -12876,22 +12876,53 @@ declare const useIsSSR: typeof useIsSSR$1;
 
 declare const Stack: (<T extends keyof JSX.IntrinsicElements = "div">(props: {
     as?: T | undefined;
+    hasGap?: boolean | undefined;
 } & React$1.ComponentProps<T>) => React$1.ReactElement) & {
-    div: React$1.FC<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
-    a: React$1.FC<React$1.DetailedHTMLProps<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>>;
-    button: React$1.FC<React$1.DetailedHTMLProps<React$1.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>;
-    h1: React$1.FC<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>;
-    h2: React$1.FC<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>;
-    h3: React$1.FC<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>;
-    h4: React$1.FC<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>;
-    h5: React$1.FC<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>;
-    h6: React$1.FC<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>;
-    label: React$1.FC<React$1.DetailedHTMLProps<React$1.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>>;
-    form: React$1.FC<React$1.DetailedHTMLProps<React$1.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>>;
-    section: React$1.FC<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLElement>, HTMLElement>>;
-    head: React$1.FC<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLHeadElement>, HTMLHeadElement>>;
-    main: React$1.FC<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLElement>, HTMLElement>>;
-    nav: React$1.FC<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLElement>, HTMLElement>>;
+    div: React$1.FC<React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement> & {
+        hasGap?: boolean | undefined;
+    }>;
+    a: React$1.FC<React$1.ClassAttributes<HTMLAnchorElement> & React$1.AnchorHTMLAttributes<HTMLAnchorElement> & {
+        hasGap?: boolean | undefined;
+    }>;
+    button: React$1.FC<React$1.ClassAttributes<HTMLButtonElement> & React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
+        hasGap?: boolean | undefined;
+    }>;
+    h1: React$1.FC<React$1.ClassAttributes<HTMLHeadingElement> & React$1.HTMLAttributes<HTMLHeadingElement> & {
+        hasGap?: boolean | undefined;
+    }>;
+    h2: React$1.FC<React$1.ClassAttributes<HTMLHeadingElement> & React$1.HTMLAttributes<HTMLHeadingElement> & {
+        hasGap?: boolean | undefined;
+    }>;
+    h3: React$1.FC<React$1.ClassAttributes<HTMLHeadingElement> & React$1.HTMLAttributes<HTMLHeadingElement> & {
+        hasGap?: boolean | undefined;
+    }>;
+    h4: React$1.FC<React$1.ClassAttributes<HTMLHeadingElement> & React$1.HTMLAttributes<HTMLHeadingElement> & {
+        hasGap?: boolean | undefined;
+    }>;
+    h5: React$1.FC<React$1.ClassAttributes<HTMLHeadingElement> & React$1.HTMLAttributes<HTMLHeadingElement> & {
+        hasGap?: boolean | undefined;
+    }>;
+    h6: React$1.FC<React$1.ClassAttributes<HTMLHeadingElement> & React$1.HTMLAttributes<HTMLHeadingElement> & {
+        hasGap?: boolean | undefined;
+    }>;
+    label: React$1.FC<React$1.ClassAttributes<HTMLLabelElement> & React$1.LabelHTMLAttributes<HTMLLabelElement> & {
+        hasGap?: boolean | undefined;
+    }>;
+    form: React$1.FC<React$1.ClassAttributes<HTMLFormElement> & React$1.FormHTMLAttributes<HTMLFormElement> & {
+        hasGap?: boolean | undefined;
+    }>;
+    section: React$1.FC<React$1.ClassAttributes<HTMLElement> & React$1.HTMLAttributes<HTMLElement> & {
+        hasGap?: boolean | undefined;
+    }>;
+    head: React$1.FC<React$1.ClassAttributes<HTMLHeadElement> & React$1.HTMLAttributes<HTMLHeadElement> & {
+        hasGap?: boolean | undefined;
+    }>;
+    main: React$1.FC<React$1.ClassAttributes<HTMLElement> & React$1.HTMLAttributes<HTMLElement> & {
+        hasGap?: boolean | undefined;
+    }>;
+    nav: React$1.FC<React$1.ClassAttributes<HTMLElement> & React$1.HTMLAttributes<HTMLElement> & {
+        hasGap?: boolean | undefined;
+    }>;
 };
 
 declare const usePlasmicTranslator: typeof usePlasmicTranslator$1;

package/dist/index.cjs.js

@@ -656,18 +656,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__namespace.forwardRef(FlexStack_);
 var makeStackImpl = function (as) {
     return React__namespace.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, {
@@ -712,7 +714,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__namespace.createElement.apply(React__namespace, __spreadArray(["div", { className: className }], __read(children), false));
+    }
+    else {
+        return React__namespace.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);
@@ -739,6 +757,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);
@@ -799,13 +821,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 = [];