@lowdefy/blocks-antd 5.3.0 → 5.4.0

package/dist/blocks/buildMenuItems.js

@@ -13,34 +13,40 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React from 'react';
+import { cn } from '@lowdefy/block-utils';
+import normalizeItemClassAndStyle from './normalizeItemClassAndStyle.js';
 function getTitle({ id, properties, pageId, url }) {
     return properties?.title ?? pageId ?? url ?? id;
 }
-function buildMenuItems({ links, components: { Icon, Link, ShortcutBadge }, classNames, styles, events }) {
+function defaultGetKey(link) {
+    return link.id;
+}
+function buildMenuItems({ links, components: { Icon, Link, ShortcutBadge }, classNames, styles, events, isTopLevel = true, wrapGroupLabel, nestedGroupAsGroup = false, getKey = defaultGetKey }) {
     return (links ?? []).map((link, i)=>{
+        const item = normalizeItemClassAndStyle(link);
         if (link.type === 'MenuDivider') {
             return {
                 type: 'divider',
                 key: link.id ?? i,
                 dashed: link.properties?.dashed,
-                style: link.style
+                className: cn(classNames?.item, item.class.element) || undefined,
+                style: item.style.element
             };
         }
         if (link.type === 'MenuGroup') {
-            return {
-                key: link.id,
-                label: getTitle(link),
-                icon: link.properties?.icon ? /*#__PURE__*/ React.createElement(Icon, {
-                    blockId: `${link.id}_icon`,
-                    classNames: {
-                        element: classNames.itemIcon
-                    },
-                    events: events,
-                    properties: link.properties.icon,
-                    styles: {
-                        element: styles.itemIcon
-                    }
-                }) : undefined,
+            const labelText = getTitle(link);
+            const groupLabel = wrapGroupLabel ? wrapGroupLabel({
+                link,
+                labelText,
+                classNames: item.class.label,
+                styles: item.style.label
+            }) : labelText;
+            const renderAsGroup = !isTopLevel && nestedGroupAsGroup;
+            const groupItem = {
+                key: getKey(link),
+                label: groupLabel,
+                className: cn(classNames?.item, item.class.element) || undefined,
+                style: item.style.element,
                 children: buildMenuItems({
                     links: link.links,
                     components: {
@@ -50,35 +56,92 @@ function buildMenuItems({ links, components: { Icon, Link, ShortcutBadge }, clas
                     },
                     classNames,
                     styles,
-                    events
+                    events,
+                    isTopLevel: false,
+                    wrapGroupLabel,
+                    nestedGroupAsGroup,
+                    getKey
                 })
             };
+            if (renderAsGroup) {
+                // antd MenuItemGroupType supports neither icon, disabled, title, nor popupClassName.
+                groupItem.type = 'group';
+                return groupItem;
+            }
+            // SubMenu — supports icon, disabled, title (tooltip when collapsed), popupClassName.
+            groupItem.disabled = link.properties?.disabled;
+            groupItem.title = link.properties?.tooltip;
+            if (link.properties?.icon) {
+                groupItem.icon = /*#__PURE__*/ React.createElement(Icon, {
+                    blockId: `${link.id}_icon`,
+                    classNames: {
+                        element: cn(classNames?.itemIcon, item.class.icon) || undefined
+                    },
+                    events: events,
+                    properties: link.properties.icon,
+                    styles: {
+                        element: {
+                            ...styles?.itemIcon,
+                            ...item.style.icon
+                        }
+                    }
+                });
+            }
+            if (item.class.popup) groupItem.popupClassName = item.class.popup;
+            return groupItem;
         }
         // MenuLink (default)
+        // Strip class/style from the spread so slot-keyed values don't reach Link as raw props.
+        const { class: _omitClass, style: _omitStyle, ...linkRest } = link;
+        const extra = link.properties?.extra;
+        // antd v6's `extra` prop triggers a `display: inline-flex; width: 100%` layout
+        // on `.ant-menu-title-content-with-extra` that interacts badly with the Lowdefy
+        // `<Link>` wrapper (collapses the label). Render extra ourselves inside the Link
+        // using float, which works regardless of the parent's display mode.
         return {
-            key: link.id,
+            key: getKey(link),
             danger: link.properties?.danger,
             disabled: link.properties?.disabled,
+            title: link.properties?.tooltip,
+            className: cn(classNames?.item, item.class.element) || undefined,
+            style: item.style.element,
             icon: link.properties?.icon ? /*#__PURE__*/ React.createElement(Icon, {
                 blockId: `${link.id}_icon`,
                 classNames: {
-                    element: classNames.itemIcon
+                    element: cn(classNames?.itemIcon, item.class.icon) || undefined
                 },
                 events: events,
                 properties: link.properties.icon,
                 styles: {
-                    element: styles.itemIcon
+                    element: {
+                        ...styles?.itemIcon,
+                        ...item.style.icon
+                    }
                 }
             }) : undefined,
             label: /*#__PURE__*/ React.createElement(Link, {
+                ...linkRest,
                 id: link.pageId ?? link.id ?? i,
-                style: link.style,
+                className: item.class.label || undefined,
+                style: item.style.label,
                 url: link.url ?? link.properties?.url,
-                newTab: link.newTab ?? link.properties?.newTab,
-                ...link
-            }, getTitle(link), /*#__PURE__*/ React.createElement(ShortcutBadge, {
-                shortcut: link.properties?.shortcut
-            }))
+                newTab: link.newTab ?? link.properties?.newTab
+            }, link.properties?.shortcut ? /*#__PURE__*/ React.createElement("span", {
+                style: {
+                    float: 'right',
+                    marginInlineStart: 12
+                }
+            }, /*#__PURE__*/ React.createElement(ShortcutBadge, {
+                shortcut: link.properties.shortcut
+            })) : null, extra ? /*#__PURE__*/ React.createElement("span", {
+                style: {
+                    float: 'right',
+                    marginInlineStart: 12,
+                    opacity: 0.65,
+                    fontSize: '0.9em',
+                    pointerEvents: 'none'
+                }
+            }, extra) : null, getTitle(link))
         };
     });
 }

package/dist/blocks/headerActions.js

@@ -34,6 +34,17 @@ function getDarkModeLabel() {
     if (pref === 'light') return 'Light mode';
     return 'System';
 }
+function getSupportedLocales() {
+    return window.__lowdefy_supported_locales ?? [];
+}
+function getActiveLocaleCode() {
+    return window.__lowdefy_locale;
+}
+function getActiveLocaleLabel() {
+    const active = getActiveLocaleCode();
+    const match = getSupportedLocales().find((l)=>l.code === active);
+    return match?.label ?? active ?? '';
+}
 // 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
@@ -280,11 +291,68 @@ function renderDarkModeToggle({ blockId, classNames, styles, methods, events, Ic
             })
     }, icon);
 }
