@lowdefy/blocks-antd 5.0.0 → 5.2.0

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/dist/blocks.js

@@ -56,6 +56,7 @@ export { default as MultipleSelector } from './blocks/MultipleSelector/MultipleS
 export { default as Notification } from './blocks/Notification/Notification.js';
 export { default as NumberInput } from './blocks/NumberInput/NumberInput.js';
 export { default as PageHeaderMenu } from './blocks/PageHeaderMenu/PageHeaderMenu.js';
+export { default as PageSidebarLayout } from './blocks/PageSidebarLayout/PageSidebarLayout.js';
 export { default as PageSiderMenu } from './blocks/PageSiderMenu/PageSiderMenu.js';
 export { default as Pagination } from './blocks/Pagination/Pagination.js';
 export { default as Paragraph } from './blocks/Paragraph/Paragraph.js';

package/dist/metas.js

@@ -56,6 +56,7 @@ export { default as MultipleSelector } from './blocks/MultipleSelector/meta.js';
 export { default as Notification } from './blocks/Notification/meta.js';
 export { default as NumberInput } from './blocks/NumberInput/meta.js';
 export { default as PageHeaderMenu } from './blocks/PageHeaderMenu/meta.js';
+export { default as PageSidebarLayout } from './blocks/PageSidebarLayout/meta.js';
 export { default as PageSiderMenu } from './blocks/PageSiderMenu/meta.js';
 export { default as Pagination } from './blocks/Pagination/meta.js';
 export { default as Paragraph } from './blocks/Paragraph/meta.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lowdefy/blocks-antd",
-  "version": "5.0.0",
+  "version": "5.2.0",
   "license": "Apache-2.0",
   "description": "Lowdefy Ant Design Blocks",
   "homepage": "https://lowdefy.com",
@@ -45,12 +45,12 @@
   ],
   "dependencies": {
     "@ant-design/icons": "6.1.0",
-    "@lowdefy/block-utils": "5.0.0",
-    "@lowdefy/helpers": "5.0.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",
-    "minisearch": "^7.0.0"
+    "minisearch": "7.2.0"
   },
   "peerDependencies": {
     "antd": ">=6",
@@ -58,9 +58,9 @@
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@lowdefy/block-dev-e2e": "5.0.0",
-    "@lowdefy/e2e-utils": "5.0.0",
-    "@lowdefy/node-utils": "5.0.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",