@lowdefy/blocks-basic 0.0.0-experimental-20260928105334 → 0.0.0-experimental-20260929101721

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

@@ -18,6 +18,9 @@ blocks:
   - id: clickable_basic
     type: ClickableHtml
     properties:
+      dataEvents:
+        - onGreetClick
+        - onWaveClick
       html: '<p>Hello <button data-event="onGreetClick" data-user-id="u_1">World</button> <button data-event="onWaveClick" data-user-id="u_2">Wave</button></p>'
     events:
       onGreetClick:
@@ -67,3 +70,119 @@ blocks:
     type: ClickableHtml
     properties:
       html: <p>Safe content</p><script>alert('xss')</script>
+
+  - id: clickable_confirm
+    type: ClickableHtml
+    properties:
+      dataEvents:
+        - onDelete
+      html: '<button id="confirm_delete" data-event="onDelete" data-row-id="7" data-confirm="Delete row 7?">Delete</button> <button id="proto_event" data-event="__proto__">Proto</button>'
+    events:
+      onDelete:
+        - id: count_delete
+          type: SetState
+          params:
+            delete_count:
+              _sum:
+                - _state:
+                    key: delete_count
+                    default: 0
+                - 1
+
+  - id: clickable_confirm_result
+    type: Html
+    properties:
+      html:
+        _string.concat:
+          - '<span id="delete_count">'
+          - _json.stringify:
+              - _state:
+                  key: delete_count
+                  default: 0
+          - '</span>'
+
+  - id: clickable_allowlist
+    type: ClickableHtml
+    properties:
+      dataEvents:
+        - onListedClick
+      html: '<span id="listed_target" data-event="onListedClick">Listed</span> <span id="unlisted_target" data-event="onUnlistedClick">Unlisted</span>'
+    events:
+      onListedClick:
+        - id: set_listed
+          type: SetState
+          params:
+            allowlist_fired: listed
+      onUnlistedClick:
+        - id: set_unlisted
+          type: SetState
+          params:
+            allowlist_fired: unlisted
+
+  - id: clickable_declared_confirm
+    type: ClickableHtml
+    properties:
+      dataEvents:
+        - name: onRemove
+          confirm: Remove row 3?
+      html: '<button id="declared_remove" data-event="onRemove" data-row-id="3">Remove</button>'
+    events:
+      onRemove:
+        - id: set_removed
+          type: SetState
+          params:
+            removed_row:
+              _event: row_id
+
+  - id: clickable_refresh
+    type: ClickableHtml
+    properties:
+      dataEvents:
+        - onRefreshSoon
+        - onRefreshDelete
+      html:
+        _string.concat:
+          - '<button id="refresh_soon" data-event="onRefreshSoon">Refresh soon</button><p id="refresh_count">Refreshed '
+          - _state:
+              key: refresh_count
+              default: 0
+          - '</p><button id="refresh_delete" data-event="onRefreshDelete" data-id="5" data-confirm="Delete 5?">Delete</button> <span id="refresh_more" data-popover="more">More</span><div data-popover-content="more" hidden><span class="refresh-menu">Menu after '
+          - _state:
+              key: refresh_count
+              default: 0
+          - '</span></div>'
+    events:
+      onRefreshSoon:
+        - id: wait
+          type: Wait
+          params:
+            ms: 1000
+        - id: refresh
+          type: SetState
+          params:
+            refresh_count: 1
+      onRefreshDelete:
+        - id: set_refresh_deleted
+          type: SetState
+          params:
+            refresh_deleted:
+              _event: id
+
+  - id: clickable_events_result
+    type: Html
+    properties:
+      html:
+        _string.concat:
+          - '<span id="allowlist_fired">'
+          - _state:
+              key: allowlist_fired
+              default: ''
+          - '</span><span id="removed_row">'
+          - _state:
+              key: removed_row
+              default: ''
+          - '</span><span id="refresh_deleted">'
+          - _state:
+              key: refresh_deleted
+              default: ''
+          - '</span>'

package/dist/blocks/ClickableHtml/tests.yaml

@@ -16,6 +16,8 @@
 - id: properties.html
   type: ClickableHtml
   properties:
+    dataEvents:
+      - onGoClick
     html: |
       <p>Plain markup <button data-event="onGoClick" data-item-id="1">Go</button></p>
 - id: properties.html-no-events
@@ -26,6 +28,8 @@
 - id: properties.html-bad-code
   type: ClickableHtml
   properties:
+    dataEvents:
+      - onOkClick
     html: |
       <button data-event="onOkClick" onclick="alert('inline handler stripped')">Ok</button>
       <script>alert('script tag');</script>
@@ -33,3 +37,12 @@
   type: ClickableHtml
   properties:
     html: 0
