@plasmicpkgs/plasmic-rich-components 1.0.94 → 1.0.95

package/dist/common.d.ts

@@ -1,3 +1,5 @@
+import React from "react";
 export declare function useIsClient(): boolean;
+export declare const useIsomorphicLayoutEffect: typeof React.useLayoutEffect;
 export declare function capitalize(text: string): string;
 export declare function isLight(color: string): boolean;

package/dist/index.js

@@ -8,6 +8,7 @@ var antd = require('antd');
 var tinycolor = require('@ctrl/tinycolor');
 var icons = require('@ant-design/icons');
 var proComponents = require('@ant-design/pro-components');
+var host = require('@plasmicapp/host');
 var csvWriterBrowser = require('csv-writer-browser');
 var fastStringify = require('fast-stringify');
 var classNames = require('classnames');
@@ -1031,12 +1032,16 @@ function registerRichDetails(loader) {
 }
 
 function useIsClient() {
-    var _a = React.useState(false), loaded = _a[0], setLoaded = _a[1];
-    React.useEffect(function () {
+    var _a = React__default.default.useState(false), loaded = _a[0], setLoaded = _a[1];
+    useIsomorphicLayoutEffect(function () {
         setLoaded(true);
     });
     return loaded;
 }
+var isBrowser = typeof window !== "undefined";
+var useIsomorphicLayoutEffect = isBrowser
+    ? React__default.default.useLayoutEffect
+    : React__default.default.useEffect;
 function capitalize(text) {
     return text.slice(0, 1).toUpperCase() + text.slice(1);
 }
@@ -1045,6 +1050,10 @@ function isLight(color) {
     return r * 0.299 + g * 0.587 + b * 0.114 > 186;
 }
 
+var AnchorLink = React__default.default.forwardRef(function AnchorLink(props, ref) {
+    return React__default.default.createElement("a", __assign({}, props, { ref: ref }));
+});
+
 function omitUndefined(x) {
     return Object.fromEntries(Object.entries(x).filter(function (_a) {
         _a[0]; var v = _a[1];
@@ -1061,15 +1070,17 @@ function filterNavMenuItemsByConditions(navMenuItems) {
 // width: 100% needed because parent is display: flex, which is needed for the min-height behavior.
 var baseStyles = "\n.ant-pro-layout-bg-list {\n  display: none;\n}\n.ant-pro-layout {\n  display: flex;\n  width: 100%;\n}\n.ant-pro-layout .ant-pro-layout-content {\n  padding: 0;\n}\n";
 function RichLayout(_a) {
-    var _b, _c, _d;
-    var children = _a.children, navMenuItems = _a.navMenuItems, _e = _a.rootUrl, rootUrl = _e === void 0 ? "/" : _e, actionsChildren = _a.actionsChildren, footerChildren = _a.footerChildren, avatarLabel = _a.avatarLabel, avatarImage = _a.avatarImage, showAvatarMenu = _a.showAvatarMenu, className = _a.className, simpleNavTheme = _a.simpleNavTheme, layoutProps = __rest(_a, ["children", "navMenuItems", "rootUrl", "actionsChildren", "footerChildren", "avatarLabel", "avatarImage", "showAvatarMenu", "className", "simpleNavTheme"]);
+    var _b, _c, _d, _e;
+    var children = _a.children, navMenuItems = _a.navMenuItems, _f = _a.rootUrl, rootUrl = _f === void 0 ? "/" : _f, actionsChildren = _a.actionsChildren, footerChildren = _a.footerChildren, avatarLabel = _a.avatarLabel, avatarImage = _a.avatarImage, showAvatarMenu = _a.showAvatarMenu, className = _a.className, simpleNavTheme = _a.simpleNavTheme, logo = _a.logo, logoElement = _a.logoElement, layoutProps = __rest(_a, ["children", "navMenuItems", "rootUrl", "actionsChildren", "footerChildren", "avatarLabel", "avatarImage", "showAvatarMenu", "className", "simpleNavTheme", "logo", "logoElement"]);
     var isClient = useIsClient();
-    var _f = React.useState(undefined), pathname = _f[0], setPathname = _f[1];
+    var _g = React.useState(undefined), pathname = _g[0], setPathname = _g[1];
     React.useEffect(function () {
         if (typeof location !== "undefined") {
             setPathname(location.pathname);
         }
     }, []);
+    // The usePlasmicLink function may be undefined, if host is not up to date
+    var Link = (_b = host.usePlasmicLink === null || host.usePlasmicLink === void 0 ? void 0 : host.usePlasmicLink()) !== null && _b !== void 0 ? _b : AnchorLink;
     var token = antd.theme.useToken().token;
     var origTextColor = token.colorTextBase;
     function getNavBgColor() {
@@ -1125,7 +1136,7 @@ function RichLayout(_a) {
         };
     return (React__default.default.createElement("div", { className: className, style: { display: "flex" } },
         React__default.default.createElement("style", null, baseStyles),
-        React__default.default.createElement(proComponents.ProLayout, __assign({}, layoutProps, { 
+        React__default.default.createElement(proComponents.ProLayout, __assign({}, layoutProps, { logo: logo !== null && logo !== void 0 ? logo : logoElement, 
             // Theme just the header. If you simply pass in navTheme=realDark, it affects all main content as well.
             //
             // What we're doing is telling Ant to use the dark mode algorithm. However, dark mode algorithm doesn't change
@@ -1152,11 +1163,11 @@ function RichLayout(_a) {
                 sider: layoutColorOverrides,
             }, 
             // Tweak defaults. ProLayout is janky and has terrible docs!
-            layout: (_b = layoutProps.layout) !== null && _b !== void 0 ? _b : "top", fixedHeader: (_c = layoutProps.fixedHeader) !== null && _c !== void 0 ? _c : false, fixSiderbar: 
+            layout: (_c = layoutProps.layout) !== null && _c !== void 0 ? _c : "top", fixedHeader: (_d = layoutProps.fixedHeader) !== null && _d !== void 0 ? _d : false, fixSiderbar: 
             // Doesn't stretch full height if you set this to false and you're in mix mode.
             layoutProps.layout === "mix"
                 ? undefined
-                : (_d = layoutProps.fixSiderbar) !== null && _d !== void 0 ? _d : false, 
+                : (_e = layoutProps.fixSiderbar) !== null && _e !== void 0 ? _e : false, 
             // This is always needed if you want layout mix to have effect and look any different from layout side - not clear why this should ever be false.
             splitMenus: layoutProps.layout === "mix", route: {
                 path: rootUrl,
@@ -1192,8 +1203,8 @@ function RichLayout(_a) {
                 if (props === null || props === void 0 ? void 0 : props.collapsed)
                     return undefined;
                 return footerChildren;
-            }, onMenuHeaderClick: function (e) { return console.log(e); }, menuItemRender: function (item, dom) { return React__default.default.createElement("a", { href: item.path }, dom); }, headerTitleRender: function (logo, title, _) {
-                return (React__default.default.createElement("a", { href: rootUrl },
+            }, onMenuHeaderClick: function (e) { return console.log(e); }, menuItemRender: function (item, dom) { return React__default.default.createElement(Link, { href: item.path }, dom); }, headerTitleRender: function (logo, title, _) {
+                return (React__default.default.createElement(Link, { href: rootUrl },
                     logo,
                     title));
             } }), children)));
@@ -1242,7 +1253,16 @@ var richLayoutMeta = {
         logo: {
             displayName: "Logo",
             type: "imageUrl",
-            defaultValue: "https://www.plasmic.app/favicon.ico",
+            hidden: function (ps) { return !ps.logo; },
+        },
+        logoElement: {
+            type: "slot",
+            displayName: "Logo",
+            defaultValue: {
+                type: "img",
+                src: "https://static1.plasmic.app/fake-logo.svg",
+            },
+            hidden: function (ps) { return !!ps.logo; },
         },
         navMenuItems: generateNavMenuType(false, 2, "Nav menu items", [
             {