@lowdefy/client 6.1.0 → 7.0.0

package/dist/block/Block.js

@@ -16,7 +16,7 @@
 import { ErrorBoundary } from '@lowdefy/block-utils';
 import CategorySwitch from './CategorySwitch.js';
 import MountEvents from '../MountEvents.js';
-const Block = ({ block, Blocks, context, lowdefy, parentLoading })=>{
+const Block = ({ block, Blocks, context, lowdefy, parentLoading, renderHead })=>{
     const [updates, setUpdate] = useState(0);
     const loggedErrorsRef = useRef(new Set());
     context._internal.updaters[block.id] = ()=>setUpdate(updates + 1);
@@ -48,7 +48,9 @@ const Block = ({ block, Blocks, context, lowdefy, parentLoading })=>{
         configKey: block.eval?.configKey,
         onError: handleError,
         properties: block.eval?.properties
-    }, /*#__PURE__*/ React.createElement(MountEvents, {
+    }, renderHead?.({
+        properties: block.eval.properties
+    }), /*#__PURE__*/ React.createElement(MountEvents, {
         context: context,
         triggerEvent: async ()=>{
             context._internal.lowdefy._internal.progress.dispatch({
@@ -76,7 +78,8 @@ const Block = ({ block, Blocks, context, lowdefy, parentLoading })=>{
             lowdefy._internal.progress.dispatch({
                 type: 'done'
             });
-        }
+        },
+        waitForMount: Object.hasOwn(block.Events.events, 'onMount')
     }, (eventLoading)=>/*#__PURE__*/ React.createElement(CategorySwitch, {
             block: block,
             Blocks: Blocks,

package/dist/block/CategorySwitch.js

@@ -69,7 +69,9 @@ const CategorySwitch = ({ block, Blocks, context, loading, lowdefy })=>{
                 layout: block.eval.layout
             }, /*#__PURE__*/ React.createElement(Component, {
                 methods: Object.assign(block.methods, {
+                    getAppStorageKey: lowdefy._internal.storage.appKey,
                     getLocale: ()=>lowdefy.i18n?.active ?? lowdefy.i18n?.defaultLocale,
+                    getUserStorageKey: lowdefy._internal.storage.userKey,
                     registerEvent: block.registerEvent,
                     registerMethod: block.registerMethod,
                     setValue: block.setValue,
@@ -85,6 +87,7 @@ const CategorySwitch = ({ block, Blocks, context, loading, lowdefy })=>{
                 loading: loading,
                 menus: lowdefy.menus,
                 pageId: lowdefy.pageId,
+                pathParams: context.pathParams,
                 properties: block.eval.properties,
                 required: block.eval.required,
                 styles: block.eval.style ?? {},
@@ -108,7 +111,9 @@ const CategorySwitch = ({ block, Blocks, context, loading, lowdefy })=>{
                 layout: block.eval.layout
             }, /*#__PURE__*/ React.createElement(Component, {
                 methods: Object.assign(block.methods, {
+                    getAppStorageKey: lowdefy._internal.storage.appKey,
                     getLocale: ()=>lowdefy.i18n?.active ?? lowdefy.i18n?.defaultLocale,
+                    getUserStorageKey: lowdefy._internal.storage.userKey,
                     registerEvent: block.registerEvent,
                     registerMethod: block.registerMethod,
                     translate: lowdefy._internal.translate,
@@ -123,6 +128,7 @@ const CategorySwitch = ({ block, Blocks, context, loading, lowdefy })=>{
                 loading: loading,
                 menus: lowdefy.menus,
                 pageId: lowdefy.pageId,
+                pathParams: context.pathParams,
                 properties: block.eval.properties,
                 required: block.eval.required,
                 styles: block.eval.style ?? {},

package/dist/block/Container.js

@@ -51,7 +51,9 @@ const Container = ({ block, Blocks, Component, context, loading, lowdefy })=>{
         layout: block.eval.layout
     }, /*#__PURE__*/ React.createElement(Component, {
         methods: Object.assign(block.methods, {
+            getAppStorageKey: lowdefy._internal.storage.appKey,
             getLocale: ()=>lowdefy.i18n?.active ?? lowdefy.i18n?.defaultLocale,
+            getUserStorageKey: lowdefy._internal.storage.userKey,
             registerEvent: block.registerEvent,
             registerMethod: block.registerMethod,
             translate: lowdefy._internal.translate,
@@ -67,6 +69,7 @@ const Container = ({ block, Blocks, Component, context, loading, lowdefy })=>{
         loading: loading,
         menus: lowdefy.menus,
         pageId: lowdefy.pageId,
+        pathParams: context.pathParams,
         properties: block.eval.properties,
         required: block.eval.required,
         styles: block.eval.style ?? {},

package/dist/block/InputContainer.js

@@ -24,7 +24,10 @@ const InputContainer = ({ block, Blocks, Component, context, loading, lowdefy })
     const slots = Blocks.subSlots[block.id][0].slots;
     Object.keys(slots).forEach((slotKey, i)=>{
         if (slots[slotKey].blocks.length === 0) return;
-        content[slotKey] = (contentStyle)=>/*#__PURE__*/ React.createElement(Area, {
+        // A block may pass the loading its slot's blocks inherit (`{ loading }`), for slots that are
+        // its chrome rather than its content: the Table keeps its toolbar and bulk action blocks
+        // usable while its own rows load. By default they inherit the block's loading.
+        content[slotKey] = (contentStyle, { loading: slotLoading = loading } = {})=>/*#__PURE__*/ React.createElement(Area, {
                 area: block.eval.slots[slotKey],
                 areaKey: slotKey,
                 style: {
@@ -41,7 +44,7 @@ const InputContainer = ({ block, Blocks, Component, context, loading, lowdefy })
                     context: context,
                     key: `co-${bl.blockId}-${k}`,
                     lowdefy: lowdefy,
-                    parentLoading: loading
+                    parentLoading: slotLoading
                 })));
     });
     return /*#__PURE__*/ React.createElement(BlockLayout, {
@@ -51,7 +54,9 @@ const InputContainer = ({ block, Blocks, Component, context, loading, lowdefy })
         layout: block.eval.layout
     }, /*#__PURE__*/ React.createElement(Component, {
         methods: Object.assign(block.methods, {
+            getAppStorageKey: lowdefy._internal.storage.appKey,
             getLocale: ()=>lowdefy.i18n?.active ?? lowdefy.i18n?.defaultLocale,
+            getUserStorageKey: lowdefy._internal.storage.userKey,
             registerEvent: block.registerEvent,
             registerMethod: block.registerMethod,
             translate: lowdefy._internal.translate,
@@ -73,6 +78,7 @@ const InputContainer = ({ block, Blocks, Component, context, loading, lowdefy })
         loading: loading,
         menus: lowdefy.menus,
         pageId: lowdefy.pageId,
+        pathParams: context.pathParams,
         properties: block.eval.properties,
         required: block.eval.required,
         styles: block.eval.style ?? {},

package/dist/block/List.js

@@ -56,7 +56,9 @@ const List = ({ block, Blocks, Component, context, loading, lowdefy })=>{
         layout: block.eval.layout
     }, /*#__PURE__*/ React.createElement(Component, {
         methods: Object.assign(block.methods, {
+            getAppStorageKey: lowdefy._internal.storage.appKey,
             getLocale: ()=>lowdefy.i18n?.active ?? lowdefy.i18n?.defaultLocale,
+            getUserStorageKey: lowdefy._internal.storage.userKey,
             moveItemDown: block.moveItemDown,
             moveItemUp: block.moveItemUp,
             pushItem: block.pushItem,
@@ -78,6 +80,7 @@ const List = ({ block, Blocks, Component, context, loading, lowdefy })=>{
         loading: loading,
         menus: lowdefy.menus,
         pageId: lowdefy.pageId,
+        pathParams: context.pathParams,
         properties: block.eval.properties,
         required: block.eval.required,
         styles: block.eval.style ?? {},

package/dist/block/LoadingBlock.js

@@ -16,17 +16,7 @@
 import { BlockLayout } from '@lowdefy/layout';
 import LoadingContainer from './LoadingContainer.js';
 import LoadingList from './LoadingList.js';
-const blockMethods = {
-    moveItemDown: ()=>{},
-    moveItemUp: ()=>{},
-    pushItem: ()=>{},
-    registerEvent: ()=>{},
-    registerMethod: ()=>{},
-    removeItem: ()=>{},
-    setValue: ()=>{},
-    triggerEvent: ()=>{},
-    unshiftItem: ()=>{}
-};
+import loadingBlockMethods from './loadingBlockMethods.js';
 const LoadingBlock = ({ blockClass, blockId, blockLayout, blockProperties, blockStyle, context, lowdefy, skeleton })=>{
     let Component = lowdefy._internal.blockComponents[skeleton.type];
     useEffect(()=>{
@@ -74,7 +64,11 @@ const LoadingBlock = ({ blockClass, blockId, blockLayout, blockProperties, block
                 components: lowdefy._internal.components,
                 key: `s-${blockId}-${skeleton.id}`,
                 menus: lowdefy.menus,
-                methods: blockMethods,
+                methods: {
+                    ...loadingBlockMethods,
+                    getAppStorageKey: lowdefy._internal.storage.appKey,
+                    getUserStorageKey: lowdefy._internal.storage.userKey
+                },
                 pageId: lowdefy.pageId,
                 properties: skeleton.properties ?? blockProperties
             }));

package/dist/block/LoadingContainer.js

@@ -15,6 +15,7 @@
 */ import React from 'react';
 import { Area, BlockLayout } from '@lowdefy/layout';
 import LoadingBlock from './LoadingBlock.js';
+import loadingBlockMethods from './loadingBlockMethods.js';
 const LoadingContainer = ({ blockClass, blockId, blockLayout, blockProperties, blockStyle, Component, context, lowdefy, skeleton })=>{
     const content = {};
     // eslint-disable-next-line prefer-destructuring
@@ -46,7 +47,11 @@ const LoadingContainer = ({ blockClass, blockId, blockLayout, blockProperties, b
         content: content,
         key: skeleton.id,
         menus: lowdefy.menus,
-        methods: {},
+        methods: {
+            ...loadingBlockMethods,
+            getAppStorageKey: lowdefy._internal.storage.appKey,
+            getUserStorageKey: lowdefy._internal.storage.userKey
+        },
         pageId: lowdefy.pageId,
         properties: skeleton.properties ?? blockProperties
     }));

package/dist/block/LoadingList.js

@@ -15,6 +15,7 @@
 */ import React from 'react';
 import { Area, BlockLayout } from '@lowdefy/layout';
 import LoadingBlock from './LoadingBlock.js';
+import loadingBlockMethods from './loadingBlockMethods.js';
 const LoadingList = ({ blockClass, blockId, blockLayout, blockProperties, blockStyle, Component, context, lowdefy, skeleton })=>{
     const content = {};
     const contentList = [];
@@ -50,7 +51,11 @@ const LoadingList = ({ blockClass, blockId, blockLayout, blockProperties, blockS
         components: lowdefy._internal.components,
         list: contentList,
         menus: lowdefy.menus,
-        methods: {},
+        methods: {
+            ...loadingBlockMethods,
+            getAppStorageKey: lowdefy._internal.storage.appKey,
+            getUserStorageKey: lowdefy._internal.storage.userKey
+        },
         pageId: lowdefy.pageId,
         properties: skeleton.properties ?? blockProperties
     }));

package/dist/block/loadingBlockMethods.js

@@ -0,0 +1,26 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ const loadingBlockMethods = {
+    moveItemDown: ()=>{},
+    moveItemUp: ()=>{},
+    pushItem: ()=>{},
+    registerEvent: ()=>{},
+    registerMethod: ()=>{},
+    removeItem: ()=>{},
+    setValue: ()=>{},
+    triggerEvent: ()=>{},
+    unshiftItem: ()=>{}
+};
+export default loadingBlockMethods;

package/dist/claimCallerReload.js

@@ -0,0 +1,38 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ // sessionStorage key holding when this tab last reloaded to follow its caller.
+const RELOADED_FOR_CALLER_KEY = 'lowdefy.reloadedForCaller';
+const RELOAD_INTERVAL_MS = 10000;
+// True when this tab may reload because its caller changed (another person or
+// organization, or the session ended), and records the reload. A tab reloads
+// at most once per 10 seconds for its caller: if the freshly loaded page still
+// disagrees with the server, reloading again would loop. Callers fail the call
+// instead, so no data shows for the wrong caller either way.
+function claimCallerReload({ window }) {
+    const now = Date.now();
+    try {
+        const last = Number(window.sessionStorage.getItem(RELOADED_FOR_CALLER_KEY));
+        if (Math.abs(now - last) < RELOAD_INTERVAL_MS) {
+            return false;
+        }
+        window.sessionStorage.setItem(RELOADED_FOR_CALLER_KEY, String(now));
+    } catch (error) {
+        // Browsers with storage disabled throw on sessionStorage access. Without
+        // the record the loop guard cannot work, so do not reload.
+        return false;
+    }
+    return true;
+}
+export default claimCallerReload;

package/dist/createAntdIconConfig.js

@@ -0,0 +1,91 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import React from 'react';
+import { ConfigProvider } from 'antd';
+// Icon keys for a ConfigProvider around the page tree, so antd's own chrome
+// draws with the app's icon set. Tag is left out: a context closeIcon makes
+// every Tag closable (antd's useClosable), so the Tag block passes its own.
+function createAntdIconConfig({ Icon }) {
+    function chromeIcon(name, properties) {
+        return /*#__PURE__*/ React.createElement(Icon, {
+            properties: {
+                name,
+                title: '',
+                ...properties
+            }
+        });
+    }
+    // antd renders a function menu.expandIcon as a component, so it is created
+    // once here to keep its identity, and it adds the expand-icon class itself.
+    function MenuExpandIcon({ isOpen }) {
+        const { getPrefixCls } = React.useContext(ConfigProvider.ConfigContext);
+        return /*#__PURE__*/ React.createElement(Icon, {
+            className: `${getPrefixCls('menu')}-submenu-expand-icon`,
+            properties: {
+                name: 'chevron-down',
+                rotate: isOpen ? 180 : 0,
+                title: ''
+            }
+        });
+    }
+    const closeIcon = chromeIcon('close');
+    return {
+        alert: {
+            closeIcon,
+            errorIcon: chromeIcon('error'),
+            infoIcon: chromeIcon('info'),
+            successIcon: chromeIcon('success'),
+            warningIcon: chromeIcon('warning')
+        },
+        breadcrumb: {
+            dropdownIcon: chromeIcon('chevron-down')
+        },
+        button: {
+            loadingIcon: chromeIcon('loading', {
+                spin: true
+            })
+        },
+        collapse: {
+            expandIcon: ({ isActive })=>chromeIcon('chevron-right', {
+                    rotate: isActive ? 90 : 0
+                })
+        },
+        datePicker: {
+            suffixIcon: chromeIcon('calendar')
+        },
+        drawer: {
+            closeIcon
+        },
+        menu: {
+            expandIcon: MenuExpandIcon
+        },
+        modal: {
+            closeIcon
+        },
+        tabs: {
+            moreIcon: chromeIcon('more')
+        },
+        timePicker: {
+            suffixIcon: chromeIcon('clock')
+        },
+        tour: {
+            closeIcon
+        },
+        treeSelect: {
+            switcherIcon: chromeIcon('chevron-down')
+        }
+    };
+}
+export default createAntdIconConfig;

package/dist/createCallAPI.js

@@ -13,16 +13,20 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import request from './request.js';
-function createCallAPI({ basePath }) {
+function createCallAPI(lowdefy) {
+    const { basePath, buildId } = lowdefy;
     function callAPI({ payload, endpointId, pageId, blockId }) {
         return request({
+            buildId,
             url: `${basePath}/api/endpoints/${endpointId}`,
             method: 'POST',
             body: {
                 payload,
                 pageId,
                 blockId
-            }
+            },
+            reloadOnAuthorizationError: false,
+            lowdefy
         });
     }
     return callAPI;

package/dist/createCallRequest.js

@@ -13,16 +13,20 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import request from './request.js';
-function createCallRequest({ basePath }) {
+function createCallRequest(lowdefy) {
+    const { basePath, buildId } = lowdefy;
     function callRequest({ actionId, blockId, pageId, payload, requestId }) {
         return request({
+            buildId,
             url: `${basePath}/api/request/${pageId}/${requestId}`,
             method: 'POST',
             body: {
                 actionId,
                 blockId,
                 payload
-            }
+            },
+            reloadOnAuthorizationError: true,
+            lowdefy
         });
     }
     return callRequest;

package/dist/createHandleError.js

@@ -13,7 +13,7 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import { getDevError } from '@lowdefy/engine';
-import { UserError } from '@lowdefy/errors';
+import { expectedErrorNames } from '@lowdefy/errors';
 import { serializer } from '@lowdefy/helpers';
 function createHandleError(lowdefy) {
     const loggedErrors = new Set();
@@ -36,9 +36,11 @@ function createHandleError(lowdefy) {
             return;
         }
         loggedErrors.add(errorKey);
-        // UserError is client-only — log to browser console, never send to server or
-        // the error bar
-        if (error instanceof UserError) {
+        // An expected outcome - a UserError, or an auth gate's refusal the server
+        // already logged as one warning line - logs to the browser console only,
+        // never sent to the server or the error bar. Matched by name, not
+        // instanceof: plugins bundle their own @lowdefy/errors copy.
+        if (expectedErrorNames.has(error?.name)) {
             logger.error(shown);
             return;
         }

package/dist/createIcon.js

@@ -15,7 +15,11 @@
 */ import React from 'react';
 import { omit, type } from '@lowdefy/helpers';
 import Icon from '@ant-design/icons';
+import LucideIcon from 'lucide-react/dist/esm/Icon.mjs';
+import { useLucideContext } from 'lucide-react/dist/esm/context.mjs';
 import { cn, withBlockDefaults, ErrorBoundary } from '@lowdefy/block-utils';
+import formatIconTitle from './formatIconTitle.js';
+import renderIconNodes from './renderIconNodes.js';
 import iconStyles from './style.module.css';
 const lowdefyProps = [
     'actionLog',
@@ -27,65 +31,163 @@ const lowdefyProps = [
     'loading',
     'menus',
     'pageId',
+    'pathParams',
     'registerEvent',
     'registerMethod',
     'schemaErrors',
     'styles',
     'validation'
 ];
-const createIcon = (Icons)=>{
-    const AiOutlineLoading3Quarters = Icons['AiOutlineLoading3Quarters'];
-    const AiOutlineExclamationCircle = Icons['AiOutlineExclamationCircle'];
-    const formatTitle = (title)=>{
-        if (!title || !type.isString(title)) {
-            return '';
+// Drawn while every icon loads: an empty svg keeps the icon's box, so nothing
+// shifts and no fallback flashes before the icon arrives.
+const PENDING_ICON = {
+    node: []
+};
+function createIcon({ icons, loadAllIcons }) {
+    // Without a loader the map already holds every icon the app bundles.
+    let allIconsLoaded = type.isNone(loadAllIcons);
+    // icons is the live icon map: page loads, dev JIT and loadAllIcons add names
+    // to it, so every lookup happens at render.
+    function getIconData(name) {
+        if (type.isString(name) && Object.hasOwn(icons, name)) {
+            return icons[name];
         }
-        let spacedTitle = title.replace(/([A-Z])/g, ' $1').trim();
-        return spacedTitle.substring(spacedTitle.indexOf(' ') + 1);
-    };
-    const IconBlock = ({ blockId, classNames = {}, events, methods, onClick, properties, styles = {}, ...props })=>{
+        return null;
+    }
+    // A name missing from the page's icons may be one of the app's, so the first
+    // miss waits for every icon to load before it draws the fallback. After a
+    // load, a missing name is unknown. A failed load (logged by the loader)
+    // draws the fallback, and a later miss tries again.
+    function useIconData(name) {
+        const data = getIconData(name);
+        const [settledName, setSettledName] = React.useState(null);
+        const pending = data === null && type.isString(name) && !allIconsLoaded && settledName !== name;
+        React.useEffect(()=>{
+            if (!pending) return undefined;
+            let mounted = true;
+            loadAllIcons().then(()=>{
+                allIconsLoaded = true;
+            }, ()=>undefined).then(()=>{
+                if (mounted) setSettledName(name);
+            });
+            return ()=>{
+                mounted = false;
+            };
+        }, [
+            pending,
+            name
+        ]);
+        return {
+            data,
+            pending
+        };
+    }
+    function IconSvg({ data, nonScalingStroke, svgProps, title }) {
+        return /*#__PURE__*/ React.createElement(LucideIcon, {
+            icon: {
+                node: [],
+                size: data.size,
+                width: data.width,
+                height: data.height
+            },
+            ...data.attrs,
+            ...svgProps
+        }, [
+            title ? /*#__PURE__*/ React.createElement("title", {
+                key: "title"
+            }, title) : null,
+            ...renderIconNodes({
+                node: data.node,
+                nonScalingStroke
+            })
+        ]);
+    }
+    function IconBlock({ blockId, classNames = {}, events, methods, onClick, properties, styles = {}, ...props }) {
+        const lucideContext = useLucideContext();
         const propertiesObj = type.isString(properties) ? {
             name: properties
         } : properties;
+        const { data, pending } = useIconData(propertiesObj.name);
         const spin = (propertiesObj.spin || events.onClick?.loading) && !propertiesObj.disableLoadingIcon;
-        const iconProps = {
+        const title = propertiesObj.title ?? formatIconTitle(propertiesObj.name);
+        const labelled = Boolean(title) || !type.isNone(props['aria-label']);
+        const nonScalingStroke = propertiesObj.nonScalingStroke ?? lucideContext.nonScalingStroke;
+        const triggerClick = events.onClick && (()=>methods.triggerEvent({
+                name: 'onClick'
+            }));
+        const svgProps = {
             id: blockId,
             className: cn(classNames.element, {
                 [iconStyles['icon-spin']]: spin
             }),
             style: {
                 cursor: onClick || events.onClick ? 'pointer' : undefined,
+                // CSS colour and transform, not SVG attributes: every set draws with
+                // currentColor, so one colour reaches stroke- and fill-based icons.
+                color: propertiesObj.color,
+                transform: propertiesObj.rotate ? `rotate(${propertiesObj.rotate}deg)` : undefined,
                 ...styles.element
             },
-            rotate: propertiesObj.rotate,
-            color: propertiesObj.color,
-            title: propertiesObj.title ?? formatTitle(propertiesObj.name),
             size: propertiesObj.size,
-            // twoToneColor: propertiesObj.color, // TODO: track https://github.com/react-icons/react-icons/issues/508
+            strokeWidth: propertiesObj.strokeWidth,
+            'aria-hidden': labelled ? undefined : 'true',
+            onClick: onClick ?? triggerClick,
             ...omit(props, lowdefyProps)
         };
-        let IconComp = Icons[propertiesObj.name];
-        if (!IconComp) {
-            IconComp = AiOutlineExclamationCircle;
+        const missingSvgProps = {
+            ...svgProps,
+            style: {
+                ...svgProps.style,
+                color: '#F00'
+            }
+        };
+        const missingIcon = /*#__PURE__*/ React.createElement(IconSvg, {
+            data: getIconData('icon-missing'),
+            nonScalingStroke: nonScalingStroke,
+            svgProps: missingSvgProps,
+            title: title
+        });
+        if (spin) {
+            return /*#__PURE__*/ React.createElement(IconSvg, {
+                data: getIconData('loading'),
+                nonScalingStroke: nonScalingStroke,
+                svgProps: svgProps,
+                title: title
+            });
         }
-        return /*#__PURE__*/ React.createElement(React.Fragment, null, spin ? /*#__PURE__*/ React.createElement(AiOutlineLoading3Quarters, iconProps) : /*#__PURE__*/ React.createElement(ErrorBoundary, {
-            fallback: ()=>/*#__PURE__*/ React.createElement(AiOutlineExclamationCircle, {
-                    ...iconProps,
-                    color: '#F00'
-                })
-        }, /*#__PURE__*/ React.createElement(IconComp, {
-            id: blockId,
-            onClick: onClick || events.onClick && (()=>methods.triggerEvent({
-                    name: 'onClick'
-                })),
-            size: propertiesObj.size,
-            title: propertiesObj.title,
-            ...iconProps
+        if (pending) {
+            return /*#__PURE__*/ React.createElement(IconSvg, {
+                data: PENDING_ICON,
+                nonScalingStroke: nonScalingStroke,
+                svgProps: svgProps,
+                title: title
+            });
+        }
+        if (!data) {
+            return missingIcon;
+        }
+        return(// Keyed so an icon that failed recovers when its name changes.
+        /*#__PURE__*/ React.createElement(ErrorBoundary, {
+            key: propertiesObj.name,
+            fallback: ()=>missingIcon
+        }, /*#__PURE__*/ React.createElement(IconSvg, {
+            data: data,
+            nonScalingStroke: nonScalingStroke,
+            svgProps: svgProps,
+            title: title
         })));
-    };
-    const AntIcon = (all)=>/*#__PURE__*/ React.createElement(Icon, {
-            component: ()=>/*#__PURE__*/ React.createElement(IconBlock, all)
-        });
+    }
+    // antd's Icon renders `component` with React.createElement, so the component
+    // must keep its identity across renders or React remounts the <svg> every
+    // time. The per-render props travel through a render-function child instead.
+    const IconHost = ({ children })=>children();
+    // antd components add their classes (collapse arrow, tree switcher, menu
+    // expand icon) to the icon element they are given; their CSS expects them on
+    // the .anticon span, as on antd's own icons.
+    const AntIcon = ({ className, ...all })=>/*#__PURE__*/ React.createElement(Icon, {
+            className: className,
+            component: IconHost
+        }, ()=>/*#__PURE__*/ React.createElement(IconBlock, all));
     return withBlockDefaults(AntIcon);
-};
+}
 export default createIcon;