@lowdefy/blocks-antd 4.7.2 → 5.0.0

package/dist/blocks/Search/SearchModal.js

@@ -0,0 +1,171 @@
+/*
+  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, useCallback, useRef, useEffect } from 'react';
+import { Empty, Input, Modal, Skeleton } from 'antd';
+import { ClockCircleOutlined, SearchOutlined } from '@ant-design/icons';
+import { cn } from '@lowdefy/block-utils';
+import SearchResults, { groupResults } from './SearchResults.js';
+import useListKeyboardNav from './useListKeyboardNav.js';
+function SearchModal({ open, onClose, properties, methods, classNames = {}, styles = {}, searchIndex, recentSearches }) {
+    const [query, setQuery] = useState('');
+    const [results, setResults] = useState([]);
+    const debounceRef = useRef(null);
+    const inputRef = useRef(null);
+    const resultMapping = {
+        ...searchIndex.resultDefaults ?? {},
+        ...properties.result ?? {}
+    };
+    const groups = properties.groups ?? searchIndex.groups ?? [];
+    const maxResults = properties.maxResults ?? 20;
+    const flatResults = results.slice(0, maxResults);
+    const highlightTerms = flatResults.length > 0 ? flatResults[0].terms : [];
+    // Build display-ordered array (grouped order) for keyboard navigation.
+    // groupResults reorders items by group — the keyboard index must match display order.
+    const grouped = groupResults(flatResults, groups, resultMapping);
+    const displayOrderResults = grouped.flatMap((group)=>group.items);
+    const handleSelect = useCallback((item)=>{
+        recentSearches.addSearch(query);
+        methods.triggerEvent({
+            name: 'onSelect',
+            event: {
+                ...item,
+                query,
+                resultCount: results.length
+            }
+        });
+        onClose();
+    }, [
+        query,
+        results,
+        methods,
+        onClose,
+        recentSearches
+    ]);
+    const handleSelectByIndex = useCallback((index)=>{
+        if (displayOrderResults[index]) {
+            handleSelect(displayOrderResults[index]);
+        }
+    }, [
+        displayOrderResults,
+        handleSelect
+    ]);
+    const { selectedIndex, onKeyDown } = useListKeyboardNav({
+        itemCount: displayOrderResults.length,
+        onSelect: handleSelectByIndex
+    });
+    const handleInputChange = useCallback((e)=>{
+        const value = e.target.value;
+        setQuery(value);
+        if (debounceRef.current) clearTimeout(debounceRef.current);
+        debounceRef.current = setTimeout(()=>{
+            if (!value) {
+                setResults([]);
+                return;
+            }
+            const searchResults = searchIndex.search(value);
+            setResults(searchResults);
+            methods.triggerEvent({
+                name: 'onSearch',
+                event: {
+                    value,
+                    resultCount: searchResults.length
+                }
+            });
+        }, 150);
+    }, [
+        searchIndex,
+        methods
+    ]);
+    const handleRecentClick = useCallback((recentQuery)=>{
+        setQuery(recentQuery);
+        const searchResults = searchIndex.search(recentQuery);
+        setResults(searchResults);
+    }, [
+        searchIndex
+    ]);
+    useEffect(()=>{
+        if (!open) {
+            setQuery('');
+            setResults([]);
+        }
+    }, [
+        open
+    ]);
+    useEffect(()=>{
+        if (open && inputRef.current) {
+            setTimeout(()=>inputRef.current?.focus(), 100);
+        }
+    }, [
+        open
+    ]);
+    const showRecent = !query && properties.recentSearches !== false && recentSearches.recentSearches.length > 0;
+    return /*#__PURE__*/ React.createElement(Modal, {
+        open: open,
+        footer: null,
+        closable: false,
+        width: properties.width ?? 640,
+        onCancel: onClose,
+        className: cn(classNames.modal),
+        style: styles.modal,
+        destroyOnClose: true
+    }, /*#__PURE__*/ React.createElement(Input, {
+        ref: inputRef,
+        className: cn(classNames.input),
+        style: styles.input,
+        prefix: /*#__PURE__*/ React.createElement(SearchOutlined, null),
+        placeholder: properties.placeholder ?? 'Search...',
+        allowClear: true,
+        value: query,
+        onChange: handleInputChange,
+        onKeyDown: onKeyDown
+    }), searchIndex.loading && /*#__PURE__*/ React.createElement("div", {
+        style: {
+            padding: 16
+        }
+    }, /*#__PURE__*/ React.createElement(Skeleton, {
+        active: true,
+        paragraph: {
+            rows: 3
+        }
+    })), !searchIndex.loading && query && flatResults.length === 0 && /*#__PURE__*/ React.createElement(Empty, {
+        className: cn(classNames.empty),
+        style: {
+            padding: 32,
+            ...styles.empty
+        },
+        description: properties.noResultsMessage ?? 'No results found.'
+    }), !searchIndex.loading && flatResults.length > 0 && /*#__PURE__*/ React.createElement(SearchResults, {
+        grouped: grouped,
+        resultMapping: resultMapping,
+        selectedIndex: selectedIndex,
+        highlightTerms: properties.highlightMatches !== false ? highlightTerms : null,
+        highlightMatches: properties.highlightMatches !== false,
+        onSelect: handleSelect,
+        classNames: classNames,
+        styles: styles
+    }), showRecent && /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("div", {
+        className: "lf-search-recent-header"
+    }, /*#__PURE__*/ React.createElement("span", null, "Recent")), recentSearches.recentSearches.map((item)=>/*#__PURE__*/ React.createElement("div", {
+            key: item.query,
+            className: cn('lf-search-item', classNames.item),
+            style: styles.item,
+            onClick: ()=>handleRecentClick(item.query)
+        }, /*#__PURE__*/ React.createElement(ClockCircleOutlined, {
+            style: {
+                color: 'var(--ant-color-text-quaternary)'
+            }
+        }), /*#__PURE__*/ React.createElement("span", null, item.query)))));
+}
+export default SearchModal;

