@lowdefy/blocks-antd 4.7.3 → 5.1.0

package/dist/blocks/Masonry/meta.js

@@ -0,0 +1,86 @@
+/*
+  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.
+*/ export default {
+    category: 'container',
+    icons: [],
+    valueType: null,
+    slots: {
+        content: 'Child blocks arranged in a masonry grid.'
+    },
+    cssKeys: {
+        element: 'The Masonry element.'
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            columns: {
+                type: [
+                    'integer',
+                    'object'
+                ],
+                description: 'Number of columns, or responsive breakpoint object.',
+                docs: {
+                    displayType: 'yaml'
+                }
+            },
+            fresh: {
+                type: 'boolean',
+                default: false,
+                description: 'Force refresh the masonry layout.'
+            },
+            gutter: {
+                type: [
+                    'number',
+                    'array'
+                ],
+                description: 'Gap between items. Number or [horizontal, vertical] array.',
+                docs: {
+                    displayType: 'yaml'
+                }
+            },
+            sequential: {
+                type: 'boolean',
+                default: false,
+                description: 'Whether to render items sequentially.'
+            },
+            theme: {
+                type: 'object',
+                description: 'Antd design token overrides for this block. See <a href="https://ant.design/components/overview#design-token">antd design tokens</a>.',
+                docs: {
+                    displayType: 'yaml',
+                    link: 'https://ant.design/components/masonry#design-token'
+                },
+                properties: {
+                    motionDurationSlow: {
+                        type: 'string',
+                        default: '0.3s',
+                        description: 'Duration for item position transitions and appear animations.'
+                    },
+                    motionDurationFast: {
+                        type: 'string',
+                        default: '0.1s',
+                        description: 'Duration for item leave animations.'
+                    },
+                    motionEaseOut: {
+                        type: 'string',
+                        default: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
+                        description: 'Easing function for item transitions.'
+                    }
+                }
+            }
+        }
+    }
+};

package/dist/blocks/MasonryList/MasonryList.js

@@ -0,0 +1,42 @@
+/*
+  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, { useEffect } from 'react';
+import { Masonry } from 'antd';
+import { withBlockDefaults } from '@lowdefy/block-utils';
+import withTheme from '../withTheme.js';
+const MasonryListBlock = ({ blockId, classNames = {}, list, methods, properties, styles = {} })=>{
+    useEffect(()=>{
+        methods.registerMethod('pushItem', methods.pushItem);
+        methods.registerMethod('removeItem', methods.removeItem);
+        methods.registerMethod('unshiftItem', methods.unshiftItem);
+        methods.registerMethod('moveItemUp', methods.moveItemUp);
+        methods.registerMethod('moveItemDown', methods.moveItemDown);
+    });
+    const items = (list || []).map((item, i)=>({
+            key: `${blockId}_${i}`,
+            children: item.content && item.content()
+        }));
+    return /*#__PURE__*/ React.createElement(Masonry, {
+        id: blockId,
+        className: classNames.element,
+        style: styles.element,
+        columns: properties.columns,
+        fresh: properties.fresh,
+        gutter: properties.gutter,
+        sequential: properties.sequential,
+        items: items
+    });
+};
+export default withTheme('Masonry', withBlockDefaults(MasonryListBlock));

package/dist/blocks/{AutoComplete/style.less → MasonryList/e2e.js}

@@ -12,6 +12,12 @@
   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 'antd/lib/auto-complete/style/index.less';
+*/ import { createBlockHelper } from '@lowdefy/e2e-utils';
+import { expect } from '@playwright/test';
+const locator = (page, blockId)=>page.locator(`#${blockId}`);
+export default createBlockHelper({
+    locator,
+    expect: {
+        itemCount: (page, blockId, count)=>expect(locator(page, blockId).locator('> *')).toHaveCount(count)
+    }
+});

package/dist/blocks/MasonryList/meta.js

