mithril-materialized 3.5.6 → 3.5.7

package/dist/index.umd.js

@@ -163,6 +163,76 @@
      * @example: console.log(range(5, 10)); // [5, 6, 7, 8, 9, 10]
      */
     const range = (a, b) => Array.from({ length: b - a + 1 }, (_, i) => a + i);
+    // Global registry for portal containers
+    const portalContainers = new Map();
+    /**
+     * Creates or retrieves a portal container appended to document.body.
+     * Uses reference counting to manage container lifecycle.
+     *
+     * @param id - Unique identifier for the portal container
+     * @param zIndex - Z-index for the portal container (default: 1004, above modals at 1003)
+     * @returns The portal container element
+     */
+    const getPortalContainer = (id, zIndex = 1004) => {
+        let container = portalContainers.get(id);
+        if (!container) {
+            const element = document.createElement('div');
+            element.id = id;
+            element.style.position = 'fixed';
+            element.style.top = '0';
+            element.style.left = '0';
+            element.style.width = '100%';
+            element.style.height = '100%';
+            element.style.pointerEvents = 'none'; // Allow clicks through to underlying elements
+            element.style.zIndex = zIndex.toString();
+            document.body.appendChild(element);
+            container = { element, refCount: 0 };
+            portalContainers.set(id, container);
+        }
+        container.refCount++;
+        return container.element;
+    };
+    /**
+     * Decrements reference count and removes portal container if no longer needed.
+     *
+     * @param id - Portal container identifier
+     */
+    const releasePortalContainer = (id) => {
+        const container = portalContainers.get(id);
+        if (container) {
+            container.refCount--;
+            if (container.refCount <= 0) {
+                container.element.remove();
+                portalContainers.delete(id);
+            }
+        }
+    };
+    /**
+     * Renders a Mithril vnode into a portal container using m.render().
+     * This allows components to render outside their parent DOM hierarchy,
+     * useful for modals and pickers that need to escape stacking contexts.
+     *
+     * @param containerId - Portal container identifier
+     * @param vnode - Mithril vnode to render
+     * @param zIndex - Z-index for portal container (default: 1004)
+     */
+    const renderToPortal = (containerId, vnode, zIndex = 1004) => {
+        const container = getPortalContainer(containerId, zIndex);
+        m.render(container, vnode);
+    };
+    /**
+     * Clears portal content and releases container reference.
+     * If this is the last reference, the container will be removed from the DOM.
+     *
+     * @param containerId - Portal container identifier
+     */
+    const clearPortal = (containerId) => {
+        const container = portalContainers.get(containerId);
+        if (container) {
+            m.render(container.element, null);
+            releasePortalContainer(containerId);
+        }
+    };
 
     // import './styles/input.css';
     const Mandatory = { view: ({ attrs }) => m('span.mandatory', Object.assign({}, attrs), '*') };
