@lowdefy/blocks-antd 5.3.0 → 5.4.0

package/dist/getTreeData.js

@@ -0,0 +1,94 @@
+/*
+  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 getSelectorOptions from './getSelectorOptions.js';
+// Sentinel parent id for top-level nodes, used as antd TreeSelect `treeDataSimpleMode.rootPId`.
+export const ROOT_PID = '__lowdefy_tree_root__';
+// Turns the flat selector `entries` (from getSelectorOptions) into antd TreeSelect
+// `treeDataSimpleMode` nodes. Each entry already carries `label` (an html string) + `value`
+// (the stored value) + the spread row fields. The antd node `value` is the entry index string
+// (matching the other selectors and getSelectedIndex), so the structural `primaryKey`/`parentKey`
+// stay independent of the stored value. A `parentKey` that points at no known node falls back to
+// root, so a mis-referenced row stays visible rather than orphaned.
+const getTreeData = ({ entries, properties })=>{
+    const { primaryKey, parentKey } = properties;
+    const hasStructure = type.isString(primaryKey) && type.isString(parentKey);
+    const ids = new Set();
+    if (hasStructure) {
+        entries.forEach((entry)=>{
+            if (type.isObject(entry)) ids.add(get(entry, primaryKey));
+        });
+    }
+    return entries.map((entry, index)=>{
+        const isObject = type.isObject(entry);
+        const id = hasStructure && isObject ? get(entry, primaryKey) : index;
+        let pId = ROOT_PID;
+        if (hasStructure && isObject) {
+            const rawParent = get(entry, parentKey);
+            pId = type.isNone(rawParent) || !ids.has(rawParent) ? ROOT_PID : rawParent;
+        }
+        return {
+            id,
+            pId,
+            value: `${index}`,
+            title: isObject ? entry.label : `${entry}`,
+            disabled: isObject ? entry.disabled : undefined,
+            selectable: isObject ? entry.selectable : undefined
+        };
+    });
+};
+export default getTreeData;
+// Builds antd `Tree` (nested) nodes for the inline TreeInput block, plus a flat `entries` list
+// aligned to the node keys (each node `key` is its index in `entries`). Driven by a flat
+// `data`/`options` array using `primaryKey`/`parentKey` to assemble the hierarchy (same model as
+// the dropdowns). `entries[Number(key)].value` is the stored value for a selected node; selection
+// matching reuses getSelectedIndex against `entries`.
+export const getTreeNodes = ({ properties })=>{
+    const { primaryKey, parentKey } = properties;
+    const entries = getSelectorOptions({
+        properties
+    });
+    const nodes = entries.map((entry, index)=>({
+            key: `${index}`,
+            title: type.isObject(entry) ? entry.label : `${entry}`,
+            disabled: type.isObject(entry) ? entry.disabled : undefined,
+            disableCheckbox: type.isObject(entry) ? entry.disableCheckbox : undefined,
+            selectable: type.isObject(entry) ? entry.selectable : undefined
+        }));
+    if (!type.isString(primaryKey) || !type.isString(parentKey)) {
+        return {
+            treeData: nodes,
+            entries
+        };
+    }
+    const byId = {};
+    entries.forEach((entry, i)=>{
+        if (type.isObject(entry)) byId[get(entry, primaryKey)] = nodes[i];
+    });
+    const roots = [];
+    entries.forEach((entry, i)=>{
+        const parent = type.isObject(entry) ? get(entry, parentKey) : null;
+        if (!type.isNone(parent) && byId[parent]) {
+            byId[parent].children = byId[parent].children ?? [];
+            byId[parent].children.push(nodes[i]);
+        } else {
+            roots.push(nodes[i]);
+        }
+    });
+    return {
+        treeData: roots,
+        entries
+    };
+};

package/dist/metas.js

@@ -45,6 +45,7 @@ export { default as Footer } from './blocks/Footer/meta.js';
 export { default as Header } from './blocks/Header/meta.js';
 export { default as Label } from './blocks/Label/meta.js';
 export { default as Layout } from './blocks/Layout/meta.js';
+export { default as ListSelector } from './blocks/ListSelector/meta.js';
 export { default as Masonry } from './blocks/Masonry/meta.js';
 export { default as MasonryList } from './blocks/MasonryList/meta.js';
 export { default as Menu } from './blocks/Menu/meta.js';
@@ -87,6 +88,8 @@ export { default as Title } from './blocks/Title/meta.js';
 export { default as TitleInput } from './blocks/TitleInput/meta.js';
 export { default as Tooltip } from './blocks/Tooltip/meta.js';
 export { default as Tour } from './blocks/Tour/meta.js';
+export { default as TreeInput } from './blocks/TreeInput/meta.js';
+export { default as TreeMultipleSelector } from './blocks/TreeMultipleSelector/meta.js';
 export { default as TreeSelector } from './blocks/TreeSelector/meta.js';
 export { default as Watermark } from './blocks/Watermark/meta.js';
 export { default as WeekSelector } from './blocks/WeekSelector/meta.js';

package/dist/schemas/dataOptions.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.
+*/ // Shared properties for the data-driven way of populating a selector, as an alternative to
+// `options` (label/value pairs). See concepts/selectors docs for the two ways to drive a selector.
+export const data = {
+    type: 'array',
+    description: 'Alternative to `options`: an array of raw rows. Each row is rendered to a label with the `html` template, and `valueKey` selects which field becomes the value. Use this to drive a selector directly from data without building label/value pairs in your request.'
+};
+export const html = {
+    type: 'string',
+    description: 'Nunjucks template that renders each option label when using `data`. The context exposes `item` (the current row) and `index` (the zero-based row index). Ignored when `options` is used.'
+};
+export const valueKey = {
+    type: 'string',
+    description: 'Field used as the selected value. With `options` it names the value field (defaults to "value"). With `data` it names the field stored when an option is selected; omit it to store the whole row. Supports dotted paths (e.g. "user.id").'
+};
+export const primaryKey = {
+    type: 'string',
+    description: 'Field used to match the current value (e.g. set with SetState) back to an option for highlighting. Defaults to `valueKey`. Set this when the stored value is the whole row but a single field (e.g. "id") uniquely identifies it. In the tree selectors it also serves as each node’s id, referenced by `parentKey`. Supports dotted paths.'
+};
+export const parentKey = {
+    type: 'string',
+    description: 'Tree selectors only: names each row’s parent id. Build a flat `data`/`options` array where each row has a `primaryKey` (its own id) and a `parentKey` whose value equals the parent row’s `primaryKey`. Rows whose `parentKey` is empty or points at no row become tree roots. Supports dotted paths.'
+};

