@lowdefy/blocks-antd 5.3.0 → 5.4.0

package/dist/blocks/AutoComplete/AutoComplete.js

@@ -22,6 +22,7 @@ const Option = AutoComplete.Option;
 const AutoCompleteInput = ({ blockId, classNames = {}, components, events, loading, methods, properties, required, styles = {}, validation, value })=>{
     return /*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
+        methods: methods,
         classNames: classNames,
         components: components,
         events: events,

package/dist/blocks/AutoComplete/meta.js

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

package/dist/blocks/ButtonSelector/ButtonSelector.js

@@ -17,17 +17,41 @@ import { ConfigProvider, Radio } 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 getContrastTextColor from '../../getContrastTextColor.js';
 import withTheme from '../withTheme.js';
 const ButtonSelector = ({ blockId, classNames = {}, components, events, loading, properties, required, styles = {}, validation, value, methods })=>{
-    const uniqueValueOptions = getUniqueValues(properties.options || []);
+    const uniqueValueOptions = useSelectorOptions({
+        properties,
+        methods
+    });
+    // `variant` (solid | outlined) matches the Button block. `buttonStyle` is a
+    // deprecated alias kept for backward compatibility.
+    const variant = properties.variant ?? (properties.buttonStyle === 'outline' ? 'outlined' : 'solid');
+    const isOutline = variant === 'outlined';
+    const selectedIndex = type.isNone(value) ? undefined : getSelectedIndex(value, uniqueValueOptions, {
+        properties
+    });
+    const contrastColor = getContrastTextColor(properties.color);
+    const themeConfig = {
+        token: {
+            colorPrimary: properties.color
+        }
+    };
+    if (contrastColor) {
+        themeConfig.components = {
+            Radio: {
+                buttonSolidCheckedColor: contrastColor
+            }
+        };
+    }
     const radioGroup = /*#__PURE__*/ React.createElement(Radio.Group, {
         id: `${blockId}_input`,
         className: classNames.element,
         disabled: properties.disabled || loading,
         size: properties.size,
-        buttonStyle: properties.buttonStyle ? properties.buttonStyle : 'solid',
+        buttonStyle: isOutline ? 'outline' : 'solid',
         style: styles.element,
         onChange: (event)=>{
             const value = type.isPrimitive(uniqueValueOptions[event.target.value]) ? uniqueValueOptions[event.target.value] : uniqueValueOptions[event.target.value].value;
@@ -39,30 +63,59 @@ const ButtonSelector = ({ blockId, classNames = {}, components, events, loading,
                 }
             });
         },
-        value: type.isNone(value) ? undefined : getValueIndex(value, properties.options || [])
-    }, uniqueValueOptions.map((opt, i)=>type.isPrimitive(opt) ? /*#__PURE__*/ React.createElement(Radio.Button, {
+        value: type.isNone(value) ? undefined : getSelectedIndex(value, uniqueValueOptions, {
+            properties
+        })
+    }, uniqueValueOptions.map((opt, i)=>{
+        const isPrimitive = type.isPrimitive(opt);
+        const optColor = isPrimitive ? undefined : opt.color;
+        const isSelected = `${i}` === selectedIndex;
+        // The outline tint follows currentColor (the active colorPrimary), which is
+        // the option's own color when set, else the block-level color.
+        const selectedStyle = isSelected && isOutline ? {
+            backgroundColor: 'color-mix(in srgb, currentColor 12%, transparent)'
+        } : undefined;
+        let html;
+        if (isPrimitive) {
+            html = `${opt}`;
+        } else {
+            html = type.isNone(opt.label) ? `${opt.value}` : opt.label;
+        }
+        const button = /*#__PURE__*/ React.createElement(Radio.Button, {
             id: `${blockId}_${i}`,
             key: i,
             value: `${i}`,
-            disabled: properties.disabled || loading
+            disabled: (isPrimitive ? undefined : opt.disabled) || properties.disabled || loading,
+            style: {
+                ...isPrimitive ? {} : opt.style,
+                ...selectedStyle
+            }
         }, renderHtml({
-            html: `${opt}`,
+            html,
             methods
-        })) : /*#__PURE__*/ React.createElement(Radio.Button, {
-            id: `${blockId}_${i}`,
+        }));
+        if (type.isNone(optColor)) return button;
+        // Per-option color drives both the hover state and the checked fill/outline,
+        // independent of the selected value or block-level color.
+        const optContrast = getContrastTextColor(optColor);
+        const optTheme = {
+            token: {
+                colorPrimary: optColor
+            }
+        };
+        if (optContrast) optTheme.components = {
+            Radio: {
+                buttonSolidCheckedColor: optContrast
+            }
+        };
+        return /*#__PURE__*/ React.createElement(ConfigProvider, {
             key: i,
-            value: `${i}`,
-            disabled: opt.disabled || properties.disabled || loading,
-            style: opt.style
-        }, type.isNone(opt.label) ? renderHtml({
-            html: `${opt.value}`,
-            methods
-        }) : renderHtml({
-            html: opt.label,
-            methods
-        }))));
+            theme: optTheme
+        }, button);
+    }));
     return /*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
+        methods: methods,
         classNames: classNames,
         components: components,
         events: events,
@@ -76,13 +129,7 @@ const ButtonSelector = ({ blockId, classNames = {}, components, events, loading,
         styles: styles,
         content: {
             content: ()=>properties.color ? /*#__PURE__*/ React.createElement(ConfigProvider, {
-                    theme: {
-                        components: {
-                            Radio: {
-                                colorPrimary: properties.color
-                            }
-                        }
-                    }
+                    theme: themeConfig
                 }, radioGroup) : radioGroup
         }
     });

