@lowdefy/blocks-antd 5.3.0 → 5.4.0

package/dist/blocks/TreeInput/TreeInput.js

@@ -0,0 +1,91 @@
+/*
+  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, { useState } from 'react';
+import { Tree } from 'antd';
+import { renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
+import { type } from '@lowdefy/helpers';
+import withTheme from '../withTheme.js';
+import useSetData from '../../useSetData.js';
+import getSelectedIndex from '../../getSelectedIndex.js';
+import getSelectorOptions from '../../getSelectorOptions.js';
+import { getTreeNodes } from '../../getTreeData.js';
+// Inline tree input (antd Tree). Driven by the same model as the tree dropdowns: flat
+// `data`/`options` with `primaryKey` (node id) + `parentKey` (parent's id) build the hierarchy,
+// `valueKey` is the stored value, `html` renders each node label. Node keys are the flat entry
+// index, so selection reuses getSelectorOptions/getSelectedIndex (matched by valueKey — primaryKey
+// is structural).
+const TreeInput = ({ blockId, classNames = {}, properties, methods, styles = {}, value })=>{
+    const data = useSetData({
+        properties,
+        methods
+    });
+    const { treeData } = getTreeNodes({
+        properties: {
+            ...properties,
+            data
+        }
+    });
+    const entries = getSelectorOptions({
+        properties: {
+            ...properties,
+            data
+        }
+    });
+    const matchProps = {
+        ...properties,
+        primaryKey: undefined
+    };
+    const selectedIndex = getSelectedIndex(value, entries, {
+        properties: matchProps
+    });
+    const selectedKeys = type.isNone(selectedIndex) ? [] : [
+        selectedIndex
+    ];
+    const [expandedKeys, setExpandedKeys] = useState(undefined);
+    const onSelect = (keys)=>{
+        const idx = keys[0];
+        const val = type.isNone(idx) ? null : entries[idx].value;
+        methods.setValue(val);
+        methods.triggerEvent({
+            name: 'onChange',
+            event: {
+                value: val
+            }
+        });
+    };
+    return /*#__PURE__*/ React.createElement(Tree, {
+        id: blockId,
+        className: classNames.element,
+        checkable: properties.checkable,
+        disabled: properties.disabled,
+        defaultExpandAll: properties.defaultExpandAll,
+        showLine: properties.showLine,
+        selectable: properties.selectable,
+        multiple: false,
+        style: styles.element,
+        treeData: treeData,
+        onSelect: onSelect,
+        onExpand: (keys)=>setExpandedKeys(keys),
+        titleRender: (node)=>renderHtml({
+                html: `${node.title}`,
+                methods
+            }),
+        selectedKeys: selectedKeys,
+        ...expandedKeys === undefined ? {} : {
+            expandedKeys
+        }
+    });
+};
+export default withTheme('Tree', withBlockDefaults(TreeInput));

package/dist/blocks/TreeInput/e2e.js

