@plasmicpkgs/antd5 0.0.138 → 0.0.139

package/dist/react-utils.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 export declare const isBrowser: boolean;
 export declare const NONE: unique symbol;
-export declare const useIsomorphicLayoutEffect: typeof React.useEffect;
+export declare const useIsomorphicLayoutEffect: typeof React.useLayoutEffect;
 export declare function createElementWithChildren(elementType: any, props: any, children: React.ReactNode): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export declare function ensureNotArray(children: React.ReactNode): any;
 /**
@@ -20,3 +20,4 @@ export declare function mergeRefs<T>(...refs: (React.Ref<T> | undefined)[]): (va
 export declare function mergePropVals(name: string, val1: any, val2: any): any;
 export declare function getElementTypeName(element: React.ReactElement): any;
 export declare function reactNodeToString(reactNode: React.ReactNode): string;
+export declare function useIsMounted(): () => boolean;

package/dist/registerForm.d.ts

@@ -1,12 +1,12 @@
+import { DataOp, TableSchema } from "@plasmicapp/data-sources";
 import { CodeComponentMode, ComponentHelpers } from "@plasmicapp/host";
+import { CanvasComponentProps } from "@plasmicapp/host/registerComponent";
 import { Form } from "antd";
 import type { FormInstance, FormProps } from "antd/es/form";
 import type { FormItemProps } from "antd/es/form/FormItem";
 import type { FormListOperation, FormListProps } from "antd/es/form/FormList";
 import React from "react";
 import { Registerable } from "./utils";
-import { CanvasComponentProps } from "@plasmicapp/host/registerComponent";
-import { TableSchema, DataOp } from "@plasmicapp/data-sources";
 export interface InternalFormItemProps extends Omit<FormItemProps, "rules"> {
     rules?: PlasmicRule[];
     noLabel?: boolean;

package/dist/registerSegmented.d.ts

@@ -0,0 +1,20 @@
+import { Segmented } from "antd";
+import React, { ReactElement } from "react";
+import { Registerable } from "./utils";
+export type AntdSegmentedOptionProps = {
+    value: string;
+    children: React.ReactNode;
+};
+export type AntdSegmentedProps = Omit<React.ComponentProps<typeof Segmented>, "options"> & {
+    options?: {
+        label: string;
+        value: string;
+    }[];
+    optionsSlot?: ReactElement;
+    useSlotOptions: boolean;
+};
+export declare function AntdSegmented(props: AntdSegmentedProps): React.JSX.Element;
+export declare function AntdSegmentedOption(props: AntdSegmentedOptionProps): React.JSX.Element;
+export declare const segmentedComponentName = "plasmic-antd5-segmented";
+export declare const segmentedOptionComponentName = "plasmic-antd5-segmented-option";
+export declare function registerSegmented(loader?: Registerable): void;

package/dist/registerTabs.d.ts

@@ -1,16 +1,12 @@
 import { Tabs } from "antd";
-import React from "react";
+import React, { ReactElement } from "react";
 import { Registerable } from "./utils";
 export declare const tabsComponentName = "plasmic-antd5-tabs";
 export declare const tabItemComponentName = "plasmic-antd5-tab-item";
 type TabItemType = NonNullable<React.ComponentProps<typeof Tabs>["items"]>[number];
 export declare const AntdTabItem: React.FC<TabItemType>;
 type TabsProps = Omit<React.ComponentProps<typeof Tabs>, "items" | "animated" | "tabBarExtraContent" | "renderTabBar"> & {
-    items: {
-        props: {
-            children: React.ReactElement<TabItemType>[];
-        };
-    } | React.ReactElement<TabItemType>;
+    items: ReactElement;
     animated: boolean;
     animateTabBar: boolean;
     animateTabContent: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmicpkgs/antd5",
-  "version": "0.0.138",
+  "version": "0.0.139",
   "description": "Plasmic registration calls for antd components",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -62,10 +62,10 @@
     "@babel/preset-env": "^7.22.15",
     "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.22.15",
-    "@plasmicapp/data-sources": "0.1.119",
+    "@plasmicapp/data-sources": "0.1.120",
     "@plasmicapp/host": "1.0.168",
     "@plasmicapp/query": "0.1.70",
-    "@plasmicapp/react-web": "0.2.263",
+    "@plasmicapp/react-web": "0.2.264",
     "@storybook/addon-actions": "^7.4.0",
     "@storybook/addon-essentials": "^7.4.0",
     "@storybook/addon-info": "^5.3.21",
@@ -99,5 +99,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "388b5829f67de3782fe8afdad0d153b5c6d0aac0"
+  "gitHead": "ed9053ca054f0345d29664c855003fc063aef81c"
 }

package/skinny/react-utils-11b0221a.cjs.js

@@ -0,0 +1,121 @@
+'use strict';
+
+var classNames = require('classnames');
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+const isBrowser = typeof window !== "undefined";
+const NONE = Symbol("NONE");
+isBrowser ? React__default.default.useLayoutEffect : React__default.default.useEffect;
+function mergeProps(props, ...restProps) {
+  if (restProps.every((rest) => Object.keys(rest).length === 0)) {
+    return props;
+  }
+  const result = __spreadValues({}, props);
+  for (const rest of restProps) {
+    for (const key of Object.keys(rest)) {
+      result[key] = mergePropVals(key, result[key], rest[key]);
+    }
+  }
+  return result;
+}
+function updateRef(ref, value) {
+  if (!ref) {
+    return;
+  }
+  if (typeof ref === "function") {
+    ref(value);
+  } else {
+    if (!Object.isFrozen(ref)) {
+      ref.current = value;
+    }
+  }
+}
+function mergeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) {
+      updateRef(ref, value);
+    }
+  };
+}
+function mergePropVals(name, val1, val2) {
+  if (val1 === NONE || val2 === NONE) {
+    return null;
+  } else if (val1 == null) {
+    return val2;
+  } else if (val2 == null) {
+    return val1;
+  } else if (name === "className") {
+    return classNames__default.default(val1, val2);
+  } else if (name === "style") {
+    return __spreadValues(__spreadValues({}, val1), val2);
+  } else if (name === "ref") {
+    return mergeRefs(val1, val2);
+  } else if (typeof val1 !== typeof val2) {
+    return val2;
+  } else if (name.startsWith("on") && typeof val1 === "function") {
+    return (...args) => {
+      let res;
+      if (typeof val1 === "function") {
+        res = val1(...args);
+      }
+      if (typeof val2 === "function") {
+        res = val2(...args);
+      }
+      return res;
+    };
+  } else {
+    return val2;
+  }
+}
+function reactNodeToString(reactNode) {
+  let string = "";
+  if (typeof reactNode === "string") {
+    string = reactNode;
+  } else if (typeof reactNode === "number") {
+    string = reactNode.toString();
+  } else if (reactNode instanceof Array) {
+    reactNode.forEach(function(child) {
+      string += reactNodeToString(child);
+    });
+  } else if (React.isValidElement(reactNode)) {
+    string += reactNodeToString(reactNode.props.children);
+  }
+  return string;
+}
+function useIsMounted() {
+  const ref = React__default.default.useRef(false);
+  const isMounted = React__default.default.useCallback(() => ref.current, []);
+  React__default.default.useEffect(() => {
+    ref.current = true;
+    return () => {
+      ref.current = false;
+    };
+  }, []);
+  return isMounted;
+}
+
+exports.mergeProps = mergeProps;
+exports.reactNodeToString = reactNodeToString;
+exports.useIsMounted = useIsMounted;
+//# sourceMappingURL=react-utils-11b0221a.cjs.js.map

package/skinny/react-utils-11b0221a.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-utils-11b0221a.cjs.js","sources":["../src/react-utils.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, { isValidElement } from \"react\";\n\nexport const isBrowser = typeof window !== \"undefined\";\nexport const NONE = Symbol(\"NONE\");\n\nexport const useIsomorphicLayoutEffect = isBrowser\n  ? React.useLayoutEffect\n  : React.useEffect;\n\nexport function createElementWithChildren(\n  elementType: any,\n  props: any,\n  children: React.ReactNode\n) {\n  if (Array.isArray(children)) {\n    return React.createElement(\n      elementType,\n      props,\n      ...children\n    ) as React.ReactElement;\n  } else if (children || \"children\" in props) {\n    // Only call React.createElement with `children` if there are actual children,\n    // or if there was an explicit (albeit undefined) children passed via\n    // props.  Otherwise, if you pass `undefined` as the children argument\n    // to React.createElement, the created element will have prop {children: undefined}.\n    // If the `root` is an PlasmicGeneratedComponent, and these props with {children: undefined}\n    // are used, then it will be taken as a `children` override, and will thus blank out\n    // everything under the root node.\n    return React.createElement(elementType, props, children);\n  } else {\n    return React.createElement(elementType, props);\n  }\n}\n\nexport function ensureNotArray(children: React.ReactNode) {\n  if (Array.isArray(children)) {\n    if (children.length === 1) {\n      return children[0];\n    } else {\n      return React.createElement(React.Fragment, {}, ...children);\n    }\n  } else {\n    return children;\n  }\n}\n\n/**\n * Flattens ReactNode into an array of ReactChild, but does NOT replace\n * missing keys with array index, as React.Children.toArray() does.\n */\nexport function toChildArray(children: React.ReactNode): React.ReactChild[] {\n  if (isReactChild(children)) {\n    return [children];\n  } else if (Array.isArray(children)) {\n    return children.flatMap(toChildArray);\n  } else {\n    return [];\n  }\n}\n\nexport function isReactText(child: React.ReactNode): child is React.ReactText {\n  return typeof child === \"string\" || typeof child === \"number\";\n}\n\nexport function isReactChild(\n  child: React.ReactNode\n): child is React.ReactChild {\n  return React.isValidElement(child) || isReactText(child);\n}\n\nexport function isReactFragment(\n  child: React.ReactNode\n): child is React.ReactElement {\n  return React.isValidElement(child) && child.type === React.Fragment;\n}\n\nexport function isReactNode(x: any) {\n  return (\n    typeof x === \"string\" || typeof x === \"number\" || React.isValidElement(x)\n  );\n}\n\n// From https://stackoverflow.com/questions/54775790/forcing-excess-property-checking-on-variable-passed-to-typescript-function\n// We also wrap the error message in a Partial<> because otherwise Jetbrains IDEs will autocomplete the component with all the string methods as props - see https://github.com/plasmicapp/plasmic/issues/16.\nexport type StrictProps<T, TExpected> = Exclude<\n  keyof T,\n  keyof TExpected\n> extends never\n  ? any\n  : Partial<\"Unexpected extraneous props\">;\n\nexport type HTMLElementRefOf<T extends keyof JSX.IntrinsicElements> = Exclude<\n  React.ComponentProps<T>[\"ref\"],\n  string\n>;\n\nexport function mergeProps(\n  props: Record<string, any>,\n  ...restProps: Record<string, any>[]\n): Record<string, any> {\n  if (restProps.every((rest) => Object.keys(rest).length === 0)) {\n    return props;\n  }\n\n  const result = { ...props };\n\n  for (const rest of restProps) {\n    for (const key of Object.keys(rest)) {\n      result[key] = mergePropVals(key, result[key], rest[key]);\n    }\n  }\n\n  return result;\n}\n\nfunction updateRef<T>(ref: React.Ref<T> | undefined, value: T | null) {\n  if (!ref) {\n    return;\n  }\n\n  if (typeof ref === \"function\") {\n    ref(value);\n  } else {\n    if (!Object.isFrozen(ref)) {\n      (ref as React.MutableRefObject<T | null>).current = value;\n    }\n  }\n}\n\nexport function mergeRefs<T>(...refs: (React.Ref<T> | undefined)[]) {\n  return (value: T) => {\n    for (const ref of refs) {\n      updateRef(ref, value);\n    }\n  };\n}\n\nexport function mergePropVals(name: string, val1: any, val2: any): any {\n  if (val1 === NONE || val2 === NONE) {\n    // The NONE sentinel always skips all merging and returns null\n    return null;\n  } else if (val1 == null) {\n    // If either of them is nil, prefer the other\n    return val2;\n  } else if (val2 == null) {\n    return val1;\n  } else if (name === \"className\") {\n    // Special case for className -- always combine both class names\n    return classNames(val1, val2);\n  } else if (name === \"style\") {\n    // Special case for style -- always shallow-merge style dicts\n    return { ...val1, ...val2 };\n  } else if (name === \"ref\") {\n    // Special case for ref\n    return mergeRefs(val1, val2);\n  } else if (typeof val1 !== typeof val2) {\n    // If the type of the two values are different, then no way to merge them.\n    // Prefer val2.\n    return val2;\n  } else if (name.startsWith(\"on\") && typeof val1 === \"function\") {\n    // Special case for event handlers -- always call both handlers\n    return (...args: any[]) => {\n      let res: any;\n      if (typeof val1 === \"function\") {\n        res = val1(...args);\n      }\n      if (typeof val2 === \"function\") {\n        res = val2(...args);\n      }\n      return res;\n    };\n  } else {\n    // For all else, prefer val2\n    return val2;\n  }\n}\n\nexport function getElementTypeName(element: React.ReactElement) {\n  if (typeof element.type === \"string\") {\n    return element.type;\n  } else {\n    const comp = element.type as any;\n    return comp.displayName ?? comp.name ?? comp.render?.name ?? \"Component\";\n  }\n}\n\nexport function reactNodeToString(reactNode: React.ReactNode): string {\n  let string = \"\";\n  if (typeof reactNode === \"string\") {\n    string = reactNode;\n  } else if (typeof reactNode === \"number\") {\n    string = reactNode.toString();\n  } else if (reactNode instanceof Array) {\n    reactNode.forEach(function (child) {\n      string += reactNodeToString(child);\n    });\n  } else if (isValidElement(reactNode)) {\n    string += reactNodeToString(reactNode.props.children);\n  }\n  return string;\n}\n\nexport function useIsMounted(): () => boolean {\n  const ref = React.useRef<boolean>(false);\n  const isMounted = React.useCallback(() => ref.current, []);\n\n  React.useEffect(() => {\n    ref.current = true;\n    return () => {\n      ref.current = false;\n    };\n  }, []);\n\n  return isMounted;\n}\n"],"names":["React","classNames","isValidElement"],"mappings":"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"}