@@ -0,0 +1,86 @@
+/*
+  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.
+*/ export default {
+    category: 'list',
+    icons: [],
+    valueType: 'array',
+    slots: {
+        content: 'Blocks rendered for each masonry item.'
+    },
+    cssKeys: {
+        element: 'The MasonryList element.'
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            columns: {
+                type: [
+                    'integer',
+                    'object'
+                ],
+                description: 'Number of columns, or responsive breakpoint object (e.g. { xs: 1, sm: 2, md: 3 }).',
+                docs: {
+                    displayType: 'yaml'
+                }
+            },
+            fresh: {
+                type: 'boolean',
+                default: false,
+                description: 'Force refresh the masonry layout.'
+            },
+            gutter: {
+                type: [
+                    'number',
+                    'array'
+                ],
+                description: 'Gap between items in pixels. Number or [horizontal, vertical] array.',
+                docs: {
+                    displayType: 'yaml'
+                }
+            },
+            sequential: {
+                type: 'boolean',
+                default: false,
+                description: 'Render items sequentially (top to bottom, then next column). Default is balanced column-fill.'
+            },
+            theme: {
+                type: 'object',
+                description: 'Antd design token overrides for this block. Masonry uses global motion tokens for item animations. See <a href="https://ant.design/components/overview#design-token">antd design tokens</a>.',
+                docs: {
+                    displayType: 'yaml',
+                    link: 'https://ant.design/components/masonry'
+                },
+                properties: {
+                    motionDurationSlow: {
+                        type: 'string',
+                        default: '0.3s',
+                        description: 'Duration of item position and fade-in animations.'
+                    },
+                    motionDurationFast: {
+                        type: 'string',
+                        default: '0.1s',
+                        description: 'Duration of item fade-out animations.'
+                    },
+                    motionEaseOut: {
+                        type: 'string',
+                        default: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
+                        description: 'Easing function for item animations.'
+                    }
+                }
+            }
+        }
+    }
+};

package/dist/blocks/Menu/Menu.js

@@ -12,10 +12,13 @@
   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 { blockDefaultProps } from '@lowdefy/block-utils';
-import { Menu } from 'antd';
+*/ import React, { useCallback, useContext } from 'react';
+import { Layout, Menu } from 'antd';
 import { type, get } from '@lowdefy/helpers';