package/dist/schemas/index.js

@@ -13,6 +13,7 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ export { default as breadcrumbList } from './breadcrumbList.js';
+export { data, html, valueKey, primaryKey, parentKey } from './dataOptions.js';
 export { default as disabledDates } from './disabledDates.js';
 export { default as icon } from './icon.js';
 export { default as label } from './label.js';

package/dist/schemas/label.js

@@ -12,7 +12,8 @@
   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 './labelTooltip.js';
+export default {
     type: 'object',
     description: 'Label properties.',
     additionalProperties: false,
@@ -39,6 +40,7 @@
             type: 'string',
             description: 'Label title - supports html.'
         },
+        tooltip,
         span: {
             type: 'number',
             description: 'Label inline span.'

package/dist/schemas/labelTooltip.js

@@ -0,0 +1,44 @@
+/*
+  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.
+*/ export default {
+    description: "Help tooltip shown via an icon beside the label. A string sets the tooltip text (supports html), or an object to also customize the icon and color. Use the block's onTooltipClick event to respond to clicks on the icon.",
+    oneOf: [
+        {
+            type: 'string'
+        },
+        {
+            type: 'object',
+            additionalProperties: false,
+            properties: {
+                title: {
+                    type: 'string',
+                    description: 'Tooltip text shown on hover - supports html.'
+                },
+                icon: {
+                    type: 'string',
+                    default: 'AiOutlineQuestionCircle',
+                    description: 'Name of the icon to show beside the label.'
+                },
+                color: {
+                    type: 'string',
+                    description: 'Color of the tooltip icon.',
+                    docs: {
+                        displayType: 'color'
+                    }
+                }
+            }
+        }
+    ]
+};

package/dist/schemas/options.js

@@ -41,9 +41,6 @@
             description: 'Options can either be an array of primitive values, on an array of label, value pairs.',
             items: {
                 type: 'object',
-                required: [
-                    'value'
-                ],
                 properties: {
                     label: {
                         type: 'string',
@@ -76,6 +73,13 @@
                         docs: {
                             displayType: 'yaml'
                         }
+                    },
+                    color: {
+                        type: 'string',
+                        description: 'Color applied to this option when it is selected. Falls back to the block-level color when not set.',
+                        docs: {
+                            displayType: 'color'
+                        }
                     }
                 }
             }

package/dist/schemas/treeSelectTheme.js

@@ -0,0 +1,125 @@
+/*
+  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.
+*/ // Antd design-token overrides shared by the TreeSelect-based selectors (TreeSelector,
+// TreeMultipleSelector). Covers both the dropdown tree node tokens and the selector tokens.
+export default {
+    type: 'object',
+    description: 'Antd design token overrides for this block. See <a href="https://ant.design/components/overview#design-token">antd design tokens</a>.',
+    docs: {
+        displayType: 'yaml',
+        link: 'https://ant.design/components/tree-select#design-token'
+    },
+    properties: {
+        nodeSelectedBg: {
+            type: 'string',
+            description: 'Background color of selected tree node.'
+        },
+        nodeHoverBg: {
+            type: 'string',
+            description: 'Background color of hovered tree node.'
+        },
+        titleHeight: {
+            type: 'number',
+            default: 24,
+            description: 'Height of tree node title.'
+        },
+        clearBg: {
+            type: 'string',
+            description: 'Background color of clear button.'
+        },
+        selectorBg: {
+            type: 'string',
+            description: 'Background color of the selector.'
+        },
+        hoverBorderColor: {
+            type: 'string',
+            description: 'Border color when hovered.'
+        },
+        activeBorderColor: {
+            type: 'string',
+            description: 'Border color when active/focused.'
+        },
+        activeOutlineColor: {
+            type: 'string',
+            description: 'Outline color when active/focused.'
+        },
+        optionSelectedBg: {
+            type: 'string',
+            description: 'Background of selected option.'
+        },
+        optionSelectedColor: {
+            type: 'string',
+            description: 'Text color of selected option.'
+        },
+        optionSelectedFontWeight: {
+            type: 'string',
+            description: 'Font weight of selected option.'
+        },
+        optionActiveBg: {
+            type: 'string',
+            description: 'Background of active (hovered) option.'
+        },
+        optionFontSize: {
+            type: 'number',
+            default: 14,
+            description: 'Font size of options.'
+        },
+        optionHeight: {
+            type: 'number',
+            default: 32,
+            description: 'Height of each option.'
+        },
+        optionLineHeight: {
+            type: 'string',
+            description: 'Line height of options.'
+        },
+        optionPadding: {
+            type: 'string',
+            description: 'Padding of options.'
+        },
+        multipleSelectorBgDisabled: {
+            type: 'string',
+            description: 'Background when disabled in multiple mode.'
+        },
+        multipleItemBg: {
+            type: 'string',
+            description: 'Background of tag items in multiple mode.'
+        },
+        multipleItemBorderColor: {
+            type: 'string',
+            description: 'Border color of tag items.'
+        },
+        multipleItemHeight: {
+            type: 'number',
+            default: 24,
+            description: 'Height of tag items.'
+        },
+        multipleItemHeightSM: {
+            type: 'number',
+            default: 16,
+            description: 'Height of tag items (small).'
+        },
+        multipleItemHeightLG: {
+            type: 'number',
+            default: 32,
+            description: 'Height of tag items (large).'
+        },
+        zIndexPopup: {
+            type: 'number',
+            default: 1050,
+            description: 'z-index of the dropdown.'
+        }
+    }
+};

package/dist/serializeSelectorValue.js

@@ -0,0 +1,38 @@
+/*
+  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 { serializer } from '@lowdefy/helpers';
+// Stable serialization used to compare selector values by identity — both when matching the
+// current value to an option (getSelectedIndex) and when de-duplicating options
+// (getSelectorOptions). The two must agree, so they share this function.
+//
+// Build-time location markers (`~k`, `~r`, `~l`) record where a value sits in the config, not its
+// identity. The same option value carries a different marker depending on where it appears, and a
+// value arriving from state or a request carries none — so a marker-sensitive compare would wrongly
+// treat equal values as different (e.g. a config-literal option vs the same value pre-populated in
+// state). `skipMarkers` only drops these markers when they are non-enumerable; markers loaded from
+// the built JSON config are enumerable, so we also strip them via the replacer. Type markers
+// (`~d` dates, `~e` errors) are part of the value and must be preserved.
+const locationMarkers = new Set([
+    '~k',
+    '~r',
+    '~l'
+]);
+const dropMarkers = (key, value)=>locationMarkers.has(key) ? undefined : value;
+const serializeSelectorValue = (value)=>serializer.serializeToString(value, {
+        stable: true,
+        skipMarkers: true,
+        replacer: dropMarkers
+    });
+export default serializeSelectorValue;

package/dist/useSelectorOptions.js

@@ -0,0 +1,38 @@
+/*
+  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 { useMemo } from 'react';
+import getSelectorOptions from './getSelectorOptions.js';
+import useSetData from './useSetData.js';
+// Builds the normalised selector entries from `options`, or from `data` (which may be supplied
+// imperatively via `setData`). Memoised so a large dataset is mapped once, not on every render —
+// when `data` comes from `setData` the dependencies are stable across unrelated re-renders.
+export default function useSelectorOptions({ properties, methods }) {
+    const data = useSetData({
+        properties,
+        methods
+    });
+    return useMemo(()=>getSelectorOptions({
+            properties: {
+                ...properties,
+                data
+            }
+        }), [
+        data,
+        properties.options,
+        properties.valueKey,
+        properties.primaryKey,
+        properties.html
+    ]);
+}

package/dist/useSetData.js

@@ -0,0 +1,27 @@
+/*
+  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 { useEffect, useState } from 'react';
+// Lets a selector receive its `data` imperatively via a registered `setData` method, called with a
+// CallMethod action (e.g. from a request's onSuccess). The dataset is held in component state, so a
+// large list never passes through block `properties` — avoiding the engine re-parsing and
+// re-serializing every row on each update cycle. Falls back to `properties.data` until `setData`
+// has been called. `setValue` (the React setState updater) is stable, so registering once is safe.
+export default function useSetData({ properties, methods }) {
+    const [localData, setLocalData] = useState();
+    useEffect(()=>{
+        methods.registerMethod('setData', setLocalData);
+    }, []);
+    return localData === undefined ? properties.data : localData;
+}

package/package.json

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