@lowdefy/blocks-antd 5.2.0 → 5.4.0

package/dist/blocks/RadioSelector/RadioSelector.js

@@ -17,12 +17,18 @@ import { ConfigProvider, Radio, Space } from 'antd';
 import { renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
 import { type } from '@lowdefy/helpers';
 import Label from '../Label/Label.js';
-import getValueIndex from '../../getValueIndex.js';
-import getUniqueValues from '../../getUniqueValues.js';
+import getSelectedIndex from '../../getSelectedIndex.js';
+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 uniqueValueOptions = getUniqueValues(properties.options || []);
+    const uniqueValueOptions = useSelectorOptions({
+        properties,
+        methods
+    });
+    const selectedIndex = getSelectedIndex(value, uniqueValueOptions, {
+        properties
+    });
     const radioGroup = /*#__PURE__*/ React.createElement(RadioGroup, {
         id: `${blockId}_input`,
         className: classNames.element,
@@ -38,33 +44,57 @@ const RadioSelector = ({ blockId, classNames = {}, components, events, loading,
                 }
             });
         },
-        value: `${getValueIndex(value, uniqueValueOptions)}`
+        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)=>type.isPrimitive(opt) ? /*#__PURE__*/ React.createElement(Radio, {
-            id: `${blockId}_${opt}`,
-            key: i,
-            value: `${i}`
-        }, renderHtml({
-            html: `${opt}`,
-            methods
-        })) : /*#__PURE__*/ React.createElement(Radio, {
+    }, uniqueValueOptions.map((opt, i)=>{
+        if (type.isPrimitive(opt)) {
+            return /*#__PURE__*/ React.createElement(Radio, {
+                id: `${blockId}_${opt}`,
+                key: i,
+                value: `${i}`
+            }, renderHtml({
+                html: `${opt}`,
+                methods
+            }));
+        }
+        const isSelected = `${i}` === selectedIndex;
+        const radio = /*#__PURE__*/ React.createElement(Radio, {
             id: `${blockId}_${i}`,
             key: i,
             value: `${i}`,
             disabled: opt.disabled,
-            style: opt.style
+            style: {
+                ...opt.style,
+                ...isSelected && opt.color ? {
+                    color: opt.color
+                } : {}
+            }
         }, type.isNone(opt.label) ? renderHtml({
             html: `${opt.value}`,
             methods
         }) : renderHtml({
             html: opt.label,
             methods
-        })))));
+        }));
+        if (type.isNone(opt.color)) return radio;
+        // Per-option color: token override colors this radio's selected dot.
+        return /*#__PURE__*/ React.createElement(ConfigProvider, {
+            key: i,
+            theme: {
+                token: {
+                    colorPrimary: opt.color
+                }
+            }
+        }, radio);
+    })));
     return /*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
+        methods: methods,
         classNames: classNames,
         components: components,
         events: events,

package/dist/blocks/RadioSelector/meta.js

@@ -15,6 +15,7 @@
 */ import LabelMeta from '../Label/meta.js';
 import label from '../../schemas/label.js';
 import options from '../../schemas/options.js';