+function renderLocaleSelector({ blockId, classNames, styles, methods, events, Icon, iconsColor, expanded }) {
+    const supported = getSupportedLocales();
+    if (supported.length === 0) return null;
+    const active = getActiveLocaleCode();
+    const items = supported.map((locale)=>({
+            key: locale.code,
+            label: locale.label ?? locale.code
+        }));
+    const icon = /*#__PURE__*/ React.createElement(Icon, {
+        blockId: `${blockId}_locale_selector_icon`,
+        events: events,
+        properties: {
+            name: 'AiOutlineGlobal'
+        },
+        styles: {
+            element: {
+                fontSize: 16,
+                color: iconsColor
+            }
+        }
+    });
+    const trigger = expanded ? /*#__PURE__*/ React.createElement(ExpandedRow, {
+        className: classNames.localeSelector,
+        style: styles.localeSelector,
+        label: getActiveLocaleLabel()
+    }, icon) : /*#__PURE__*/ React.createElement("div", {
+        className: classNames.localeSelector,
+        style: {
+            cursor: 'pointer',
+            lineHeight: 1,
+            ...styles.localeSelector
+        }
+    }, icon);
+    return /*#__PURE__*/ React.createElement(Dropdown, {
+        menu: {
+            items,
+            selectedKeys: active ? [
+                active
+            ] : [],
+            onClick: ({ key })=>{
+                methods.triggerEvent({
+                    name: '__setLocale',
+                    event: {
+                        locale: key
+                    }
+                });
+            }
+        },
+        trigger: [
+            expanded ? 'click' : 'hover'
+        ],
+        placement: expanded ? 'topRight' : 'bottomRight',
+        popupClassName: classNames.localeSelectorMenu,
+        popupStyle: styles.localeSelectorMenu
+    }, /*#__PURE__*/ React.createElement("div", null, trigger));
+}
 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;
