mithril-materialized 3.5.6 → 3.5.7

package/dist/index.js

@@ -161,6 +161,76 @@ const getDropdownStyles = (inputRef, overlap = false, options, isDropDown = fals
  * @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), '*') };
@@ -2189,6 +2259,129 @@ const DatePicker = () => {
         }
         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;
@@ -2204,6 +2397,7 @@ const DatePicker = () => {
                 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: () => {
@@ -2257,10 +2451,26 @@ const DatePicker = () => {
             }
             // 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;
@@ -2376,93 +2586,7 @@ const DatePicker = () => {
                     }, 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
             ]);
         },
     };
@@ -5671,6 +5795,66 @@ const TimePicker = () => {
             },
         };
     };
+    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;
@@ -5687,11 +5871,14 @@ const TimePicker = () => {
                 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
@@ -5705,6 +5892,21 @@ const TimePicker = () => {
             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;
@@ -5801,29 +6003,7 @@ const TimePicker = () => {
                     }, 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
             ]);
         },
     };
@@ -9622,8 +9802,10 @@ exports.TooltipComponent = TooltipComponent;
 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;
@@ -9631,6 +9813,8 @@ exports.isValidationError = isValidationError;
 exports.isValidationSuccess = isValidationSuccess;
 exports.padLeft = padLeft;
 exports.range = range;
+exports.releasePortalContainer = releasePortalContainer;
+exports.renderToPortal = renderToPortal;
 exports.toast = toast;
 exports.uniqueId = uniqueId;
 exports.uuid4 = uuid4;