package/dist/blocks/Search/SearchResults.js

@@ -0,0 +1,129 @@
+/*
+  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, { useEffect, useRef } from 'react';
+import { FileOutlined } from '@ant-design/icons';
+import { cn } from '@lowdefy/block-utils';
+import SearchHighlight from './SearchHighlight.js';
+function groupResults(results, groups, resultMapping) {
+    if (!groups || groups.length === 0) return [
+        {
+            label: null,
+            items: results
+        }
+    ];
+    const categoryField = resultMapping?.category;
+    const grouped = new Map();
+    const other = [];
+    for (const result of results){
+        const value = categoryField ? result[categoryField] : null;
+        let matched = false;
+        for (const group of groups){
+            const matchEntries = Object.entries(group.match ?? {});
+            if (matchEntries.every(([field, val])=>result[field] === val)) {
+                if (!grouped.has(group.label)) {
+                    grouped.set(group.label, {
+                        ...group,
+                        items: []
+                    });
+                }
+                grouped.get(group.label).items.push(result);
+                matched = true;
+                break;
+            }
+        }
+        if (!matched) {
+            other.push(result);
+        }
+    }
+    const result = [];
+    for (const group of groups){
+        const entry = grouped.get(group.label);
+        if (entry && entry.items.length > 0) {
+            result.push(entry);
+        }
+    }
+    if (other.length > 0) {
+        result.push({
+            label: 'Other',
+            items: other
+        });
+    }
+    return result;
+}
+function SearchResults({ grouped, resultMapping, selectedIndex, highlightTerms, highlightMatches, onSelect, classNames = {}, styles = {} }) {
+    const selectedRef = useRef(null);
+    useEffect(()=>{
+        if (selectedRef.current) {
+            selectedRef.current.scrollIntoView({
+                block: 'nearest'
+            });
+        }
+    }, [
+        selectedIndex
+    ]);
+    const titleField = resultMapping?.title ?? 'title';
+    const descField = resultMapping?.description;
+    const iconField = resultMapping?.icon;
+    let flatIndex = 0;
+    return /*#__PURE__*/ React.createElement("div", {
+        className: cn('lf-search-results', classNames.results),
+        style: styles.results
+    }, grouped.map((group, gi)=>/*#__PURE__*/ React.createElement("div", {
+            key: group.label ?? gi,
+            className: classNames.group,
+            style: styles.group
+        }, group.label && /*#__PURE__*/ React.createElement("div", {
+            className: cn('lf-search-group-header', classNames.groupHeading),
+            style: styles.groupHeading
+        }, group.label), group.items.map((item)=>{
+            const currentIndex = flatIndex++;
+            const isSelected = currentIndex === selectedIndex;
+            const title = item[titleField] ?? item.id;
+            const desc = descField ? item[descField] : null;
+            return /*#__PURE__*/ React.createElement("div", {
+                key: item.id ?? currentIndex,
+                ref: isSelected ? selectedRef : null,
+                className: cn('lf-search-item', isSelected && 'lf-search-item-selected', classNames.item),
+                style: styles.item,
+                onClick: ()=>onSelect(item)
+            }, /*#__PURE__*/ React.createElement("span", {
+                className: classNames.itemIcon,
+                style: {
+                    color: 'var(--ant-color-text-secondary)',
+                    ...styles.itemIcon
+                }
+            }, /*#__PURE__*/ React.createElement(FileOutlined, null)), /*#__PURE__*/ React.createElement("div", {
+                className: "lf-search-item-content"
+            }, /*#__PURE__*/ React.createElement("div", {
+                className: cn('lf-search-item-title', classNames.itemTitle),
+                style: styles.itemTitle
+            }, highlightMatches && highlightTerms ? /*#__PURE__*/ React.createElement(SearchHighlight, {
+                text: title,
+                terms: highlightTerms,
+                className: cn('lf-search-highlight', classNames.highlight),
+                style: styles.highlight
+            }) : title), desc && /*#__PURE__*/ React.createElement("div", {
+                className: cn('lf-search-item-description', classNames.itemDescription),
+                style: styles.itemDescription
+            }, highlightMatches && highlightTerms ? /*#__PURE__*/ React.createElement(SearchHighlight, {
+                text: desc,
+                terms: highlightTerms,
+                className: cn('lf-search-highlight', classNames.highlight),
+                style: styles.highlight
+            }) : desc)));
+        }))));
+}
+export default SearchResults;
+export { groupResults };