package/skinny/react-utils-79d444f6.esm.js

@@ -0,0 +1,112 @@
+import classNames from 'classnames';
+import React, { isValidElement } from 'react';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+const isBrowser = typeof window !== "undefined";
+const NONE = Symbol("NONE");
+isBrowser ? React.useLayoutEffect : React.useEffect;
+function mergeProps(props, ...restProps) {
+  if (restProps.every((rest) => Object.keys(rest).length === 0)) {
+    return props;
+  }
+  const result = __spreadValues({}, props);
+  for (const rest of restProps) {
+    for (const key of Object.keys(rest)) {
+      result[key] = mergePropVals(key, result[key], rest[key]);
+    }
+  }
+  return result;
+}
+function updateRef(ref, value) {
+  if (!ref) {
+    return;
+  }
+  if (typeof ref === "function") {
+    ref(value);
+  } else {
+    if (!Object.isFrozen(ref)) {
+      ref.current = value;
+    }
+  }
+}
+function mergeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) {
+      updateRef(ref, value);
+    }
+  };
+}
+function mergePropVals(name, val1, val2) {
+  if (val1 === NONE || val2 === NONE) {
+    return null;
+  } else if (val1 == null) {
+    return val2;
+  } else if (val2 == null) {
+    return val1;
+  } else if (name === "className") {
+    return classNames(val1, val2);
+  } else if (name === "style") {
+    return __spreadValues(__spreadValues({}, val1), val2);
+  } else if (name === "ref") {
+    return mergeRefs(val1, val2);
+  } else if (typeof val1 !== typeof val2) {
+    return val2;
+  } else if (name.startsWith("on") && typeof val1 === "function") {
+    return (...args) => {
+      let res;
+      if (typeof val1 === "function") {
+        res = val1(...args);
+      }
+      if (typeof val2 === "function") {
+        res = val2(...args);
+      }
+      return res;
+    };
+  } else {
+    return val2;
+  }
+}
+function reactNodeToString(reactNode) {
+  let string = "";
+  if (typeof reactNode === "string") {
+    string = reactNode;
+  } else if (typeof reactNode === "number") {
+    string = reactNode.toString();
+  } else if (reactNode instanceof Array) {
+    reactNode.forEach(function(child) {
+      string += reactNodeToString(child);
+    });
+  } else if (isValidElement(reactNode)) {
+    string += reactNodeToString(reactNode.props.children);
+  }
+  return string;
+}
+function useIsMounted() {
+  const ref = React.useRef(false);
+  const isMounted = React.useCallback(() => ref.current, []);
+  React.useEffect(() => {
+    ref.current = true;
+    return () => {
+      ref.current = false;
+    };
+  }, []);
+  return isMounted;
+}
+
+export { mergeProps as m, reactNodeToString as r, useIsMounted as u };
+//# sourceMappingURL=react-utils-79d444f6.esm.js.map

