@lowdefy/blocks-antd 5.6.0 → 6.1.0

package/dist/blocks/Result/tests/Result.e2e.yaml

@@ -0,0 +1,126 @@
+# 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.
+
+id: result
+type: Box
+
+blocks:
+  # ============================================
+  # BASIC RENDERING
+  # ============================================
+
+  - id: result_basic
+    type: Result
+    properties:
+      title: Operation Completed
+
+  - id: result_with_subtitle
+    type: Result
+    properties:
+      title: Submission Successful
+      subTitle: Your request has been processed.
+
+  # ============================================
+  # STATUS TESTS
+  # ============================================
+
+  - id: result_success
+    type: Result
+    properties:
+      status: success
+      title: Success!
+      subTitle: Operation completed successfully.
+
+  - id: result_error
+    type: Result
+    properties:
+      status: error
+      title: Error
+      subTitle: Something went wrong.
+
+  - id: result_info
+    type: Result
+    properties:
+      status: info
+      title: Information
+      subTitle: Here is some information.
+
+  - id: result_warning
+    type: Result
+    properties:
+      status: warning
+      title: Warning
+      subTitle: Please review carefully.
+
+  - id: result_404
+    type: Result
+    properties:
+      status: '404'
+      title: Page Not Found
+      subTitle: The page you are looking for does not exist.
+
+  - id: result_403
+    type: Result
+    properties:
+      status: '403'
+      title: Access Denied
+      subTitle: You do not have permission to access this page.
+
+  - id: result_500
+    type: Result
+    properties:
+      status: '500'
+      title: Server Error
+      subTitle: Internal server error occurred.
+
+  # ============================================
+  # ICON TESTS
+  # ============================================
+
+  - id: result_custom_icon
+    type: Result
+    properties:
+      title: Custom Icon Result
+      icon: AiOutlineSmile
+
+  # ============================================
+  # CONTENT AREA TESTS
+  # ============================================
+
+  - id: result_with_content
+    type: Result
+    properties:
+      status: success
+      title: Payment Successful
+      subTitle: 'Order number: 2017182818828182881'
+    slots:
+      content:
+        blocks:
+          - id: result_content_paragraph
+            type: Paragraph
+            properties:
+              content: Additional content can be placed here.
+
+  - id: result_with_extra
+    type: Result
+    properties:
+      status: success
+      title: Order Placed
+    slots:
+      extra:
+        blocks:
+          - id: result_extra_button
+            type: Button
+            properties:
+              title: Go Home

package/dist/blocks/Result/tests.yaml

@@ -0,0 +1,75 @@
+# 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.
+
+- id: default
+  type: Result
+- id: properties.title
+  type: Result
+  properties:
+    title: Result title
+- id: 'properties.subTitle: subTitle text'
+  type: Result
+  properties:
+    subTitle: subTitle text
+- id: 'areas.extra'
+  type: Result
+  areas:
+    content:
+      blocks:
+        - id: test
+          type: Test
+    extra:
+      blocks:
+        - id: test
+          type: Test
+- id: 'properties. icon: AiFillApi'
+  type: Result
+  properties:
+    icon: AiFillApi
+- id: 'properties. status: success  default is info'
+  type: Result
+  properties:
+    status: success
+- id: 'properties. status: error'
+  type: Result
+  properties:
+    status: error
+- id: 'properties. status: info'
+  type: Result
+  properties:
+    status: info
+- id: 'properties. status: warning'
+  type: Result
+  properties:
+    status: warning
+- id: 'properties. status: 404'
+  type: Result
+  properties:
+    status: '404'
+- id: 'properties. status: 403'
+  type: Result
+  properties:
+    status: '403'
+- id: 'properties. status: 500'
+  type: Result
+  properties:
+    status: '500'
+- id: 'with properties.title in html'
+  type: Result
+  properties:
+    title: '<div style="color:red;">Html Title</div>'
+- id: 'with properties.subTitle in html'
+  type: Result
+  properties:
+    subTitle: '<div style="color:green;">Html Subtitle</div>'