package/dist/blocks/Search/meta.js

@@ -0,0 +1,258 @@
+/*
+  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 {
+    category: 'display',
+    icons: [],
+    valueType: null,
+    cssKeys: {
+        element: 'The search trigger button and modal root.',
+        trigger: 'The trigger button.',
+        triggerBadge: 'The keyboard shortcut badge on the trigger.',
+        modal: 'The antd Modal container.',
+        input: 'The search input field.',
+        results: 'The scrollable results list.',
+        group: 'A result group container.',
+        groupHeading: 'A group heading label.',
+        item: 'A result item row.',
+        itemIcon: 'The icon in a result item.',
+        itemTitle: 'The title in a result item.',
+        itemDescription: 'The description/snippet in a result item.',
+        highlight: 'Highlighted match text (<mark> elements).',
+        empty: 'The empty state message.'
+    },
+    methods: {
+        toggleOpen: 'Toggle the search modal open or closed.',
+        setOpen: 'Open or close the search modal. Accepts { open: boolean }.'
+    },
+    events: {
+        onSelect: {
+            description: 'Trigger actions when a search result is selected. Result item stored fields are spread into the event object.',
+            event: {
+                query: 'The search term.',
+                resultCount: 'Total results for the query.'
+            }
+        },
+        onSearch: {
+            description: 'Trigger actions when the search query changes.',
+            event: {
+                value: 'The search term.',
+                resultCount: 'Number of matching results.'
+            }
+        },
+        onOpen: 'Trigger actions when the search modal opens.',
+        onClose: 'Trigger actions when the search modal closes.'
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            indexUrl: {
+                type: [
+                    'string',
+                    'array'
+                ],
+                description: 'URL or array of URLs to pre-built search index JSON files.',
+                docs: {
+                    displayType: 'yaml'
+                }
+            },
+            documents: {
+                type: 'array',
+                description: 'Array of document objects for client-side indexing.',
+                items: {
+                    type: 'object'
+                },
+                docs: {
+                    displayType: 'yaml'
+                }
+            },
+            fields: {
+                type: 'array',
+                description: 'Fields to index. Required when using documents, optional for indexUrl.',
+                items: {
+                    type: 'string'
+                }
+            },
+            storeFields: {
+                type: 'array',
+                description: 'Fields to store in the index and return in results.',
+                items: {
+                    type: 'string'
+                }
+            },
+            searchOptions: {
+                type: 'object',
+                description: 'MiniSearch search options.',
+                docs: {
+                    displayType: 'yaml'
+                },
+                properties: {
+                    boost: {
+                        type: 'object',
+                        description: 'Field boost factors for relevance scoring.'
+                    },
+                    fuzzy: {
+                        type: 'number',
+                        description: 'Fuzzy matching tolerance as a fraction of term length (0 to 1).'
+                    },
+                    prefix: {
+                        type: 'boolean',
+                        description: 'Enable prefix matching.',
+                        default: true
+                    },
+                    combineWith: {
+                        type: 'string',
+                        enum: [
+                            'OR',
+                            'AND'
+                        ],
+                        default: 'OR',
+                        description: 'How to combine search terms.'
+                    }
+                }
+            },
+            label: {
+                type: 'string',
+                description: 'Trigger button text.',
+                default: 'Search'
+            },
+            icon: {
+                type: [
+                    'string',
+                    'object'
+                ],
+                description: 'Trigger button icon name or Icon block properties.',
+                docs: {
+                    displayType: 'icon'
+                }
+            },
+            showShortcut: {
+                type: 'boolean',
+                description: 'Show keyboard shortcut badge on the trigger button.',
+                default: true
+            },
+            placeholder: {
+                type: 'string',
+                description: 'Search input placeholder text.',
+                default: 'Search...'
+            },
+            shortcut: {
+                type: 'string',
+                description: 'Keyboard shortcut to open the modal. Renders a shortcut badge on the trigger button (see showShortcut). Use "mod" for Cmd on Mac, Ctrl elsewhere.',
+                default: 'mod+k'
+            },
+            width: {
+                type: 'number',
+                description: 'Modal width in pixels.',
+                default: 640
+            },
+            maxResults: {
+                type: 'number',
+                description: 'Maximum number of results displayed.',
+                default: 20
+            },
+            result: {
+                type: 'object',
+                description: 'Maps index fields to result UI slots.',
+                docs: {
+                    displayType: 'yaml'
+                },
+                properties: {
+                    title: {
+                        type: 'string',
+                        description: 'Field name for result title.',
+                        default: 'title'
+                    },
+                    description: {
+                        type: 'string',
+                        description: 'Field name for result description/snippet.'
+                    },
+                    category: {
+                        type: 'string',
+                        description: 'Field name for result grouping category.'
+                    },
+                    icon: {
+                        type: 'string',
+                        description: 'Field name for result icon name.'
+                    },
+                    pageId: {
+                        type: 'string',
+                        description: 'Field name for Lowdefy page navigation.'
+                    },
+                    url: {
+                        type: 'string',
+                        description: 'Field name for external URL navigation.'
+                    }
+                }
+            },
+            groups: {
+                type: 'array',
+                description: 'Result grouping definitions.',
+                docs: {
+                    displayType: 'yaml'
+                },
+                items: {
+                    type: 'object',
+                    properties: {
+                        label: {
+                            type: 'string',
+                            description: 'Group display label.'
+                        },
+                        match: {
+                            type: 'object',
+                            description: 'Field/value pairs to match results to this group.'
+                        },
+                        icon: {
+                            type: 'string',
+                            description: 'Icon for the group header.'
+                        }
+                    }
+                }
+            },
+            noResultsMessage: {
+                type: 'string',
+                description: 'Message shown when no results match.',
+                default: 'No results found.'
+            },
+            highlightMatches: {
+                type: 'boolean',
+                description: 'Highlight matched terms in results.',
+                default: true
+            },
+            recentSearches: {
+                type: 'boolean',
+                description: 'Show recent searches when input is empty.',
+                default: true
+            },
+            recentSearchesKey: {
+                type: 'string',
+                description: 'localStorage key prefix for recent searches.',
+                default: 'search'
+            },
+            recentSearchesCount: {
+                type: 'number',
+                description: 'Maximum number of recent searches stored.',
+                default: 5
+            },
+            theme: {
+                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'
+                }
+            }
+        }
+    }
+};

package/dist/blocks/Search/style.module.css

@@ -0,0 +1,96 @@
+/*
+  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.
+*/
+
+@layer components {
+  :global(.lf-search-results) {
+    max-height: 60vh;
+    overflow-y: auto;
+    padding: var(--ant-padding-xs) 0;
+  }
+
+  :global(.lf-search-item) {
+    display: flex;
+    align-items: center;
+    gap: var(--ant-margin-sm);
+    padding: var(--ant-padding-xs) var(--ant-padding-md);
+    cursor: pointer;
+    border-radius: var(--ant-border-radius);
+    transition: background-color 0.2s;
+  }
+
+  :global(.lf-search-item:hover) {
+    background-color: var(--ant-color-bg-text-hover);
+  }
+
+  :global(.lf-search-item-selected) {
+    background-color: var(--ant-color-primary-bg);
+  }
+
+  :global(.lf-search-item-content) {
+    flex: 1;
+    min-width: 0;
+  }
+
+  :global(.lf-search-item-title) {
+    font-weight: 500;
+    color: var(--ant-color-text);
+  }
+
+  :global(.lf-search-item-description) {
+    font-size: var(--ant-font-size-sm);
+    color: var(--ant-color-text-secondary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  :global(.lf-search-group-header) {
+    padding: var(--ant-padding-xs) var(--ant-padding-md);
+    font-size: var(--ant-font-size-sm);
+    font-weight: 600;
+    color: var(--ant-color-text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  :global(.lf-search-highlight) mark {
+    background-color: var(--ant-color-warning-bg);
+    color: inherit;
+    padding: 0 1px;
+    border-radius: 2px;
+  }
+
+  :global(.lf-search-trigger) {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ant-margin-xs);
+  }
+
+  :global(.lf-search-recent-header) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--ant-padding-xs) var(--ant-padding-md);
+    font-size: var(--ant-font-size-sm);
+    color: var(--ant-color-text-secondary);
+  }
+
+  @media (max-width: 640px) {
+    :global(.lf-search-trigger-label) {
+      display: none;
+    }
+  }
+}

package/dist/blocks/Search/useListKeyboardNav.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 { useState, useEffect, useCallback } from 'react';
+function useListKeyboardNav({ itemCount, onSelect }) {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    useEffect(()=>{
+        setSelectedIndex(0);
+    }, [
+        itemCount
+    ]);
+    const onKeyDown = useCallback((e)=>{
+        if (itemCount === 0) return;
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            setSelectedIndex((prev)=>(prev + 1) % itemCount);
+        } else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            setSelectedIndex((prev)=>(prev - 1 + itemCount) % itemCount);
+        } else if (e.key === 'Enter') {
+            e.preventDefault();
+            onSelect(selectedIndex);
+        }
+    }, [
+        itemCount,
+        onSelect,
+        selectedIndex
+    ]);
+    return {
+        selectedIndex,
+        onKeyDown
+    };
+}
+export default useListKeyboardNav;