package/skinny/react-utils-79d444f6.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-utils-79d444f6.esm.js","sources":["../src/react-utils.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, { isValidElement } from \"react\";\n\nexport const isBrowser = typeof window !== \"undefined\";\nexport const NONE = Symbol(\"NONE\");\n\nexport const useIsomorphicLayoutEffect = isBrowser\n  ? React.useLayoutEffect\n  : React.useEffect;\n\nexport function createElementWithChildren(\n  elementType: any,\n  props: any,\n  children: React.ReactNode\n) {\n  if (Array.isArray(children)) {\n    return React.createElement(\n      elementType,\n      props,\n      ...children\n    ) as React.ReactElement;\n  } else if (children || \"children\" in props) {\n    // Only call React.createElement with `children` if there are actual children,\n    // or if there was an explicit (albeit undefined) children passed via\n    // props.  Otherwise, if you pass `undefined` as the children argument\n    // to React.createElement, the created element will have prop {children: undefined}.\n    // If the `root` is an PlasmicGeneratedComponent, and these props with {children: undefined}\n    // are used, then it will be taken as a `children` override, and will thus blank out\n    // everything under the root node.\n    return React.createElement(elementType, props, children);\n  } else {\n    return React.createElement(elementType, props);\n  }\n}\n\nexport function ensureNotArray(children: React.ReactNode) {\n  if (Array.isArray(children)) {\n    if (children.length === 1) {\n      return children[0];\n    } else {\n      return React.createElement(React.Fragment, {}, ...children);\n    }\n  } else {\n    return children;\n  }\n}\n\n/**\n * Flattens ReactNode into an array of ReactChild, but does NOT replace\n * missing keys with array index, as React.Children.toArray() does.\n */\nexport function toChildArray(children: React.ReactNode): React.ReactChild[] {\n  if (isReactChild(children)) {\n    return [children];\n  } else if (Array.isArray(children)) {\n    return children.flatMap(toChildArray);\n  } else {\n    return [];\n  }\n}\n\nexport function isReactText(child: React.ReactNode): child is React.ReactText {\n  return typeof child === \"string\" || typeof child === \"number\";\n}\n\nexport function isReactChild(\n  child: React.ReactNode\n): child is React.ReactChild {\n  return React.isValidElement(child) || isReactText(child);\n}\n\nexport function isReactFragment(\n  child: React.ReactNode\n): child is React.ReactElement {\n  return React.isValidElement(child) && child.type === React.Fragment;\n}\n\nexport function isReactNode(x: any) {\n  return (\n    typeof x === \"string\" || typeof x === \"number\" || React.isValidElement(x)\n  );\n}\n\n// From https://stackoverflow.com/questions/54775790/forcing-excess-property-checking-on-variable-passed-to-typescript-function\n// We also wrap the error message in a Partial<> because otherwise Jetbrains IDEs will autocomplete the component with all the string methods as props - see https://github.com/plasmicapp/plasmic/issues/16.\nexport type StrictProps<T, TExpected> = Exclude<\n  keyof T,\n  keyof TExpected\n> extends never\n  ? any\n  : Partial<\"Unexpected extraneous props\">;\n\nexport type HTMLElementRefOf<T extends keyof JSX.IntrinsicElements> = Exclude<\n  React.ComponentProps<T>[\"ref\"],\n  string\n>;\n\nexport function mergeProps(\n  props: Record<string, any>,\n  ...restProps: Record<string, any>[]\n): Record<string, any> {\n  if (restProps.every((rest) => Object.keys(rest).length === 0)) {\n    return props;\n  }\n\n  const result = { ...props };\n\n  for (const rest of restProps) {\n    for (const key of Object.keys(rest)) {\n      result[key] = mergePropVals(key, result[key], rest[key]);\n    }\n  }\n\n  return result;\n}\n\nfunction updateRef<T>(ref: React.Ref<T> | undefined, value: T | null) {\n  if (!ref) {\n    return;\n  }\n\n  if (typeof ref === \"function\") {\n    ref(value);\n  } else {\n    if (!Object.isFrozen(ref)) {\n      (ref as React.MutableRefObject<T | null>).current = value;\n    }\n  }\n}\n\nexport function mergeRefs<T>(...refs: (React.Ref<T> | undefined)[]) {\n  return (value: T) => {\n    for (const ref of refs) {\n      updateRef(ref, value);\n    }\n  };\n}\n\nexport function mergePropVals(name: string, val1: any, val2: any): any {\n  if (val1 === NONE || val2 === NONE) {\n    // The NONE sentinel always skips all merging and returns null\n    return null;\n  } else if (val1 == null) {\n    // If either of them is nil, prefer the other\n    return val2;\n  } else if (val2 == null) {\n    return val1;\n  } else if (name === \"className\") {\n    // Special case for className -- always combine both class names\n    return classNames(val1, val2);\n  } else if (name === \"style\") {\n    // Special case for style -- always shallow-merge style dicts\n    return { ...val1, ...val2 };\n  } else if (name === \"ref\") {\n    // Special case for ref\n    return mergeRefs(val1, val2);\n  } else if (typeof val1 !== typeof val2) {\n    // If the type of the two values are different, then no way to merge them.\n    // Prefer val2.\n    return val2;\n  } else if (name.startsWith(\"on\") && typeof val1 === \"function\") {\n    // Special case for event handlers -- always call both handlers\n    return (...args: any[]) => {\n      let res: any;\n      if (typeof val1 === \"function\") {\n        res = val1(...args);\n      }\n      if (typeof val2 === \"function\") {\n        res = val2(...args);\n      }\n      return res;\n    };\n  } else {\n    // For all else, prefer val2\n    return val2;\n  }\n}\n\nexport function getElementTypeName(element: React.ReactElement) {\n  if (typeof element.type === \"string\") {\n    return element.type;\n  } else {\n    const comp = element.type as any;\n    return comp.displayName ?? comp.name ?? comp.render?.name ?? \"Component\";\n  }\n}\n\nexport function reactNodeToString(reactNode: React.ReactNode): string {\n  let string = \"\";\n  if (typeof reactNode === \"string\") {\n    string = reactNode;\n  } else if (typeof reactNode === \"number\") {\n    string = reactNode.toString();\n  } else if (reactNode instanceof Array) {\n    reactNode.forEach(function (child) {\n      string += reactNodeToString(child);\n    });\n  } else if (isValidElement(reactNode)) {\n    string += reactNodeToString(reactNode.props.children);\n  }\n  return string;\n}\n\nexport function useIsMounted(): () => boolean {\n  const ref = React.useRef<boolean>(false);\n  const isMounted = React.useCallback(() => ref.current, []);\n\n  React.useEffect(() => {\n    ref.current = true;\n    return () => {\n      ref.current = false;\n    };\n  }, []);\n\n  return isMounted;\n}\n"],"names":[],"mappings":"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"}