@@ -2191,6 +2261,129 @@
             }
             m.redraw();
         };
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape' && state.isOpen) {
+                state.isOpen = false;
+                const options = mergeOptions({});
+                if (options.onClose)
+                    options.onClose();
+                clearPortal(state.portalContainerId);
+                m.redraw();
+            }
+        };
+        const renderPickerToPortal = (attrs) => {
+            const options = mergeOptions(attrs);
+            const pickerModal = m('.datepicker-modal-wrapper', {
+                style: {
+                    position: 'fixed',
+                    top: '0',
+                    left: '0',
+                    width: '100%',
+                    height: '100%',
+                    pointerEvents: 'auto',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                },
+            }, [
+                // Modal overlay
+                m('.modal-overlay', {
+                    style: {
+                        position: 'absolute',
+                        top: '0',
+                        left: '0',
+                        width: '100%',
+                        height: '100%',
+                        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                        zIndex: '1002',
+                    },
+                    onclick: () => {
+                        state.isOpen = false;
+                        if (options.onClose)
+                            options.onClose();
+                        m.redraw();
+                    },
+                }),
+                // Modal content
+                m('.modal.datepicker-modal.open', {
+                    id: `modal-${state.id}`,
+                    tabindex: 0,
+                    style: {
+                        position: 'relative',
+                        zIndex: '1003',
+                        display: 'block',
+                        opacity: 1,
+                        top: 'auto',
+                        transform: 'scaleX(1) scaleY(1)',
+                        margin: '0 auto',
+                    },
+                }, [
+                    m('.modal-content.datepicker-container', {
+                        onclick: (e) => {
+                            const target = e.target;
+                            if (!target.closest('.select-wrapper') && !target.closest('.dropdown-content')) {
+                                state.monthDropdownOpen = false;
+                                state.yearDropdownOpen = false;
+                            }
+                        },
+                    }, [
+                        m(DateDisplay, { options }),
+                        m('.datepicker-calendar-container', [
+                            m('.datepicker-calendar', [
+                                m(DateControls, {
+                                    options,
+                                    randId: `datepicker-title-${Math.random().toString(36).slice(2)}`,
+                                }),
+                                m(Calendar, {
+                                    year: state.calendars[0].year,
+                                    month: state.calendars[0].month,
+                                    options,
+                                }),
+                            ]),
+                            m('.datepicker-footer', [
+                                options.showClearBtn &&
+                                    m('button.btn-flat.datepicker-clear.waves-effect', {
+                                        type: 'button',
+                                        onclick: () => {
+                                            setDate(null, false, options);
+                                            state.isOpen = false;
+                                        },
+                                    }, options.i18n.clear),
+                                m('button.btn-flat.datepicker-cancel.waves-effect', {
+                                    type: 'button',
+                                    onclick: () => {
+                                        state.isOpen = false;
+                                        if (options.onClose)
+                                            options.onClose();
+                                    },
+                                }, options.i18n.cancel),
+                                m('button.btn-flat.datepicker-done.waves-effect', {
+                                    type: 'button',
+                                    onclick: () => {
+                                        state.isOpen = false;
+                                        if (options.dateRange) {
+                                            if (state.startDate && state.endDate && attrs.onchange) {
+                                                const startStr = formatDate(state.startDate, 'yyyy-mm-dd', options);
+                                                const endStr = formatDate(state.endDate, 'yyyy-mm-dd', options);
+                                                attrs.onchange(`${startStr} - ${endStr}`);
+                                            }
+                                        }
+                                        else {
+                                            if (state.date && attrs.onchange) {
+                                                attrs.onchange(toString(state.date, 'yyyy-mm-dd'));
+                                            }
+                                        }
+                                        if (options.onClose)
+                                            options.onClose();
+                                    },
+                                }, options.i18n.done),
+                            ]),
+                        ]),
+                    ]),
+                ]),
+            ]);
+            renderToPortal(state.portalContainerId, pickerModal, 1004);
+        };
         return {
             oninit: (vnode) => {
                 const attrs = vnode.attrs;
@@ -2206,6 +2399,7 @@
                     calendars: [{ month: 0, year: 0 }],
                     monthDropdownOpen: false,
                     yearDropdownOpen: false,
+                    portalContainerId: `datepicker-portal-${uniqueId()}`,
                     formats: {
                         d: () => { var _a; return ((_a = state.date) === null || _a === void 0 ? void 0 : _a.getDate()) || 0; },
                         dd: () => {
@@ -2259,10 +2453,26 @@
                 }
                 // Add document click listener to close dropdowns
                 document.addEventListener('click', handleDocumentClick);
+                // Add ESC key listener
+                document.addEventListener('keydown', handleKeyDown);
             },
             onremove: () => {
-                // Clean up event listener
+                // Clean up event listeners
                 document.removeEventListener('click', handleDocumentClick);
+                document.removeEventListener('keydown', handleKeyDown);
+                // Clean up portal if picker was open
+                if (state.isOpen) {
+                    clearPortal(state.portalContainerId);
+                }
+            },
+            onupdate: (vnode) => {
+                // Render to portal when picker is open, clear when closed
+                if (state.isOpen) {
+                    renderPickerToPortal(vnode.attrs);
+                }
+                else {
+                    clearPortal(state.portalContainerId);
+                }
             },
             view: (vnode) => {
                 const attrs = vnode.attrs;
@@ -2378,93 +2588,7 @@
                         }, label || dateLabel),
                     // Helper text
                     helperText && m('span.helper-text', helperText),
-                    // Modal datepicker
-                    state.isOpen && [
-                        m('.modal.datepicker-modal.open', {
-                            id: `modal-${state.id}`,
-                            tabindex: 0,
-                            style: {
-                                zIndex: 1003,
-                                display: 'block',
-                                opacity: 1,
-                                top: '10%',
-                                transform: 'scaleX(1) scaleY(1)',
-                            },
-                        }, [
-                            m('.modal-content.datepicker-container', {
-                                onclick: (e) => {
-                                    // Close dropdowns when clicking anywhere in the modal content
-                                    const target = e.target;
-                                    if (!target.closest('.select-wrapper') && !target.closest('.dropdown-content')) {
-                                        state.monthDropdownOpen = false;
-                                        state.yearDropdownOpen = false;
-                                    }
-                                },
-                            }, [
-                                m(DateDisplay, { options }),
-                                m('.datepicker-calendar-container', [
-                                    m('.datepicker-calendar', [
-                                        m(DateControls, { options, randId: `datepicker-title-${Math.random().toString(36).slice(2)}` }),
-                                        m(Calendar, { year: state.calendars[0].year, month: state.calendars[0].month, options }),
-                                    ]),
-                                    m('.datepicker-footer', [
-                                        options.showClearBtn &&
-                                            m('button.btn-flat.datepicker-clear.waves-effect', {
-                                                type: 'button',
-                                                style: '',
-                                                onclick: () => {
-                                                    setDate(null, false, options);
-                                                    state.isOpen = false;
-                                                },
-                                            }, options.i18n.clear),
-                                        m('button.btn-flat.datepicker-cancel.waves-effect', {
-                                            type: 'button',
-                                            onclick: () => {
-                                                state.isOpen = false;
-                                                if (options.onClose)
-                                                    options.onClose();
-                                            },
-                                        }, options.i18n.cancel),
-                                        m('button.btn-flat.datepicker-done.waves-effect', {
-                                            type: 'button',
-                                            onclick: () => {
-                                                state.isOpen = false;
-                                                if (options.dateRange) {
-                                                    // Range mode
-                                                    if (state.startDate && state.endDate && onchange) {
-                                                        const startStr = toString(state.startDate, 'yyyy-mm-dd');
-                                                        const endStr = toString(state.endDate, 'yyyy-mm-dd');
-                                                        onchange(`${startStr} - ${endStr}`);
-                                                    }
-                                                }
-                                                else {
-                                                    // Single date mode
-                                                    if (state.date && onchange) {
-                                                        onchange(toString(state.date, 'yyyy-mm-dd')); // Always return ISO format
-                                                    }
-                                                }
-                                                if (options.onClose)
-                                                    options.onClose();
-                                            },
-                                        }, options.i18n.done),
-                                    ]),
-                                ]),
-                            ]),
-                        ]),
-                        // Modal overlay
-                        m('.modal-overlay', {
-                            style: {
-                                zIndex: 1002,
-                                display: 'block',
-                                opacity: 0.5,
-                            },
-                            onclick: () => {
-                                state.isOpen = false;
-                                if (options.onClose)
-                                    options.onClose();
-                            },
-                        }),
-                    ],
+                    // Modal is now rendered via portal in onupdate hook
                 ]);
             },
         };