+const SiderContext = Layout._InternalSiderContext;
+import { withBlockDefaults } from '@lowdefy/block-utils';
+import withTheme from '../withTheme.js';
+import useItemShortcuts from '../useItemShortcuts.js';
 const getDefaultMenu = (menus, menuId = 'default', links)=>{
     if (type.isArray(links)) return links;
     if (!type.isArray(menus)) return [];
@@ -23,11 +26,106 @@ const getDefaultMenu = (menus, menuId = 'default', links)=>{
     return menu.links ?? [];
 };
 const getTitle = ({ id, properties, pageId, url })=>properties?.title ?? pageId ?? url ?? id;
-const MenuComp = ({ blockId, components: { Icon, Link }, events, menus, methods, pageId, properties, rename })=>{
-    const styles = {
+function collectLinkShortcuts(links) {
+    const result = [];
+    (links ?? []).forEach((link)=>{
+        if (link.type === 'MenuLink' || !link.type) {
+            if (link.properties?.shortcut) {
+                result.push({
+                    key: link.pageId ?? link.id,
+                    shortcut: link.properties.shortcut
+                });
+            }
+        }
+        if (link.links) {
+            result.push(...collectLinkShortcuts(link.links));
+        }
+    });
+    return result;
+}
+function buildMenuItems({ links, events, components: { Icon, Link, ShortcutBadge }, classNames, styles, isTopLevel = true }) {
+    return (links ?? []).map((link, i)=>{
+        if (link.type === 'MenuDivider') {
+            return {
+                type: 'divider',
+                key: link.id ?? i,
+                dashed: link.properties?.dashed,
+                style: link.style
+            };
+        }
+        if (link.type === 'MenuGroup') {
+            const groupItem = {
+                key: link.pageId ?? link.id,
+                label: /*#__PURE__*/ React.createElement(Link, {
+                    id: link.pageId ?? link.id ?? i,
+                    style: link.style,
+                    ...link
+                }, getTitle(link)),
+                children: buildMenuItems({
+                    links: link.links,
+                    events,
+                    components: {
+                        Icon,
+                        Link,
+                        ShortcutBadge
+                    },
+                    classNames,
+                    styles,
+                    isTopLevel: false
+                })
+            };
+            if (isTopLevel) {
+                // Top-level MenuGroup → collapsible submenu (with icon)
+                groupItem.icon = link.properties?.icon ? /*#__PURE__*/ React.createElement(Icon, {
+                    blockId: `${link.id}_icon`,
+                    classNames: {
+                        element: classNames.icon
+                    },
+                    events: events,
+                    properties: link.properties.icon,
+                    styles: {
+                        element: styles.icon
+                    }
+                }) : undefined;
+            } else {
+                // Nested MenuGroup → non-collapsible group header
+                groupItem.type = 'group';
+            }
+            return groupItem;
+        }
+        // MenuLink (default)
+        return {
+            key: link.pageId ?? link.id,
+            danger: link.properties?.danger,
+            className: classNames.item,
+            icon: link.properties?.icon ? /*#__PURE__*/ React.createElement(Icon, {
+                blockId: `${link.id}_icon`,
+                classNames: {
+                    element: classNames.icon
+                },
+                events: events,
+                properties: link.properties.icon,
+                styles: {
+                    element: styles.icon
+                }
+            }) : undefined,
+            label: /*#__PURE__*/ React.createElement(Link, {
+                id: link.pageId ?? link.id ?? i,
+                style: link.style,
+                url: link.url ?? link.properties?.url,
+                newTab: link.newTab ?? link.properties?.newTab,
+                ...link
+            }, getTitle(link), /*#__PURE__*/ React.createElement(ShortcutBadge, {
+                shortcut: link.properties?.shortcut
+            }))
+        };
+    });
+}
+function MenuComp({ blockId, classNames = {}, components: { Icon, Link, ShortcutBadge }, events, menus, methods, pageId, properties, rename, styles = {} }) {
+    const horizontalStyles = {
         lineHeight: '64px',
         width: '100%',
-        display: properties.mode === 'horizontal' && 'inline-block'
+        display: properties.mode === 'horizontal' ? 'inline-block' : undefined
     };
     const exProps = {};
     if (properties.mode === 'inline') {
@@ -35,23 +133,62 @@ const MenuComp = ({ blockId, components: { Icon, Link }, events, menus, methods,
         exProps.inlineIndent = properties.inlineIndent;
     }
     const menu = getDefaultMenu(menus, properties.menuId, properties.links);
-    const theme = properties.theme ?? 'dark';
+    const theme = properties.theme;
+    const { siderCollapsed } = useContext(SiderContext) ?? {};
+    const isCollapsed = properties.collapsed === true || siderCollapsed === true;
+    const items = buildMenuItems({
+        links: menu,
+        events,
+        components: {
+            Icon,
+            Link,
+            ShortcutBadge
+        },
+        classNames,
+        styles
+    });
+    const shortcutItems = collectLinkShortcuts(menu);
+    const onShortcutMatch = useCallback((key)=>{
+        methods.triggerEvent({
+            name: get(rename, 'events.onSelect', {
+                default: 'onSelect'
+            }),
+            event: {
+                key
+            }
+        });
+    }, [
+        methods,
+        rename
+    ]);
+    useItemShortcuts({
+        items: shortcutItems,
+        onMatch: onShortcutMatch
+    });
     return /*#__PURE__*/ React.createElement(Menu, {
         id: blockId,
+        className: classNames.element,
+        style: {
+            ...horizontalStyles,
+            ...styles.element
+        },
+        items: items,
         expandIcon: properties.expandIcon && /*#__PURE__*/ React.createElement(Icon, {
             blockId: `${blockId}_expandIcon`,
+            classNames: {
+                element: classNames.expandIcon
+            },
             events: events,
-            properties: properties.expandIcon
+            properties: properties.expandIcon,
+            styles: {
+                element: styles.expandIcon
+            }
         }),
         forceSubMenuRender: properties.forceSubMenuRender,
         mode: properties.mode,
         selectable: true,
         theme: theme,
-        className: methods.makeCssClass([
-            styles,
-            properties.style
-        ]),
-        defaultOpenKeys: properties.defaultOpenKeys ?? (properties.mode === 'inline' && properties.collapsed !== true && [
+        defaultOpenKeys: properties.defaultOpenKeys ?? (properties.mode === 'inline' && !isCollapsed && [
             (menu.find((link)=>(link.links || []).map((subLink)=>subLink.links ? subLink.links.map((subSubLink)=>subSubLink.pageId) : [
                         subLink.pageId
                     ]).flat().some((link)=>(properties.selectedKeys ?? [
@@ -88,114 +225,6 @@ const MenuComp = ({ blockId, components: { Icon, Link }, events, menus, methods,
                 }
             }),
         ...exProps
-    }, menu.map((link, i)=>{
-        switch(link.type){
-            case 'MenuDivider':
-                return /*#__PURE__*/ React.createElement(Menu.Divider, {
-                    key: link.id,
-                    className: methods.makeCssClass([
-                        link.style
-                    ]),
-                    dashed: link.properties?.dashed
-                });
-            case 'MenuGroup':
-                return /*#__PURE__*/ React.createElement(Menu.SubMenu, {
-                    key: link.pageId ?? link.id,
-                    title: /*#__PURE__*/ React.createElement(Link, {
-                        id: link.pageId ?? link.id ?? i,
-                        className: methods.makeCssClass(link.style, true),
-                        ...link
-                    }, getTitle(link)),
-                    icon: link.properties?.icon && /*#__PURE__*/ React.createElement(Icon, {
-                        blockId: `${link.id}_icon`,
-                        events: events,
-                        properties: link.properties.icon
-                    })
-                }, get(link, 'links', {
-                    default: []
-                }).map((subLink, j)=>{
-                    switch(subLink.type){
-                        case 'MenuDivider':
-                            return /*#__PURE__*/ React.createElement(Menu.Divider, {
-                                key: subLink.id ?? j,
-                                className: methods.makeCssClass([
-                                    subLink.style
-                                ]),
-                                dashed: subLink.properties?.dashed
-                            });
-                        case 'MenuGroup':
-                            return /*#__PURE__*/ React.createElement(Menu.ItemGroup, {
-                                key: subLink.pageId ?? subLink.id,
-                                title: /*#__PURE__*/ React.createElement(Link, {
-                                    id: subLink.pageId ?? subLink.id ?? j,
-                                    className: methods.makeCssClass(subLink.style, true),
-                                    ...subLink
-                                }, getTitle(subLink))
-                            }, subLink.links.map((subLinkGroup, k)=>{
-                                if (subLinkGroup.type === 'MenuDivider') {
-                                    return /*#__PURE__*/ React.createElement(Menu.Divider, {
-                                        key: `${subLink.id}_${k}`,
-                                        className: methods.makeCssClass([
-                                            subLink.style
-                                        ]),
-                                        dashed: subLink.properties?.dashed
-                                    });
-                                }
-                                return /*#__PURE__*/ React.createElement(Menu.Item, {
-                                    key: subLinkGroup.pageId ?? subLinkGroup.id,
-                                    danger: get(subLinkGroup, 'properties.danger'),
-                                    icon: subLinkGroup.properties?.icon && /*#__PURE__*/ React.createElement(Icon, {
-                                        blockId: `${subLinkGroup.id}_icon`,
-                                        events: events,
-                                        properties: subLinkGroup.properties.icon
-                                    })
-                                }, /*#__PURE__*/ React.createElement(Link, {
-                                    id: subLinkGroup.pageId ?? subLinkGroup.id ?? k,
-                                    className: methods.makeCssClass(subLinkGroup.style, true),
-                                    ...subLinkGroup
-                                }, getTitle(subLinkGroup)));
-                            }));
-                        case 'MenuLink':
-                        default:
-                            return /*#__PURE__*/ React.createElement(Menu.Item, {
-                                key: subLink.pageId ?? subLink.id,
-                                danger: get(subLink, 'properties.danger'),
-                                icon: subLink.properties?.icon && /*#__PURE__*/ React.createElement(Icon, {
-                                    blockId: `${subLink.id}_icon`,
-                                    events: events,
-                                    properties: subLink.properties.icon
-                                })
-                            }, /*#__PURE__*/ React.createElement(Link, {
-                                id: subLink.pageId ?? subLink.id ?? j,
-                                className: methods.makeCssClass(subLink.style, true),
-                                ...subLink
-                            }, getTitle(subLink)));
-                    }
-                }));
-            case 'MenuLink':
-            default:
-                return /*#__PURE__*/ React.createElement(Menu.Item, {
-                    key: link.pageId ?? link.id,
-                    danger: get(link, 'properties.danger'),
-                    icon: link.properties?.icon && /*#__PURE__*/ React.createElement(Icon, {
-                        blockId: `${link.id}_icon`,
-                        events: events,
-                        properties: link.properties.icon
-                    })
-                }, /*#__PURE__*/ React.createElement(Link, {
-                    id: link.pageId ?? link.id ?? i,
-                    className: methods.makeCssClass(link.style, true),
-                    ...link
-                }, getTitle(link)));
-        }
-    }));
-};
-MenuComp.defaultProps = blockDefaultProps;
-MenuComp.meta = {
-    category: 'display',
-    icons: [],
-    styles: [
-        'blocks/Menu/style.less'
-    ]
-};
-export default MenuComp;
+    });
+}
+export default withTheme('Menu', withBlockDefaults(MenuComp));