-    if (!hasNotifications && !hasProfile && !hasDarkMode) return null;
+    const hasLocaleSelector = properties.localeSelector && getSupportedLocales().length > 0;
+    if (!hasNotifications && !hasProfile && !hasDarkMode && !hasLocaleSelector) return null;
     const ctx = {
         blockId,
         classNames,
@@ -302,7 +370,7 @@ function renderHeaderActions({ blockId, classNames = {}, styles = {}, properties
     return /*#__PURE__*/ React.createElement("div", {
         className: classNames.headerActions ?? defaultClassName,
         style: styles.headerActions
-    }, hasNotifications && renderNotifications(ctx), hasProfile && renderProfile(ctx), hasDarkMode && renderDarkModeToggle(ctx));
+    }, hasNotifications && renderNotifications(ctx), hasProfile && renderProfile(ctx), hasDarkMode && renderDarkModeToggle(ctx), hasLocaleSelector && renderLocaleSelector(ctx));
 }
 function registerDarkModeMethod(methods) {
     methods.registerEvent({
@@ -320,4 +388,20 @@ function registerDarkModeMethod(methods) {
         });
     });
 }
-export { getDarkMode, renderHeaderActions, registerDarkModeMethod };
+function registerLocaleMethod(methods) {
+    methods.registerEvent({
+        name: '__setLocale',
+        actions: [
+            {
+                id: '__set_locale',
+                type: 'SetLocale',
+                params: {
+                    locale: {
+                        _event: 'locale'
+                    }
+                }
+            }
+        ]
+    });
+}
+export { getDarkMode, renderHeaderActions, registerDarkModeMethod, registerLocaleMethod };

package/dist/blocks/normalizeItemClassAndStyle.js