package/skinny/react-utils.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 export declare const isBrowser: boolean;
 export declare const NONE: unique symbol;
-export declare const useIsomorphicLayoutEffect: typeof React.useEffect;
+export declare const useIsomorphicLayoutEffect: typeof React.useLayoutEffect;
 export declare function createElementWithChildren(elementType: any, props: any, children: React.ReactNode): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export declare function ensureNotArray(children: React.ReactNode): any;
 /**
@@ -20,3 +20,4 @@ export declare function mergeRefs<T>(...refs: (React.Ref<T> | undefined)[]): (va
 export declare function mergePropVals(name: string, val1: any, val2: any): any;
 export declare function getElementTypeName(element: React.ReactElement): any;
 export declare function reactNodeToString(reactNode: React.ReactNode): string;
+export declare function useIsMounted(): () => boolean;

package/skinny/registerConfigProvider.cjs.js

@@ -6,7 +6,9 @@ var query = require('@plasmicapp/query');
 var antd = require('antd');
 var enUS = require('antd/lib/locale/en_US.js');
 var React = require('react');
+var reactUtils = require('./react-utils-11b0221a.cjs.js');
 var utils = require('./utils-174b9d45.cjs.js');
+require('classnames');
 require('@plasmicapp/host/registerComponent');
 require('@plasmicapp/host/registerGlobalContext');
 
@@ -151,17 +153,24 @@ function InnerConfigProvider(props) {
     }),
     [app]
   );
+  const enableLoadingBoundary = !!host.useSelector(
+    "plasmicInternalEnableLoadingBoundary"
+  );
   if (!host.GlobalActionsProvider) {
     warnOutdatedDeps();
   }
-  return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement("style", { dangerouslySetInnerHTML: { __html: cssStyles } }), host.GlobalActionsProvider ? /* @__PURE__ */ React__default.default.createElement(
+  let content = host.GlobalActionsProvider ? /* @__PURE__ */ React__default.default.createElement(
     host.GlobalActionsProvider,
     {
       contextName: "plasmic-antd5-config-provider",
       actions
     },
     children
-  ) : children, !removeLoading && /* @__PURE__ */ React__default.default.createElement(GlobalLoadingIndicator, { loadingText }));
+  ) : children;
+  if (!removeLoading && enableLoadingBoundary) {
+    content = /* @__PURE__ */ React__default.default.createElement(React__default.default.Suspense, null, content);
+  }
+  return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement("style", { dangerouslySetInnerHTML: { __html: cssStyles } }), content, !removeLoading && /* @__PURE__ */ React__default.default.createElement(GlobalLoadingIndicator, { loadingText }));
 }
 let warned = false;
 function warnOutdatedDeps() {
@@ -175,18 +184,40 @@ function warnOutdatedDeps() {
 function GlobalLoadingIndicator(props) {
   const { loadingText } = props;
   const app = useAppContext();
+  const isLoadingRef = React__default.default.useRef(false);
+  const isMounted = reactUtils.useIsMounted();
+  const showLoading = React__default.default.useCallback(() => {
+    if (isMounted() && isLoadingRef.current) {
+      app.message.open({
+        content: loadingText != null ? loadingText : "Loading...",
+        duration: 0,
+        key: `plasmic-antd5-global-loading-indicator`
+      });
+    }
+  }, [app, loadingText, isMounted, isLoadingRef]);
+  const hideLoading = React__default.default.useCallback(() => {
+    setTimeout(() => {
+      if (isMounted() && !isLoadingRef.current) {
+        app.message.destroy(`plasmic-antd5-global-loading-indicator`);
+      }
+    }, 500);
+  }, [app, isMounted, isLoadingRef]);
   React__default.default.useEffect(() => {
     if (query.addLoadingStateListener) {
+      if (isLoadingRef.current) {
+        showLoading();
+      } else {
+        hideLoading();
+      }
       return query.addLoadingStateListener(
         (isLoading) => {
-          if (isLoading) {
-            app.message.open({
-              content: loadingText != null ? loadingText : "Loading...",
-              duration: 0,
-              key: `plasmic-antd5-global-loading-indicator`
-            });
-          } else {
-            app.message.destroy(`plasmic-antd5-global-loading-indicator`);
+          isLoadingRef.current = isLoading;
+          if (isMounted()) {
+            if (isLoading) {
+              showLoading();
+            } else {
+              hideLoading();
+            }
           }
         },
         // Disabled immediat because it's creating an infinite rendering
@@ -198,7 +229,7 @@ function GlobalLoadingIndicator(props) {
       return () => {
       };
     }
-  }, [app]);
+  }, [app, isMounted, isLoadingRef, showLoading, hideLoading]);
   return null;
 }
 const ForkedAppContext = React__default.default.createContext(void 0);