+- id: properties.dataEvents
+  type: ClickableHtml
+  properties:
+    dataEvents:
+      - onEditClick
+      - name: onDeleteClick
+        confirm: Delete this row?
+    html: |
+      <p><button data-event="onEditClick">Edit</button> <button data-event="onDeleteClick">Delete</button></p>

package/dist/blocks/DangerousHtml/DangerousHtml.js

@@ -13,39 +13,39 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React from 'react';
-import DOMPurify from 'dompurify';
-import { withBlockDefaults } from '@lowdefy/block-utils';
-import { type } from '@lowdefy/helpers';
+import { HtmlComponent, withBlockDefaults } from '@lowdefy/block-utils';
 let DangerousHtml = class DangerousHtml extends React.Component {
+    warnOnOptionsChange() {
+        const { DOMPurifyOptions } = this.props.properties;
+        if (!this.warnedOptionsChange && JSON.stringify(DOMPurifyOptions) !== JSON.stringify(this.DOMPurifyOptions)) {
+            this.warnedOptionsChange = true;
+            console.warn(`DangerousHtml block "${this.props.blockId}": DOMPurifyOptions changed after mount and the change is ignored. The sanitizer options are fixed at the first render; write them as a literal, not from state.`);
+        }
+    }
     componentDidMount() {
-        const htmlString = type.isNone(this.props.properties.html) ? '' : this.props.properties.html.toString();
-        this.div.innerHTML = DOMPurify.sanitize(htmlString, this.DOMPurifyOptions);
+        this.warnOnOptionsChange();
     }
     componentDidUpdate() {
-        const htmlString = type.isNone(this.props.properties.html) ? '' : this.props.properties.html.toString();
-        this.div.innerHTML = DOMPurify.sanitize(htmlString, this.DOMPurifyOptions);
+        this.warnOnOptionsChange();
     }
     render() {
-        const { blockId, classNames, styles } = this.props;
-        return /*#__PURE__*/ React.createElement("div", {
+        const { blockId, classNames, properties, styles } = this.props;
+        return /*#__PURE__*/ React.createElement(HtmlComponent, {
+            div: true,
+            html: properties.html,
             id: blockId,
-            "data-testid": blockId,
-            ref: (el)=>{
-                if (el) {
-                    this.div = el;
-                }
-            },
             className: classNames?.element,
+            sanitizeOptions: this.DOMPurifyOptions,
             style: styles?.element
         });
     }
     constructor(props){
         super(props);
-        this.div = {
-            innerHTML: ''
-        };
-        // we do not revaluate DOMPurifyOptions improve options safety by not making options dynamic.
+        // The sanitizer options are fixed at mount on purpose: a later, operator-driven
+        // value could loosen the sanitizer from state. A change is refused loudly
+        // rather than ignored silently.
         this.DOMPurifyOptions = props.properties.DOMPurifyOptions;
+        this.warnedOptionsChange = false;
     }
 };
 export default withBlockDefaults(DangerousHtml);

package/dist/blocks/DangerousHtml/meta.js

@@ -19,13 +19,25 @@
     cssKeys: {
         element: 'The DangerousHtml element.'
     },
+    hazards: [
+        {
+            id: 'dangerous-html-unsanitised',
+            message: 'Content is rendered without sanitising, so never pass caller-supplied or database HTML through it. Use Html for anything a user could have written.',
+            see: 'display-blocks/dangeroushtml'
+        },
+        {
+            id: 'dompurify-options-first-render',
+            message: 'DOMPurifyOptions is read once when the block mounts, so a value that changes after the first render has no effect. Set it statically or remount the block.',
+            see: 'display-blocks/dangeroushtml'
+        }
+    ],
     properties: {
         type: 'object',
         additionalProperties: false,
         properties: {
             html: {
                 type: 'string',
-                description: 'Content to be rendered as Html.',
+                description: 'Content to be rendered as Html. The Html block attributes (data-icon, data-tooltip, data-popover, data-page-id links, data-new-tab, data-tag, data-status, data-time, data-format, data-avatar, data-copy, data-truncate, data-tone) work here too, unless DOMPurifyOptions removes data attributes.',
                 docs: {
                     displayType: 'text-area'
                 }

package/dist/blocks/Dynamic/Dynamic.js

@@ -13,7 +13,7 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React from 'react';
-import { withBlockDefaults } from '@lowdefy/block-utils';
+import { isEventFromDomDescendant, withBlockDefaults } from '@lowdefy/block-utils';
 // Server-resolved container. The server fills the content slot at page get by
 // calling the configured api endpoint — by the time config reaches the client,
 // content holds the resolved blocks (or the fallback blocks on failure).
@@ -21,9 +21,11 @@ const Dynamic = ({ blockId, classNames, content, events, methods, styles })=>{
     return /*#__PURE__*/ React.createElement("div", {
         id: blockId,
         "data-testid": blockId,
-        onClick: ()=>methods.triggerEvent({
+        onClick: (event)=>{
+            if (isEventFromDomDescendant(event)) methods.triggerEvent({
                 name: 'onClick'
-            }),
+            });
+        },
         className: classNames?.element,
         style: {
             outline: 'none',

package/dist/blocks/Dynamic/meta.js

@@ -38,6 +38,10 @@
                 type: 'object',
                 description: 'Static values passed to the endpoint payload as params. Operators are not allowed — read runtime values in the endpoint routine with _payload, _user or _secret.'
             },
+            policy: {
+                type: 'string',
+                description: 'Id of a policies.dynamicBlocks entry in lowdefy.yaml. The resolved content must pass the policy on every page get. The endpoint returns stored content as config by reading the blocks of a ValidateDynamic step with the same policy. Replaces types: the policy lists are bundled.'
+            },
             required: {
                 type: 'boolean',
                 default: false,

package/dist/blocks/Html/gallery.yaml

@@ -237,3 +237,31 @@
           border: 1px solid var(--ant-color-border)
       properties:
         html: '<h4 style="margin: 0 0 8px 0;">Elevated Block</h4><p style="margin: 0;">Uses bg-elevated token for a surface that adapts to light and dark mode.</p>'
+
+- title: Icons, tooltips and popovers
+  blocks:
+    - id: html_icons
+      type: Html
+      properties:
+        html: '<p><i data-icon="success" style="color: var(--ant-color-success)"></i> Saved <span data-tooltip="Saved to the cloud 2 minutes ago" style="text-decoration: underline dotted">just now</span></p><p><i data-icon="warning" style="color: var(--ant-color-warning)"></i> 3 fields need attention. <span data-popover="fields" style="color: var(--ant-color-primary); cursor: pointer">Which? <i data-icon="chevron-down"></i></span></p><div data-popover-content="fields" hidden><ul style="margin: 0; padding-left: 16px"><li>Email</li><li>Phone</li><li>Address</li></ul></div>'
+
+- title: Links and status tags
+  blocks:
+    - id: html_links_tags
+      type: Html
+      properties:
+        html: '<p><a data-page-id="Button">Button</a> moved to <span data-tag="success">Released</span> · <a data-page-id="theming" data-url-query="section=icons">Theming</a> is <span data-tag="warning">In review</span> · <a href="https://ant.design" data-new-tab>Ant Design</a> <i data-icon="external-link"></i></p><p><span data-status="success">Online</span> &nbsp; <span data-status="processing">Syncing</span> &nbsp; <span data-status="error">Offline</span></p><p><span data-tag>Design</span> <span data-tag>Engineering</span> <span data-tag>Support</span> <span data-tag="purple">Beta</span> <span data-tag="#0f766e">Custom colour</span></p>'
+
+- title: Dates, numbers, avatars and copy
+  blocks:
+    - id: html_time_format
+      type: Html
+      properties:
+        html: '<p><span data-avatar="Jane Doe"></span> Jane Doe updated the invoice <time datetime="2026-01-05T09:30:00Z" data-time="relative"></time> (<time datetime="2026-01-05T09:30:00Z" data-time="D MMM YYYY"></time>) · <span data-format="currency" data-currency="USD">1234.5</span> · <span data-format="percent" data-decimals="1">0.123</span> of target · <span data-format="bytes">1536000</span> attached</p><p>Invoice number <code data-copy>INV-2026-0042</code> · owner <img data-avatar="Sam Smith" src="" style="--lf-avatar-size: 32px"></p>'
+
+- title: Truncation and text tone
+  blocks:
+    - id: html_truncate_tone
+      type: Html
+      properties:
+        html: '<div style="max-width: 320px"><div data-truncate><b>Quarterly report for the northern region, including every branch and its targets</b></div><div data-truncate="2" data-tone="secondary">The report covers revenue, costs and headcount for each branch, compares them with the same quarter last year, and lists the actions each branch manager agreed for the next quarter.</div><div><span data-tone="tertiary">Updated 3 days ago</span> · <span data-tone="success">On track</span> · <span data-tone="quaternary">—</span></div></div>'

package/dist/blocks/Html/meta.js

@@ -19,6 +19,28 @@
     cssKeys: {
         element: 'The Html element.'
     },
+    hazards: [
+        {
+            id: 'html-style-stripped',
+            message: 'Content is sanitised with DOMPurify, so <style>, <script> and inline event handlers are removed before render. Use DangerousHtml for a trusted <style> block, or style the block through its style and class properties.',
+            see: 'display-blocks/html'
+        },
+        {
+            id: 'html-no-click-events',
+            message: 'Html fires no events from its markup: data-event attributes do nothing here. Use ClickableHtml for clickable elements, including icons.',
+            see: 'display-blocks/clickablehtml'
+        },
+        {
+            id: 'html-hardcoded-links',
+            message: 'Link to app pages with <a data-page-id="page-id" data-url-query="key=value">, not <a href="/page-id?key=value">. A hard-coded href reloads the whole app on click, ignores basePath and is not checked by the build. Use data-new-tab, not target="_blank", which sanitising removes.',
+            see: 'concepts/html-attributes'
+        },
+        {
+            id: 'html-inline-status-pills',
+            message: 'Show statuses with <span data-tag="success">Approved</span> or <span data-status="warning">Syncing</span>, not inline-styled pills or hex status colours. data-tag and data-status follow the theme and dark mode and match the ag-grid tag cells.',
+            see: 'concepts/html-attributes'
+        }
+    ],
     events: {
         onTextSelection: 'Trigger action when text is selected and pass selected text to the event object.'
     },
@@ -28,7 +50,7 @@
         properties: {
             html: {
                 type: 'string',
-                description: 'Content to be rendered as Html.',
+                description: 'Content to be rendered as Html. It understands these attributes: data-icon="edit" renders an icon (a semantic name like edit, delete or warning, or a Lucide icon name like Pencil); data-tooltip="Text" shows a tooltip on hover and focus; data-popover="id" toggles a popover showing the element with data-popover-content="id" (mark it hidden); <a data-page-id="page-id" data-url-query="key=value"> links to an app page without reloading (never hard-code href="/page"); data-link opts an existing app-relative <a href="/path"> into the same navigation; data-new-tab opens a link in a new tab (target is stripped by sanitising); data-tag="success" renders a tinted status tag and data-status="success" a status dot (tones success, processing, info, warning, error, default, an antd preset colour, a CSS colour, or any other value to seed a stable colour); <time datetime="ISO" data-time="relative"> renders a date as relative, date, datetime, time or a dayjs format; data-format="currency" data-currency="USD" formats the element\'s number as number, currency, percent, compact or bytes; data-avatar="Jane Doe" renders initials (on an <img>, a fallback for a broken image; never use an avatar image service); data-copy adds a copy button for the element\'s text or the attribute\'s value; data-truncate="2" clamps block text to 1–6 lines with the full text in a tooltip when cut off; data-tone="secondary" colours text with a theme tone (secondary, tertiary, quaternary, success, warning, error, info). See the HTML attributes docs page.',
                 docs: {
                     displayType: 'text-area'
                 }

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

@@ -54,3 +54,15 @@ blocks:
           params:
             selected_text:
               _event: selectedText
+
+  - id: html_enhanced
+    type: Html
+    properties:
+      html: >-
+        <i id="enh_icon" data-icon="edit"></i>
+        <span id="enh_tooltip" data-tooltip="&lt;img src=x onerror=&quot;window.tooltipXss=1&quot;&gt;">Hover</span>
+        <span id="enh_popover" data-popover="more">More</span>
+        <div data-popover-content="more" hidden><b class="enh-popover-body">Popover body</b></div>
+        <a id="enh_page_link" data-page-id="clickablehtml" data-url-query="tab=a">Clickable</a>
+        <a id="enh_dot_link" href="/.//evil.example/x" data-link>Dot link</a>
+        <span id="enh_copy_long" data-copy="npm install lowdefy-package-with-a-long-name --save-dev">Install</span>

package/dist/blocks/Icon/Icon.js

@@ -14,5 +14,25 @@
   limitations under the License.
 */ import React from 'react';
 import { withBlockDefaults } from '@lowdefy/block-utils';
-const IconBlock = ({ components: { Icon }, ...props })=>/*#__PURE__*/ React.createElement(Icon, props);
+// An Icon block with an onClick event is a control, so it takes keyboard focus
+// and Enter/Space fire the event like a click. The icon component other blocks
+// render (inside a Button, an Alert) stays untouched: their block is the control.
+const IconBlock = ({ components: { Icon }, events, methods, ...props })=>{
+    const keyboardProps = events.onClick ? {
+        tabIndex: 0,
+        onKeyDown: (event)=>{
+            if (event.key !== 'Enter' && event.key !== ' ') return;
+            event.preventDefault();
+            methods.triggerEvent({
+                name: 'onClick'
+            });
+        }
+    } : {};
+    return /*#__PURE__*/ React.createElement(Icon, {
+        events: events,
+        methods: methods,
+        ...keyboardProps,
+        ...props
+    });
+};
 export default withBlockDefaults(IconBlock);