@@ -5673,6 +5797,66 @@
                 },
             };
         };
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape' && state.isOpen) {
+                close();
+                clearPortal(state.portalContainerId);
+                m.redraw();
+            }
+        };
+        const renderPickerToPortal = (attrs) => {
+            const { showClearBtn = false, clearLabel = 'Clear', closeLabel = 'Cancel' } = attrs;
+            const pickerModal = m('.timepicker-modal-wrapper', {
+                style: {
+                    position: 'fixed',
+                    top: '0',
+                    left: '0',
+                    width: '100%',
+                    height: '100%',
+                    pointerEvents: 'auto',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                },
+            }, [
+                // Modal overlay
+                m('.modal-overlay', {
+                    style: {
+                        position: 'absolute',
+                        top: '0',
+                        left: '0',
+                        width: '100%',
+                        height: '100%',
+                        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                        zIndex: '1002',
+                    },
+                    onclick: () => {
+                        close();
+                        m.redraw();
+                    },
+                }),
+                // Modal content
+                m('.modal.timepicker-modal.open', {
+                    style: {
+                        position: 'relative',
+                        zIndex: '1003',
+                        display: 'block',
+                        opacity: 1,
+                        top: 'auto',
+                        transform: 'scaleX(1) scaleY(1)',
+                        margin: '0 auto',
+                    },
+                }, [
+                    m(TimepickerModal, {
+                        showClearBtn,
+                        clearLabel,
+                        closeLabel,
+                        doneLabel: 'OK',
+                    }),
+                ]),
+            ]);
+            renderToPortal(state.portalContainerId, pickerModal, 1004);
+        };
         return {
             oninit: (vnode) => {
                 const attrs = vnode.attrs;
@@ -5689,11 +5873,14 @@
                     y0: 0,
                     dx: 0,
                     dy: 0,
+                    portalContainerId: `timepicker-portal-${uniqueId()}`,
                 };
                 // Handle value after options are set
                 if (attrs.defaultValue) {
                     updateTimeFromInput(attrs.defaultValue);
                 }
+                // Add ESC key listener
+                document.addEventListener('keydown', handleKeyDown);
             },
             onremove: () => {
                 // Cleanup
@@ -5707,6 +5894,21 @@
                 document.removeEventListener('touchmove', handleDocumentClickMove);
                 document.removeEventListener('mouseup', handleDocumentClickEnd);
                 document.removeEventListener('touchend', handleDocumentClickEnd);
+                document.removeEventListener('keydown', handleKeyDown);
+                // Clean up portal if picker was open
+                if (state.isOpen) {
+                    clearPortal(state.portalContainerId);
+                }
+            },
+            onupdate: (vnode) => {
+                const { useModal = true } = vnode.attrs;
+                // Only render to portal when using modal mode
+                if (useModal && state.isOpen) {
+                    renderPickerToPortal(vnode.attrs);
+                }
+                else {
+                    clearPortal(state.portalContainerId);
+                }
             },
             view: ({ attrs }) => {
                 const { id = state.id, label, placeholder, disabled, readonly, required, iconName, helperText, onchange, oninput, useModal = true, showClearBtn = false, clearLabel = 'Clear', closeLabel = 'Cancel', twelveHour, className: cn1, class: cn2, } = attrs;
@@ -5803,29 +6005,7 @@
                         }, label),
                     // Helper text
                     helperText && m('span.helper-text', helperText),
