mithril-materialized 3.3.8 → 3.4.1

package/dist/index.umd.js

@@ -232,8 +232,6 @@
             if (attrs.onAutocomplete) {
                 attrs.onAutocomplete(suggestion.key);
             }
-            // Force redraw to update label state
-            m.redraw();
         };
         const handleKeydown = (e, attrs) => {
             if (!state.isOpen)
@@ -312,7 +310,7 @@
                 const id = attrs.id || state.id;
                 const { label, helperText, onchange, newRow, className = 'col s12', style, iconName, isMandatory, data = {}, limit = Infinity, minLength = 1 } = attrs, params = __rest(attrs, ["label", "helperText", "onchange", "newRow", "className", "style", "iconName", "isMandatory", "data", "limit", "minLength"]);
                 const controlled = isControlled(attrs);
-                const currentValue = controlled ? (attrs.value || '') : state.internalValue;
+                const currentValue = controlled ? attrs.value || '' : state.internalValue;
                 const cn = newRow ? className + ' clear' : className;
                 // Update suggestions when input changes
                 state.suggestions = filterSuggestions(currentValue, data, limit, minLength);
@@ -327,7 +325,7 @@
                     style,
                 }, [
                     iconName ? m('i.material-icons.prefix', iconName) : '',
-                    m('input', Object.assign(Object.assign({}, params), { className: 'autocomplete', type: 'text', tabindex: 0, id, value: controlled ? currentValue : undefined, oncreate: (vnode) => {
+                    m('input', Object.assign(Object.assign({}, params), { className: 'autocomplete', type: 'text', tabindex: 0, id, value: currentValue, oncreate: (vnode) => {
                             state.inputElement = vnode.dom;
                             // Set initial value for uncontrolled mode
                             if (!controlled && attrs.defaultValue) {
@@ -363,14 +361,10 @@
                             }
                         }, onblur: (e) => {
                             state.isActive = false;
-                            // Delay closing to allow clicks on suggestions
-                            setTimeout(() => {
-                                if (!e.relatedTarget || !e.relatedTarget.closest('.autocomplete-content')) {
-                                    state.isOpen = false;
-                                    state.selectedIndex = -1;
-                                    m.redraw();
-                                }
-                            }, 150);
+                            if (!e.relatedTarget || !e.relatedTarget.closest('.autocomplete-content')) {
+                                state.isOpen = false;
+                                state.selectedIndex = -1;
+                            }
                         } })),
                     // Autocomplete dropdown
                     state.isOpen &&
@@ -386,7 +380,6 @@
                             },
                             onmouseover: () => {
                                 state.selectedIndex = index;
-                                m.redraw();
                             },
                         }, [
                             // Check if value contains image URL or icon
@@ -436,6 +429,103 @@
         },
     });
 
+    /*!
+     * Waves Effect for Mithril Materialized
+     * Based on Waves v0.6.4 by Alfiana E. Sibuea
+     * Adapted for TypeScript and Mithril integration
+     */
+    class WavesEffect {
+        static offset(elem) {
+            const rect = elem.getBoundingClientRect();
+            return {
+                top: rect.top + window.pageYOffset,
+                left: rect.left + window.pageXOffset
+            };
+        }
+        static createRipple(e, element) {
+            // Disable right click
+            if (e.button === 2) {
+                return;
+            }
+            // Create ripple element
+            const ripple = document.createElement('div');
+            ripple.className = 'waves-ripple';
+            // Get click position relative to element
+            const pos = this.offset(element);
+            const relativeY = e.pageY - pos.top;
+            const relativeX = e.pageX - pos.left;
+            // Calculate scale based on element size
+            const scale = (element.clientWidth / 100) * 10;
+            // Set initial ripple position and style
+            ripple.style.cssText = `
+      top: ${relativeY}px;
+      left: ${relativeX}px;
+      transform: scale(0);
+      opacity: 1;
+    `;
+            // Add ripple to element
+            element.appendChild(ripple);
+            // Force reflow and animate
+            ripple.offsetHeight;
+            ripple.style.transform = `scale(${scale})`;
+            ripple.style.opacity = '1';
+            // Store reference for cleanup
+            ripple.setAttribute('data-created', Date.now().toString());
+        }
+        static removeRipples(element) {
+            const ripples = element.querySelectorAll('.waves-ripple');
+            ripples.forEach((ripple) => {
+                const created = parseInt(ripple.getAttribute('data-created') || '0');
+                const age = Date.now() - created;
+                const fadeOut = () => {
+                    ripple.style.opacity = '0';
+                    setTimeout(() => {
+                        if (ripple.parentNode) {
+                            ripple.parentNode.removeChild(ripple);
+                        }
+                    }, this.duration);
+                };
+                if (age >= 350) {
+                    fadeOut();
+                }
+                else {
+                    setTimeout(fadeOut, 350 - age);
+                }
+            });
+        }
+    }
+    WavesEffect.duration = 750;
+    WavesEffect.onMouseDown = (e) => {
+        const element = e.currentTarget;
+        if (element && element.classList.contains('waves-effect')) {
+            WavesEffect.createRipple(e, element);
+        }
+    };
+    WavesEffect.onMouseUp = (e) => {
+        const element = e.currentTarget;
+        if (element && element.classList.contains('waves-effect')) {
+            WavesEffect.removeRipples(element);
+        }
+    };
+    WavesEffect.onMouseLeave = (e) => {
+        const element = e.currentTarget;
+        if (element && element.classList.contains('waves-effect')) {
+            WavesEffect.removeRipples(element);
+        }
+    };
+    WavesEffect.onTouchStart = (e) => {
+        const element = e.currentTarget;
+        if (element && element.classList.contains('waves-effect')) {
+            WavesEffect.createRipple(e, element);
+        }
+    };
+    WavesEffect.onTouchEnd = (e) => {
+        const element = e.currentTarget;
+        if (element && element.classList.contains('waves-effect')) {
+            WavesEffect.removeRipples(element);
+        }
+    };
+
     /**
      * A factory to create new buttons.
      *
@@ -449,13 +539,18 @@
                     iconName, iconClass, label, className, variant } = attrs, params = __rest(attrs, ["tooltip", "tooltipPosition", "tooltipPostion", "iconName", "iconClass", "label", "className", "variant"]);
                     // Use variant or fallback to factory type
                     const buttonType = variant || type || 'button';
-                    const cn = [tooltip ? 'tooltipped' : '', defaultClassNames, className]
-                        .filter(Boolean)
-                        .join(' ')
-                        .trim();
+                    const cn = [tooltip ? 'tooltipped' : '', defaultClassNames, className].filter(Boolean).join(' ').trim();
                     // Use tooltipPosition if available, fallback to legacy tooltipPostion
                     const position = tooltipPosition || tooltipPostion || 'top';
-                    return m(element, Object.assign(Object.assign({}, params), { className: cn, 'data-position': tooltip ? position : undefined, 'data-tooltip': tooltip || undefined, type: buttonType }), iconName ? m(Icon, { iconName, className: iconClass || 'left' }) : undefined, label ? label : undefined);
+                    // Add waves effect event handlers if waves-effect class is present
+                    const wavesHandlers = cn.includes('waves-effect') ? {
+                        onmousedown: WavesEffect.onMouseDown,
+                        onmouseup: WavesEffect.onMouseUp,
+                        onmouseleave: WavesEffect.onMouseLeave,
+                        ontouchstart: WavesEffect.onTouchStart,
+                        ontouchend: WavesEffect.onTouchEnd
+                    } : {};
+                    return m(element, Object.assign(Object.assign(Object.assign({}, params), wavesHandlers), { className: cn, 'data-position': tooltip ? position : undefined, 'data-tooltip': tooltip || undefined, type: buttonType }), iconName ? m(Icon, { iconName, className: iconClass || 'left' }) : undefined, label ? label : undefined);
                 },
             };
         };
@@ -464,6 +559,7 @@
     const LargeButton = ButtonFactory('a', 'waves-effect waves-light btn-large', 'button');
     const SmallButton = ButtonFactory('a', 'waves-effect waves-light btn-small', 'button');
     const FlatButton = ButtonFactory('a', 'waves-effect waves-teal btn-flat', 'button');
+    const IconButton = ButtonFactory('button', 'btn-flat btn-icon waves-effect waves-teal', 'button');
     const RoundIconButton = ButtonFactory('button', 'btn-floating btn-large waves-effect waves-light', 'button');
     const SubmitButton = ButtonFactory('button', 'btn waves-effect waves-light', 'submit');
 
@@ -900,7 +996,7 @@
                 };
                 const rotation = (_a = rotationMap[direction]) !== null && _a !== void 0 ? _a : 0;
                 const transform = rotation ? `rotate(${rotation}deg)` : undefined;
-                return m('svg', Object.assign(Object.assign({}, props), { style: Object.assign({ transform }, style), height: '1lh', width: '24', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' }), iconPaths[name].map((d) => m('path', {
+                return m('svg', Object.assign(Object.assign({}, props), { style: Object.assign({ transform }, style), height: '24px', width: '24px', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' }), iconPaths[name].map((d) => m('path', {
                     d,
                     fill: d.includes('M0 0h24v24H0z') ? 'none' : 'currentColor',
                 })));
@@ -2384,36 +2480,52 @@
                 return null;
         }
     };
+    const isControlled = (attrs) => {
+        return attrs.value !== undefined && typeof attrs.oninput === 'function';
+    };
+    const isRangeControlled = (attrs) => {
+        return (attrs.minValue !== undefined || attrs.maxValue !== undefined) && typeof attrs.oninput === 'function';
+    };
     const initRangeState = (state, attrs) => {
-        const { min = 0, max = 100, value, minValue, maxValue } = attrs;
+        const { min = 0, max = 100, value, minValue, maxValue, defaultValue } = attrs;
         // Initialize single range value
-        if (value !== undefined) {
-            const currentValue = value;
+        if (isControlled(attrs)) {
+            // Always use value from props in controlled mode
+            state.singleValue = value !== undefined ? value : min;
+        }
+        else {
+            // Use internal state for uncontrolled mode
             if (state.singleValue === undefined) {
-                state.singleValue = currentValue;
+                state.singleValue = defaultValue !== undefined ? defaultValue : value !== undefined ? value : min;
             }
-            if (state.lastValue !== value && !state.hasUserInteracted) {
+            // Only update internal state if props changed and user hasn't interacted
+            if (state.lastValue !== value && !state.hasUserInteracted && value !== undefined) {
                 state.singleValue = value;
                 state.lastValue = value;
             }
         }
-        else if (state.singleValue === undefined) {
-            state.singleValue = min;
-        }
         // Initialize range values
-        const currentMinValue = minValue !== undefined ? minValue : min;
-        const currentMaxValue = maxValue !== undefined ? maxValue : max;
-        if (state.rangeMinValue === undefined || state.rangeMaxValue === undefined) {
-            state.rangeMinValue = currentMinValue;
-            state.rangeMaxValue = currentMaxValue;
+        if (isRangeControlled(attrs)) {
+            // Always use values from props in controlled mode
+            state.rangeMinValue = minValue !== undefined ? minValue : min;
+            state.rangeMaxValue = maxValue !== undefined ? maxValue : max;
         }
-        if (!state.hasUserInteracted &&
-            ((minValue !== undefined && state.lastMinValue !== minValue) ||
-                (maxValue !== undefined && state.lastMaxValue !== maxValue))) {
-            state.rangeMinValue = currentMinValue;
-            state.rangeMaxValue = currentMaxValue;
-            state.lastMinValue = minValue;
-            state.lastMaxValue = maxValue;
+        else {
+            // Use internal state for uncontrolled mode
+            const currentMinValue = minValue !== undefined ? minValue : min;
+            const currentMaxValue = maxValue !== undefined ? maxValue : max;
+            if (state.rangeMinValue === undefined || state.rangeMaxValue === undefined) {
+                state.rangeMinValue = currentMinValue;
+                state.rangeMaxValue = currentMaxValue;
+            }
+            if (!state.hasUserInteracted &&
+                ((minValue !== undefined && state.lastMinValue !== minValue) ||
+                    (maxValue !== undefined && state.lastMaxValue !== maxValue))) {
+                state.rangeMinValue = currentMinValue;
+                state.rangeMaxValue = currentMaxValue;
+                state.lastMinValue = minValue;
+                state.lastMaxValue = maxValue;
+            }
         }
         // Initialize active thumb if not set
         if (state.activeThumb === null) {
@@ -2430,15 +2542,18 @@
             minValue = maxValue;
         if (maxValue < minValue)
             maxValue = minValue;
-        state.rangeMinValue = minValue;
-        state.rangeMaxValue = maxValue;
+        // Only update internal state for uncontrolled mode
+        if (!isRangeControlled(attrs)) {
+            state.rangeMinValue = minValue;
+            state.rangeMaxValue = maxValue;
+        }
         state.hasUserInteracted = true;
-        // Call oninput for immediate feedback or onchange for final changes
+        // Call appropriate handler based on interaction type, not control mode
         if (immediate && attrs.oninput) {
-            attrs.oninput(minValue, maxValue);
+            attrs.oninput(minValue, maxValue); // Immediate feedback during drag
         }
-        else if (!immediate && attrs.onchange) {
-            attrs.onchange(minValue, maxValue);
+        if (!immediate && attrs.onchange) {
+            attrs.onchange(minValue, maxValue); // Final value on interaction end (blur/mouseup)
         }
     };
     // Single Range Slider Component
@@ -2472,19 +2587,24 @@
                     : tooltipPos
                 : tooltipPos;
             const updateSingleValue = (newValue, immediate = false) => {
-                state.singleValue = newValue;
+                // Only update internal state for uncontrolled mode
+                if (!isControlled(attrs)) {
+                    state.singleValue = newValue;
+                }
                 state.hasUserInteracted = true;
+                // Call appropriate handler based on interaction type, not control mode
                 if (immediate && oninput) {
-                    oninput(newValue);
+                    oninput(newValue); // Immediate feedback during drag
                 }
-                else if (!immediate && onchange) {
-                    onchange(newValue);
+                if (!immediate && onchange) {
+                    onchange(newValue); // Final value on interaction end (blur/mouseup)
                 }
             };
             const handleMouseDown = (e) => {
                 if (disabled)
                     return;
                 e.preventDefault();
+                e.stopPropagation();
                 state.isDragging = true;
                 if (finalValueDisplay === 'auto') {
                     m.redraw();
@@ -2559,6 +2679,11 @@
                                 updateSingleValue(newValue, false);
                             }
                         },
+                        onblur: () => {
+                            if (disabled || !onchange)
+                                return;
+                            onchange(state.singleValue);
+                        },
                     }, [
                         m(`.track.${orientation}`),
                         m(`.range-progress.${orientation}`, { style: progressStyle }),
@@ -2617,6 +2742,7 @@
                 if (disabled)
                     return;
                 e.preventDefault();
+                e.stopPropagation();
                 state.isDragging = true;
                 state.activeThumb = thumb;
                 if (finalValueDisplay === 'auto') {
@@ -2707,6 +2833,11 @@
                                     maxThumb.focus();
                             }
                         },
+                        onblur: () => {
+                            if (disabled || !attrs.onchange)
+                                return;
+                            attrs.onchange(state.rangeMinValue, state.rangeMaxValue);
+                        },
                     }, [
                         m(`.track.${orientation}`),
                         m(`.range.${orientation}`, { style: rangeStyle }),
@@ -2912,13 +3043,13 @@
                             overflowWrap: 'break-word',
                         },
                         oncreate: ({ dom }) => {
-                            const hiddenDiv = state.hiddenDiv = dom;
+                            const hiddenDiv = (state.hiddenDiv = dom);
                             if (state.textarea) {
                                 updateHeight(state.textarea, hiddenDiv);
                             }
                         },
                         onupdate: ({ dom }) => {
-                            const hiddenDiv = state.hiddenDiv = dom;
+                            const hiddenDiv = (state.hiddenDiv = dom);
                             if (state.textarea) {
                                 updateHeight(state.textarea, hiddenDiv);
                             }
@@ -3031,8 +3162,7 @@
             isDragging: false,
             activeThumb: null,
         };
-        const isControlled = (attrs) => 'value' in attrs && typeof attrs.value !== 'undefined' &&
-            (typeof attrs.oninput === 'function' || typeof attrs.onchange === 'function');
+        const isControlled = (attrs) => 'value' in attrs && typeof attrs.value !== 'undefined' && typeof attrs.oninput === 'function';
         const getValue = (target) => {
             const val = target.value;
             return (val ? (type === 'number' || type === 'range' ? +val : val) : val);
@@ -3082,7 +3212,7 @@
                 const isNonInteractive = attrs.readonly || attrs.disabled;
                 // Warn developer for improper controlled usage
                 if (attrs.value !== undefined && !controlled && !isNonInteractive) {
-                    console.warn(`${type} input received 'value' prop without 'oninput' or 'onchange' handler. ` +
+                    console.warn(`${type} input with label '${attrs.label}' received 'value' prop without 'oninput' handler. ` +
                         `Use 'defaultValue' for uncontrolled components or add an event handler for controlled components.`);
                 }
                 // Initialize internal value if not in controlled mode
@@ -4109,14 +4239,12 @@
             inputRef: null,
             dropdownRef: null,
             internalCheckedId: undefined,
+            isInsideModal: false,
         };
         const isControlled = (attrs) => attrs.checkedId !== undefined && typeof attrs.onchange === 'function';
-        const closeDropdown = (e) => {
-            const target = e.target;
-            if (!target.closest('.dropdown-wrapper.input-field')) {
-                state.isOpen = false;
-                m.redraw();
-            }
+        const closeDropdown = () => {
+            state.isOpen = false;
+            m.redraw(); // Needed to remove the dropdown options list (potentially added to document root)
         };
         const handleKeyDown = (e, items) => {
             const availableItems = items.filter((item) => !item.divider && !item.disabled);
@@ -4161,6 +4289,83 @@
                     return undefined;
             }
         };
+        const getPortalStyles = (inputRef) => {
+            if (!inputRef)
+                return {};
+            const rect = inputRef.getBoundingClientRect();
+            const viewportHeight = window.innerHeight;
+            const spaceBelow = viewportHeight - rect.bottom;
+            const spaceAbove = rect.top;
+            // Choose whether to show above or below based on available space
+            const showAbove = spaceBelow < 200 && spaceAbove > spaceBelow;
+            return {
+                position: 'fixed',
+                top: showAbove ? 'auto' : `${rect.bottom}px`,
+                bottom: showAbove ? `${viewportHeight - rect.top}px` : 'auto',
+                left: `${rect.left}px`,
+                width: `${rect.width}px`,
+                zIndex: 10000,
+                maxHeight: showAbove ? `${spaceAbove - 20}px` : `${spaceBelow - 20}px`,
+                overflow: 'auto',
+                display: 'block',
+                opacity: 1,
+            };
+        };
+        const updatePortalDropdown = (items, selectedLabel, onSelectItem) => {
+            if (!state.isInsideModal)
+                return;
+            // Clean up existing portal
+            const existingPortal = document.getElementById(`${state.id}-dropdown`);
+            if (existingPortal) {
+                existingPortal.remove();
+            }
+            if (!state.isOpen || !state.inputRef)
+                return;
+            // Create portal element
+            const portalElement = document.createElement('div');
+            portalElement.id = `${state.id}-dropdown`;
+            document.body.appendChild(portalElement);
+            // Create dropdown content
+            const availableItems = items.filter((item) => !item.divider && !item.disabled);
+            const dropdownContent = items.map((item) => {
+                if (item.divider) {
+                    return m('li.divider');
+                }
+                const itemIndex = availableItems.indexOf(item);
+                const isSelected = selectedLabel === item.label;
+                const isFocused = state.focusedIndex === itemIndex;
+                return m('li', {
+                    class: `${isSelected ? 'selected' : ''} ${isFocused ? 'focused' : ''}${item.disabled ? ' disabled' : ''}`,
+                    onclick: item.disabled ? undefined : () => onSelectItem(item),
+                }, m('span', {
+                    style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        padding: '14px 16px',
+                    },
+                }, [
+                    item.iconName
+                        ? m('i.material-icons', {
+                            style: { marginRight: '32px' },
+                        }, item.iconName)
+                        : undefined,
+                    item.label,
+                ]));
+            });
+            // Create dropdown with proper positioning
+            const dropdownVnode = m('ul.dropdown-content.select-dropdown', {
+                tabindex: 0,
+                style: getPortalStyles(state.inputRef),
+                oncreate: ({ dom }) => {
+                    state.dropdownRef = dom;
+                },
+                onremove: () => {
+                    state.dropdownRef = null;
+                },
+            }, dropdownContent);
+            // Render to portal
+            m.render(portalElement, dropdownVnode);
+        };
         return {
             oninit: ({ attrs }) => {
                 var _a;
@@ -4172,9 +4377,18 @@
                 // Add global click listener to close dropdown
                 document.addEventListener('click', closeDropdown);
             },
+            oncreate: ({ dom }) => {
+                // Detect if component is inside a modal
+                state.isInsideModal = !!dom.closest('.modal');
+            },
             onremove: () => {
                 // Cleanup global listener
                 document.removeEventListener('click', closeDropdown);
+                // Cleanup portal
+                const portalElement = document.getElementById(`${state.id}-dropdown`);
+                if (portalElement) {
+                    portalElement.remove();
+                }
             },
             view: ({ attrs }) => {
                 const { checkedId, key, label, onchange, disabled = false, items, iconName, helperText, style, className = 'col s12', } = attrs;
@@ -4197,6 +4411,16 @@
                     : undefined;
                 const title = selectedItem ? selectedItem.label : label || 'Select';
                 const availableItems = items.filter((item) => !item.divider && !item.disabled);
+                // Update portal dropdown when inside modal
+                if (state.isInsideModal) {
+                    updatePortalDropdown(items, title, (item) => {
+                        if (item.id) {
+                            state.isOpen = false;
+                            state.focusedIndex = -1;
+                            handleSelection(item.id);
+                        }
+                    });
+                }
                 return m('.dropdown-wrapper.input-field', { className, key, style }, [
                     iconName ? m('i.material-icons.prefix', iconName) : undefined,
                     m(HelperText, { helperText }),
@@ -4230,8 +4454,9 @@
                                 }
                             },
                         }),
-                        // Dropdown Menu using Select component's positioning logic
+                        // Dropdown Menu - render inline only when NOT inside modal
                         state.isOpen &&
+                            !state.isInsideModal &&
                             m('ul.dropdown-content.select-dropdown', {
                                 tabindex: 0,
                                 role: 'listbox',
@@ -4348,12 +4573,17 @@
                         }
                         : undefined,
                 }, [
-                    m('a.btn-floating.btn-large', {
+                    m('a.btn-floating.btn-large.waves-effect.waves-light', {
                         className,
+                        onmousedown: WavesEffect.onMouseDown,
+                        onmouseup: WavesEffect.onMouseUp,
+                        onmouseleave: WavesEffect.onMouseLeave,
+                        ontouchstart: WavesEffect.onTouchStart,
+                        ontouchend: WavesEffect.onTouchEnd,
                     }, m('i.material-icons', { className: iconClass }, iconName)),
                     buttons &&
                         buttons.length > 0 &&
-                        m('ul', buttons.map((button, index) => m('li', m(`a.btn-floating.${button.className || 'red'}`, {
+                        m('ul', buttons.map((button, index) => m('li', m(`a.btn-floating.waves-effect.waves-light.${button.className || 'red'}`, {
                             style: {
                                 opacity: state.isOpen ? '1' : '0',
                                 transform: state.isOpen ? 'scale(1)' : 'scale(0.4)',
@@ -4364,6 +4594,11 @@
                                 if (button.onclick)
                                     button.onclick(e);
                             },
+                            onmousedown: WavesEffect.onMouseDown,
+                            onmouseup: WavesEffect.onMouseUp,
+                            onmouseleave: WavesEffect.onMouseLeave,
+                            ontouchstart: WavesEffect.onTouchStart,
+                            ontouchend: WavesEffect.onTouchEnd,
                         }, m('i.material-icons', { className: button.iconClass }, button.iconName))))),
                 ]));
             },
@@ -4671,7 +4906,7 @@
                                 maxWidth: '75%',
                                 borderRadius: '4px',
                             })), { backgroundColor: 'var(--mm-modal-background, #fff)', maxHeight: '85%', overflow: 'auto', zIndex: '1003', padding: '0', flexDirection: 'column', boxShadow: '0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.20)' }),
-                        onclick: (e) => e.stopPropagation(), // Prevent backdrop click when clicking inside modal
+                        // onclick: (e: Event) => e.stopPropagation(), // Prevent backdrop click when clicking inside modal
                     }, [
                         // Close button
                         showCloseButton &&
@@ -5767,6 +6002,7 @@
             dropdownRef: null,
             internalSelectedIds: [],
             isInsideModal: false,
+            isMultiple: false,
         };
         const isControlled = (attrs) => attrs.checkedId !== undefined && attrs.onchange !== undefined;
         const isSelected = (id, selectedIds) => {
@@ -5849,10 +6085,18 @@
             }
         };
         const closeDropdown = (e) => {
+            console.log('select closeDropdown called');
+            if (!state.isMultiple) {
+                state.isOpen = false;
+                return;
+            }
             const target = e.target;
-            if (!target.closest('.input-field.select-space')) {
+            // When inside modal, check both the select component AND the portaled dropdown
+            const isClickInsideSelect = target.closest('.input-field.select-space');
+            const isClickInsidePortalDropdown = state.isInsideModal && state.dropdownRef && (state.dropdownRef.contains(target) || target === state.dropdownRef);
+            if (!isClickInsideSelect && !isClickInsidePortalDropdown) {
+                console.log('select closeDropdown called: set state');
                 state.isOpen = false;
-                m.redraw();
             }
         };
         const getPortalStyles = (inputRef) => {
@@ -5860,13 +6104,21 @@
                 return {};
             const rect = inputRef.getBoundingClientRect();
             const viewportHeight = window.innerHeight;
+            const spaceBelow = viewportHeight - rect.bottom;
+            const spaceAbove = rect.top;
+            // Choose whether to show above or below based on available space
+            const showAbove = spaceBelow < 200 && spaceAbove > spaceBelow;
             return {
                 position: 'fixed',
-                top: `${rect.bottom}px`,
+                top: showAbove ? 'auto' : `${rect.bottom}px`,
+                bottom: showAbove ? `${viewportHeight - rect.top}px` : 'auto',
                 left: `${rect.left}px`,
                 width: `${rect.width}px`,
                 zIndex: 10000, // Higher than modal z-index
-                maxHeight: `${viewportHeight - rect.bottom - 20}px`, // Leave 20px margin from bottom
+                maxHeight: showAbove ? `${spaceAbove - 20}px` : `${spaceBelow - 20}px`, // Leave 20px margin
+                overflow: 'auto',
+                display: 'block',
+                opacity: 1,
             };
         };
         const renderDropdownContent = (attrs, selectedIds, multiple, placeholder) => [
@@ -5874,15 +6126,10 @@
             // Render ungrouped options first
             attrs.options
                 .filter((option) => !option.group)
-                .map((option) => m('li', Object.assign({ key: option.id, class: option.disabled
-                    ? 'disabled'
-                    : state.focusedIndex === attrs.options.indexOf(option)
-                        ? 'focused'
-                        : '' }, (option.disabled
+                .map((option) => m('li', Object.assign({ class: option.disabled ? 'disabled' : state.focusedIndex === attrs.options.indexOf(option) ? 'focused' : '' }, (option.disabled
                 ? {}
                 : {
-                    onclick: (e) => {
-                        e.stopPropagation();
+                    onclick: () => {
                         toggleOption(option.id, multiple, attrs);
                     },
                 })), [
@@ -5912,8 +6159,8 @@
                 return groups;
             }, {}))
                 .map(([groupName, groupOptions]) => [
-                m('li.optgroup', { key: `group-${groupName}`, tabindex: 0 }, m('span', groupName)),
-                ...groupOptions.map((option) => m('li', Object.assign({ key: option.id, class: `optgroup-option${option.disabled ? ' disabled' : ''}${isSelected(option.id, selectedIds) ? ' selected' : ''}${state.focusedIndex === attrs.options.indexOf(option) ? ' focused' : ''}` }, (option.disabled
+                m('li.optgroup', { tabindex: 0 }, m('span', groupName)),
+                ...groupOptions.map((option) => m('li', Object.assign({ class: `optgroup-option${option.disabled ? ' disabled' : ''}${isSelected(option.id, selectedIds) ? ' selected' : ''}${state.focusedIndex === attrs.options.indexOf(option) ? ' focused' : ''}` }, (option.disabled
                     ? {}
                     : {
                         onclick: (e) => {
@@ -5940,23 +6187,20 @@
                 .reduce((acc, val) => acc.concat(val), []),
         ];
         const updatePortalDropdown = (attrs, selectedIds, multiple, placeholder) => {
-            var _a;
             if (!state.isInsideModal)
                 return;
-            let portalElement = document.getElementById(state.dropdownId);
-            if (!state.isOpen) {
-                // Clean up portal when dropdown is closed
-                if (portalElement) {
-                    m.render(portalElement, []);
-                    (_a = portalElement.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(portalElement);
-                }
-                return;
-            }
-            if (!portalElement) {
-                portalElement = document.createElement('div');
-                portalElement.id = state.dropdownId;
-                document.body.appendChild(portalElement);
+            // Clean up existing portal
+            const existingPortal = document.getElementById(state.dropdownId);
+            if (existingPortal) {
+                existingPortal.remove();
             }
+            if (!state.isOpen || !state.inputRef)
+                return;
+            // Create portal element
+            const portalElement = document.createElement('div');
+            portalElement.id = state.dropdownId;
+            document.body.appendChild(portalElement);
+            // Create dropdown with proper positioning
             const dropdownVnode = m('ul.dropdown-content.select-dropdown', {
                 tabindex: 0,
                 style: getPortalStyles(state.inputRef),
@@ -5967,6 +6211,7 @@
                     state.dropdownRef = null;
                 },
             }, renderDropdownContent(attrs, selectedIds, multiple, placeholder));
+            // Render to portal
             m.render(portalElement, dropdownVnode);
         };
         return {
@@ -6009,7 +6254,8 @@
             view: ({ attrs }) => {
                 var _a;
                 const controlled = isControlled(attrs);
-                const { disabled } = attrs;
+                const { newRow, className = 'col s12', key, options, multiple = false, label, helperText, placeholder = '', isMandatory, iconName, style, disabled, } = attrs;
+                state.isMultiple = multiple;
                 // Get selected IDs from props or internal state
                 let selectedIds;
                 if (controlled) {
@@ -6025,7 +6271,6 @@
                     // Interactive uncontrolled: use internal state
                     selectedIds = state.internalSelectedIds;
                 }
-                const { newRow, className = 'col s12', key, options, multiple = false, label, helperText, placeholder = '', isMandatory, iconName, style, } = attrs;
                 const finalClassName = newRow ? `${className} clear` : className;
                 const selectedOptions = options.filter((opt) => isSelected(opt.id, selectedIds));
                 // Update portal dropdown when inside modal
@@ -6062,7 +6307,8 @@
                             },
                         }),
                         // Dropdown Menu - render inline only when NOT inside modal
-                        state.isOpen && !state.isInsideModal &&
+                        state.isOpen &&
+                            !state.isInsideModal &&
                             m('ul.dropdown-content.select-dropdown', {
                                 tabindex: 0,
                                 oncreate: ({ dom }) => {
@@ -6220,7 +6466,6 @@
             }
             state.isDragging = false;
             state.translateX = 0;
-            // m.redraw();
         };
         /** Initialize active tab - selectedTabId takes precedence, next active property or first available tab */
         const setActiveTabId = (anchoredTabs, selectedTabId) => {
@@ -6247,7 +6492,6 @@
             },
             oncreate: () => {
                 updateIndicator();
-                m.redraw();
             },
             view: ({ attrs }) => {
                 const { tabWidth, tabs, className, style, swipeable = false } = attrs;
@@ -6381,7 +6625,6 @@
             else {
                 // Click outside, close dropdown
                 state.isOpen = false;
-                m.redraw();
             }
         };
         // Handle keyboard navigation
@@ -6616,9 +6859,7 @@
                             ]),
                             // No options found message or list of options
                             ...(filteredOptions.length === 0 && !showAddNew
-                                ? [
-                                    m('li.search-select-no-options', texts.noOptionsFound),
-                                ]
+                                ? [m('li.search-select-no-options', texts.noOptionsFound)]
                                 : []),
                             // Add new option item
                             ...(showAddNew
@@ -9017,6 +9258,7 @@
     exports.FloatingActionButton = FloatingActionButton;
     exports.HelperText = HelperText;
     exports.Icon = Icon;
+    exports.IconButton = IconButton;
     exports.ImageList = ImageList;
     exports.InputCheckbox = InputCheckbox;
     exports.Label = Label;