@lowdefy/blocks-antd 5.3.0 → 5.4.0

package/dist/blocks/DropdownMenu/meta.js

@@ -94,12 +94,24 @@
                             description: 'Open link in new tab.'
                         },
                         style: {
-                            type: 'object',
-                            description: 'Css style applied to the link.',
+                            type: [
+                                'object',
+                                'string',
+                                'array'
+                            ],
+                            description: 'CSS styles for the menu item. Use a flat object for the item wrapper, or dot-prefixed slot keys (`.element`, `.icon`, `.label`).',
                             docs: {
                                 displayType: 'yaml'
                             }
                         },
+                        class: {
+                            type: [
+                                'string',
+                                'array',
+                                'object'
+                            ],
+                            description: 'CSS classes for the menu item. Flat applies to the item wrapper; use dot-prefixed slot keys to target parts.'
+                        },
                         properties: {
                             type: 'object',
                             description: 'Properties for the menu item.',
@@ -128,6 +140,14 @@
                                     default: false,
                                     description: 'Disable the menu item.'
                                 },
+                                tooltip: {
+                                    type: 'string',
+                                    description: 'Tooltip text shown when the menu is collapsed.'
+                                },
+                                extra: {
+                                    type: 'string',
+                                    description: 'Free-form right-aligned label on a MenuLink. For real keybindings use `shortcut`; when both are set, `shortcut` sits to the right of `extra`.'
+                                },
                                 dashed: {
                                     type: 'boolean',
                                     default: false,
@@ -135,7 +155,7 @@
                                 },
                                 shortcut: {
                                     type: 'string',
-                                    description: 'Keyboard shortcut to select this menu item. Renders a shortcut badge next to the label. Use "mod" for Cmd/Ctrl.'
+                                    description: 'Keyboard shortcut for this menu item. Renders a kbd badge floated to the far right of the item AND wires the key handler. Use "mod" for Cmd/Ctrl.'
                                 }
                             }
                         },
@@ -175,12 +195,24 @@
                                         description: 'Open link in new tab.'
                                     },
                                     style: {
-                                        type: 'object',
-                                        description: 'Css style applied to the link.',
+                                        type: [
+                                            'object',
+                                            'string',
+                                            'array'
+                                        ],
+                                        description: 'CSS styles for the menu item. Flat or dot-prefixed slot keys (`.element`, `.icon`, `.label`).',
                                         docs: {
                                             displayType: 'yaml'
                                         }
                                     },
+                                    class: {
+                                        type: [
+                                            'string',
+                                            'array',
+                                            'object'
+                                        ],
+                                        description: 'CSS classes for the menu item.'
+                                    },
                                     properties: {
                                         type: 'object',
                                         description: 'Properties for the menu item.',
@@ -209,6 +241,14 @@
                                                 default: false,
                                                 description: 'Disable the item.'
                                             },
+                                            tooltip: {
+                                                type: 'string',
+                                                description: 'Tooltip text shown when the menu is collapsed.'
+                                            },
+                                            extra: {
+                                                type: 'string',
+                                                description: 'Free-form right-aligned label on a MenuLink. For real keybindings use `shortcut`.'
+                                            },
                                             dashed: {
                                                 type: 'boolean',
                                                 default: false,
@@ -216,7 +256,7 @@
                                             },
                                             shortcut: {
                                                 type: 'string',
-                                                description: 'Keyboard shortcut. Renders a shortcut badge next to the label. Use "mod" for Cmd/Ctrl.'
+                                                description: 'Keyboard shortcut. Renders a kbd badge floated to the far right and wires the key handler. Use "mod" for Cmd/Ctrl.'
                                             }
                                         }
                                     }

package/dist/blocks/Label/Label.js