-                    // Modal timepicker
-                    useModal &&
-                        state.isOpen && [
-                        // Modal overlay
-                        m('.modal-overlay', {
-                            style: {
-                                zIndex: 1002,
-                                display: 'block',
-                                opacity: 0.5,
-                            },
-                            onclick: () => close(),
-                        }),
-                        // Modal content
-                        m('.modal.timepicker-modal.open', {
-                            style: {
-                                zIndex: 1003,
-                                display: 'block',
-                                opacity: 1,
-                                top: '10%',
-                                transform: 'scaleX(1) scaleY(1)',
-                            },
-                        }, m(TimepickerModal, { showClearBtn, clearLabel, closeLabel, doneLabel: 'OK' })),
-                    ],
+                    // Modal is now rendered via portal in onupdate hook
                 ]);
             },
         };
@@ -9624,8 +9804,10 @@
     exports.TreeView = TreeView;
     exports.UrlInput = UrlInput;
     exports.Wizard = Wizard;
+    exports.clearPortal = clearPortal;
     exports.createBreadcrumb = createBreadcrumb;
     exports.getDropdownStyles = getDropdownStyles;
+    exports.getPortalContainer = getPortalContainer;
     exports.initPushpins = initPushpins;
     exports.initTooltips = initTooltips;
     exports.isNumeric = isNumeric;
@@ -9633,6 +9815,8 @@
     exports.isValidationSuccess = isValidationSuccess;
     exports.padLeft = padLeft;
     exports.range = range;
+    exports.releasePortalContainer = releasePortalContainer;
+    exports.renderToPortal = renderToPortal;
     exports.toast = toast;
     exports.uniqueId = uniqueId;
     exports.uuid4 = uuid4;

package/dist/utils.d.ts

@@ -41,3 +41,35 @@ export declare const getDropdownStyles: (inputRef?: HTMLElement | null, overlap?
  * @example: console.log(range(5, 10)); // [5, 6, 7, 8, 9, 10]
  */
 export declare const range: (a: number, b: number) => number[];
+/**
+ * Creates or retrieves a portal container appended to document.body.
+ * Uses reference counting to manage container lifecycle.
+ *
+ * @param id - Unique identifier for the portal container
+ * @param zIndex - Z-index for the portal container (default: 1004, above modals at 1003)
+ * @returns The portal container element
+ */
+export declare const getPortalContainer: (id: string, zIndex?: number) => HTMLElement;
+/**
+ * Decrements reference count and removes portal container if no longer needed.
+ *
+ * @param id - Portal container identifier
+ */
+export declare const releasePortalContainer: (id: string) => void;
+/**
+ * Renders a Mithril vnode into a portal container using m.render().
+ * This allows components to render outside their parent DOM hierarchy,
+ * useful for modals and pickers that need to escape stacking contexts.
+ *
+ * @param containerId - Portal container identifier
+ * @param vnode - Mithril vnode to render
+ * @param zIndex - Z-index for portal container (default: 1004)
+ */
+export declare const renderToPortal: (containerId: string, vnode: any, zIndex?: number) => void;
+/**
+ * Clears portal content and releases container reference.
+ * If this is the last reference, the container will be removed from the DOM.
+ *
+ * @param containerId - Portal container identifier
+ */
+export declare const clearPortal: (containerId: string) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mithril-materialized",
-  "version": "3.5.6",
+  "version": "3.5.7",
   "description": "A materialize library for mithril.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",