mithril-materialized 3.3.8 → 3.4.1

package/dist/index.js

@@ -230,8 +230,6 @@ const Autocomplete = () => {
         if (attrs.onAutocomplete) {
             attrs.onAutocomplete(suggestion.key);
         }
-        // Force redraw to update label state
-        m.redraw();
     };
     const handleKeydown = (e, attrs) => {
         if (!state.isOpen)
@@ -310,7 +308,7 @@ const Autocomplete = () => {
             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);
@@ -325,7 +323,7 @@ const Autocomplete = () => {
                 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) {
@@ -361,14 +359,10 @@ const Autocomplete = () => {
                         }
                     }, 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 &&
@@ -384,7 +378,6 @@ const Autocomplete = () => {
                         },
                         onmouseover: () => {
                             state.selectedIndex = index;
-                            m.redraw();
                         },
                     }, [
                         // Check if value contains image URL or icon
@@ -434,6 +427,103 @@ const Icon = () => ({
     },
 });
 
+/*!
+ * 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.
  *
@@ -447,13 +537,18 @@ const ButtonFactory = (element, defaultClassNames, type = '') => {
                 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);
             },
         };
     };
@@ -462,6 +557,7 @@ const Button = ButtonFactory('a', 'waves-effect waves-light btn', 'button');
 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');
 
@@ -898,7 +994,7 @@ const MaterialIcon = () => {
             };
             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',
             })));
@@ -2382,36 +2478,52 @@ const handleKeyboardNavigation = (key, currentValue, min, max, step) => {
             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) {
@@ -2428,15 +2540,18 @@ const updateRangeValues = (minValue, maxValue, attrs, state, immediate) => {
         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
@@ -2470,19 +2585,24 @@ const SingleRangeSlider = {
                 : 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();
@@ -2557,6 +2677,11 @@ const SingleRangeSlider = {
                             updateSingleValue(newValue, false);
                         }
                     },
+                    onblur: () => {
+                        if (disabled || !onchange)
+                            return;
+                        onchange(state.singleValue);
+                    },
                 }, [
                     m(`.track.${orientation}`),
                     m(`.range-progress.${orientation}`, { style: progressStyle }),
@@ -2615,6 +2740,7 @@ const DoubleRangeSlider = {
             if (disabled)
                 return;
             e.preventDefault();
+            e.stopPropagation();
             state.isDragging = true;
             state.activeThumb = thumb;
             if (finalValueDisplay === 'auto') {
@@ -2705,6 +2831,11 @@ const DoubleRangeSlider = {
                                 maxThumb.focus();
                         }
                     },
+                    onblur: () => {
+                        if (disabled || !attrs.onchange)
+                            return;
+                        attrs.onchange(state.rangeMinValue, state.rangeMaxValue);
+                    },
                 }, [
                     m(`.track.${orientation}`),
                     m(`.range.${orientation}`, { style: rangeStyle }),
@@ -2910,13 +3041,13 @@ const TextArea = () => {
                         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);
                         }
@@ -3029,8 +3160,7 @@ const InputField = (type, defaultClass = '') => () => {
         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);
@@ -3080,7 +3210,7 @@ const InputField = (type, defaultClass = '') => () => {
             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
@@ -4107,14 +4237,12 @@ const Dropdown = () => {
         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);
@@ -4159,6 +4287,83 @@ const Dropdown = () => {
                 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;
@@ -4170,9 +4375,18 @@ const Dropdown = () => {
             // 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;
@@ -4195,6 +4409,16 @@ const Dropdown = () => {
                 : 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 }),
@@ -4228,8 +4452,9 @@ const Dropdown = () => {
                             }
                         },
                     }),
-                    // 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',
@@ -4346,12 +4571,17 @@ const FloatingActionButton = () => {
                     }
                     : 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)',
@@ -4362,6 +4592,11 @@ const FloatingActionButton = () => {
                             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))))),
             ]));
         },
@@ -4669,7 +4904,7 @@ const ModalPanel = () => {
                             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 &&
@@ -5765,6 +6000,7 @@ const Select = () => {
         dropdownRef: null,
         internalSelectedIds: [],
         isInsideModal: false,
+        isMultiple: false,
     };
     const isControlled = (attrs) => attrs.checkedId !== undefined && attrs.onchange !== undefined;
     const isSelected = (id, selectedIds) => {
@@ -5847,10 +6083,18 @@ const Select = () => {
         }
     };
     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) => {
@@ -5858,13 +6102,21 @@ const Select = () => {
             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) => [
@@ -5872,15 +6124,10 @@ const Select = () => {
         // 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);
                 },
             })), [
@@ -5910,8 +6157,8 @@ const Select = () => {
             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) => {
@@ -5938,23 +6185,20 @@ const Select = () => {
             .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),
@@ -5965,6 +6209,7 @@ const Select = () => {
                 state.dropdownRef = null;
             },
         }, renderDropdownContent(attrs, selectedIds, multiple, placeholder));
+        // Render to portal
         m.render(portalElement, dropdownVnode);
     };
     return {
@@ -6007,7 +6252,8 @@ const Select = () => {
         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) {
@@ -6023,7 +6269,6 @@ const Select = () => {
                 // 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
@@ -6060,7 +6305,8 @@ const Select = () => {
                         },
                     }),
                     // 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 }) => {
@@ -6218,7 +6464,6 @@ const Tabs = () => {
         }
         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) => {
@@ -6245,7 +6490,6 @@ const Tabs = () => {
         },
         oncreate: () => {
             updateIndicator();
-            m.redraw();
         },
         view: ({ attrs }) => {
             const { tabWidth, tabs, className, style, swipeable = false } = attrs;
@@ -6379,7 +6623,6 @@ const SearchSelect = () => {
         else {
             // Click outside, close dropdown
             state.isOpen = false;
-            m.redraw();
         }
     };
     // Handle keyboard navigation
@@ -6614,9 +6857,7 @@ const SearchSelect = () => {
                         ]),
                         // 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
@@ -9015,6 +9256,7 @@ exports.FlatButton = FlatButton;
 exports.FloatingActionButton = FloatingActionButton;
 exports.HelperText = HelperText;
 exports.Icon = Icon;
+exports.IconButton = IconButton;
 exports.ImageList = ImageList;
 exports.InputCheckbox = InputCheckbox;
 exports.Label = Label;