@@ -16,7 +16,8 @@
 // MIT Copyright (c) 2015-present Ant UED, https://xtech.antfin.com/ - 2020-09-08
 import React from 'react';
 import { renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
-import { Col, Row } from 'antd';
+import { type } from '@lowdefy/helpers';
+import { Col, Row, Tooltip } from 'antd';
 import classNames from 'classnames';
 import CSSMotion from '@rc-component/motion';
 import labelLogic from './labelLogic.js';
@@ -26,7 +27,7 @@ const validationKeyMap = {
     warning: 'warnings'
 };
 let iconMap;
-const Label = ({ blockId, classNames: blockClassNames = {}, components: { Icon }, content, properties, required, styles = {}, validation })=>{
+const Label = ({ blockId, classNames: blockClassNames = {}, components: { Icon }, content, methods, properties, required, styles = {}, validation })=>{
     const { extraClassName, extraStyle, feedbackClassName, feedbackStyle, iconClassName, label, labelClassName, labelCol, labelColClassName, labelColStyle, labelStyle, rowClassName, rowStyle, showExtra, showFeedback, wrapperCol } = labelLogic({
         blockId,
         blockClassNames,
@@ -56,6 +57,12 @@ const Label = ({ blockId, classNames: blockClassNames = {}, components: { Icon }
     const icon = validation.status && IconNode ? /*#__PURE__*/ React.createElement("span", {
         className: iconClassName
     }, /*#__PURE__*/ React.createElement(IconNode, null)) : null;
+    // tooltip is either a string (the tooltip text) or an object that also
+    // customizes the icon and color. The onClick is exposed as the block's
+    // onTooltipClick event, not a property.
+    const tooltip = type.isString(properties.tooltip) ? {
+        title: properties.tooltip
+    } : properties.tooltip;
     return /*#__PURE__*/ React.createElement(Row, {
         id: blockId,
         className: rowClassName,
@@ -67,11 +74,29 @@ const Label = ({ blockId, classNames: blockClassNames = {}, components: { Icon }
     }, /*#__PURE__*/ React.createElement("label", {
         htmlFor: `${blockId}_input`,
         className: labelClassName,
-        style: labelStyle,
-        title: label
+        style: labelStyle
     }, renderHtml({
         html: label
-    }))), /*#__PURE__*/ React.createElement(Col, {
+    }), tooltip && /*#__PURE__*/ React.createElement(Tooltip, {
+        title: tooltip.title ? renderHtml({
+            html: tooltip.title
+        }) : undefined
+    }, /*#__PURE__*/ React.createElement("span", {
+        className: "ldf-label-tooltip",
+        style: {
+            marginInlineStart: 4,
+            cursor: 'pointer',
+            color: tooltip.color
+        },
+        onClick: (event)=>{
+            event.preventDefault();
+            methods?.triggerEvent({
+                name: 'onTooltipClick'
+            });
+        }
+    }, /*#__PURE__*/ React.createElement(Icon, {
+        properties: tooltip.icon ?? 'AiOutlineQuestionCircle'
+    }))))), /*#__PURE__*/ React.createElement(Col, {
         ...wrapperCol,
         className: "ant-form-item-control"
     }, /*#__PURE__*/ React.createElement("div", {

package/dist/blocks/Label/meta.js

@@ -12,13 +12,18 @@
   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 {
+*/ import tooltip from '../../schemas/labelTooltip.js';
+export default {
     category: 'container',
+    events: {
+        onTooltipClick: 'Trigger actions when the tooltip icon is clicked.'
+    },
     icons: [
         'AiFillCloseCircle',
         'AiFillCheckCircle',
         'AiOutlineLoading',
-        'AiFillExclamationCircle'
+        'AiFillExclamationCircle',
+        'AiOutlineQuestionCircle'
     ],
     valueType: null,
     slots: {
@@ -71,6 +76,7 @@
                 type: 'string',
                 description: 'Label title - supports html.'
             },
+            tooltip,
             span: {
                 type: 'number',
                 description: 'Label inline span.'

package/dist/blocks/ListSelector/ListSelector.js

@@ -0,0 +1,384 @@
+/*
+  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, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Card, Input, Skeleton, theme } from 'antd';
+import { Virtuoso } from 'react-virtuoso';
+import { renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
+import { nunjucksFunction } from '@lowdefy/nunjucks';
+import { get, serializer, type } from '@lowdefy/helpers';
+import withTheme from '../withTheme.js';
+import useSetData from '../../useSetData.js';
+const FIELD_SEPARATOR = '
';
+const SKELETON_COUNT = 4;
+// The value stored on select: `valueKey` names the field, otherwise the whole item.
+function valueOf(item, valueKey) {
+    return type.isString(valueKey) && type.isObject(item) ? get(item, valueKey) : item;
+}
+// The identity used to match the current value back to a row: `primaryKey` (falling back to
+// `valueKey`) names the field; with neither, the whole value is the identity.
+function identityOf(x, effKey) {
+    return type.isString(effKey) && type.isObject(x) ? get(x, effKey) : x;
+}
+const ListSelectorRow = /*#__PURE__*/ React.memo(function ListSelectorRow({ blockId, index, item, template, bordered, hoverable, size, gap, cardClassName, bodyClassName, cardStyle, bodyStyle, clickable, selectable, selectedKey, effKey, selectedClassName, selectedStyle, onRowClick, methodsRef }) {
+    const html = useMemo(()=>template ? template({
+            item,
+            index
+        }) : null, [
+        template,
+        item,
+        index
+    ]);
+    const selected = useMemo(()=>selectedKey != null && serializer.serializeToString(identityOf(item, effKey), {
+            stable: true
+        }) === selectedKey, [
+        item,
+        selectedKey,
+        effKey
+    ]);
+    const handleClick = useCallback(()=>onRowClick(index, item), [
+        onRowClick,
+        index,
+        item
+    ]);
+    const className = [
+        cardClassName,
+        selected ? selectedClassName : null
+    ].filter(Boolean).join(' ') || undefined;
+    return /*#__PURE__*/ React.createElement("div", {
+        style: {
+            paddingBottom: gap
+        }
+    }, /*#__PURE__*/ React.createElement(Card, {
+        id: `${blockId}_${index}`,
+        variant: bordered === false ? 'borderless' : 'outlined',
+        hoverable: hoverable,
+        size: size,
+        onClick: clickable ? handleClick : undefined,
+        "aria-selected": selectable ? selected : undefined,
+        className: className,
+        classNames: {
+            body: bodyClassName
+        },
+        style: {
+            outline: 'none',
+            cursor: clickable ? 'pointer' : undefined,
+            ...cardStyle,
+            ...selected ? selectedStyle : null
+        },
+        styles: {
+            body: bodyStyle
+        }
+    }, html != null && renderHtml({
+        html,
+        methods: methodsRef.current
+    })));
+});
+function useSearchBlobs(data, fields, caseSensitive) {
+    return useMemo(()=>{
+        if (!data || data.length === 0) return null;
+        const normalize = caseSensitive ? (s)=>s : (s)=>s.toLowerCase();
+        if (!type.isArray(fields) || fields.length === 0) {
+            return data.map((item)=>normalize(JSON.stringify(item) ?? ''));
+        }
+        return data.map((item)=>normalize(fields.map((f)=>{
+                const v = get(item, f);
+                return type.isNone(v) ? '' : String(v);
+            }).join(FIELD_SEPARATOR)));
+    }, [
+        data,
+        fields,
+        caseSensitive
+    ]);
+}
+const ListSelector = ({ blockId, classNames = {}, events, loading, methods, properties, styles = {}, value })=>{
+    const data = useSetData({
+        properties,
+        methods
+    }) ?? [];
+    const template = useMemo(()=>type.isString(properties.html) ? nunjucksFunction(properties.html) : null, [
+        properties.html
+    ]);
+    const selectable = properties.selectable !== false;
+    const allowDeselect = properties.allowDeselect !== false;
+    // `valueKey` names the field stored on select (otherwise the whole item). `primaryKey` (falling
+    // back to `valueKey`) is the identity matched when the value is controlled via state.
+    const valueKey = properties.valueKey;
+    const effKey = type.isString(properties.primaryKey) ? properties.primaryKey : valueKey;
+    // Selection lives in the block value (app state), so a single serialized key identifies the
+    // selected row. When selection is off the block stores no value and renders like a plain list.
+    const selectedKey = useMemo(()=>!selectable || type.isNone(value) ? null : serializer.serializeToString(identityOf(value, effKey), {
+            stable: true
+        }), [
+        selectable,
+        value,
+        effKey
+    ]);
+    const methodsRef = useRef(methods);
+    methodsRef.current = methods;
+    const selectableRef = useRef(selectable);
+    selectableRef.current = selectable;
+    const allowDeselectRef = useRef(allowDeselect);
+    allowDeselectRef.current = allowDeselect;
+    const selectedKeyRef = useRef(selectedKey);
+    selectedKeyRef.current = selectedKey;
+    const valueKeyRef = useRef(valueKey);
+    valueKeyRef.current = valueKey;
+    const effKeyRef = useRef(effKey);
+    effKeyRef.current = effKey;
+    const clickable = selectable || Boolean(events.onClick);
+    const onRowClick = useCallback((index, item)=>{
+        if (selectableRef.current) {
+            const itemKey = serializer.serializeToString(identityOf(item, effKeyRef.current), {
+                stable: true
+            });
+            const deselect = allowDeselectRef.current && itemKey === selectedKeyRef.current;
+            const newValue = deselect ? null : valueOf(item, valueKeyRef.current);
+            methodsRef.current.setValue(newValue);
+            methodsRef.current.triggerEvent({
+                name: 'onChange',
+                event: {
+                    value: newValue,
+                    index,
+                    item
+                }
+            });
+        }
+        methodsRef.current.triggerEvent({
+            name: 'onClick',
+            event: {
+                index,
+                item
+            }
+        });
+    }, []);
+    const { token } = theme.useToken();
+    const selectedStyle = useMemo(()=>({
+            borderColor: token.colorPrimary,
+            boxShadow: `0 0 0 1px ${token.colorPrimary}`,
+            ...styles.selected
+        }), [
+        token.colorPrimary,
+        styles.selected
+    ]);
+    const gap = properties.gap ?? 8;
+    const useWindowScroll = type.isNone(properties.height);
+    const overscan = properties.overscan ?? 400;
+    const search = properties.search;
+    const searchEnabled = type.isObject(search);
+    const searchCaseSensitive = searchEnabled ? !!search.caseSensitive : false;
+    const searchFields = searchEnabled ? search.fields : null;
+    const searchMinLength = searchEnabled ? search.minLength ?? 0 : 0;
+    const searchDebounce = searchEnabled ? search.debounce ?? 150 : 150;
+    const searchSticky = searchEnabled ? search.sticky !== false : false;
+    const searchAllowClear = searchEnabled ? search.allowClear !== false : true;
+    const searchPlaceholder = searchEnabled ? search.placeholder ?? methods.translate('blocks.listSelector.search.placeholder') : '';
+    const noResultsText = searchEnabled ? search.noResultsText ?? methods.translate('blocks.listSelector.search.noResults') : '';
+    const noDataText = properties.noData ?? methods.translate('blocks.listSelector.noData');
+    const [rawQuery, setRawQuery] = useState('');
+    const [appliedQuery, setAppliedQuery] = useState('');
+    const debounceRef = useRef(null);
+    useEffect(()=>()=>{
+            if (debounceRef.current) clearTimeout(debounceRef.current);
+        }, []);
+    const onSearchChange = useCallback((e)=>{
+        const v = e.target.value;
+        setRawQuery(v);
+        if (debounceRef.current) clearTimeout(debounceRef.current);
+        debounceRef.current = setTimeout(()=>setAppliedQuery(v), searchDebounce);
+    }, [
+        searchDebounce
+    ]);
+    const blobs = useSearchBlobs(searchEnabled ? data : null, searchEnabled ? searchFields : null, searchCaseSensitive);
+    const filterActive = searchEnabled && appliedQuery && appliedQuery.length >= searchMinLength;
+    const filteredEntries = useMemo(()=>{
+        if (!filterActive || !blobs) return null;
+        const needle = searchCaseSensitive ? appliedQuery : appliedQuery.toLowerCase();
+        const out = [];
+        for(let i = 0; i < blobs.length; i++){
+            if (blobs[i].includes(needle)) out.push({
+                originalIndex: i,
+                item: data[i]
+            });
+        }
+        return out;
+    }, [
+        filterActive,
+        blobs,
+        data,
+        appliedQuery,
+        searchCaseSensitive
+    ]);
+    const lastFiredQueryRef = useRef('');
+    useEffect(()=>{
+        if (!searchEnabled) return;
+        if (lastFiredQueryRef.current === appliedQuery) return;
+        lastFiredQueryRef.current = appliedQuery;
+        const resultCount = filterActive ? filteredEntries ? filteredEntries.length : 0 : data.length;
+        methodsRef.current.triggerEvent({
+            name: 'onSearch',
+            event: {
+                value: appliedQuery,
+                resultCount
+            }
+        });
+    }, [
+        searchEnabled,
+        appliedQuery,
+        filterActive,
+        filteredEntries,
+        data
+    ]);
+    const itemContent = useCallback((_virtualIndex, payload)=>{
+        const isEntry = filterActive && payload && type.isObject(payload) && 'originalIndex' in payload;
+        const index = isEntry ? payload.originalIndex : _virtualIndex;
+        const item = isEntry ? payload.item : payload;
+        return /*#__PURE__*/ React.createElement(ListSelectorRow, {
+            blockId: blockId,
+            index: index,
+            item: item,
+            template: template,
+            bordered: properties.bordered,
+            hoverable: properties.hoverable,
+            size: properties.size,
+            gap: gap,
+            cardClassName: classNames.card,
+            bodyClassName: classNames.body,
+            cardStyle: styles.card,
+            bodyStyle: styles.body,
+            clickable: clickable,
+            selectable: selectable,
+            selectedKey: selectedKey,
+            effKey: effKey,
+            selectedClassName: classNames.selected,
+            selectedStyle: selectedStyle,
+            onRowClick: onRowClick,
+            methodsRef: methodsRef
+        });
+    }, [
+        filterActive,
+        blockId,
+        template,
+        properties.bordered,
+        properties.hoverable,
+        properties.size,
+        gap,
+        classNames.card,
+        classNames.body,
+        classNames.selected,
+        styles.card,
+        styles.body,
+        clickable,
+        selectable,
+        selectedKey,
+        effKey,
+        selectedStyle,
+        onRowClick
+    ]);
+    const computeItemKey = useCallback((_virtualIndex, payload)=>{
+        if (filterActive && payload && type.isObject(payload) && 'originalIndex' in payload) {
+            return `${blockId}_${payload.originalIndex}`;
+        }
+        return `${blockId}_${_virtualIndex}`;
+    }, [
+        blockId,
+        filterActive
+    ]);
+    const containerStyle = useWindowScroll ? styles.element : {
+        display: 'flex',
+        flexDirection: 'column',
+        height: properties.height,
+        ...styles.element
+    };
+    const headerStyle = {
+        position: searchSticky ? 'sticky' : undefined,
+        top: 0,
+        zIndex: 1,
+        paddingBottom: gap
+    };
+    const placeholderStyle = {
+        padding: token.paddingLG,
+        textAlign: 'center',
+        color: token.colorTextSecondary
+    };
+    const renderSearch = ()=>searchEnabled ? /*#__PURE__*/ React.createElement("div", {
+            style: headerStyle,
+            className: classNames.search
+        }, /*#__PURE__*/ React.createElement(Input.Search, {
+            id: `${blockId}_search`,
+            placeholder: searchPlaceholder,
+            allowClear: searchAllowClear,
+            value: rawQuery,
+            onChange: onSearchChange
+        })) : null;
+    if (loading) {
+        return /*#__PURE__*/ React.createElement("div", {
+            id: blockId,
+            className: classNames.element,
+            style: containerStyle
+        }, renderSearch(), Array.from({
+            length: SKELETON_COUNT
+        }).map((_, i)=>/*#__PURE__*/ React.createElement("div", {
+                key: `${blockId}_skeleton_${i}`,
+                style: {
+                    paddingBottom: gap
+                }
+            }, /*#__PURE__*/ React.createElement(Card, {
+                variant: properties.bordered === false ? 'borderless' : 'outlined',
+                size: properties.size,
+                className: classNames.card,
+                styles: {
+                    body: styles.body
+                }
+            }, /*#__PURE__*/ React.createElement(Skeleton, {
+                active: true,
+                title: true,
+                paragraph: {
+                    rows: 2
+                }
+            })))));
+    }
+    if (data.length === 0) {
+        return /*#__PURE__*/ React.createElement("div", {
+            id: blockId,
+            className: classNames.element,
+            style: containerStyle
+        }, /*#__PURE__*/ React.createElement("div", {
+            className: classNames.noData,
+            style: placeholderStyle
+        }, noDataText));
+    }
+    const virtuosoData = filterActive ? filteredEntries : data;
+    const virtuosoStyle = useWindowScroll ? undefined : {
+        flex: '1 1 auto',
+        minHeight: 0
+    };
+    return /*#__PURE__*/ React.createElement("div", {
+        id: blockId,
+        className: classNames.element,
+        style: containerStyle
+    }, renderSearch(), filterActive && filteredEntries.length === 0 ? /*#__PURE__*/ React.createElement("div", {
+        className: classNames.noResults,
+        style: placeholderStyle
+    }, noResultsText) : /*#__PURE__*/ React.createElement(Virtuoso, {
+        data: virtuosoData,
+        style: virtuosoStyle,
+        useWindowScroll: useWindowScroll,
+        overscan: overscan,
+        increaseViewportBy: overscan,
+        itemContent: itemContent,
+        computeItemKey: computeItemKey
+    }));
+};
+export default withTheme('Card', withBlockDefaults(ListSelector));

package/dist/blocks/ListSelector/e2e.js

@@ -0,0 +1,40 @@
+/*
+  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 { createBlockHelper, escapeId } from '@lowdefy/e2e-utils';
+import { expect } from '@playwright/test';
+const locator = (page, blockId)=>page.locator(`#${escapeId(blockId)}`);
+export default createBlockHelper({
+    locator,
+    do: {
+        clickItem: async (page, blockId, index)=>{
+            const card = page.locator(`#${escapeId(`${blockId}_${index}`)}`);
+            await card.scrollIntoViewIfNeeded();
+            await card.click();
+        },
+        select: async (page, blockId, index)=>{
+            const card = page.locator(`#${escapeId(`${blockId}_${index}`)}`);
+            await card.scrollIntoViewIfNeeded();
+            await card.click();
+        },
+        scrollToIndex: (page, blockId, index)=>page.locator(`#${escapeId(`${blockId}_${index}`)}`).scrollIntoViewIfNeeded(),
+        search: (page, blockId, text)=>page.locator(`#${escapeId(`${blockId}_search`)} input`).fill(text),
+        clearSearch: (page, blockId)=>page.locator(`#${escapeId(`${blockId}_search`)} input`).fill('')
+    },
+    expect: {
+        renderedCount: (page, blockId, count)=>expect(locator(page, blockId).locator('.ant-card')).toHaveCount(count),
+        noResults: (page, blockId, text = 'No results')=>expect(locator(page, blockId)).toContainText(text),
+        selected: (page, blockId, index)=>expect(page.locator(`#${escapeId(`${blockId}_${index}`)}`)).toHaveAttribute('aria-selected', 'true')
+    }
+});