@@ -0,0 +1,33 @@
+/*
+  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(`#bl-${escapeId(blockId)} .ant-tree`);
+export default createBlockHelper({
+    locator,
+    do: {
+        expand: (page, blockId, label)=>locator(page, blockId).locator('.ant-tree-treenode').filter({
+                hasText: label
+            }).locator('.ant-tree-switcher').click(),
+        clickNode: (page, blockId, label)=>locator(page, blockId).locator('.ant-tree-node-content-wrapper').filter({
+                hasText: label
+            }).click()
+    },
+    expect: {
+        selected: (page, blockId, label)=>expect(locator(page, blockId).locator('.ant-tree-treenode-selected').filter({
+                hasText: label
+            })).toBeVisible()
+    }
+});

package/dist/blocks/TreeInput/meta.js

@@ -0,0 +1,68 @@
+/*
+  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 options from '../../schemas/options.js';
+import treeSelectTheme from '../../schemas/treeSelectTheme.js';
+import { data, html, valueKey, primaryKey, parentKey } from '../../schemas/dataOptions.js';
+import { disabled } from '../../schemas/inputProperties.js';
+export default {
+    category: 'input',
+    icons: [],
+    valueType: 'any',
+    cssKeys: {
+        element: 'The TreeInput element.'
+    },
+    events: {
+        onChange: {
+            description: 'Trigger action when selection is changed.',
+            event: {
+                value: 'The selected value.'
+            }
+        }
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            data,
+            html,
+            valueKey,
+            primaryKey,
+            parentKey,
+            options,
+            disabled,
+            checkable: {
+                type: 'boolean',
+                default: false,
+                description: 'Show checkboxes on the tree nodes.'
+            },
+            showLine: {
+                type: 'boolean',
+                default: false,
+                description: 'Show a connecting line if true.'
+            },
+            selectable: {
+                type: 'boolean',
+                default: true,
+                description: 'Selectable if true.'
+            },
+            defaultExpandAll: {
+                type: 'boolean',
+                default: false,
+                description: 'Expand all tree nodes by default.'
+            },
+            theme: treeSelectTheme
+        }
+    }
+};

package/dist/blocks/TreeMultipleSelector/TreeMultipleSelector.js

@@ -0,0 +1,161 @@
+/*
+  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, { useState } from 'react';
+import { TreeSelect } from 'antd';
+import { renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
+import { type } from '@lowdefy/helpers';
+import Label from '../Label/Label.js';
+import withTheme from '../withTheme.js';
+import useSelectorOptions from '../../useSelectorOptions.js';
+import getSelectedIndex from '../../getSelectedIndex.js';
+import getTreeData, { ROOT_PID } from '../../getTreeData.js';
+const SHOW_STRATEGY = {
+    SHOW_ALL: TreeSelect.SHOW_ALL,
+    SHOW_PARENT: TreeSelect.SHOW_PARENT,
+    SHOW_CHILD: TreeSelect.SHOW_CHILD
+};
+const TreeMultipleSelector = ({ blockId, classNames = {}, components: { Icon }, events, loading, methods, properties, required, styles = {}, validation, value })=>{
+    const [elementId] = useState((0 | Math.random() * 9e2) + 1e2);
+    const entries = useSelectorOptions({
+        properties,
+        methods
+    });
+    const treeData = getTreeData({
+        entries,
+        properties
+    });
+    // primaryKey / parentKey are structural; selection is matched on valueKey (the stored value).
+    const matchProps = {
+        ...properties,
+        primaryKey: undefined
+    };
+    const selectedIndices = loading ? [] : getSelectedIndex(value, entries, {
+        properties: matchProps,
+        multiple: true
+    }).filter((i)=>i !== undefined);
+    let antdVariant = properties.variant;
+    if (properties.bordered === false) antdVariant = 'borderless';
+    return /*#__PURE__*/ React.createElement(Label, {
+        blockId: blockId,
+        methods: methods,
+        classNames: classNames,
+        components: {
+            Icon
+        },
+        events: events,
+        properties: {
+            title: properties.title,
+            size: properties.size,
+            ...properties.label
+        },
+        required: required,
+        styles: styles,
+        validation: validation,
+        content: {
+            content: ()=>/*#__PURE__*/ React.createElement("div", {
+                    style: {
+                        width: '100%'
+                    }
+                }, /*#__PURE__*/ React.createElement("div", {
+                    id: `${blockId}_${elementId}_popup`
+                }), /*#__PURE__*/ React.createElement(TreeSelect, {
+                    id: `${blockId}_input`,
+                    variant: antdVariant,
+                    className: classNames.element,
+                    style: {
+                        width: '100%',
+                        ...styles.element
+                    },
+                    disabled: properties.disabled || loading,
+                    allowClear: properties.allowClear !== false,
+                    placeholder: properties.placeholder ?? methods.translate('blocks.treeMultipleSelector.placeholder'),
+                    status: validation.status,
+                    size: properties.size,
+                    autoFocus: properties.autoFocus,
+                    maxTagCount: properties.maxTagCount,
+                    getPopupContainer: ()=>document.getElementById(`${blockId}_${elementId}_popup`),
+                    treeDataSimpleMode: {
+                        id: 'id',
+                        pId: 'pId',
+                        rootPId: ROOT_PID
+                    },
+                    treeData: treeData,
+                    treeDefaultExpandAll: properties.treeDefaultExpandAll,
+                    showSearch: properties.showSearch !== false,
+                    treeNodeFilterProp: "title",
+                    treeTitleRender: (node)=>renderHtml({
+                            html: `${node.title}`,
+                            methods
+                        }),
+                    notFoundContent: properties.notFoundContent ?? methods.translate('blocks.treeMultipleSelector.notFound'),
+                    showCheckedStrategy: SHOW_STRATEGY[properties.showCheckedStrategy] ?? TreeSelect.SHOW_CHILD,
+                    ...properties.checkable ? {
+                        treeCheckable: true
+                    } : {
+                        multiple: true
+                    },
+                    suffixIcon: properties.suffixIcon && /*#__PURE__*/ React.createElement(Icon, {
+                        blockId: `${blockId}_suffixIcon`,
+                        classNames: {
+                            element: classNames.suffixIcon
+                        },
+                        events: events,
+                        properties: properties.suffixIcon,
+                        styles: {
+                            element: styles.suffixIcon
+                        }
+                    }),
+                    clearIcon: properties.clearIcon && /*#__PURE__*/ React.createElement(Icon, {
+                        blockId: `${blockId}_clearIcon`,
+                        classNames: {
+                            element: classNames.clearIcon
+                        },
+                        events: events,
+                        properties: properties.clearIcon,
+                        styles: {
+                            element: styles.clearIcon
+                        }
+                    }),
+                    value: selectedIndices,
+                    onChange: (idxArr)=>{
+                        const val = (idxArr ?? []).map((i)=>entries[i].value);
+                        methods.setValue(val);
+                        methods.triggerEvent({
+                            name: 'onChange',
+                            event: {
+                                value: val
+                            }
+                        });
+                    },
+                    onBlur: ()=>methods.triggerEvent({
+                            name: 'onBlur'
+                        }),
+                    onFocus: ()=>methods.triggerEvent({
+                            name: 'onFocus'
+                        }),
+                    onClear: ()=>methods.triggerEvent({
+                            name: 'onClear'
+                        }),
+                    onSearch: (v)=>methods.triggerEvent({
+                            name: 'onSearch',
+                            event: {
+                                value: v
+                            }
+                        })
+                }))
+        }
+    });
+};
+export default withTheme('TreeSelect', withBlockDefaults(TreeMultipleSelector));

