@plasmicapp/react-web 0.2.395 → 0.2.397

package/dist/render/Stack.d.ts

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

package/dist/render/elements.d.ts

@@ -42,6 +42,9 @@ export type Flex<DefaultElementType extends React.ElementType> = (Omit<DefaultOv
     render?: never;
 }) | ((props: React.ComponentProps<DefaultElementType>) => React.ReactNode);
 export declare function hasVariant<V extends Variants>(variants: V | undefined, groupName: keyof V, variant: string): any;
+export declare function wrapFlexContainerChildren(children: React.ReactNode, hasGap: boolean): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement> | null;
 export declare function createPlasmicElementProxy<DefaultElementType extends React.ElementType>(defaultElement: DefaultElementType, props: Partial<React.ComponentProps<DefaultElementType>>, ...children: React.ReactNode[]): React.ReactNode;
 export declare function makeFragment(...children: React.ReactNode[]): React.FunctionComponentElement<{
     children?: React.ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmicapp/react-web",
-  "version": "0.2.395",
+  "version": "0.2.397",
   "description": "plasmic library for rendering in the presentational style",
   "main": "dist/index.cjs.js",
   "types": "dist/index.d.ts",
@@ -95,14 +95,14 @@
     "test-storybook": "test-storybook"
   },
   "dependencies": {
-    "@plasmicapp/auth-react": "0.0.22",
-    "@plasmicapp/data-sources": "0.1.187",
-    "@plasmicapp/data-sources-context": "0.1.21",
-    "@plasmicapp/host": "1.0.223",
+    "@plasmicapp/auth-react": "0.0.23",
+    "@plasmicapp/data-sources": "0.1.188",
+    "@plasmicapp/data-sources-context": "0.1.22",
+    "@plasmicapp/host": "1.0.224",
     "@plasmicapp/loader-splits": "1.0.64",
-    "@plasmicapp/nextjs-app-router": "1.0.16",
-    "@plasmicapp/prepass": "1.0.19",
-    "@plasmicapp/query": "0.1.79",
+    "@plasmicapp/nextjs-app-router": "1.0.17",
+    "@plasmicapp/prepass": "1.0.20",
+    "@plasmicapp/query": "0.1.80",
     "@react-aria/checkbox": "^3.15.5",
     "@react-aria/focus": "^3.20.3",
     "@react-aria/interactions": "^3.25.1",
@@ -155,5 +155,5 @@
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
-  "gitHead": "ad56671cda3d4734f5ac2f56c805c07b06088935"
+  "gitHead": "abfd8b249d026a1ac8eeaeba5a83a3043e5e82b3"
 }

package/skinny/dist/index.js

@@ -146,18 +146,20 @@ function withPlasmicPageGuard(WrappedComponent, options) {
     return PageGuard;
 }
 
-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, {
@@ -202,7 +204,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);
@@ -229,6 +247,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);
@@ -289,13 +311,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 = [];