mithril-materialized 3.5.5 → 3.5.7

package/dist/index.esm.js

@@ -159,6 +159,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), '*') };
@@ -2187,6 +2257,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;
@@ -2202,6 +2395,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: () => {
@@ -2255,10 +2449,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;
@@ -2374,93 +2584,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
             ]);
         },
     };
@@ -3300,8 +3424,8 @@ const InputField = (type, defaultClass = '') => () => {
             const shouldValidate = !isNonInteractive && (validate || type === 'email' || type === 'url' || isNumeric);
             return m('.input-field', { className: cn, style }, [
                 iconName ? m('i.material-icons.prefix', iconName) : undefined,
-                m('input', Object.assign(Object.assign({ class: shouldValidate ? 'validate' : undefined }, params), { type, tabindex: 0, id,
-                    placeholder, value: controlled ? value : undefined, class: type === 'range' && attrs.vertical ? 'range-slider vertical' : undefined, style: type === 'range' && attrs.vertical
+                m('input', Object.assign(Object.assign({ class: type === 'range' && attrs.vertical ? 'range-slider vertical' : shouldValidate ? 'validate' : undefined }, params), { type, tabindex: 0, id,
+                    placeholder, value: controlled ? value : undefined, style: type === 'range' && attrs.vertical
                         ? {
                             height: attrs.height || '200px',
                             width: '6px',
@@ -4894,7 +5018,7 @@ const ModalPanel = () => {
                     closeModal(attrs);
                 }
             }
-            const { id, title, description, fixedFooter, bottomSheet, buttons, richContent, className, showCloseButton = true, closeOnBackdropClick = true, } = attrs;
+            const { id, title, description, fixedFooter, bottomSheet, buttons, richContent, className, showCloseButton = true, closeOnBackdropClick = true, closeOnButtonClick = true, } = attrs;
             const modalClasses = [
                 'modal',
                 className || '',
@@ -4991,7 +5115,7 @@ const ModalPanel = () => {
                         }, buttons.map((buttonProps) => m(FlatButton, Object.assign(Object.assign({}, buttonProps), { className: `modal-close ${buttonProps.className || ''}`, onclick: (e) => {
                                 if (buttonProps.onclick)
                                     buttonProps.onclick(e);
-                                closeModal(attrs);
+                                closeOnButtonClick && closeModal(attrs);
                             } })))),
                 ]),
             ]);
@@ -5169,6 +5293,7 @@ const defaultOptions = {
     autoClose: false,
     twelveHour: true,
     vibrate: true,
+    roundBy5: false,
     onOpen: () => { },
     onOpenStart: () => { },
     onOpenEnd: () => { },
@@ -5220,7 +5345,7 @@ const TimePicker = () => {
         const clickPos = getPos(e);
         state.dx = clickPos.x - state.x0;
         state.dy = clickPos.y - state.y0;
-        setHand(state.dx, state.dy, false);
+        setHand(state.dx, state.dy, options.roundBy5);
         document.addEventListener('mousemove', handleDocumentClickMove);
         document.addEventListener('touchmove', handleDocumentClickMove);
         document.addEventListener('mouseup', handleDocumentClickEnd);
@@ -5232,7 +5357,7 @@ const TimePicker = () => {
         const x = clickPos.x - state.x0;
         const y = clickPos.y - state.y0;
         state.moved = true;
-        setHand(x, y, false);
+        setHand(x, y, options.roundBy5);
         m.redraw();
     };
     const handleDocumentClickEnd = (e) => {
@@ -5668,6 +5793,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;
@@ -5684,11 +5869,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
@@ -5702,6 +5890,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;
@@ -5798,29 +6001,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
             ]);
         },
     };
@@ -9543,4 +9724,4 @@ const isValidationError = (result) => !isValidationSuccess(result);
 // ============================================================================
 // All types are already exported via individual export declarations above
 
-export { AnchorItem, Autocomplete, Breadcrumb, BreadcrumbManager, Button, ButtonFactory, Carousel, CharacterCounter, Chips, CodeBlock, Collapsible, CollapsibleItem, Collection, CollectionMode, ColorInput, DataTable, DatePicker, DoubleRangeSlider, Dropdown, EmailInput, FileInput, FileUpload, FlatButton, FloatingActionButton, HelperText, Icon, IconButton, ImageList, InputCheckbox, Label, LargeButton, ListItem, Mandatory, Masonry, MaterialBox, MaterialIcon, ModalPanel, NumberInput, Options, OptionsList, Pagination, PaginationControls, Parallax, PasswordInput, Pushpin, PushpinComponent, RadioButton, RadioButtons, RangeInput, Rating, RoundIconButton, SearchSelect, SecondaryContent, Select, Sidenav, SidenavItem, SidenavManager, SingleRangeSlider, SmallButton, Stepper, SubmitButton, Switch, Tabs, TextArea, TextInput, ThemeManager, ThemeSwitcher, ThemeToggle, TimePicker, Timeline, Toast, ToastComponent, Tooltip, TooltipComponent, TreeView, UrlInput, Wizard, createBreadcrumb, getDropdownStyles, initPushpins, initTooltips, isNumeric, isValidationError, isValidationSuccess, padLeft, range, toast, uniqueId, uuid4 };
+export { AnchorItem, Autocomplete, Breadcrumb, BreadcrumbManager, Button, ButtonFactory, Carousel, CharacterCounter, Chips, CodeBlock, Collapsible, CollapsibleItem, Collection, CollectionMode, ColorInput, DataTable, DatePicker, DoubleRangeSlider, Dropdown, EmailInput, FileInput, FileUpload, FlatButton, FloatingActionButton, HelperText, Icon, IconButton, ImageList, InputCheckbox, Label, LargeButton, ListItem, Mandatory, Masonry, MaterialBox, MaterialIcon, ModalPanel, NumberInput, Options, OptionsList, Pagination, PaginationControls, Parallax, PasswordInput, Pushpin, PushpinComponent, RadioButton, RadioButtons, RangeInput, Rating, RoundIconButton, SearchSelect, SecondaryContent, Select, Sidenav, SidenavItem, SidenavManager, SingleRangeSlider, SmallButton, Stepper, SubmitButton, Switch, Tabs, TextArea, TextInput, ThemeManager, ThemeSwitcher, ThemeToggle, TimePicker, Timeline, Toast, ToastComponent, Tooltip, TooltipComponent, TreeView, UrlInput, Wizard, clearPortal, createBreadcrumb, getDropdownStyles, getPortalContainer, initPushpins, initTooltips, isNumeric, isValidationError, isValidationSuccess, padLeft, range, releasePortalContainer, renderToPortal, toast, uniqueId, uuid4 };