package/dist/blocks/ButtonSelector/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, sizeSmallDefaultLarge } from '../../schemas/inputProperties.js';
 export default {
     category: 'input',
@@ -34,30 +35,43 @@ export default {
             event: {
                 value: 'The selected value.'
             }
-        }
+        },
+        onTooltipClick: 'Trigger actions when the tooltip icon is clicked.'
     },
     properties: {
         type: 'object',
         additionalProperties: false,
         properties: {
+            variant: {
+                type: 'string',
+                enum: [
+                    'solid',
+                    'outlined'
+                ],
+                default: 'solid',
+                description: 'Visual variant of the selected option button, matching the Button block.'
+            },
             buttonStyle: {
                 type: 'string',
                 enum: [
                     'solid',
                     'outline'
                 ],
-                default: 'solid',
-                description: 'Style of the selected option button.'
+                description: 'Deprecated — use `variant` (solid | outlined) instead.'
             },
             color: {
                 type: 'string',
-                description: 'Selected button color.',
+                description: 'Color applied to the selected button. Fills the background in solid mode (with auto-contrasting text) and the border/text in outline mode.',
                 docs: {
                     displayType: 'color'
                 }
             },
             disabled,
             options,
+            data,
+            html,
+            valueKey,
+            primaryKey,
             size: sizeSmallDefaultLarge,
             label,
             title: inputTitle,

package/dist/blocks/Carousel/meta.js

@@ -152,6 +152,22 @@
                 default: false,
                 description: 'Reverses the slide order.'
             },
+            slides: {
+                type: 'array',
+                description: 'Optional list of slides for explicit ordering and metadata. Each entry must have a `key` matching a slot name. When omitted, every defined slot becomes a slide, ordered alphabetically by key. Each entry is passed to `afterChange` and `beforeChange` events as `event.current` and `event.next` — any extra fields on the entry (e.g. a title or analytics id) are available there.',
+                items: {
+                    type: 'object',
+                    required: [
+                        'key'
+                    ],
+                    properties: {
+                        key: {
+                            type: 'string',
+                            description: 'Slot key for this slide.'
+                        }
+                    }
+                }
+            },
             slidesPerRow: {
                 type: 'integer',
                 default: 1,

package/dist/blocks/CheckboxSelector/CheckboxSelector.js

@@ -17,11 +17,18 @@ import { Checkbox, ConfigProvider, Space } from 'antd';
 import { type } from '@lowdefy/helpers';
 import { renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
 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 CheckboxSelector = ({ blockId, classNames = {}, components, events, loading, properties, required, styles = {}, validation, value, methods })=>{
-    const uniqueValueOptions = getUniqueValues(properties.options || []);
+    const uniqueValueOptions = useSelectorOptions({
+        properties,
+        methods
+    });
+    const selectedIndexes = new Set(type.isNone(value) ? [] : getSelectedIndex(value, uniqueValueOptions, {
+        properties,
+        multiple: true
+    }));
     const checkboxGroup = /*#__PURE__*/ React.createElement(Checkbox.Group, {
         id: `${blockId}_input`,
         className: classNames.element,
@@ -40,33 +47,58 @@ const CheckboxSelector = ({ blockId, classNames = {}, components, events, loadin
                 }
             });
         },
-        value: getValueIndex(value, uniqueValueOptions, true)
+        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)=>type.isPrimitive(opt) ? /*#__PURE__*/ React.createElement(Checkbox, {
-            id: `${blockId}_${i}`,
-            key: i,
-            value: `${i}`
-        }, renderHtml({
-            html: `${opt}`,
-            methods
-        })) : /*#__PURE__*/ React.createElement(Checkbox, {
+    }, uniqueValueOptions.map((opt, i)=>{
+        if (type.isPrimitive(opt)) {
+            return /*#__PURE__*/ React.createElement(Checkbox, {
+                id: `${blockId}_${i}`,
+                key: i,
+                value: `${i}`
+            }, renderHtml({
+                html: `${opt}`,
+                methods
+            }));
+        }
+        const isSelected = selectedIndexes.has(`${i}`);
+        const checkbox = /*#__PURE__*/ React.createElement(Checkbox, {
             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 checkbox;
+        // Per-option color: token override colors this checkbox's checked tick.
+        return /*#__PURE__*/ React.createElement(ConfigProvider, {
+            key: i,
+            theme: {
+                token: {
+                    colorPrimary: opt.color
+                }
+            }
+        }, checkbox);
+    })));
     return /*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
+        methods: methods,
         classNames: classNames,
         components: components,
         events: events,

package/dist/blocks/CheckboxSelector/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',
@@ -74,6 +76,10 @@ export default {
                 description: "Specifies wrapping of options. Applies when 'direction' is 'horizontal'."
             },
             options,
+            data,
+            html,
+            valueKey,
+            primaryKey,
             label,
             title: inputTitle,
             theme: {

package/dist/blocks/CheckboxSwitch/CheckboxSwitch.js

@@ -44,6 +44,7 @@ const CheckboxSwitch = ({ blockId, classNames = {}, components, events, loading,
     })));
     return /*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
+        methods: methods,
         classNames: classNames,
         components: components,
         events: events,

package/dist/blocks/CheckboxSwitch/meta.js

@@ -13,6 +13,7 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import LabelMeta from '../Label/meta.js';
+import tooltip from '../../schemas/labelTooltip.js';
 export default {
     category: 'input',
     icons: [
@@ -31,7 +32,8 @@ export default {
             event: {
                 value: 'The checkbox value.'
             }
-        }
+        },
+        onTooltipClick: 'Trigger actions when the tooltip icon is clicked.'
     },
     properties: {
         type: 'object',
@@ -80,6 +82,7 @@ export default {
                         type: 'string',
                         description: 'Label title - supports html.'
                     },
+                    tooltip,
                     span: {
                         type: 'number',
                         description: 'Label inline span.'

package/dist/blocks/ColorSelector/ColorSelector.js

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

package/dist/blocks/ColorSelector/meta.js

@@ -51,7 +51,8 @@ export default {
             event: {
                 open: 'Whether the popup is open.'
             }
-        }
+        },
+        onTooltipClick: 'Trigger actions when the tooltip icon is clicked.'
     },
     properties: {
         type: 'object',

package/dist/blocks/ConfigProvider/ConfigProvider.js

@@ -42,6 +42,7 @@ const ConfigProviderBlock = ({ blockId, content, properties })=>{
         componentDisabled: properties.componentDisabled,
         componentSize: properties.componentSize,
         direction: properties.direction,
+        locale: properties.locale,
         variant: properties.variant,
         theme: Object.keys(themeConfig).length > 0 ? themeConfig : undefined
     }, /*#__PURE__*/ React.createElement("div", {

package/dist/blocks/ConfigProvider/meta.js

@@ -63,6 +63,13 @@
                 default: 'ltr',
                 description: 'Direction of layout.'
             },
+            locale: {
+                type: 'object',
+                description: 'Antd locale object to localize built-in component strings (date pickers, pagination, modal, form validation). Pair with the _locale operator and config.i18n to keep the whole subtree in one language.',
+                docs: {
+                    displayType: 'yaml'
+                }
+            },
             token: {
                 type: 'object',
                 description: 'Theme token configuration. Customize design tokens like colorPrimary, fontSize, etc.',

package/dist/blocks/ConfirmModal/ConfirmModal.js

@@ -54,7 +54,7 @@ const ConfirmModal = ({ blockId, classNames = {}, events, content, components: {
                     body: styles.body
                 },
                 closable: properties.closable,
-                okText: properties.okText ?? 'Ok',
+                okText: properties.okText,
                 okButtonProps: properties.okButton?.icon ? {
                     ...properties.okButton,
                     icon: properties.okButton.icon && /*#__PURE__*/ React.createElement(ErrorBoundary, {
@@ -87,7 +87,7 @@ const ConfirmModal = ({ blockId, classNames = {}, events, content, components: {
                         }
                     }))
                 } : properties.cancelButton,
-                cancelText: properties.cancelText ?? 'Cancel',
+                cancelText: properties.cancelText,
                 centered: properties.centered ?? false,
                 mask: properties.mask !== undefined ? properties.mask : true,
                 maskClosable: properties.maskClosable ?? false,

package/dist/blocks/ConfirmModal/meta.js

@@ -76,13 +76,11 @@
             },
             okText: {
                 type: 'string',
-                default: 'Ok',
-                description: 'Text of the Ok button.'
+                description: 'Text of the Ok button. When unset, antd uses the localized default from ConfigProvider locale.'
             },
             cancelText: {
                 type: 'string',
-                default: 'Cancel',
-                description: 'Text of the Cancel button.'
+                description: 'Text of the Cancel button. When unset, antd uses the localized default from ConfigProvider locale.'
             },
             okButton: {
                 type: 'object',

package/dist/blocks/DateRangeSelector/DateRangeSelector.js

@@ -16,7 +16,7 @@
 import { DatePicker } from 'antd';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc.js';
-import { type } from '@lowdefy/helpers';
+import { getLocaleDateFormat, type } from '@lowdefy/helpers';
 import { withBlockDefaults } from '@lowdefy/block-utils';
 import Label from '../Label/Label.js';
 import withTheme from '../withTheme.js';
@@ -32,6 +32,7 @@ const DateRangeSelector = ({ blockId, classNames = {}, components: { Icon }, eve
     const [elementId] = useState((0 | Math.random() * 9e2) + 1e2);
     return /*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
+        methods: methods,
         classNames: classNames,
         components: {
             Icon
@@ -64,18 +65,12 @@ const DateRangeSelector = ({ blockId, classNames = {}, components: { Icon }, eve
                     },
                     disabled: properties.disabled || loading,
                     disabledDate: disabledDate(properties.disabledDates),
-                    format: properties.format ?? 'YYYY-MM-DD',
+                    format: properties.format ?? getLocaleDateFormat(methods.getLocale?.()) ?? 'YYYY-MM-DD',
                     getPopupContainer: ()=>document.getElementById(`${blockId}_${elementId}_popup`),
                     separator: properties.separator ?? '~',
                     size: properties.size,
                     status: validation.status,
-                    placeholder: (type.isArray(properties.placeholder) && [
-                        properties.placeholder[0] ?? 'Start Date',
-                        properties.placeholder[1] ?? 'End Date'
-                    ]) ?? [
-                        'Start Date',
-                        'End Date'
-                    ],
+                    placeholder: type.isArray(properties.placeholder) ? properties.placeholder : undefined,
                     suffixIcon: /*#__PURE__*/ React.createElement(Icon, {
                         blockId: `${blockId}_suffixIcon`,
                         classNames: {

package/dist/blocks/DateRangeSelector/meta.js

@@ -38,7 +38,8 @@ export default {
             event: {
                 value: 'The selected date range value.'
             }
-        }
+        },
+        onTooltipClick: 'Trigger actions when the tooltip icon is clicked.'
     },
     properties: {
         type: 'object',
@@ -68,17 +69,12 @@ export default {
             disabledDates,
             format: {
                 type: 'string',
-                default: 'YYYY-MM-DD',
-                description: 'Format in which to parse the date value, eg. "DD MMMM YYYY" will parse a date value of 1999-12-31 as "31 December 1999". The format has to conform to dayjs formats.'
+                description: 'Format in which to parse the date value, eg. "DD MMMM YYYY" will parse a date value of 1999-12-31 as "31 December 1999". The format has to conform to dayjs formats. Defaults to the active locale\'s date format, or "YYYY-MM-DD" when no locale is configured.'
             },
             label,
             placeholder: {
                 type: 'array',
-                default: [
-                    'Start Date',
-                    'End Date'
-                ],
-                description: 'Placeholder text inside the block before user types input.',
+                description: 'Placeholder text inside the block before user types input. When unset, antd uses the localized default from ConfigProvider locale.',
                 docs: {
                     displayType: 'manual',
                     block: {

package/dist/blocks/DateSelector/DateSelector.js

@@ -15,7 +15,7 @@
 */ import React, { useState } from 'react';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc.js';
-import { type } from '@lowdefy/helpers';
+import { getLocaleDateFormat, type } from '@lowdefy/helpers';
 import { DatePicker } from 'antd';
 import { withBlockDefaults } from '@lowdefy/block-utils';
 import Label from '../Label/Label.js';
@@ -26,6 +26,7 @@ const DateSelector = ({ blockId, classNames = {}, components: { Icon }, events,
     const [elementId] = useState((0 | Math.random() * 9e2) + 1e2);
     return /*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
+        methods: methods,
         classNames: classNames,
         components: {
             Icon
@@ -57,9 +58,9 @@ const DateSelector = ({ blockId, classNames = {}, components: { Icon }, events,
                         ...styles.element
                     },
                     disabled: properties.disabled || loading,
-                    format: properties.format ?? 'YYYY-MM-DD',
+                    format: properties.format ?? getLocaleDateFormat(methods.getLocale?.()) ?? 'YYYY-MM-DD',
                     getPopupContainer: ()=>document.getElementById(`${blockId}_${elementId}_popup`),
-                    placeholder: properties.placeholder ?? 'Select Date',
+                    placeholder: properties.placeholder,
                     showToday: properties.showToday,
                     size: properties.size,
                     status: validation.status,

package/dist/blocks/DateSelector/meta.js

@@ -38,7 +38,8 @@ export default {
             event: {
                 value: 'The selected date value.'
             }
-        }
+        },
+        onTooltipClick: 'Trigger actions when the tooltip icon is clicked.'
     },
     properties: {
         type: 'object',
@@ -69,12 +70,10 @@ export default {
             label,
             format: {
                 type: 'string',
-                default: 'YYYY-MM-DD',
-                description: 'Format in which to parse the date value, eg. "DD MMMM YYYY" will parse a date value of 1999-12-31 as "31 December 1999". The format has to conform to dayjs formats.'
+                description: 'Format in which to parse the date value, eg. "DD MMMM YYYY" will parse a date value of 1999-12-31 as "31 December 1999". The format has to conform to dayjs formats. Defaults to the active locale\'s date format, or "YYYY-MM-DD" when no locale is configured.'
             },
             placeholder: {
-                ...placeholder,
-                default: 'Select Date'
+                ...placeholder
             },
             showToday: {
                 type: 'boolean',

package/dist/blocks/DateTimeSelector/DateTimeSelector.js

@@ -16,7 +16,7 @@
 import { DatePicker } from 'antd';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc.js';
-import { type } from '@lowdefy/helpers';
+import { getLocaleDateFormat, type } from '@lowdefy/helpers';
 import { withBlockDefaults } from '@lowdefy/block-utils';
 import Label from '../Label/Label.js';
 import withTheme from '../withTheme.js';
@@ -39,6 +39,7 @@ const DateTimeSelector = ({ blockId, classNames = {}, components: { Icon }, even
     };
     return /*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
+        methods: methods,
         classNames: classNames,
         components: {
             Icon
@@ -71,9 +72,9 @@ const DateTimeSelector = ({ blockId, classNames = {}, components: { Icon }, even
                     },
                     disabled: properties.disabled || loading,
                     disabledDate: disabledDate(properties.disabledDates),
-                    format: properties.format ?? 'YYYY-MM-DD HH:mm',
+                    format: properties.format ?? getLocaleDateFormat(methods.getLocale?.(), 'datetime') ?? 'YYYY-MM-DD HH:mm',
                     getPopupContainer: ()=>document.getElementById(`${blockId}_${elementId}_popup`),
-                    placeholder: properties.placeholder ?? 'Select Date & Time',
+                    placeholder: properties.placeholder,
                     showNow: properties.showNow,
                     showToday: properties.showToday,
                     size: properties.size,

package/dist/blocks/DateTimeSelector/meta.js

@@ -38,7 +38,8 @@ export default {
             event: {
                 value: 'The selected date-time value.'
             }
-        }
+        },
+        onTooltipClick: 'Trigger actions when the tooltip icon is clicked.'
     },
     properties: {
         type: 'object',
@@ -68,8 +69,7 @@ export default {
             disabledDates,
             format: {
                 type: 'string',
-                default: 'YYYY-MM-DD HH:mm',
-                description: 'Format in which to parse the date value, eg. "DD MMMM YYYY" will parse a date value of 1999-12-31 as "31 December 1999". The format has to conform to dayjs formats.'
+                description: 'Format in which to parse the date value, eg. "DD MMMM YYYY HH:mm" will parse a date value of 1999-12-31T15:30 as "31 December 1999 15:30". The format has to conform to dayjs formats. Defaults to the active locale\'s date-time format, or "YYYY-MM-DD HH:mm" when no locale is configured.'
             },
             hourStep: {
                 type: 'integer',
@@ -85,8 +85,7 @@ export default {
                 description: 'Minute intervals to show in the time selector.'
             },
             placeholder: {
-                ...placeholder,
-                default: 'Select Date & Time'
+                ...placeholder
             },
             secondStep: {
                 type: 'integer',