@@ -0,0 +1,77 @@
+/*
+  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 { type } from '@lowdefy/helpers';
+import { cn } from '@lowdefy/block-utils';
+const ITEM_SLOT_KEYS = [
+    'element',
+    'icon',
+    'label',
+    'popup'
+];
+function isSlotKeyed(value) {
+    return Object.keys(value).some((k)=>k.startsWith('.'));
+}
+function partitionStyle(style) {
+    const slots = {
+        element: undefined,
+        icon: undefined,
+        label: undefined,
+        popup: undefined
+    };
+    if (type.isNone(style)) return slots;
+    if (!type.isObject(style)) return slots;
+    if (!isSlotKeyed(style)) {
+        slots.element = style;
+        return slots;
+    }
+    for (const [key, value] of Object.entries(style)){
+        if (!key.startsWith('.')) continue;
+        const slot = key.slice(1);
+        if (ITEM_SLOT_KEYS.includes(slot)) slots[slot] = value;
+    }
+    return slots;
+}
+function partitionClass(classValue) {
+    const slots = {
+        element: undefined,
+        icon: undefined,
+        label: undefined,
+        popup: undefined
+    };
+    if (type.isNone(classValue)) return slots;
+    if (type.isString(classValue) || type.isArray(classValue)) {
+        slots.element = cn(classValue);
+        return slots;
+    }
+    if (!type.isObject(classValue)) return slots;
+    if (!isSlotKeyed(classValue)) {
+        slots.element = cn(classValue);
+        return slots;
+    }
+    for (const [key, value] of Object.entries(classValue)){
+        if (!key.startsWith('.')) continue;
+        const slot = key.slice(1);
+        if (ITEM_SLOT_KEYS.includes(slot)) slots[slot] = cn(value);
+    }
+    return slots;
+}
+function normalizeItemClassAndStyle(link) {
+    return {
+        class: partitionClass(link?.class),
+        style: partitionStyle(link?.style)
+    };
+}
+export default normalizeItemClassAndStyle;
+export { partitionClass, partitionStyle };

package/dist/blocks.js

@@ -45,6 +45,7 @@ export { default as Footer } from './blocks/Footer/Footer.js';
 export { default as Header } from './blocks/Header/Header.js';
 export { default as Label } from './blocks/Label/Label.js';
 export { default as Layout } from './blocks/Layout/Layout.js';
+export { default as ListSelector } from './blocks/ListSelector/ListSelector.js';
 export { default as Masonry } from './blocks/Masonry/Masonry.js';
 export { default as MasonryList } from './blocks/MasonryList/MasonryList.js';
 export { default as Menu } from './blocks/Menu/Menu.js';
@@ -85,6 +86,8 @@ export { default as TextArea } from './blocks/TextArea/TextArea.js';
 export { default as TextInput } from './blocks/TextInput/TextInput.js';
 export { default as Title } from './blocks/Title/Title.js';
 export { default as TitleInput } from './blocks/TitleInput/TitleInput.js';
+export { default as TreeInput } from './blocks/TreeInput/TreeInput.js';
+export { default as TreeMultipleSelector } from './blocks/TreeMultipleSelector/TreeMultipleSelector.js';
 export { default as TreeSelector } from './blocks/TreeSelector/TreeSelector.js';
 export { default as Tooltip } from './blocks/Tooltip/Tooltip.js';
 export { default as Tour } from './blocks/Tour/Tour.js';

package/dist/e2e.js

@@ -41,6 +41,7 @@ export { default as Footer } from './blocks/Footer/e2e.js';
 export { default as Header } from './blocks/Header/e2e.js';
 export { default as Label } from './blocks/Label/e2e.js';
 export { default as Layout } from './blocks/Layout/e2e.js';
+export { default as ListSelector } from './blocks/ListSelector/e2e.js';
 export { default as Menu } from './blocks/Menu/e2e.js';
 export { default as Message } from './blocks/Message/e2e.js';
 export { default as MobileMenu } from './blocks/MobileMenu/e2e.js';
@@ -75,5 +76,7 @@ export { default as TimelineList } from './blocks/TimelineList/e2e.js';
 export { default as Title } from './blocks/Title/e2e.js';
 export { default as TitleInput } from './blocks/TitleInput/e2e.js';
 export { default as Tooltip } from './blocks/Tooltip/e2e.js';
+export { default as TreeInput } from './blocks/TreeInput/e2e.js';
+export { default as TreeMultipleSelector } from './blocks/TreeMultipleSelector/e2e.js';
 export { default as TreeSelector } from './blocks/TreeSelector/e2e.js';
 export { default as WeekSelector } from './blocks/WeekSelector/e2e.js';

package/dist/getContrastTextColor.js

@@ -0,0 +1,45 @@
+/*
+  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 { type } from '@lowdefy/helpers';
+// Returns '#000' or '#fff' for best contrast against a hex background color.
+// Returns undefined for non-hex values (named colors, rgb(), etc.) so the
+// caller can fall back to antd's default solid text color.
+function getContrastTextColor(color) {
+    if (!type.isString(color)) return undefined;
+    const hex = color.trim().replace(/^#/, '');
+    let r;
+    let g;
+    let b;
+    if (hex.length === 3) {
+        r = parseInt(hex[0] + hex[0], 16);
+        g = parseInt(hex[1] + hex[1], 16);
+        b = parseInt(hex[2] + hex[2], 16);
+    } else if (hex.length === 6 || hex.length === 8) {
+        r = parseInt(hex.slice(0, 2), 16);
+        g = parseInt(hex.slice(2, 4), 16);
+        b = parseInt(hex.slice(4, 6), 16);
+    } else {
+        return undefined;
+    }
+    if ([
+        r,
+        g,
+        b
+    ].some((n)=>Number.isNaN(n))) return undefined;
+    // YIQ perceptual brightness: dark text on light backgrounds, light text on dark.
+    const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+    return yiq >= 128 ? '#000' : '#fff';
+}
+export default getContrastTextColor;

package/dist/getOptionColorStyle.js

@@ -0,0 +1,36 @@
+/*
+  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 getContrastTextColor from './getContrastTextColor.js';
+// Color styles for a selected selector option, by variant.
+// outline: color the border/text + a low-opacity tint of the color.
+// solid: fill with the color + auto-contrast text.
+// `color` may be a CSS value such as 'var(--ant-color-primary)' for the active
+// primary when no explicit color is set.
+function getOptionColorStyle({ color, isOutline }) {
+    if (isOutline) {
+        return {
+            color,
+            borderColor: color,
+            backgroundColor: `color-mix(in srgb, ${color} 12%, transparent)`
+        };
+    }
+    const contrast = getContrastTextColor(color);
+    return {
+        backgroundColor: color,
+        borderColor: color,
+        color: contrast ?? '#fff'
+    };
+}
+export default getOptionColorStyle;

package/dist/getSelectedIndex.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 { get, type } from '@lowdefy/helpers';
+import serializeSelectorValue from './serializeSelectorValue.js';
+// Maps the current block value to the index (or indices) of the matching entry built by
+// getSelectorOptions. Matching is by identity: when `primaryKey` names a field, that field is
+// projected from both the stored value and each entry's value before comparison; with no
+// `primaryKey` the whole value is compared (the original `value` behaviour, which also matches
+// object-valued options). `valueKey` is only a build-time extraction key in getSelectorOptions —
+// by match time the stored value is already the unwrapped entry value, so it must not drive
+// identity here (reusing it projected a missing `.value` off the bare value and broke matching).
+const serialize = serializeSelectorValue;
+const getSelectedIndex = (value, entries, { properties = {}, multiple } = {})=>{
+    const { primaryKey } = properties;
+    const project = (val)=>type.isString(primaryKey) && type.isObject(val) ? get(val, primaryKey) : val;
+    const idOfValue = (v)=>project(v);
+    const idOfEntry = (entry)=>project(type.isPrimitive(entry) ? entry : entry.value);
+    const findIndex = (v)=>{
+        const target = serialize(idOfValue(v));
+        for(let i = 0; i < entries.length; i += 1){
+            if (serialize(idOfEntry(entries[i])) === target) return `${i}`;
+        }
+        return undefined;
+    };
+    if (multiple) {
+        return (type.isArray(value) ? value : []).map((v)=>findIndex(v));
+    }
+    return findIndex(value);
+};
+export default getSelectedIndex;

package/dist/getSelectorOptions.js

@@ -0,0 +1,67 @@
+/*
+  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 { get, type } from '@lowdefy/helpers';
+import { nunjucksFunction } from '@lowdefy/nunjucks';
+import serializeSelectorValue from './serializeSelectorValue.js';
+// Selectors can be driven two ways:
+//  - `options`: an array of primitives or { label, value } pairs (the original model).
+//  - `data` + `html`: raw rows rendered through a Nunjucks template, where `valueKey` names the
+//    field stored as the value (omitted -> the whole row).
+// Both are normalised here into the option shape the selectors already render: an array of
+// primitives or objects carrying `label` (an html string) and `value`, plus any per-option extras
+// (color, disabled, style, filterString, icon, tag) the blocks read.
+// The identity used to de-duplicate options, kept symmetric with getSelectedIndex: project
+// `primaryKey` from each entry's value, or compare the whole value when no `primaryKey` is set.
+// `valueKey` has already been applied to produce `entry.value`, so it must not drive identity
+// (projecting it off the wrapper entry yielded `undefined` for every option and collapsed them).
+function identityOf(entry, primaryKey) {
+    const value = type.isPrimitive(entry) ? entry : entry.value;
+    return type.isString(primaryKey) && type.isObject(value) ? get(value, primaryKey) : value;
+}
+function dedupe(entries, primaryKey) {
+    const seen = new Set();
+    return entries.filter((entry)=>{
+        const id = serializeSelectorValue(identityOf(entry, primaryKey));
+        if (seen.has(id)) return false;
+        seen.add(id);
+        return true;
+    });
+}
+const getSelectorOptions = ({ properties })=>{
+    const { data, options, valueKey, primaryKey, html } = properties;
+    if (type.isArray(data)) {
+        const template = type.isString(html) ? nunjucksFunction(html) : null;
+        const entries = data.map((item, index)=>{
+            const value = type.isString(valueKey) && type.isObject(item) ? get(item, valueKey) : item;
+            const label = template ? template({
+                item,
+                index
+            }) : `${value}`;
+            return {
+                ...type.isObject(item) ? item : {},
+                label,
+                value
+            };
+        });
+        return dedupe(entries, primaryKey);
+    }
+    const vk = type.isString(valueKey) ? valueKey : 'value';
+    const entries = (options ?? []).map((opt)=>type.isPrimitive(opt) ? opt : {
+            ...opt,
+            value: get(opt, vk)
+        });
+    return dedupe(entries, primaryKey);
+};
+export default getSelectorOptions;