@lowdefy/blocks-basic 0.0.0-experimental-20260925135632 → 0.0.0-experimental-20260925210809

package/dist/blocks/Anchor/meta.js

@@ -65,7 +65,7 @@
                     'string',
                     'object'
                 ],
-                description: "Name of an React-Icon (See <a href='https://react-icons.github.io/react-icons/'>all icons</a>) or properties of an Icon block for anchor icon.",
+                description: "Icon name (a semantic name like edit, or a <a href='https://react-icons.github.io/react-icons/'>React Icons</a> name like LuPencil) or properties of an Icon block for anchor icon.",
                 docs: {
                     displayType: 'icon'
                 }

package/dist/blocks/ClickableHtml/ClickableHtml.js

@@ -14,32 +14,12 @@
   limitations under the License.
 */ import React from 'react';
 import { withBlockDefaults, HtmlComponent } from '@lowdefy/block-utils';
-// dataset keys are camelCase (data-record-id → recordId); config authors
-// write the attributes in kebab-case, so hand them back as snake_case.
-function toSnakeCase(key) {
-    return key.replace(/[A-Z]/g, (match)=>`_${match.toLowerCase()}`);
-}
-const ClickableHtml = ({ blockId, classNames, events, properties, methods, styles })=>{
-    // Each clickable element names the event it fires in its data-event
-    // attribute (data-event="onEditClick" → events.onEditClick), so every
-    // target in the markup has its own action chain. Its other data-*
-    // attributes are the event object.
-    function onClick(clickEvent) {
-        const target = clickEvent.target.closest('[data-event]');
-        if (!target || !clickEvent.currentTarget.contains(target)) return;
-        const { event: name, ...data } = target.dataset;
-        if (!name) return;
-        clickEvent.preventDefault();
-        const event = {};
-        Object.keys(data).forEach((key)=>{
-            event[toSnakeCase(key)] = data[key];
-        });
-        methods.triggerEvent({
-            name,
-            event
-        });
-    }
-    return /*#__PURE__*/ React.createElement(HtmlComponent, {
+// Each clickable element names the event it fires in its data-event attribute
+// (data-event="onEditClick" → events.onEditClick), so every target in the
+// markup has its own action chain. Its other data-* attributes are the event
+// object. HtmlComponent finds the target, including inside data-popover
+// content, and prevents the element's default action.
+const ClickableHtml = ({ blockId, classNames, events, properties, methods, styles })=>/*#__PURE__*/ React.createElement(HtmlComponent, {
         div: true,
         events: events,
         html: properties.html,
@@ -47,7 +27,6 @@ const ClickableHtml = ({ blockId, classNames, events, properties, methods, style
         methods: methods,
         className: classNames?.element,
         style: styles?.element,
-        onClick: onClick
+        onDataEvent: methods.triggerEvent
     });
-};
 export default withBlockDefaults(ClickableHtml);

package/dist/blocks/ClickableHtml/gallery.yaml

@@ -111,3 +111,70 @@
             type: SetState
             params:
               style_card_action: remove
+
+- title: Clickable icons and a popover menu
+  blocks:
+    - id: row_actions
+      type: ClickableHtml
+      properties:
+        html: '<p>Invoice INV-042 <i data-icon="edit" data-event="onEdit" data-id="42" data-tooltip="Edit" style="cursor: pointer"></i> <span data-popover="more" style="cursor: pointer"><i data-icon="more-vertical"></i></span></p><div data-popover-content="more" hidden><p data-event="onDuplicate" data-id="42" style="cursor: pointer; margin: 0 0 8px"><i data-icon="copy"></i> Duplicate</p><p data-event="onDelete" data-id="42" style="cursor: pointer; margin: 0; color: var(--ant-color-error)"><i data-icon="delete"></i> Delete</p></div>'
+      events:
+        onEdit:
+          - id: set_edit
+            type: SetState
+            params:
+              row_actions_last: { _string.concat: ['edit ', { _event: id }] }
+        onDuplicate:
+          - id: set_duplicate
+            type: SetState
+            params:
+              row_actions_last: { _string.concat: ['duplicate ', { _event: id }] }
+        onDelete:
+          - id: set_delete
+            type: SetState
+            params:
+              row_actions_last: { _string.concat: ['delete ', { _event: id }] }
+    - id: row_actions_result
+      type: Html
+      properties:
+        html:
+          _string.concat:
+            - '<p>Last action: <code>'
+            - _state:
+                key: row_actions_last
+                default: 'none yet'
+            - '</code></p>'
+
+- title: Confirm before an event
+  blocks:
+    - id: confirm_actions
+      type: ClickableHtml
+      properties:
+        html: '<p>INV-2026-0042 <i data-icon="delete" data-event="onDelete" data-id="42" data-tooltip="Delete" data-confirm="Delete invoice INV-2026-0042?" style="cursor: pointer; color: var(--ant-color-error)"></i> <span data-event="onArchive" data-id="42" data-confirm style="cursor: pointer; color: var(--ant-color-primary)">Archive</span></p>'
+      events:
+        onDelete:
+          - id: deleted
+            type: SetState
+            params:
+              confirm_last:
+                _string.concat:
+                  - 'deleted '
+                  - _event: id
+        onArchive:
+          - id: archived
+            type: SetState
+            params:
+              confirm_last:
+                _string.concat:
+                  - 'archived '
+                  - _event: id
+    - id: confirm_result
+      type: Html
+      properties:
+        html:
+          _string.concat:
+            - '<p>Last action: <code>'
+            - _state:
+                key: confirm_last
+                default: 'none yet'
+            - '</code></p>'

package/dist/blocks/ClickableHtml/meta.js

@@ -24,6 +24,11 @@
             id: 'html-style-stripped',
             message: 'Content is sanitised with DOMPurify, so <style>, <script> and inline event handlers are removed before render. Clicks are wired through data-event attributes instead of inline handlers.',
             see: 'display-blocks/clickablehtml'
+        },
+        {
+            id: 'clickable-html-confirm-destructive',
+            message: 'Add data-confirm="Delete this row?" to a data-event element whose event deletes or changes data, so a stray click cannot fire it. Only OK fires the event.',
+            see: 'concepts/html-attributes'
         }
     ],
     // Each clickable element names its event in a data-event attribute, so the
@@ -38,7 +43,7 @@
         properties: {
             html: {
                 type: 'string',
-                description: 'Content to be rendered as Html. An element with a data-event attribute fires the event it names when clicked (data-event="onEditClick" fires events.onEditClick), and its default browser action is prevented. The event object holds the element\'s other data-* attributes with snake_case keys, so data-event="onEditClick" data-record-id="42" gives { record_id: "42" }.',
+                description: 'Content to be rendered as Html. An element with a data-event attribute fires the event it names when clicked (data-event="onEditClick" fires events.onEditClick), and its default browser action is prevented. The event object holds the element\'s other data-* attributes with snake_case keys, so data-event="onEditClick" data-record-id="42" gives { record_id: "42" }. Targets that are not links or buttons become keyboard focusable, and Enter or Space clicks them. A data-event inside popover content fires too, then closes the popover. A link with data-event fires the event and does not navigate. data-confirm="Delete this row?" on a data-event element asks first: only OK fires the event (bare data-confirm asks "Are you sure?"). All Html block attributes work too: 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 and data-tone. See the HTML attributes docs page.',
                 docs: {
                     displayType: 'text-area'
                 }

package/dist/blocks/DangerousHtml/DangerousHtml.js

@@ -13,44 +13,34 @@
   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 {
-    sanitize() {
-        const { html, DOMPurifyOptions } = this.props.properties;
+    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.`);
         }
-        const htmlString = type.isNone(html) ? '' : html.toString();
-        this.div.innerHTML = DOMPurify.sanitize(htmlString, this.DOMPurifyOptions);
     }
     componentDidMount() {
-        this.sanitize();
+        this.warnOnOptionsChange();
     }
     componentDidUpdate() {
-        this.sanitize();
+        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: ''
-        };
         // 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.

package/dist/blocks/DangerousHtml/meta.js

@@ -37,7 +37,7 @@
         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/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

@@ -24,6 +24,21 @@
             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: {
@@ -35,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, warning, or a React Icons name); 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/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);

package/dist/blocks/Icon/gallery.yaml

@@ -12,6 +12,65 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
+- title: Semantic icon names
+  blocks:
+    - id: semantic_add
+      type: Icon
+      layout:
+        flex: 0 0 auto
+      properties:
+        name: add
+        size: 24
+    - id: semantic_edit
+      type: Icon
+      layout:
+        flex: 0 0 auto
+      properties:
+        name: edit
+        size: 24
+    - id: semantic_delete
+      type: Icon
+      layout:
+        flex: 0 0 auto
+      properties:
+        name: delete
+        size: 24
+    - id: semantic_search
+      type: Icon
+      layout:
+        flex: 0 0 auto
+      properties:
+        name: search
+        size: 24
+    - id: semantic_settings
+      type: Icon
+      layout:
+        flex: 0 0 auto
+      properties:
+        name: settings
+        size: 24
+    - id: semantic_warning
+      type: Icon
+      layout:
+        flex: 0 0 auto
+      properties:
+        name: warning
+        size: 24
+    - id: semantic_info
+      type: Icon
+      layout:
+        flex: 0 0 auto
+      properties:
+        name: info
+        size: 24
+    - id: semantic_success
+      type: Icon
+      layout:
+        flex: 0 0 auto
+      properties:
+        name: success
+        size: 24
+
 - title: Common Icons
   blocks:
     - id: icon_home

package/dist/blocks/Icon/meta.js

@@ -22,7 +22,7 @@
         element: 'The Icon element.'
     },
     events: {
-        onClick: 'Trigger actions when icon is clicked.'
+        onClick: 'Trigger actions when icon is clicked. The icon then takes keyboard focus, and Enter or Space trigger it too.'
     },
     properties: {
         type: 'object',
@@ -38,7 +38,7 @@
             name: {
                 type: 'string',
                 default: 'AiOutlineCloseCircle',
-                description: 'Name of icon to be displayed.'
+                description: 'Name of the icon: a semantic name like edit, delete or warning (add your own with theme.icons.aliases), or a React Icons name like LuPencil.'
             },
             rotate: {
                 type: 'number',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lowdefy/blocks-basic",
-  "version": "0.0.0-experimental-20260925135632",
+  "version": "0.0.0-experimental-20260925210809",
   "license": "Apache-2.0",
   "description": "Basic html Lowdefy blocks.",
   "homepage": "https://lowdefy.com",
@@ -45,8 +45,8 @@
     "dist/*"
   ],
   "dependencies": {
-    "@lowdefy/block-utils": "0.0.0-experimental-20260925135632",
-    "@lowdefy/helpers": "0.0.0-experimental-20260925135632",
+    "@lowdefy/block-utils": "0.0.0-experimental-20260925210809",
+    "@lowdefy/helpers": "0.0.0-experimental-20260925210809",
     "dompurify": "3.4.13"
   },
   "peerDependencies": {
@@ -54,8 +54,8 @@
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@lowdefy/block-dev-e2e": "0.0.0-experimental-20260925135632",
-    "@lowdefy/e2e-utils": "0.0.0-experimental-20260925135632",
+    "@lowdefy/block-dev-e2e": "0.0.0-experimental-20260925210809",
+    "@lowdefy/e2e-utils": "0.0.0-experimental-20260925210809",
     "@playwright/test": "1.59.1",
     "@swc/cli": "0.8.1",
     "@swc/core": "1.15.32",