+import { data, html, valueKey, primaryKey } from '../../schemas/dataOptions.js';
 import { disabled, inputTitle } from '../../schemas/inputProperties.js';
 export default {
     category: 'input',
@@ -34,7 +35,8 @@ export default {
             event: {
                 value: 'The selected value.'
             }
-        }
+        },
+        onTooltipClick: 'Trigger actions when the tooltip icon is clicked.'
     },
     properties: {
         type: 'object',
@@ -75,6 +77,10 @@ export default {
             },
             label,
             options,
+            data,
+            html,
+            valueKey,
+            primaryKey,
             title: inputTitle,
             theme: {
                 type: 'object',

package/dist/blocks/RatingSlider/meta.js

@@ -38,7 +38,8 @@ export default {
             event: {
                 value: 'The selected rating value.'
             }
-        }
+        },
+        onTooltipClick: 'Trigger actions when the tooltip icon is clicked.'
     },
     properties: {
         type: 'object',

package/dist/blocks/SegmentedSelector/SegmentedSelector.js

@@ -17,13 +17,17 @@ import { Segmented } from 'antd';
 import { renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
 import { type } from '@lowdefy/helpers';
 import Label from '../Label/Label.js';
-import getValueIndex from '../../getValueIndex.js';
-import getUniqueValues from '../../getUniqueValues.js';
+import getSelectedIndex from '../../getSelectedIndex.js';
+import useSelectorOptions from '../../useSelectorOptions.js';
 import withTheme from '../withTheme.js';
 const SegmentedSelector = ({ blockId, classNames = {}, components: { Icon }, events, loading, methods, properties, required, styles = {}, validation, value })=>{
-    const uniqueValueOptions = getUniqueValues(properties.options || []);
+    const uniqueValueOptions = useSelectorOptions({
+        properties,
+        methods
+    });
     return /*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
+        methods: methods,
         classNames: classNames,
         components: {
             Icon
@@ -75,7 +79,9 @@ const SegmentedSelector = ({ blockId, classNames = {}, components: { Icon }, eve
                     disabled: properties.disabled || loading,
                     vertical: properties.vertical,
                     shape: properties.shape,
-                    value: type.isNone(value) ? undefined : getValueIndex(value, properties.options || []),
+                    value: type.isNone(value) ? undefined : getSelectedIndex(value, uniqueValueOptions, {
+                        properties
+                    }),
                     onChange: (index)=>{
                         const val = type.isPrimitive(uniqueValueOptions[index]) ? uniqueValueOptions[index] : uniqueValueOptions[index].value;
                         methods.setValue(val);

package/dist/blocks/SegmentedSelector/meta.js

@@ -14,6 +14,7 @@
   limitations under the License.
 */ import LabelMeta from '../Label/meta.js';
 import label from '../../schemas/label.js';
+import { data, html, valueKey, primaryKey } from '../../schemas/dataOptions.js';
 import { disabled, inputTitle, sizeSmallDefaultLarge } from '../../schemas/inputProperties.js';
 export default {
     category: 'input',
@@ -34,7 +35,8 @@ export default {
             event: {
                 value: 'The selected value.'
             }
-        }
+        },
+        onTooltipClick: 'Trigger actions when the tooltip icon is clicked.'
     },
     properties: {
         type: 'object',
@@ -46,6 +48,10 @@ export default {
                 description: "Option to fit width to its parent's width."
             },
             disabled,
+            data,
+            html,
+            valueKey,
+            primaryKey,
             options: {
                 default: [],
                 oneOf: [
@@ -75,9 +81,6 @@ export default {
                         description: 'Options can either be an array of primitive values, or an array of label, value pairs.',
                         items: {
                             type: 'object',
-                            required: [
-                                'value'
-                            ],
                             properties: {
                                 label: {
                                     type: 'string',

package/dist/blocks/Selector/Selector.js

@@ -15,18 +15,46 @@
 */ import React, { useState } from 'react';
 import { renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
 import { get, type } from '@lowdefy/helpers';
-import { Select } from 'antd';
+import { ConfigProvider, Select } from 'antd';
 import Label from '../Label/Label.js';
 import withTheme from '../withTheme.js';
-import getValueIndex from '../../getValueIndex.js';
-import getUniqueValues from '../../getUniqueValues.js';
+import getSelectedIndex from '../../getSelectedIndex.js';
+import useSelectorOptions from '../../useSelectorOptions.js';
+import getContrastTextColor from '../../getContrastTextColor.js';
 const Option = Select.Option;
 const Selector = ({ blockId, classNames = {}, components: { Icon, Link }, events, loading, methods, properties, required, styles = {}, validation, value })=>{
     const [fetchState, setFetch] = useState(false);
     const [elementId] = useState((0 | Math.random() * 9e2) + 1e2);
-    const uniqueValueOptions = getUniqueValues(properties.options || []);
+    const uniqueValueOptions = useSelectorOptions({
+        properties,
+        methods
+    });
+    // Color the whole selector with the selected option's color: `solid` fills the
+    // input, otherwise the border/text is colored.
+    const selectedIndex = getSelectedIndex(value, uniqueValueOptions, {
+        properties
+    });
+    const selectedOption = type.isNone(selectedIndex) ? undefined : uniqueValueOptions[selectedIndex];
+    const selectedColor = type.isObject(selectedOption) ? selectedOption.color : undefined;
+    const isSolid = properties.variant === 'solid';
+    // `solid` is not a valid antd Select input variant — use outlined for the frame.
+    let antdVariant = properties.variant;
+    if (isSolid) antdVariant = 'outlined';
+    if (properties.bordered === false) antdVariant = 'borderless';
+    let selectTheme;
+    if (selectedColor) {
+        const token = {
+            colorPrimary: selectedColor,
+            colorBorder: selectedColor
+        };
+        if (isSolid) token.colorBgContainer = selectedColor;
+        selectTheme = {
+            token
+        };
+    }
     return /*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
+        methods: methods,
         classNames: classNames,
         components: {
             Icon,
@@ -48,9 +76,11 @@ const Selector = ({ blockId, classNames = {}, components: { Icon, Link }, events
                     }
                 }, /*#__PURE__*/ React.createElement("div", {
                     id: `${blockId}_${elementId}_popup`
-                }), /*#__PURE__*/ React.createElement(Select, {
+                }), /*#__PURE__*/ React.createElement(ConfigProvider, {
+                    theme: selectTheme
+                }, /*#__PURE__*/ React.createElement(Select, {
                     id: `${blockId}_input`,
-                    variant: properties.bordered === false ? 'borderless' : properties.variant,
+                    variant: antdVariant,
                     className: classNames.element,
                     classNames: {
                         content: classNames.selector
@@ -63,6 +93,17 @@ const Selector = ({ blockId, classNames = {}, components: { Icon, Link }, events
                         content: styles.selector
                     },
                     mode: "single",
+                    labelRender: (labelProps)=>{
+                        const opt = uniqueValueOptions[labelProps.value];
+                        const color = type.isPrimitive(opt) ? undefined : opt?.color;
+                        if (type.isNone(color)) return labelProps.label;
+                        const textColor = isSolid ? getContrastTextColor(color) ?? '#fff' : color;
+                        return /*#__PURE__*/ React.createElement("span", {
+                            style: {
+                                color: textColor
+                            }
+                        }, labelProps.label);
+                    },
                     autoFocus: properties.autoFocus,
                     getPopupContainer: ()=>document.getElementById(`${blockId}_${elementId}_popup`),
                     disabled: properties.disabled || loading,
@@ -137,7 +178,9 @@ const Selector = ({ blockId, classNames = {}, components: { Icon, Link }, events
                             setFetch(false);
                         }
                     },
-                    value: getValueIndex(value, uniqueValueOptions)
+                    value: getSelectedIndex(value, uniqueValueOptions, {
+                        properties
+                    })
                 }, uniqueValueOptions.map((opt, i)=>type.isPrimitive(opt) ? /*#__PURE__*/ React.createElement(Option, {
                         style: styles.options,
                         className: classNames.options,
@@ -150,7 +193,10 @@ const Selector = ({ blockId, classNames = {}, components: { Icon, Link }, events
                     })) : /*#__PURE__*/ React.createElement(Option, {
                         style: {
                             ...styles.options,
-                            ...opt.style
+                            ...opt.style,
+                            ...opt.color ? {
+                                color: opt.color
+                            } : {}
                         },
                         className: classNames.options,
                         disabled: opt.disabled,
@@ -164,7 +210,7 @@ const Selector = ({ blockId, classNames = {}, components: { Icon, Link }, events
                     }) : renderHtml({
                         html: opt.label,
                         methods
-                    })))))
+                    }))))))
         }
     });
 };

package/dist/blocks/Selector/meta.js

@@ -15,6 +15,7 @@
 */ import LabelMeta from '../Label/meta.js';
 import label from '../../schemas/label.js';
 import icon from '../../schemas/icon.js';
+import { data, html, valueKey, primaryKey } from '../../schemas/dataOptions.js';
 import { disabled, inputTitle, autoFocus, variant, bordered, allowClear, sizeSmallDefaultLarge } from '../../schemas/inputProperties.js';
 export default {
     category: 'input',
@@ -49,7 +50,8 @@ export default {
             event: {
                 value: 'The search input value.'
             }
-        }
+        },
+        onTooltipClick: 'Trigger actions when the tooltip icon is clicked.'
     },
     properties: {
         type: 'object',
@@ -72,6 +74,10 @@ export default {
             },
             label,
             disabled,
+            data,
+            html,
+            valueKey,
+            primaryKey,
             options: {
                 default: [],
                 oneOf: [
@@ -101,9 +107,6 @@ export default {
                         description: 'Options can either be an array of primitive values, on an array of label, value pairs.',
                         items: {
                             type: 'object',
-                            required: [
-                                'value'
-                            ],
                             properties: {
                                 label: {
                                     type: 'string',
@@ -147,6 +150,13 @@ export default {
                                     docs: {
                                         displayType: 'yaml'
                                     }
+                                },
+                                color: {
+                                    type: 'string',
+                                    description: 'Color applied to the selected value shown in the input, and used to tint this option in the dropdown.',
+                                    docs: {
+                                        displayType: 'color'
+                                    }
                                 }
                             }
                         }
@@ -185,7 +195,16 @@ export default {
                 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 to customize icon at the drop-down position of the selector."
             },
             title: inputTitle,
-            variant,
+            variant: {
+                type: 'string',
+                enum: [
+                    'solid',
+                    'outlined',
+                    'filled',
+                    'borderless'
+                ],
+                description: 'Input variant. `solid` fills the whole input with the selected option color; `outlined` colors its border/text. `filled`/`borderless` are the antd input styles.'
+            },
             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>.',

package/dist/blocks/Slider/Slider.js

@@ -20,6 +20,7 @@ import withTheme from '../withTheme.js';
 const SliderBlock = ({ blockId, classNames = {}, components: { Icon, Link }, events, loading, methods, properties, required, styles = {}, validation, value })=>{
     return /*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
+        methods: methods,
         classNames: classNames,
         components: {
             Icon,

package/dist/blocks/Slider/meta.js

@@ -31,7 +31,8 @@ export default {
             event: {
                 value: 'The current slider value.'
             }
-        }
+        },
+        onTooltipClick: 'Trigger actions when the tooltip icon is clicked.'
     },
     properties: {
         type: 'object',

package/dist/blocks/Switch/Switch.js

@@ -79,6 +79,7 @@ const SwitchBlock = ({ blockId, classNames = {}, components: { Icon, Link }, eve
     });
     return /*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
+        methods: methods,
         classNames: classNames,
         components: {
             Icon,

package/dist/blocks/Switch/meta.js

@@ -38,7 +38,8 @@ export default {
             event: {
                 value: 'The switch value.'
             }
-        }
+        },
+        onTooltipClick: 'Trigger actions when the tooltip icon is clicked.'
     },
     properties: {
         type: 'object',

package/dist/blocks/Tabs/Tabs.js

@@ -12,7 +12,7 @@
   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, useEffect, useCallback } from 'react';
+*/ import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
 import { Tabs } from 'antd';
 import withTheme from '../withTheme.js';
@@ -38,16 +38,36 @@ function TabsBlock({ blockId, classNames = {}, components: { Icon, ShortcutBadge
         additionalProps.tabBarExtraContent = content[properties.extraAreaKey] && content[properties.extraAreaKey]();
     }
     const [key, setKey] = useState(properties.defaultActiveKey ?? tabs[0].key);
+    // Read latest tabs inside the stable handler without re-binding listeners.
+    const tabsRef = useRef(tabs);
+    tabsRef.current = tabs;
+    // Fires the generic onChange plus, if the now-active tab declares one, its
+    // own dynamically-named event. Stable identity so shortcut listeners and the
+    // registered method don't re-bind on every render.
+    const fireTabChange = useCallback((activeKey)=>{
+        setKey(activeKey);
+        methods.triggerEvent({
+            name: 'onChange',
+            event: {
+                activeKey
+            }
+        });
+        const activeTab = tabsRef.current.find((tab)=>tab.key === activeKey);
+        if (activeTab?.eventName) {
+            methods.triggerEvent({
+                name: activeTab.eventName,
+                event: {
+                    key: activeKey
+                }
+            });
+        }
+    }, [
+        methods
+    ]);
     useEffect(()=>{
         methods.registerMethod('setActiveKey', ({ activeKey })=>{
             if (activeKey !== key) {
-                setKey(activeKey);
-                methods.triggerEvent({
-                    name: 'onChange',
-                    event: {
-                        activeKey
-                    }
-                });
+                fireTabChange(activeKey);
             }
         });
     });
@@ -56,51 +76,18 @@ function TabsBlock({ blockId, classNames = {}, components: { Icon, ShortcutBadge
             shortcut: tab.shortcut,
             disabled: tab.disabled
         }));
-    const onShortcutMatch = useCallback((activeKey)=>{
-        setKey(activeKey);
-        methods.triggerEvent({
-            name: 'onChange',
-            event: {
-                activeKey
-            }
-        });
-    }, [
-        methods
-    ]);
     useItemShortcuts({
         items: shortcutItems,
-        onMatch: onShortcutMatch
+        onMatch: fireTabChange
     });
     return /*#__PURE__*/ React.createElement(Tabs, {
         activeKey: key,
         animated: properties.animated !== undefined ? properties.animated : true,
         id: blockId,
-        onChange: (activeKey)=>{
-            setKey(activeKey);
-            methods.triggerEvent({
-                name: 'onChange',
-                event: {
-                    activeKey
-                }
-            });
-        },
+        onChange: (activeKey)=>fireTabChange(activeKey),
         size: properties.size ?? 'default',
         tabPlacement: properties.tabPlacement ?? 'top',
         type: properties.tabType ?? 'line',
-        onTabScroll: ({ direction })=>methods.triggerEvent({
-                name: 'onTabScroll',
-                event: {
-                    direction
-                }
-            }),
-        onTabClick: (key)=>{
-            methods.triggerEvent({
-                name: 'onTabClick',
-                event: {
-                    key
-                }
-            });
-        },
         className: classNames.element,
         classNames: {
             tabBar: classNames.tabBar,

package/dist/blocks/Tabs/meta.js

@@ -26,21 +26,15 @@
     },
     events: {
         onChange: {
-            description: 'Trigger action on tab change.',
+            description: 'Trigger action on any tab change.',
             event: {
                 activeKey: 'The key of the active tab.'
             }
         },
-        onTabScroll: {
-            description: 'Trigger action on tab scroll.',
+        onTabSelect: {
+            description: 'Documentation reference — not a fixed event name. When a tab becomes active, the `eventName` string declared on that `tabs[]` entry is triggered (in addition to onChange). Declare your named events under `events:` (e.g. `onProfileTab`, `onBillingTab`).',
             event: {
-                direction: 'The scroll direction.'
-            }
-        },
-        onTabClick: {
-            description: 'Trigger action on tab click.',
-            event: {
-                key: 'The key of the clicked tab.'
+                key: 'The key of the now-active tab.'
             }
         }
     },
@@ -103,6 +97,10 @@
                             type: 'string',
                             description: 'Area key of the tab.'
                         },
+                        eventName: {
+                            type: 'string',
+                            description: 'Block-level event name to trigger when this tab becomes active, in addition to onChange. Declare an event with this name under `events:`. The event receives `{ key }` of the now-active tab.'
+                        },
                         disabled: {
                             type: 'boolean',
                             default: false,

package/dist/blocks/TextArea/TextArea.js

@@ -23,6 +23,7 @@ const TextAreaComp = Input.TextArea;
 const TextAreaBlock = ({ blockId, classNames = {}, components, events, loading, properties, required, styles = {}, validation, value, methods })=>{
     return /*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
+        methods: methods,
         classNames: classNames,
         components: components,
         events: events,

package/dist/blocks/TextArea/meta.js

@@ -36,7 +36,8 @@ export default {
             }
         },
         onFocus: 'Trigger action when text input gets focus.',
-        onPressEnter: 'Trigger action when enter is pressed while text input is focused.'
+        onPressEnter: 'Trigger action when enter is pressed while text input is focused.',
+        onTooltipClick: 'Trigger actions when the tooltip icon is clicked.'
     },
     properties: {
         type: 'object',

package/dist/blocks/TextInput/TextInput.js

@@ -21,6 +21,7 @@ import useRunAfterUpdate from '../../useRunAfterUpdate.js';
 const TextInput = ({ blockId, classNames = {}, components: { Icon, Link }, events, loading, methods, onChange, properties, required, styles = {}, validation, value })=>{
     return /*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
+        methods: methods,
         classNames: classNames,
         components: {
             Icon,

package/dist/blocks/TextInput/meta.js

@@ -39,7 +39,8 @@ export default {
             }
         },
         onFocus: 'Trigger action when text input gets focus.',
-        onPressEnter: 'Trigger action when enter is pressed while text input is focused.'
+        onPressEnter: 'Trigger action when enter is pressed while text input is focused.',
+        onTooltipClick: 'Trigger actions when the tooltip icon is clicked.'
     },
     properties: {
         type: 'object',