@lowdefy/blocks-antd 5.5.0 → 5.6.0

package/dist/blocks/CheckboxSelector/CheckboxSelector.js

@@ -13,7 +13,7 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React from 'react';
-import { Checkbox, ConfigProvider, Space } from 'antd';
+import { Checkbox, Col, ConfigProvider, Row, Space, theme } from 'antd';
 import { type } from '@lowdefy/helpers';
 import { renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
 import Label from '../Label/Label.js';
@@ -21,6 +21,7 @@ import getSelectedIndex from '../../getSelectedIndex.js';
 import useSelectorOptions from '../../useSelectorOptions.js';
 import withTheme from '../withTheme.js';
 const CheckboxSelector = ({ blockId, classNames = {}, components, events, loading, properties, required, styles = {}, validation, value, methods })=>{
+    const { token } = theme.useToken();
     const uniqueValueOptions = useSelectorOptions({
         properties,
         methods
@@ -29,33 +30,17 @@ const CheckboxSelector = ({ blockId, classNames = {}, components, events, loadin
         properties,
         multiple: true
     }));
-    const checkboxGroup = /*#__PURE__*/ React.createElement(Checkbox.Group, {
-        id: `${blockId}_input`,
-        className: classNames.element,
-        disabled: properties.disabled || loading,
-        style: styles.element,
-        onChange: (newVal)=>{
-            const val = [];
-            newVal.forEach((nv)=>{
-                val.push(type.isPrimitive(uniqueValueOptions[nv]) ? uniqueValueOptions[nv] : uniqueValueOptions[nv].value);
-            });
-            methods.setValue(val);
-            methods.triggerEvent({
-                name: 'onChange',
-                event: {
-                    value: val
-                }
-            });
-        },
-        value: getSelectedIndex(value, uniqueValueOptions, {
-            properties,
-            multiple: true
-        })
-    }, /*#__PURE__*/ React.createElement(Space, {
-        direction: properties.direction,
-        wrap: type.isNone(properties.wrap) ? true : properties.wrap,
-        align: type.isNone(properties.align) ? 'start' : properties.align
-    }, uniqueValueOptions.map((opt, i)=>{
+    const grid = !type.isNone(properties.columns);
+    // Col takes spans, not counts, so a breakpoint map of counts converts per key.
+    const colProps = type.isObject(properties.columns) ? Object.fromEntries(Object.entries(properties.columns).map(([breakpoint, columns])=>[
+            breakpoint,
+            {
+                span: 24 / columns
+            }
+        ])) : {
+        span: 24 / properties.columns
+    };
+    const renderOption = (opt, i)=>{
         if (type.isPrimitive(opt)) {
             return /*#__PURE__*/ React.createElement(Checkbox, {
                 id: `${blockId}_${i}`,
@@ -95,7 +80,47 @@ const CheckboxSelector = ({ blockId, classNames = {}, components, events, loadin
                 }
             }
         }, checkbox);
-    })));
+    };
+    const checkboxGroup = /*#__PURE__*/ React.createElement(Checkbox.Group, {
+        id: `${blockId}_input`,
+        className: classNames.element,
+        disabled: properties.disabled || loading,
+        // Checkbox.Group is inline-flex and shrink-wraps, so the Row inside it can
+        // only fill a group that has been given a width.
+        style: grid ? {
+            width: '100%',
+            ...styles.element
+        } : styles.element,
+        onChange: (newVal)=>{
+            const val = [];
+            newVal.forEach((nv)=>{
+                val.push(type.isPrimitive(uniqueValueOptions[nv]) ? uniqueValueOptions[nv] : uniqueValueOptions[nv].value);
+            });
+            methods.setValue(val);
+            methods.triggerEvent({
+                name: 'onChange',
+                event: {
+                    value: val
+                }
+            });
+        },
+        value: getSelectedIndex(value, uniqueValueOptions, {
+            properties,
+            multiple: true
+        })
+    }, grid ? /*#__PURE__*/ React.createElement(Row, {
+        gutter: type.isNone(properties.gutter) ? [
+            token.paddingXS,
+            0
+        ] : properties.gutter
+    }, uniqueValueOptions.map((opt, i)=>/*#__PURE__*/ React.createElement(Col, {
+            key: i,
+            ...colProps
+        }, renderOption(opt, i)))) : /*#__PURE__*/ React.createElement(Space, {
+        direction: properties.direction,
+        wrap: type.isNone(properties.wrap) ? true : properties.wrap,
+        align: type.isNone(properties.align) ? 'start' : properties.align
+    }, uniqueValueOptions.map(renderOption)));
     return /*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
         methods: methods,

package/dist/blocks/CheckboxSelector/meta.js

@@ -51,7 +51,7 @@ export default {
                     'baseline'
                 ],
                 default: 'start',
-                description: 'Align options.'
+                description: "Align options. Ignored when 'columns' is set."
             },
             color: {
                 type: 'string',
@@ -60,6 +60,16 @@ export default {
                     displayType: 'color'
                 }
             },
+            columns: {
+                type: [
+                    'integer',
+                    'object'
+                ],
+                description: 'Number of columns to lay the options out in, or a responsive breakpoint object. Use a count that divides 24 evenly.',
+                docs: {
+                    displayType: 'yaml'
+                }
+            },
             disabled,
             direction: {
                 type: 'string',
@@ -68,12 +78,22 @@ export default {
                     'vertical'
                 ],
                 default: 'horizontal',
-                description: 'List options horizontally or vertical.'
+                description: "List options horizontally or vertical. Ignored when 'columns' is set."
+            },
+            gutter: {
+                type: [
+                    'number',
+                    'array'
+                ],
+                description: "Gap between options in the grid. Number or [horizontal, vertical] array. Applies when 'columns' is set.",
+                docs: {
+                    displayType: 'yaml'
+                }
             },
             wrap: {
                 type: 'boolean',
                 default: true,
-                description: "Specifies wrapping of options. Applies when 'direction' is 'horizontal'."
+                description: "Specifies wrapping of options. Applies when 'direction' is 'horizontal'. Ignored when 'columns' is set."
             },
             options,
             data,
@@ -142,7 +162,7 @@ export default {
                     marginXS: {
                         type: 'number',
                         default: 8,
-                        description: 'Horizontal gap between checkboxes in a group.'
+                        description: "Column gap on the checkbox group element. Does not space the options apart; set 'gutter' for a grid."
                     },
                     paddingXS: {
                         type: 'number',

package/dist/blocks/Label/Label.js

@@ -28,7 +28,7 @@ const validationKeyMap = {
 };
 let iconMap;
 const Label = ({ blockId, classNames: blockClassNames = {}, components: { Icon }, content, methods, properties, required, styles = {}, validation })=>{
-    const { extraClassName, extraStyle, feedbackClassName, feedbackStyle, iconClassName, label, labelClassName, labelCol, labelColClassName, labelColStyle, labelStyle, rowClassName, rowStyle, showExtra, showFeedback, wrapperCol } = labelLogic({
+    const { extraClassName, extraStyle, feedbackClassName, feedbackStyle, iconClassName, label, labelClassName, labelCol, labelColClassName, labelColStyle, labelStyle, rowClassName, rowStyle, showExtra, showFeedback, showFeedbackIcon, wrapperCol } = labelLogic({
         blockId,
         blockClassNames,
         content,
@@ -53,8 +53,8 @@ const Label = ({ blockId, classNames: blockClassNames = {}, components: { Icon }
                 })
         };
     }
-    const IconNode = validation.status && iconMap[validation.status];
-    const icon = validation.status && IconNode ? /*#__PURE__*/ React.createElement("span", {
+    const IconNode = showFeedbackIcon && iconMap[validation.status];
+    const icon = IconNode ? /*#__PURE__*/ React.createElement("span", {
         className: iconClassName
     }, /*#__PURE__*/ React.createElement(IconNode, null)) : null;
     // tooltip is either a string (the tooltip text) or an object that also

package/dist/blocks/Label/labelLogic.js

@@ -78,8 +78,10 @@ const labelLogic = ({ blockId, blockClassNames = {}, content, properties = {}, r
         'ant-form-item-feedback-icon-validating': validation.status === 'validating',
         'ldf-feedback-icon': true
     });
+    const hasFeedback = properties.hasFeedback !== false;
     const showExtra = !!properties.extra && (!validation.status || validation.status === 'success');
-    const showFeedback = validation.status === 'warning' || validation.status === 'error';
+    const showFeedback = hasFeedback && (validation.status === 'warning' || validation.status === 'error');
+    const showFeedbackIcon = hasFeedback && !type.isNone(validation.status);
     return {
         extraClassName,
         extraStyle,
@@ -96,6 +98,7 @@ const labelLogic = ({ blockId, blockClassNames = {}, content, properties = {}, r
         rowStyle,
         showExtra,
         showFeedback,
+        showFeedbackIcon,
         wrapperCol
     };
 };

package/dist/blocks/Menu/Menu.js

@@ -20,6 +20,7 @@ import { withBlockDefaults } from '@lowdefy/block-utils';
 import withTheme from '../withTheme.js';
 import useItemShortcuts from '../useItemShortcuts.js';
 import { buildMenuItems } from '../buildMenuItems.js';
+import './style.module.css';
 const getDefaultMenu = (menus, menuId = 'default', links)=>{
     if (type.isArray(links)) return links;
     if (!type.isArray(menus)) return [];

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

@@ -0,0 +1,26 @@
+/*
+  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 {
+  /* Cap side-opening flyouts (collapsed sidebar) to half the viewport so a long popup near a
+     low trigger stays on-screen and scrolls (50vh always fits the taller side of the trigger).
+     !important beats antd's unlayered, more-specific cap. */
+  :global(.ant-menu-submenu-popup[class*='-placement-right'] .ant-menu-sub),
+  :global(.ant-menu-submenu-popup[class*='-placement-left'] .ant-menu-sub) {
+    max-height: 50vh !important;
+    overflow-y: auto !important;
+  }
+}

package/dist/blocks/PageSidebarLayout/PageSidebarLayout.js

@@ -187,7 +187,13 @@ const PageSidebarLayout = ({ basePath, blockId, classNames = {}, components: { I
                                         onClick: 'onToggleSider'
                                     }
                                 }
-                            }), /*#__PURE__*/ React.createElement(Menu, {
+                            }), /*#__PURE__*/ React.createElement("div", {
+                                style: {
+                                    flex: '1 1 auto',
+                                    minHeight: 0,
+                                    overflowY: 'auto'
+                                }
+                            }, /*#__PURE__*/ React.createElement(Menu, {
                                 blockId: `${blockId}_menu`,
                                 components: {
                                     Icon,
@@ -228,16 +234,11 @@ const PageSidebarLayout = ({ basePath, blockId, classNames = {}, components: { I
                                 style: {
                                     flex: '0 0 auto'
                                 }
-                            }, content.siderClosed()), /*#__PURE__*/ React.createElement("div", {
-                                style: {
-                                    flex: '1 0 auto'
-                                }
-                            }), /*#__PURE__*/ React.createElement("div", {
+                            }, content.siderClosed())), /*#__PURE__*/ React.createElement("div", {
                                 style: {
-                                    position: 'sticky',
-                                    bottom: 0,
-                                    background: 'linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--ant-color-bg-container) 85%, transparent) 32px, color-mix(in srgb, var(--ant-color-bg-container) 95%, transparent) 100%)',
-                                    padding: '40px 8px 8px',
+                                    flex: '0 0 auto',
+                                    background: 'var(--ant-color-bg-container)',
+                                    padding: '8px',
                                     display: 'flex',
                                     flexDirection: 'column',
                                     alignItems: 'center',

package/dist/blocks/RadioSelector/RadioSelector.js

@@ -13,7 +13,7 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React from 'react';
-import { ConfigProvider, Radio, Space } from 'antd';
+import { Col, ConfigProvider, Radio, Row, Space, theme } from 'antd';
 import { renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
 import { type } from '@lowdefy/helpers';
 import Label from '../Label/Label.js';
@@ -22,6 +22,7 @@ import useSelectorOptions from '../../useSelectorOptions.js';
 import withTheme from '../withTheme.js';
 const RadioGroup = Radio.Group;
 const RadioSelector = ({ blockId, classNames = {}, components, events, loading, properties, required, styles = {}, validation, value, methods })=>{
+    const { token } = theme.useToken();
     const uniqueValueOptions = useSelectorOptions({
         properties,
         methods
@@ -29,29 +30,17 @@ const RadioSelector = ({ blockId, classNames = {}, components, events, loading,
     const selectedIndex = getSelectedIndex(value, uniqueValueOptions, {
         properties
     });
-    const radioGroup = /*#__PURE__*/ React.createElement(RadioGroup, {
-        id: `${blockId}_input`,
-        className: classNames.element,
-        disabled: properties.disabled || loading,
-        style: styles.element,
-        onChange: (event)=>{
-            const val = type.isPrimitive(uniqueValueOptions[event.target.value]) ? uniqueValueOptions[event.target.value] : uniqueValueOptions[event.target.value].value;
-            methods.setValue(val);
-            methods.triggerEvent({
-                name: 'onChange',
-                event: {
-                    value: val
-                }
-            });
-        },
-        value: `${getSelectedIndex(value, uniqueValueOptions, {
-            properties
-        })}`
-    }, /*#__PURE__*/ React.createElement(Space, {
-        direction: properties.direction,
-        wrap: type.isNone(properties.wrap) ? true : properties.wrap,
-        align: type.isNone(properties.align) ? 'start' : properties.align
-    }, uniqueValueOptions.map((opt, i)=>{
+    const grid = !type.isNone(properties.columns);
+    // Col takes spans, not counts, so a breakpoint map of counts converts per key.
+    const colProps = type.isObject(properties.columns) ? Object.fromEntries(Object.entries(properties.columns).map(([breakpoint, columns])=>[
+            breakpoint,
+            {
+                span: 24 / columns
+            }
+        ])) : {
+        span: 24 / properties.columns
+    };
+    const renderOption = (opt, i)=>{
         if (type.isPrimitive(opt)) {
             return /*#__PURE__*/ React.createElement(Radio, {
                 id: `${blockId}_${opt}`,
@@ -91,7 +80,43 @@ const RadioSelector = ({ blockId, classNames = {}, components, events, loading,
                 }
             }
         }, radio);
-    })));
+    };
+    const radioGroup = /*#__PURE__*/ React.createElement(RadioGroup, {
+        id: `${blockId}_input`,
+        className: classNames.element,
+        disabled: properties.disabled || loading,
+        // Radio.Group is inline-block and shrink-wraps, so the Row inside it can
+        // only fill a group that has been given a width.
+        style: grid ? {
+            width: '100%',
+            ...styles.element
+        } : styles.element,
+        onChange: (event)=>{
+            const val = type.isPrimitive(uniqueValueOptions[event.target.value]) ? uniqueValueOptions[event.target.value] : uniqueValueOptions[event.target.value].value;
+            methods.setValue(val);
+            methods.triggerEvent({
+                name: 'onChange',
+                event: {
+                    value: val
+                }
+            });
+        },
+        value: `${getSelectedIndex(value, uniqueValueOptions, {
+            properties
+        })}`
+    }, grid ? /*#__PURE__*/ React.createElement(Row, {
+        gutter: type.isNone(properties.gutter) ? [
+            token.paddingXS,
+            0
+        ] : properties.gutter
+    }, uniqueValueOptions.map((opt, i)=>/*#__PURE__*/ React.createElement(Col, {
+            key: i,
+            ...colProps
+        }, renderOption(opt, i)))) : /*#__PURE__*/ React.createElement(Space, {
+        direction: properties.direction,
+        wrap: type.isNone(properties.wrap) ? true : properties.wrap,
+        align: type.isNone(properties.align) ? 'start' : properties.align
+    }, uniqueValueOptions.map(renderOption)));
     return /*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
         methods: methods,

package/dist/blocks/RadioSelector/meta.js

@@ -51,7 +51,7 @@ export default {
                     'baseline'
                 ],
                 default: 'start',
-                description: 'Align options.'
+                description: "Align options. Ignored when 'columns' is set."
             },
             color: {
                 type: 'string',
@@ -60,6 +60,16 @@ export default {
                     displayType: 'color'
                 }
             },
+            columns: {
+                type: [
+                    'integer',
+                    'object'
+                ],
+                description: 'Number of columns to lay the options out in, or a responsive breakpoint object. Use a count that divides 24 evenly.',
+                docs: {
+                    displayType: 'yaml'
+                }
+            },
             disabled,
             direction: {
                 type: 'string',
@@ -68,12 +78,22 @@ export default {
                     'vertical'
                 ],
                 default: 'horizontal',
-                description: 'List options horizontally or vertical.'
+                description: "List options horizontally or vertical. Ignored when 'columns' is set."
+            },
+            gutter: {
+                type: [
+                    'number',
+                    'array'
+                ],
+                description: "Gap between options in the grid. Number or [horizontal, vertical] array. Applies when 'columns' is set.",
+                docs: {
+                    displayType: 'yaml'
+                }
             },
             wrap: {
                 type: 'boolean',
                 default: true,
-                description: "Specifies wrapping of options. Applies when 'direction' is 'horizontal'."
+                description: "Specifies wrapping of options. Applies when 'direction' is 'horizontal'. Ignored when 'columns' is set."
             },
             label,
             options,

package/package.json

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