@lowdefy/blocks-antd 5.0.0 → 5.1.0

package/dist/blocks/AutoComplete/AutoComplete.js

@@ -40,10 +40,16 @@ const AutoCompleteInput = ({ blockId, classNames = {}, components, events, loadi
                     backfill: properties.backfill,
                     variant: properties.bordered === false ? 'borderless' : properties.variant,
                     className: classNames.element,
+                    classNames: {
+                        content: classNames.selector
+                    },
                     style: {
                         width: '100%',
                         ...styles.element
                     },
+                    styles: {
+                        content: styles.selector
+                    },
                     defaultOpen: properties.defaultOpen,
                     disabled: properties.disabled || loading,
                     placeholder: properties.placeholder ?? 'Type or select item',

package/dist/blocks/AutoComplete/meta.js

@@ -23,6 +23,7 @@ export default {
     valueType: 'string',
     cssKeys: {
         element: 'The AutoComplete element.',
+        selector: 'The inner value container of the AutoComplete (antd `content` semantic slot).',
         label: 'The AutoComplete label.',
         extra: 'The AutoComplete extra content.',
         feedback: 'The AutoComplete validation feedback.',

package/dist/blocks/Calendar/Calendar.js

@@ -22,21 +22,58 @@ import withTheme from '../withTheme.js';
 import disabledDate from '../../disabledDate.js';
 dayjs.extend(utc);
 function buildDateMap(dateCellData) {
-    if (!type.isArray(dateCellData)) return {};
+    if (!type.isArray(dateCellData)) return {
+        map: {},
+        earliest: undefined
+    };
     const map = {};
+    let earliest;
     dateCellData.forEach((item)=>{
         if (type.isNone(item?.date)) return;
-        const key = dayjs(item.date).format('YYYY-MM-DD');
+        const parsed = dayjs(item.date);
+        if (!parsed.isValid()) return;
+        const key = parsed.format('YYYY-MM-DD');
         if (!map[key]) map[key] = [];
         map[key].push(item);
+        if (!earliest || parsed.isBefore(earliest)) earliest = parsed;
     });
-    return map;
+    return {
+        map,
+        earliest
+    };
+}
+// Pick a default month to open on when `value` is unset: earliest event date
+// from dateCellData, or the earliest specific disabled date, or the min of a
+// disabledDates range. Without this, a calendar whose data lives in a past or
+// future month opens on "today" and shows nothing, confusing the user.
+function pickDefaultValue({ earliestCellData, disabledDates }) {
+    if (earliestCellData) return earliestCellData;
+    if (type.isObject(disabledDates)) {
+        if (type.isArray(disabledDates.dates) && disabledDates.dates.length > 0) {
+            let earliest;
+            disabledDates.dates.forEach((d)=>{
+                const parsed = dayjs(d);
+                if (parsed.isValid() && (!earliest || parsed.isBefore(earliest))) earliest = parsed;
+            });
+            if (earliest) return earliest;
+        }
+        if (!type.isNone(disabledDates.min)) {
+            const parsed = dayjs(disabledDates.min);
+            if (parsed.isValid()) return parsed;
+        }
+    }
+    return undefined;
 }
 const CalendarBlock = ({ blockId, classNames = {}, events, methods, properties, styles = {}, value })=>{
-    const dateMap = buildDateMap(properties.dateCellData);
+    const { map: dateMap, earliest: earliestCellData } = buildDateMap(properties.dateCellData);
     const hasDateData = Object.keys(dateMap).length > 0;
-    return /*#__PURE__*/ React.createElement(Calendar, {
-        id: blockId,
+    const defaultPanel = pickDefaultValue({
+        earliestCellData,
+        disabledDates: properties.disabledDates
+    });
+    return /*#__PURE__*/ React.createElement("div", {
+        id: blockId
+    }, /*#__PURE__*/ React.createElement(Calendar, {
         className: classNames.element,
         style: styles.element,
         fullscreen: properties.fullscreen !== false,
@@ -47,21 +84,24 @@ const CalendarBlock = ({ blockId, classNames = {}, events, methods, properties,
             dayjs(properties.validRange[1])
         ] : undefined,
         value: type.isDate(value) ? dayjs(value) : undefined,
+        defaultValue: !type.isDate(value) ? defaultPanel : undefined,
         onSelect: (date, selectInfo)=>{
             // Wrap with our dayjs — antd v6's internal dayjs may lack the utc plugin.
             const d = dayjs(date);
             const val = d.toDate();
-            if (selectInfo?.source === 'date') {
-                methods.setValue(val);
-                methods.triggerEvent({
-                    name: 'onSelect',
-                    event: {
-                        value: val,
-                        date: d.format('YYYY-MM-DD'),
-                        source: selectInfo.source
-                    }
-                });
-            }
+            const source = selectInfo?.source ?? 'date';
+            // Only fire for date cell clicks — year/month panel navigation emits
+            // onSelect too but shouldn't push a value through the event chain.
+            if (source !== 'date' && source !== 'customize') return;
+            methods.setValue(val);
+            methods.triggerEvent({
+                name: 'onSelect',
+                event: {
+                    value: val,
+                    date: d.format('YYYY-MM-DD'),
+                    source
+                }
+            });
         },
         onChange: (date)=>{
             const d = dayjs(date);
@@ -90,6 +130,8 @@ const CalendarBlock = ({ blockId, classNames = {}, events, methods, properties,
             if (info.type !== 'date') return info.originNode;
             const key = dayjs(current).format('YYYY-MM-DD');
             const items = dateMap[key];
+            // cellRender output is appended to the default date cell — return
+            // null for days with no events to avoid double-rendering the date.
             if (!items) return null;
             return /*#__PURE__*/ React.createElement("ul", {
                 className: "ant-picker-calendar-events",
@@ -106,6 +148,6 @@ const CalendarBlock = ({ blockId, classNames = {}, events, methods, properties,
                     text: item.content
                 }))));
         } : undefined
-    });
+    }));
 };
 export default withTheme('Calendar', withBlockDefaults(CalendarBlock));

package/dist/blocks/Calendar/meta.js

@@ -14,7 +14,7 @@
   limitations under the License.
 */ import disabledDates from '../../schemas/disabledDates.js';
 export default {
-    category: 'display',
+    category: 'input',
     icons: [],
     valueType: 'date',
     cssKeys: {

package/dist/blocks/Drawer/Drawer.js

@@ -112,6 +112,7 @@ const DrawerBlock = ({ blockId, classNames = {}, content, properties, methods, r
         id: blockId,
         closable: properties.closable,
         extra: content.extra && content.extra(),
+        footer: content.footer && content.footer(),
         getContainer: properties.getContainer,
         mask: properties.mask,
         maskClosable: properties.maskClosable,
@@ -145,6 +146,7 @@ const DrawerBlock = ({ blockId, classNames = {}, content, properties, methods, r
         styles: {
             header: styles.header,
             body: styles.body,
+            footer: styles.footer,
             mask: styles.mask,
             wrapper: styles.wrapper,
             content: styles.content

package/dist/blocks/Drawer/meta.js

@@ -18,7 +18,8 @@
     valueType: null,
     slots: {
         content: 'Main Drawer body.',
-        extra: 'Extra content in the header.'
+        extra: 'Extra content in the header.',
+        footer: 'The Drawer footer.'
     },
     cssKeys: {
         element: 'The Drawer element.',

package/dist/blocks/Menu/Menu.js

@@ -12,9 +12,10 @@
   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, { useCallback } from 'react';
-import { Menu } from 'antd';
+*/ import React, { useCallback, useContext } from 'react';
+import { Layout, Menu } from 'antd';
 import { type, get } from '@lowdefy/helpers';
+const SiderContext = Layout._InternalSiderContext;
 import { withBlockDefaults } from '@lowdefy/block-utils';
 import withTheme from '../withTheme.js';
 import useItemShortcuts from '../useItemShortcuts.js';
@@ -133,6 +134,8 @@ function MenuComp({ blockId, classNames = {}, components: { Icon, Link, Shortcut
     }
     const menu = getDefaultMenu(menus, properties.menuId, properties.links);
     const theme = properties.theme;
+    const { siderCollapsed } = useContext(SiderContext) ?? {};
+    const isCollapsed = properties.collapsed === true || siderCollapsed === true;
     const items = buildMenuItems({
         links: menu,
         events,
@@ -185,7 +188,7 @@ function MenuComp({ blockId, classNames = {}, components: { Icon, Link, Shortcut
         mode: properties.mode,
         selectable: true,
         theme: theme,
-        defaultOpenKeys: properties.defaultOpenKeys ?? (properties.mode === 'inline' && properties.collapsed !== true && [
+        defaultOpenKeys: properties.defaultOpenKeys ?? (properties.mode === 'inline' && !isCollapsed && [
             (menu.find((link)=>(link.links || []).map((subLink)=>subLink.links ? subLink.links.map((subSubLink)=>subSubLink.pageId) : [
                         subLink.pageId
                     ]).flat().some((link)=>(properties.selectedKeys ?? [

package/dist/blocks/MobileMenu/MobileMenu.js

@@ -18,7 +18,8 @@ import { withBlockDefaults } from '@lowdefy/block-utils';
 import Button from '../Button/Button.js';
 import Drawer from '../Drawer/Drawer.js';
 import Menu from '../Menu/Menu.js';
-const MobileMenu = ({ basePath, blockId, classNames = {}, components, events, methods, menus, pageId, properties, rename, styles = {} })=>{
+import { getDarkMode } from '../headerActions.js';
+const MobileMenu = ({ basePath, blockId, classNames = {}, components, content, events, methods, menus, pageId, properties, rename, styles = {} })=>{
     const [openState, setOpen] = useState(false);
     useEffect(()=>{
         methods.registerMethod(get(rename, 'methods.toggleOpen', {
@@ -88,7 +89,18 @@ const MobileMenu = ({ basePath, blockId, classNames = {}, components, events, me
                 default: 'toggleOpen'
             })](),
         content: {
-            content: ()=>/*#__PURE__*/ React.createElement(Menu, {
+            extra: properties.logo ? ()=>/*#__PURE__*/ React.createElement("div", {
+                    style: {
+                        flex: '1 0 auto'
+                    }
+                }, /*#__PURE__*/ React.createElement(components.Link, {
+                    home: true
+                }, /*#__PURE__*/ React.createElement("img", {
+                    src: properties.logo?.srcMobile ?? properties.logo?.src ?? `${basePath}/logo-square-${getDarkMode() ? 'dark' : 'light'}-theme.png`,
+                    alt: properties.logo?.alt ?? 'Lowdefy',
+                    style: properties.logo?.style
+                }))) : undefined,
+            content: ()=>/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Menu, {
                     basePath: basePath,
                     components: components,
                     blockId: `${blockId}_menu`,
@@ -113,7 +125,8 @@ const MobileMenu = ({ basePath, blockId, classNames = {}, components, events, me
                             onSelect: 'onMenuItemSelect'
                         }
                     }
-                })
+                }), content?.drawerContent && content.drawerContent()),
+            footer: content?.drawerFooter ? ()=>content.drawerFooter() : undefined
         }
     }));
 };

package/dist/blocks/MobileMenu/meta.js

@@ -13,12 +13,16 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ export default {
-    category: 'display',
+    category: 'container',
     icons: [
         'AiOutlineMenuUnfold',
         'AiOutlineMenuFold'
     ],
     valueType: null,
+    slots: {
+        drawerContent: 'Additional content below the menu in the drawer.',
+        drawerFooter: 'Footer content in the drawer.'
+    },
     cssKeys: {
         element: 'The MobileMenu element.'
     },
@@ -48,6 +52,33 @@
                     displayType: 'yaml'
                 }
             },
+            logo: {
+                type: 'object',
+                description: 'Logo settings for the mobile menu drawer header.',
+                additionalProperties: false,
+                properties: {
+                    src: {
+                        type: 'string',
+                        description: 'Logo source url.'
+                    },
+                    srcMobile: {
+                        type: 'string',
+                        description: 'Mobile logo source url.'
+                    },
+                    alt: {
+                        type: 'string',
+                        default: 'Lowdefy',
+                        description: 'Logo alternative text.'
+                    },
+                    style: {
+                        type: 'object',
+                        description: 'Css style object to apply to logo.',
+                        docs: {
+                            displayType: 'yaml'
+                        }
+                    }
+                }
+            },
             menuId: {
                 type: 'string',
                 description: 'App menu id used to get menu links.'

package/dist/blocks/MultipleSelector/MultipleSelector.js

@@ -41,7 +41,7 @@ const tagRender = (props, option, methods, components)=>{
         }
     });
 };
-const MultipleSelector = ({ blockId, classNames = {}, components: { Icon }, events, loading, methods, properties, required, styles = {}, validation, value })=>{
+const MultipleSelector = ({ blockId, classNames = {}, components: { Icon, ShortcutBadge }, 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 ?? []);
@@ -73,15 +73,22 @@ const MultipleSelector = ({ blockId, classNames = {}, components: { Icon }, even
                     autoFocus: properties.autoFocus,
                     variant: properties.bordered === false ? 'borderless' : properties.variant,
                     className: classNames.element,
+                    classNames: {
+                        content: classNames.selector
+                    },
                     style: {
                         width: '100%',
                         ...styles.element
                     },
+                    styles: {
+                        content: styles.selector
+                    },
                     disabled: properties.disabled || loading,
                     getPopupContainer: ()=>document.getElementById(`${blockId}_${elementId}_popup`),
                     mode: "multiple",
                     tagRender: properties.renderTags && ((props)=>tagRender(props, uniqueValueOptions[props.value], methods, {
-                            Icon
+                            Icon,
+                            ShortcutBadge
                         })),
                     maxTagCount: properties.maxTagCount,
                     notFoundContent: fetchState ? properties.loadingPlaceholder || 'Loading' : properties.notFoundContent || 'Not found',

package/dist/blocks/MultipleSelector/meta.js

@@ -27,6 +27,7 @@ export default {
     valueType: 'array',
     cssKeys: {
         element: 'The MultipleSelector element.',
+        selector: 'The inner tag/value container of the MultipleSelector (antd `content` semantic slot). Use for capping the tag area height and enabling internal scroll.',
         clearIcon: 'The clear icon in the MultipleSelector.',
         label: 'The MultipleSelector label.',
         extra: 'The MultipleSelector extra content.',