@plasmicpkgs/plasmic-rich-components 1.0.93 → 1.0.95

package/dist/plasmic-rich-components.esm.js

@@ -6,6 +6,7 @@ import { Checkbox, Switch, Empty, Descriptions, theme, ConfigProvider, Dropdown,
 import { tinycolor } from '@ctrl/tinycolor';
 import { LogoutOutlined, PlusOutlined, EllipsisOutlined } from '@ant-design/icons';
 import { ProLayout, ProConfigProvider, ProTable } from '@ant-design/pro-components';
+import { usePlasmicLink } from '@plasmicapp/host';
 import { createObjectCsvStringifier } from 'csv-writer-browser';
 import fastStringify from 'fast-stringify';
 import classNames from 'classnames';
@@ -1021,12 +1022,16 @@ function registerRichDetails(loader) {
 }
 
 function useIsClient() {
-    var _a = useState(false), loaded = _a[0], setLoaded = _a[1];
-    useEffect(function () {
+    var _a = React.useState(false), loaded = _a[0], setLoaded = _a[1];
+    useIsomorphicLayoutEffect(function () {
         setLoaded(true);
     });
     return loaded;
 }
+var isBrowser = typeof window !== "undefined";
+var useIsomorphicLayoutEffect = isBrowser
+    ? React.useLayoutEffect
+    : React.useEffect;
 function capitalize(text) {
     return text.slice(0, 1).toUpperCase() + text.slice(1);
 }
@@ -1035,6 +1040,10 @@ function isLight(color) {
     return r * 0.299 + g * 0.587 + b * 0.114 > 186;
 }
 
+var AnchorLink = React.forwardRef(function AnchorLink(props, ref) {
+    return React.createElement("a", __assign({}, props, { ref: ref }));
+});
+
 function omitUndefined(x) {
     return Object.fromEntries(Object.entries(x).filter(function (_a) {
         _a[0]; var v = _a[1];
@@ -1051,15 +1060,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 = useState(undefined), pathname = _f[0], setPathname = _f[1];
+    var _g = useState(undefined), pathname = _g[0], setPathname = _g[1];
     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 = usePlasmicLink === null || usePlasmicLink === void 0 ? void 0 : usePlasmicLink()) !== null && _b !== void 0 ? _b : AnchorLink;
     var token = theme.useToken().token;
     var origTextColor = token.colorTextBase;
     function getNavBgColor() {
@@ -1115,7 +1126,7 @@ function RichLayout(_a) {
         };
     return (React.createElement("div", { className: className, style: { display: "flex" } },
         React.createElement("style", null, baseStyles),
-        React.createElement(ProLayout, __assign({}, layoutProps, { 
+        React.createElement(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
@@ -1142,11 +1153,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,
@@ -1182,8 +1193,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.createElement("a", { href: item.path }, dom); }, headerTitleRender: function (logo, title, _) {
-                return (React.createElement("a", { href: rootUrl },
+            }, onMenuHeaderClick: function (e) { return console.log(e); }, menuItemRender: function (item, dom) { return React.createElement(Link, { href: item.path }, dom); }, headerTitleRender: function (logo, title, _) {
+                return (React.createElement(Link, { href: rootUrl },
                     logo,
                     title));
             } }), children)));
@@ -1232,7 +1243,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", [
             {