@lowdefy/blocks-antd 5.1.0 → 5.2.0

package/dist/blocks/ControlledList/ControlledList.js

@@ -15,10 +15,11 @@
 */ import React, { useEffect } from 'react';
 import { get } from '@lowdefy/helpers';
 import { List, Typography } from 'antd';
-import { withBlockDefaults } from '@lowdefy/block-utils';
+import { cn, withBlockDefaults } from '@lowdefy/block-utils';
 import Button from '../Button/Button.js';
 import withTheme from '../withTheme.js';
-const ControlledListBlock = ({ blockId, classNames = {}, components: { Icon, Link, ShortcutBadge }, events, list, methods, properties, styles = {} })=>{
+import './style.module.css';
+const ControlledListBlock = ({ blockId, classNames = {}, components: { Icon, Link, ShortcutBadge }, events, list, methods, properties, styles = {}, value = [] })=>{
     useEffect(()=>{
         methods.registerMethod('moveItemDown', methods.moveItemDown);
         methods.registerMethod('moveItemUp', methods.moveItemUp);
@@ -31,6 +32,38 @@ const ControlledListBlock = ({ blockId, classNames = {}, components: { Icon, Lin
             methods.pushItem({});
         }
     }
+    const addItemToFront = ()=>{
+        methods.unshiftItem();
+        methods.triggerEvent({
+            name: 'onAdd',
+            event: {
+                index: 0,
+                item: undefined
+            }
+        });
+    };
+    const addItemToBack = ()=>{
+        const index = value.length;
+        methods.pushItem();
+        methods.triggerEvent({
+            name: 'onAdd',
+            event: {
+                index,
+                item: undefined
+            }
+        });
+    };
+    const removeItemAt = (index)=>{
+        const item = value[index];
+        methods.removeItem(index);
+        methods.triggerEvent({
+            name: 'onRemove',
+            event: {
+                index,
+                item
+            }
+        });
+    };
     return /*#__PURE__*/ React.createElement(List, {
         id: blockId,
         className: classNames.element,
@@ -61,7 +94,7 @@ const ControlledListBlock = ({ blockId, classNames = {}, components: { Icon, Lin
                 type: 'default',
                 ...properties.addItemButton
             },
-            onClick: ()=>methods.unshiftItem()
+            onClick: addItemToFront
         })),
         footer: !properties.addToFront && !properties.hideAddButton && /*#__PURE__*/ React.createElement("div", {
             style: {
@@ -86,7 +119,7 @@ const ControlledListBlock = ({ blockId, classNames = {}, components: { Icon, Lin
                 type: 'dashed',
                 ...properties.addItemButton
             },
-            onClick: ()=>methods.pushItem()
+            onClick: addItemToBack
         })),
         bordered: true,
         locale: {
@@ -102,24 +135,16 @@ const ControlledListBlock = ({ blockId, classNames = {}, components: { Icon, Lin
                 extra: !properties.hideRemoveButton && list.length > (properties.minItems ?? 0) && [
                     // eslint-disable-next-line react/jsx-key
                     /*#__PURE__*/ React.createElement("span", {
-                        style: {
-                            paddingLeft: properties.size === 'small' ? 2 : properties.size === 'large' ? 6 : 4,
-                            fontSize: properties.size === 'small' ? 16 : properties.size === 'large' ? 20 : 18
-                        }
+                        className: cn('lf-controlled-list-remove', classNames.removeIcon),
+                        style: styles.removeIcon
                     }, /*#__PURE__*/ React.createElement(Icon, {
                         blockId: `${blockId}_${i}_remove_icon`,
-                        classNames: {
-                            element: classNames.removeIcon
-                        },
                         events: events,
                         properties: {
                             name: 'AiOutlineMinusCircle',
                             ...properties.removeItemIcon
                         },
-                        styles: {
-                            element: styles.removeIcon
-                        },
-                        onClick: ()=>methods.removeItem(i)
+                        onClick: ()=>removeItemAt(i)
                     }))
                 ]
             }, item.content && item.content({

package/dist/blocks/ControlledList/meta.js

@@ -22,12 +22,16 @@
     slots: {
         content: 'Blocks rendered for each list item.'
     },
+    events: {
+        onAdd: 'Triggered after a new item is added via the add button. The event payload is `{ index, item }`, where `item` is the newly added value (`undefined` for an empty row).',
+        onRemove: 'Triggered after an item is removed via the remove icon. The event payload is `{ index, item }`, where `item` is the removed value captured before removal.'
+    },
     cssKeys: {
         element: 'The ControlledList element.',
         header: 'The ControlledList header.',
         footer: 'The ControlledList footer.',
         item: 'The ControlledList item.',
-        removeIcon: 'The remove item icon in the ControlledList.'
+        removeIcon: 'The remove-item icon wrapper. Defaults to the antd error color at `fontSizeLG`; override `color`, `font-size`, or spacing here.'
     },
     properties: {
         type: 'object',
@@ -69,7 +73,7 @@
                     'string',
                     'object'
                 ],
-                description: 'Custom remove item icon properties.',
+                description: 'Custom remove item icon properties. Defaults to `AiOutlineMinusCircle` at a standard size with the antd error color inherited from the icon wrapper — override via `class.removeIcon` / `style.removeIcon` for visual tweaks, or via this property to change the icon name itself.',
                 docs: {
                     displayType: 'icon'
                 }

package/dist/blocks/ControlledList/style.module.css

@@ -0,0 +1,35 @@
+/*
+  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.
+*/
+
+@layer components {
+  :global(.lf-controlled-list-remove) {
+    display: inline-flex;
+    align-items: center;
+    padding-left: var(--ant-padding-xs);
+    font-size: var(--ant-font-size-lg);
+    color: var(--ant-color-error);
+    cursor: pointer;
+    transition: color 0.2s;
+  }
+
+  :global(.lf-controlled-list-remove:hover) {
+    color: var(--ant-color-error-hover);
+  }
+
+  :global(.lf-controlled-list-remove:active) {
+    color: var(--ant-color-error-active);
+  }
+}

package/dist/blocks/DropdownButton/DropdownButton.js

@@ -62,10 +62,12 @@ function DropdownButtonBlock({ blockId, classNames = {}, components: { Icon, Sho
                 key: `divider-${i}`
             };
         }
+        const eventShortcut = item.eventName ? events[item.eventName]?.shortcut : undefined;
+        const itemShortcut = eventShortcut ?? item.shortcut;
         return {
             key: item.eventName ?? `item-${i}`,
-            label: /*#__PURE__*/ React.createElement("span", null, item.title, item.shortcut && /*#__PURE__*/ React.createElement(ShortcutBadge, {
-                shortcut: item.shortcut
+            label: /*#__PURE__*/ React.createElement("span", null, item.title, itemShortcut && /*#__PURE__*/ React.createElement(ShortcutBadge, {
+                shortcut: itemShortcut
             })),
             icon: item.icon ? /*#__PURE__*/ React.createElement(Icon, {
                 blockId: `${blockId}_icon_${i}`,
@@ -82,7 +84,10 @@ function DropdownButtonBlock({ blockId, classNames = {}, components: { Icon, Sho
             disabled: item.disabled
         };
     });
-    const shortcutItems = (properties.items ?? []).filter((item)=>item.shortcut && item.eventName && !item.disabled).map((item)=>({
+    // Item-level shortcut fallback for items that declare `shortcut` on properties
+    // rather than via `events.<eventName>.shortcut`. Skip items whose event already
+    // owns the shortcut — the framework-level shortcut manager handles those.
+    const propertyShortcutItems = (properties.items ?? []).filter((item)=>item.shortcut && item.eventName && !item.disabled && !events[item.eventName]?.shortcut).map((item)=>({
             key: item.eventName,
             shortcut: item.shortcut
         }));
@@ -94,12 +99,13 @@ function DropdownButtonBlock({ blockId, classNames = {}, components: { Icon, Sho
         methods
     ]);
     useItemShortcuts({
-        items: shortcutItems,
+        items: propertyShortcutItems,
         onMatch: onShortcutMatch
     });
     const onClickActionName = get(rename, 'events.onClick', {
         default: 'onClick'
     });
+    const onClickShortcut = events[onClickActionName]?.shortcut;
     const dropdownProps = {
         menu: {
             items,
@@ -162,7 +168,9 @@ function DropdownButtonBlock({ blockId, classNames = {}, components: { Icon, Sho
                 onClick: ()=>methods.triggerEvent({
                         name: onClickActionName
                     })
-            }, properties.title), /*#__PURE__*/ React.createElement(Dropdown, dropdownProps, /*#__PURE__*/ React.createElement(Button, {
+            }, properties.title, onClickShortcut && /*#__PURE__*/ React.createElement(ShortcutBadge, {
+                shortcut: onClickShortcut
+            })), /*#__PURE__*/ React.createElement(Dropdown, dropdownProps, /*#__PURE__*/ React.createElement(Button, {
                 color: resolvedColor,
                 variant: variant,
                 type: buttonType,

package/dist/blocks/DropdownButton/meta.js

@@ -26,7 +26,7 @@
         arrow: 'Dropdown arrow indicator.'
     },
     events: {
-        onClick: 'Trigger action when the button is clicked (split mode).',
+        onClick: 'Trigger action when the button is clicked (split mode). Renders a shortcut badge when a shortcut is configured on the event.',
         onOpenChange: 'Trigger action when dropdown opens or closes.'
     },
     properties: {
@@ -162,7 +162,7 @@
             },
             items: {
                 type: 'array',
-                description: 'Menu items. Each with an eventName that triggers a named event.',
+                description: 'Menu items. Each with an eventName that triggers a named event. Keyboard shortcuts can be configured via the standard `events.<eventName>.shortcut` schema (preferred) or via the item-level `shortcut` property — both render a badge next to the item label. The event-level shortcut takes precedence when both are set.',
                 items: {
                     type: 'object',
                     properties: {
@@ -201,7 +201,7 @@
                         },
                         shortcut: {
                             type: 'string',
-                            description: 'Keyboard shortcut. Binds the key and renders the badge.'
+                            description: 'Keyboard shortcut. Binds the key and renders the badge. Prefer configuring this via `events.<eventName>.shortcut` to follow the standard Lowdefy event schema — the event-level shortcut takes precedence when both are set.'
                         }
                     }
                 }

package/dist/blocks/PageSidebarLayout/PageSidebarLayout.js

@@ -126,7 +126,11 @@ const PageSidebarLayout = ({ basePath, blockId, classNames = {}, components: { I
                     styles: {
                         element: mergeObjects([
                             {
-                                borderInlineEnd: '1px solid var(--ant-color-border)'
+                                borderInlineEnd: '1px solid var(--ant-color-border)',
+                                position: 'sticky',
+                                top: 0,
+                                height: '100vh',
+                                alignSelf: 'flex-start'
                             },
                             styles.sider
                         ])
@@ -231,17 +235,18 @@ const PageSidebarLayout = ({ basePath, blockId, classNames = {}, components: { I
                                 style: {
                                     position: 'sticky',
                                     bottom: 0,
-                                    background: 'var(--ant-color-bg-container)',
-                                    padding: 8,
+                                    background: 'linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--ant-color-bg-container) 85%, transparent) 32px, color-mix(in srgb, var(--ant-color-bg-container) 95%, transparent) 100%)',
+                                    padding: '40px 8px 8px',
                                     display: 'flex',
                                     flexDirection: 'column',
-                                    alignItems: 'center'
+                                    alignItems: 'center',
+                                    gap: 8
                                 }
                             }, renderHeaderActions({
                                 blockId,
                                 classNames: {
                                     ...classNames,
-                                    headerActions: classNames.headerActions ?? 'flex flex-col items-center gap-4 py-4'
+                                    headerActions: classNames.headerActions ?? (openSiderState ? 'flex flex-col items-stretch gap-1 w-full' : 'flex flex-col items-center gap-4 py-4')
                                 },
                                 styles,
                                 properties,
@@ -252,7 +257,8 @@ const PageSidebarLayout = ({ basePath, blockId, classNames = {}, components: { I
                                     Link,
                                     ShortcutBadge
                                 },
-                                iconsColor: properties.iconsColor
+                                iconsColor: properties.iconsColor,
+                                expanded: openSiderState
                             }), /*#__PURE__*/ React.createElement(Link, {
                                 home: true
                             }, /*#__PURE__*/ React.createElement("img", {

package/dist/blocks/PageSidebarLayout/meta.js

@@ -255,6 +255,11 @@ export default {
                 description: 'Notification bell icon with badge. Shown in the sider on desktop and the mobile header on small screens. Renders when configured. Use the link property to navigate when clicked.',
                 additionalProperties: false,
                 properties: {
+                    title: {
+                        type: 'string',
+                        default: 'Notifications',
+                        description: 'Label shown next to the bell icon when the sider is expanded. Hidden on mobile header and collapsed sider.'
+                    },
                     link: {
                         type: 'object',
                         description: 'Link to navigate to when the notification bell is clicked.',
@@ -321,6 +326,11 @@ export default {
                 description: 'Profile avatar with optional dropdown menu. Shown in the sider on desktop and the mobile header on small screens. Renders when configured. Use with the _user operator to populate from the authenticated user.',
                 additionalProperties: false,
                 properties: {
+                    title: {
+                        type: 'string',
+                        default: 'Profile',
+                        description: 'Label shown next to the avatar when the sider is expanded. Hidden on mobile header and collapsed sider.'
+                    },
                     avatar: {
                         type: 'object',
                         description: 'Avatar display properties.',

package/dist/blocks/headerActions.js

@@ -28,7 +28,73 @@ function getDarkModeIcon() {
     if (pref === 'light') return 'AiOutlineSun';
     return 'AiOutlineLaptop';
 }
-function renderNotifications({ blockId, classNames, styles, properties, events, Icon, Link, iconsColor }) {
+function getDarkModeLabel() {
+    const pref = getDarkModePreference();
+    if (pref === 'dark') return 'Dark mode';
+    if (pref === 'light') return 'Light mode';
+    return 'System';
+}
+// Wraps a header action row for the expanded sider. Icon cell has a fixed
+// basis so bell / avatar / sun share a vertical line regardless of their
+// own intrinsic size; label fills the remaining width. Row gets a subtle
+// hover background so it reads as interactive (matches menu items above).
+const EXPANDED_ROW_BASE = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 12,
+    padding: '8px 12px',
+    width: '100%',
+    borderRadius: 6,
+    transition: 'background 0.15s'
+};
+const EXPANDED_ROW_BUTTON_RESET = {
+    background: 'transparent',
+    border: 'none',
+    textAlign: 'left',
+    font: 'inherit',
+    color: 'inherit'
+};
+function ExpandedRow({ children, label, className, style, onClick }) {
+    // `onClick` is only used when the row stands alone as the click target
+    // (e.g., dark-mode toggle). Notifications wraps this in a <Link> and
+    // profile wraps it in a <Dropdown> — in those cases interactivity comes
+    // from the parent, but the row should still hover-highlight.
+    const Tag = onClick ? 'button' : 'div';
+    const [hover, setHover] = React.useState(false);
+    const rowStyle = {
+        ...EXPANDED_ROW_BASE,
+        cursor: 'pointer',
+        ...onClick ? EXPANDED_ROW_BUTTON_RESET : null,
+        ...hover ? {
+            background: 'color-mix(in srgb, var(--ant-color-text) 6%, transparent)'
+        } : null,
+        ...style
+    };
+    return /*#__PURE__*/ React.createElement(Tag, {
+        type: onClick ? 'button' : undefined,
+        className: className,
+        style: rowStyle,
+        onClick: onClick,
+        onMouseEnter: ()=>setHover(true),
+        onMouseLeave: ()=>setHover(false)
+    }, /*#__PURE__*/ React.createElement("span", {
+        style: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flex: '0 0 24px',
+            lineHeight: 1
+        }
+    }, children), /*#__PURE__*/ React.createElement("span", {
+        style: {
+            flex: 1,
+            minWidth: 0,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis'
+        }
+    }, label));
+}
+function renderNotifications({ blockId, classNames, styles, properties, events, Icon, Link, iconsColor, expanded }) {
     if (type.isNone(properties.notifications)) return null;
     const notif = properties.notifications;
     const badge = /*#__PURE__*/ React.createElement(Badge, {
@@ -55,6 +121,26 @@ function renderNotifications({ blockId, classNames, styles, properties, events,
         }
     }));
     const link = notif.link;
+    if (expanded) {
+        const row = /*#__PURE__*/ React.createElement(ExpandedRow, {
+            className: classNames.notifications,
+            style: styles.notifications,
+            label: notif.title ?? 'Notifications'
+        }, badge);
+        if (link) {
+            return /*#__PURE__*/ React.createElement(Link, {
+                id: `${blockId}_notifications_link`,
+                pageId: link.pageId,
+                url: link.url,
+                newTab: link.newTab,
+                style: {
+                    display: 'block',
+                    color: 'inherit'
+                }
+            }, row);
+        }
+        return row;
+    }
     if (link) {
         return /*#__PURE__*/ React.createElement(Link, {
             id: `${blockId}_notifications_link`,
@@ -76,7 +162,7 @@ function renderNotifications({ blockId, classNames, styles, properties, events,
         }
     }, badge);
 }
-function renderProfile({ blockId, classNames, styles, properties, methods, events, Icon, Link, ShortcutBadge }) {
+function renderProfile({ blockId, classNames, styles, properties, methods, events, Icon, Link, ShortcutBadge, expanded }) {
     if (type.isNone(properties.profile)) return null;
     const prof = properties.profile;
     const avatarProps = prof.avatar ?? {};
@@ -99,12 +185,17 @@ function renderProfile({ blockId, classNames, styles, properties, methods, event
             }
         })
     }, avatarProps.content);
+    const trigger = expanded ? /*#__PURE__*/ React.createElement(ExpandedRow, {
+        className: classNames.profile,
+        style: styles.profile,
+        label: prof.title ?? 'Profile'
+    }, avatar) : /*#__PURE__*/ React.createElement("div", {
+        className: classNames.profile,
+        style: styles.profile
+    }, avatar);
     const links = prof.links ?? [];
     if (links.length === 0) {
-        return /*#__PURE__*/ React.createElement("div", {
-            className: classNames.profile,
-            style: styles.profile
-        }, avatar);
+        return trigger;
     }
     const items = buildMenuItems({
         links,
@@ -119,10 +210,8 @@ function renderProfile({ blockId, classNames, styles, properties, methods, event
     });
     const linkMap = flattenLinks(links);
     return /*#__PURE__*/ React.createElement(Dropdown, {
-        className: classNames.profile,
         style: {
-            cursor: 'pointer',
-            ...styles.profile
+            cursor: 'pointer'
         },
         menu: {
             items,
@@ -139,10 +228,11 @@ function renderProfile({ blockId, classNames, styles, properties, methods, event
                 });
             }
         },
+        // Row-style trigger (expanded) expects click; small avatar (collapsed) uses hover.
         trigger: [
-            prof.trigger ?? 'hover'
+            prof.trigger ?? (expanded ? 'click' : 'hover')
         ],
-        placement: prof.placement ?? 'bottomRight',
+        placement: prof.placement ?? (expanded ? 'topRight' : 'bottomRight'),
         arrow: prof.arrow,
         popupClassName: classNames.profileMenu,
         popupStyle: styles.profileMenu,
@@ -152,20 +242,10 @@ function renderProfile({ blockId, classNames, styles, properties, methods, event
                     open
                 }
             })
-    }, /*#__PURE__*/ React.createElement("div", null, avatar));
+    }, /*#__PURE__*/ React.createElement("div", null, trigger));
 }
-function renderDarkModeToggle({ blockId, classNames, styles, methods, events, Icon, iconsColor }) {
-    return /*#__PURE__*/ React.createElement("div", {
-        className: classNames.darkModeToggle,
-        style: {
-            cursor: 'pointer',
-            lineHeight: 1,
-            ...styles.darkModeToggle
-        },
-        onClick: ()=>methods.triggerEvent({
-                name: '__toggleDarkMode'
-            })
-    }, /*#__PURE__*/ React.createElement(Icon, {
+function renderDarkModeToggle({ blockId, classNames, styles, methods, events, Icon, iconsColor, expanded }) {
+    const icon = /*#__PURE__*/ React.createElement(Icon, {
         blockId: `${blockId}_dark_mode_toggle_icon`,
         events: events,
         properties: {
@@ -177,9 +257,30 @@ function renderDarkModeToggle({ blockId, classNames, styles, methods, events, Ic
                 color: iconsColor
             }
         }
-    }));
+    });
+    if (expanded) {
+        return /*#__PURE__*/ React.createElement(ExpandedRow, {
+            className: classNames.darkModeToggle,
+            style: styles.darkModeToggle,
+            label: getDarkModeLabel(),
+            onClick: ()=>methods.triggerEvent({
+                    name: '__toggleDarkMode'
+                })
+        }, icon);
+    }
+    return /*#__PURE__*/ React.createElement("div", {
+        className: classNames.darkModeToggle,
+        style: {
+            cursor: 'pointer',
+            lineHeight: 1,
+            ...styles.darkModeToggle
+        },
+        onClick: ()=>methods.triggerEvent({
+                name: '__toggleDarkMode'
+            })
+    }, icon);
 }
-function renderHeaderActions({ blockId, classNames = {}, styles = {}, properties, methods, events, components: { Icon, Link, ShortcutBadge }, iconsColor }) {
+function renderHeaderActions({ blockId, classNames = {}, styles = {}, properties, methods, events, components: { Icon, Link, ShortcutBadge }, iconsColor, expanded = false }) {
     const hasNotifications = !type.isNone(properties.notifications);
     const hasProfile = !type.isNone(properties.profile);
     const hasDarkMode = properties.darkModeToggle;
@@ -194,10 +295,12 @@ function renderHeaderActions({ blockId, classNames = {}, styles = {}, properties
         Icon,
         Link,
         ShortcutBadge,
-        iconsColor
+        iconsColor,
+        expanded
     };
+    const defaultClassName = expanded ? 'flex flex-col items-stretch gap-1 w-full' : 'flex items-center gap-4 ml-4';
     return /*#__PURE__*/ React.createElement("div", {
-        className: classNames.headerActions ?? 'flex items-center gap-4 ml-4',
+        className: classNames.headerActions ?? defaultClassName,
         style: styles.headerActions
     }, hasNotifications && renderNotifications(ctx), hasProfile && renderProfile(ctx), hasDarkMode && renderDarkModeToggle(ctx));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lowdefy/blocks-antd",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "license": "Apache-2.0",
   "description": "Lowdefy Ant Design Blocks",
   "homepage": "https://lowdefy.com",
@@ -45,8 +45,8 @@
   ],
   "dependencies": {
     "@ant-design/icons": "6.1.0",
-    "@lowdefy/block-utils": "5.1.0",
-    "@lowdefy/helpers": "5.1.0",
+    "@lowdefy/block-utils": "5.2.0",
+    "@lowdefy/helpers": "5.2.0",
     "@rc-component/motion": "1.3.1",
     "classnames": "2.3.2",
     "dayjs": "1.11.19",
@@ -58,9 +58,9 @@
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@lowdefy/block-dev-e2e": "5.1.0",
-    "@lowdefy/e2e-utils": "5.1.0",
-    "@lowdefy/node-utils": "5.1.0",
+    "@lowdefy/block-dev-e2e": "5.2.0",
+    "@lowdefy/e2e-utils": "5.2.0",
+    "@lowdefy/node-utils": "5.2.0",
     "@playwright/test": "1.50.1",
     "@swc/cli": "0.8.0",
     "@swc/core": "1.15.18",