package/dist/blocks/Search/Search.js

@@ -20,7 +20,7 @@ import withTheme from '../withTheme.js';
 import SearchModal from './SearchModal.js';
 import useSearchIndex from './useSearchIndex.js';
 import useRecentSearches from './useRecentSearches.js';
-import './style.module.css';
+import './style.css';
 const isMac = typeof navigator !== 'undefined' && /Mac|iPhone|iPad|iPod/.test(navigator.userAgent);
 function parseShortcut(shortcut) {
     if (!shortcut) return null;

package/dist/blocks/Search/SearchModal.js

@@ -13,7 +13,7 @@
   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 { Empty, Input, Modal, Spin } from 'antd';
 import { ClockCircleOutlined, SearchOutlined } from '@ant-design/icons';
 import { cn } from '@lowdefy/block-utils';
 import SearchResults, { groupResults } from './SearchResults.js';
@@ -103,6 +103,16 @@ function SearchModal({ open, onClose, properties, methods, classNames = {}, styl
     }, [
         open
     ]);
+    // When the index (re)builds while the modal is open — documents resolved
+    // after opening, or the bound request refreshed — re-run the current query
+    // so the spinner hands over to real results without a close/reopen.
+    useEffect(()=>{
+        if (!open || !query) return;
+        setResults(searchIndex.search(query));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        searchIndex.version
+    ]);
     useEffect(()=>{
         if (open && inputRef.current) {
             setTimeout(()=>inputRef.current?.focus(), 100);
@@ -110,7 +120,7 @@ function SearchModal({ open, onClose, properties, methods, classNames = {}, styl
     }, [
         open
     ]);
-    const showRecent = !query && properties.recentSearches !== false && recentSearches.recentSearches.length > 0;
+    const showRecent = !query && !searchIndex.loading && properties.recentSearches !== false && recentSearches.recentSearches.length > 0;
     return /*#__PURE__*/ React.createElement(Modal, {
         open: open,
         footer: null,
@@ -131,15 +141,14 @@ function SearchModal({ open, onClose, properties, methods, classNames = {}, styl
         onChange: handleInputChange,
         onKeyDown: onKeyDown
     }), searchIndex.loading && /*#__PURE__*/ React.createElement("div", {
+        className: cn('lf-search-loading', classNames.loading),
         style: {
-            padding: 16
-        }
-    }, /*#__PURE__*/ React.createElement(Skeleton, {
-        active: true,
-        paragraph: {
-            rows: 3
+            display: 'flex',
+            justifyContent: 'center',
+            padding: 32,
+            ...styles.loading
         }
-    })), !searchIndex.loading && query && flatResults.length === 0 && /*#__PURE__*/ React.createElement(Empty, {
+    }, /*#__PURE__*/ React.createElement(Spin, null)), !searchIndex.loading && query && flatResults.length === 0 && /*#__PURE__*/ React.createElement(Empty, {
         className: cn(classNames.empty),
         style: {
             padding: 32,

package/dist/blocks/Search/gallery.yaml

@@ -0,0 +1,170 @@
+# 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.
+
+- title: Pre-built Index
+  description: >
+    Load a pre-built search index from a static JSON file. The index is
+    generated at build time by a _ref transformer and served from the
+    public/ folder. See the guide above for the full transformer code.
+  blocks:
+    - id: example_search_prebuilt
+      type: Search
+      properties:
+        indexUrl: /search-index.json
+        placeholder: Search pages...
+        result:
+          title: title
+          description: snippet
+          category: section
+          pageId: pageId
+        groups:
+          - label: Concepts
+            match:
+              section: Concepts
+            icon: AiOutlineBulb
+          - label: Blocks
+            match:
+              section: Blocks
+            icon: AiOutlineLayout
+      events:
+        onSelect:
+          - id: navigate
+            type: Link
+            params:
+              pageId:
+                _event: pageId
+
+- title: Runtime Documents
+  description: >
+    Pass an array of documents directly — no index file needed. The block
+    indexes them client-side using MiniSearch. Good for small datasets,
+    dynamic content from requests, or prototyping.
+  blocks:
+    - id: example_search_runtime
+      type: Search
+      properties:
+        documents:
+          - id: users
+            title: User Management
+            body: Create, edit, and deactivate user accounts. Assign roles and permissions.
+            category: Admin
+          - id: billing
+            title: Billing & Invoices
+            body: View invoices, update payment methods, and download receipts.
+            category: Finance
+          - id: reports
+            title: Analytics Reports
+            body: Dashboard with charts for revenue, signups, and engagement metrics.
+            category: Analytics
+          - id: settings
+            title: App Settings
+            body: Configure notifications, theme, language, and integration API keys.
+            category: Admin
+          - id: api-keys
+            title: API Keys
+            body: Generate and revoke API keys for third-party integrations.
+            category: Admin
+        fields: [title, body]
+        storeFields: [title, category, id]
+        searchOptions:
+          boost:
+            title: 2
+          fuzzy: 0.2
+        result:
+          title: title
+          description: body
+          category: category
+        groups:
+          - label: Admin
+            match:
+              category: Admin
+            icon: AiOutlineSetting
+          - label: Finance
+            match:
+              category: Finance
+            icon: AiOutlineDollar
+          - label: Analytics
+            match:
+              category: Analytics
+            icon: AiOutlineBarChart
+        placeholder: Search features...
+        label: Find
+        shortcut: mod+k
+      events:
+        onSelect:
+          - id: show_result
+            type: DisplayMessage
+            params:
+              content:
+                _string.concat:
+                  - 'Selected: '
+                  - _event: title
+
+- title: Custom Shortcut
+  description: >
+    Change the keyboard shortcut and trigger label. The shortcut badge
+    updates automatically.
+  blocks:
+    - id: example_search_custom_shortcut
+      type: Search
+      properties:
+        indexUrl: /search-index.json
+        shortcut: mod+j
+        label: Quick Find
+        placeholder: Quick find...
+      events:
+        onSelect:
+          - id: navigate
+            type: Link
+            params:
+              pageId:
+                _event: pageId
+
+- title: Analytics Events
+  description: >
+    Use onSearch and onSelect events to track search analytics — what users
+    search for, how many results they see, and which results they click.
+  blocks:
+    - id: example_search_analytics
+      type: Search
+      properties:
+        indexUrl: /search-index.json
+      events:
+        onSearch:
+          - id: track_search
+            type: DisplayMessage
+            params:
+              content:
+                _string.concat:
+                  - 'Search: "'
+                  - _event: value
+                  - '" ('
+                  - _event: resultCount
+                  - ' results)'
+        onSelect:
+          - id: track_click
+            type: DisplayMessage
+            params:
+              content:
+                _string.concat:
+                  - 'Clicked "'
+                  - _event: title
+                  - '" for query "'
+                  - _event: query
+                  - '"'
+          - id: navigate
+            type: Link
+            params:
+              pageId:
+                _event: pageId

package/dist/blocks/Search/meta.js

@@ -30,7 +30,8 @@
         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.'
+        empty: 'The empty state message.',
+        loading: 'The loading spinner container.'
     },
     methods: {
         toggleOpen: 'Toggle the search modal open or closed.',

package/dist/blocks/Search/{style.module.css → style.css}

@@ -15,13 +15,13 @@
 */
 
 @layer components {
-  :global(.lf-search-results) {
+  .lf-search-results {
     max-height: 60vh;
     overflow-y: auto;
     padding: var(--ant-padding-xs) 0;
   }
 
-  :global(.lf-search-item) {
+  .lf-search-item {
     display: flex;
     align-items: center;
     gap: var(--ant-margin-sm);
@@ -31,25 +31,25 @@
     transition: background-color 0.2s;
   }
 
-  :global(.lf-search-item:hover) {
+  .lf-search-item:hover {
     background-color: var(--ant-color-bg-text-hover);
   }
 
-  :global(.lf-search-item-selected) {
+  .lf-search-item-selected {
     background-color: var(--ant-color-primary-bg);
   }
 
-  :global(.lf-search-item-content) {
+  .lf-search-item-content {
     flex: 1;
     min-width: 0;
   }
 
-  :global(.lf-search-item-title) {
+  .lf-search-item-title {
     font-weight: 500;
     color: var(--ant-color-text);
   }
 
-  :global(.lf-search-item-description) {
+  .lf-search-item-description {
     font-size: var(--ant-font-size-sm);
     color: var(--ant-color-text-secondary);
     white-space: nowrap;
@@ -57,7 +57,7 @@
     text-overflow: ellipsis;
   }
 
-  :global(.lf-search-group-header) {
+  .lf-search-group-header {
     padding: var(--ant-padding-xs) var(--ant-padding-md);
     font-size: var(--ant-font-size-sm);
     font-weight: 600;
@@ -66,20 +66,27 @@
     letter-spacing: 0.05em;
   }
 
-  :global(.lf-search-highlight) mark {
+  .lf-search-highlight mark {
     background-color: var(--ant-color-warning-bg);
     color: inherit;
     padding: 0 1px;
     border-radius: 2px;
   }
 
-  :global(.lf-search-trigger) {
+  .lf-search-trigger {
     display: inline-flex;
     align-items: center;
     gap: var(--ant-margin-xs);
   }
 
-  :global(.lf-search-recent-header) {
+  /* Grow the label so the shortcut badge sits at the end of the trigger when
+     it is wider than its content (e.g. a min-width styled trigger). */
+  .lf-search-trigger-label {
+    flex: 1 1 auto;
+    text-align: left;
+  }
+
+  .lf-search-recent-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -89,7 +96,7 @@
   }
 
   @media (max-width: 640px) {
-    :global(.lf-search-trigger-label) {
+    .lf-search-trigger-label {
       display: none;
     }
   }

package/dist/blocks/Search/tests/Search.e2e.yaml

@@ -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.
+
+id: search_block
+type: Box
+
+blocks:
+  # ============================================
+  # BASIC RENDERING
+  # ============================================
+
+  - id: search_basic
+    type: Search
+    properties:
+      label: Search Docs
+      documents:
+        - id: doc1
+          title: Getting Started
+          body: A quick introduction to Lowdefy.
+          category: Guides
+        - id: doc2
+          title: Authentication
+          body: Set up login providers and user roles.
+          category: Guides
+        - id: doc3
+          title: Button Block
+          body: Display block with click events.
+          category: Blocks
+      fields:
+        - title
+        - body
+      storeFields:
+        - title
+        - category
+
+  # ============================================
+  # CUSTOM LABEL
+  # ============================================
+
+  - id: search_custom_label
+    type: Search
+    properties:
+      label: Find anything...
+      showShortcut: false
+      documents: []
+      fields:
+        - title
+
+  # ============================================
+  # EVENTS
+  # ============================================
+
+  - id: search_events
+    type: Search
+    properties:
+      label: Search with Events
+      documents:
+        - id: ev1
+          title: Test Result
+          body: A test document for event testing.
+      fields:
+        - title
+        - body
+      storeFields:
+        - title
+    events:
+      onOpen:
+        - id: search_open_set
+          type: SetState
+          params:
+            search_opened: true
+      onClose:
+        - id: search_close_set
+          type: SetState
+          params:
+            search_closed: true
+
+  - id: search_open_display
+    type: Paragraph
+    properties:
+      content:
+        _if:
+          test:
+            _eq:
+              - _state: search_opened
+              - true
+          then: Opened!
+          else: ''
+
+  - id: search_close_display
+    type: Paragraph
+    properties:
+      content:
+        _if:
+          test:
+            _eq:
+              - _state: search_closed
+              - true
+          then: Closed!
+          else: ''
+
+  # ============================================
+  # SHORTCUT TESTS
+  # ============================================
+
+  - id: search_shortcut_custom
+    type: Search
+    properties:
+      label: Custom Shortcut
+      shortcut: mod+.
+      showShortcut: true
+      documents: []
+      fields:
+        - title