package/dist/blocks/TreeMultipleSelector/e2e.js

@@ -0,0 +1,46 @@
+/*
+  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(`.ant-select:has(#${escapeId(blockId)}_input)`);
+const openDropdown = (page)=>page.locator('.ant-select-dropdown:not(.ant-select-dropdown-hidden)');
+export default createBlockHelper({
+    locator,
+    do: {
+        select: async (page, blockId, label)=>{
+            await locator(page, blockId).click();
+            await openDropdown(page).locator('.ant-select-tree-node-content-wrapper').filter({
+                hasText: label
+            }).click();
+        },
+        clear: async (page, blockId)=>{
+            const sel = locator(page, blockId);
+            await sel.hover();
+            await sel.locator('.ant-select-clear').click();
+        },
+        search: async (page, blockId, text)=>{
+            await locator(page, blockId).click();
+            await page.keyboard.type(text);
+        }
+    },
+    expect: {
+        disabled: (page, blockId)=>expect(locator(page, blockId)).toHaveClass(/ant-select-disabled/),
+        enabled: (page, blockId)=>expect(locator(page, blockId)).not.toHaveClass(/ant-select-disabled/),
+        tags: (page, blockId, count)=>expect(locator(page, blockId).locator('.ant-select-selection-item')).toHaveCount(count),
+        hasTag: (page, blockId, label)=>expect(locator(page, blockId).locator('.ant-select-selection-item').filter({
+                hasText: label
+            })).toBeVisible()
+    }
+});

package/dist/blocks/TreeMultipleSelector/meta.js

@@ -0,0 +1,128 @@
+/*
+  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 LabelMeta from '../Label/meta.js';
+import label from '../../schemas/label.js';
+import icon from '../../schemas/icon.js';
+import options from '../../schemas/options.js';
+import treeSelectTheme from '../../schemas/treeSelectTheme.js';
+import { data, html, valueKey, primaryKey, parentKey } from '../../schemas/dataOptions.js';
+import { disabled, placeholder, inputTitle, autoFocus, variant, bordered, allowClear, sizeSmallDefaultLarge } from '../../schemas/inputProperties.js';
+export default {
+    category: 'input',
+    icons: [
+        ...LabelMeta.icons,
+        'AiOutlineCloseCircle',
+        'AiOutlineDown'
+    ],
+    valueType: 'array',
+    cssKeys: {
+        element: 'The TreeMultipleSelector element.',
+        label: 'The TreeMultipleSelector label.',
+        extra: 'The TreeMultipleSelector extra content.',
+        feedback: 'The TreeMultipleSelector validation feedback.',
+        suffixIcon: 'The suffix icon in the TreeMultipleSelector.',
+        clearIcon: 'The clear icon in the TreeMultipleSelector.'
+    },
+    events: {
+        onBlur: 'Trigger action when the selector loses focus.',
+        onChange: {
+            description: 'Trigger action when selection is changed.',
+            event: {
+                value: 'The selected values (array).'
+            }
+        },
+        onFocus: 'Trigger action when the selector gains focus.',
+        onClear: 'Trigger action when the selector is cleared.',
+        onSearch: {
+            description: 'Trigger action when the search input changes.',
+            event: {
+                value: 'The search input value.'
+            }
+        },
+        onTooltipClick: 'Trigger actions when the tooltip icon is clicked.'
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            data,
+            html,
+            valueKey,
+            primaryKey,
+            parentKey,
+            options,
+            label,
+            disabled,
+            autoFocus,
+            allowClear: {
+                ...allowClear,
+                default: true
+            },
+            bordered,
+            variant,
+            size: sizeSmallDefaultLarge,
+            title: inputTitle,
+            placeholder: {
+                ...placeholder,
+                default: 'Select items'
+            },
+            showSearch: {
+                type: 'boolean',
+                default: true,
+                description: 'Make the tree searchable.'
+            },
+            treeDefaultExpandAll: {
+                type: 'boolean',
+                default: false,
+                description: 'Expand all tree nodes by default.'
+            },
+            checkable: {
+                type: 'boolean',
+                default: false,
+                description: 'Show checkboxes on the tree nodes instead of selectable tags.'
+            },
+            showCheckedStrategy: {
+                type: 'string',
+                enum: [
+                    'SHOW_ALL',
+                    'SHOW_PARENT',
+                    'SHOW_CHILD'
+                ],
+                default: 'SHOW_CHILD',
+                description: 'How checked nodes are shown when `checkable` is true: SHOW_ALL (all checked), SHOW_PARENT (parent only), SHOW_CHILD (leaf children only).'
+            },
+            maxTagCount: {
+                type: 'number',
+                description: 'Maximum number of selected tags shown before collapsing into a count.'
+            },
+            notFoundContent: {
+                type: 'string',
+                default: 'Not found',
+                description: 'Content shown when no nodes match the search.'
+            },
+            suffixIcon: {
+                ...icon,
+                default: 'AiOutlineDown',
+                description: 'Dropdown suffix icon.'
+            },
+            clearIcon: {
+                ...icon,
+                default: 'AiOutlineCloseCircle',
+                description: 'Clear icon.'
+            },
+            theme: treeSelectTheme
+        }
+    }
+};