mithril-materialized 3.3.7 → 3.4.0

package/dist/button.d.ts

@@ -83,5 +83,6 @@ export declare const Button: m.FactoryComponent<ButtonAttrs>;
 export declare const LargeButton: m.FactoryComponent<ButtonAttrs>;
 export declare const SmallButton: m.FactoryComponent<ButtonAttrs>;
 export declare const FlatButton: m.FactoryComponent<ButtonAttrs>;
+export declare const IconButton: m.FactoryComponent<ButtonAttrs>;
 export declare const RoundIconButton: m.FactoryComponent<ButtonAttrs>;
 export declare const SubmitButton: m.FactoryComponent<ButtonAttrs>;

package/dist/components.css

@@ -977,6 +977,20 @@ button.btn-floating {
   display: block;
 }
 
+.btn-flat.btn-icon {
+  min-width: auto;
+  padding: 0 8px;
+  width: auto;
+  line-height: 36px;
+  background-color: transparent !important;
+}
+.btn-flat.btn-icon i {
+  margin: 0;
+}
+.btn-flat.btn-icon:hover, .btn-flat.btn-icon:focus, .btn-flat.btn-icon:active, .btn-flat.btn-icon.active {
+  background-color: transparent !important;
+}
+
 .modal:focus {
   outline: none;
 }
@@ -4245,6 +4259,11 @@ body {
 .theme-switcher .theme-switcher-buttons .btn-flat .material-icons {
   font-size: 1rem;
 }
+.theme-switcher .theme-switcher-buttons .btn-flat svg {
+  width: 1rem !important;
+  height: 1rem !important;
+  flex-shrink: 0;
+}
 .theme-switcher .theme-switcher-buttons .btn-flat span {
   font-size: 0.75rem;
   font-weight: 500;
@@ -4271,6 +4290,9 @@ body {
 .theme-toggle .material-icons {
   font-size: 1.25rem;
 }
+.theme-toggle svg {
+  flex-shrink: 0;
+}
 
 nav .theme-toggle {
   background: transparent;

package/dist/forms.css

@@ -2722,6 +2722,11 @@ input[type=range]::-ms-thumb {
 .theme-switcher .theme-switcher-buttons .btn-flat .material-icons {
   font-size: 1rem;
 }
+.theme-switcher .theme-switcher-buttons .btn-flat svg {
+  width: 1rem !important;
+  height: 1rem !important;
+  flex-shrink: 0;
+}
 .theme-switcher .theme-switcher-buttons .btn-flat span {
   font-size: 0.75rem;
   font-weight: 500;
@@ -2748,6 +2753,9 @@ input[type=range]::-ms-thumb {
 .theme-toggle .material-icons {
   font-size: 1.25rem;
 }
+.theme-toggle svg {
+  flex-shrink: 0;
+}
 
 nav .theme-toggle {
   background: transparent;

package/dist/index.css

@@ -5234,6 +5234,20 @@ button.btn-floating {
   display: block;
 }
 
+.btn-flat.btn-icon {
+  min-width: auto;
+  padding: 0 8px;
+  width: auto;
+  line-height: 36px;
+  background-color: transparent !important;
+}
+.btn-flat.btn-icon i {
+  margin: 0;
+}
+.btn-flat.btn-icon:hover, .btn-flat.btn-icon:focus, .btn-flat.btn-icon:active, .btn-flat.btn-icon.active {
+  background-color: transparent !important;
+}
+
 .dropdown-content:focus {
   outline: 0;
 }
@@ -9060,6 +9074,11 @@ input[type=range]::-ms-thumb {
 .theme-switcher .theme-switcher-buttons .btn-flat .material-icons {
   font-size: 1rem;
 }
+.theme-switcher .theme-switcher-buttons .btn-flat svg {
+  width: 1rem !important;
+  height: 1rem !important;
+  flex-shrink: 0;
+}
 .theme-switcher .theme-switcher-buttons .btn-flat span {
   font-size: 0.75rem;
   font-weight: 500;
@@ -9086,6 +9105,9 @@ input[type=range]::-ms-thumb {
 .theme-toggle .material-icons {
   font-size: 1.25rem;
 }
+.theme-toggle svg {
+  flex-shrink: 0;
+}
 
 nav .theme-toggle {
   background: transparent;

package/dist/index.esm.js

@@ -432,6 +432,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.
  *
@@ -445,13 +542,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);
             },
         };
     };
@@ -460,6 +562,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');
 
@@ -896,7 +999,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',
             })));
@@ -2811,6 +2914,7 @@ const TextArea = () => {
         height: undefined,
         active: false,
         textarea: undefined,
+        hiddenDiv: undefined,
         internalValue: '',
     };
     const updateHeight = (textarea, hiddenDiv) => {
@@ -2907,13 +3011,13 @@ const TextArea = () => {
                         overflowWrap: 'break-word',
                     },
                     oncreate: ({ dom }) => {
-                        const hiddenDiv = dom;
+                        const hiddenDiv = state.hiddenDiv = dom;
                         if (state.textarea) {
                             updateHeight(state.textarea, hiddenDiv);
                         }
                     },
                     onupdate: ({ dom }) => {
-                        const hiddenDiv = dom;
+                        const hiddenDiv = state.hiddenDiv = dom;
                         if (state.textarea) {
                             updateHeight(state.textarea, hiddenDiv);
                         }
@@ -2938,7 +3042,10 @@ const TextArea = () => {
                             const textarea = dom;
                             if (state.height)
                                 textarea.style.height = state.height;
-                            // No need to manually sync in onupdate since value attribute handles it
+                            // Trigger height recalculation when value changes programmatically
+                            if (state.hiddenDiv) {
+                                updateHeight(textarea, state.hiddenDiv);
+                            }
                         }, onfocus: () => {
                             state.active = true;
                         }, oninput: (e) => {
@@ -3098,9 +3205,6 @@ const InputField = (type, defaultClass = '') => () => {
             const { className = 'col s12', dataError, dataSuccess, helperText, iconName, id = state.id, placeholder, isMandatory, label, maxLength, newRow, oninput, onchange, onkeydown, onkeypress, onkeyup, style, validate, canClear } = attrs, params = __rest(attrs, ["className", "dataError", "dataSuccess", "helperText", "iconName", "id", "placeholder", "isMandatory", "label", "maxLength", "newRow", "oninput", "onchange", "onkeydown", "onkeypress", "onkeyup", "style", "validate", "canClear"]);
             // const attributes = toAttrs(params);
             const cn = [newRow ? 'clear' : '', defaultClass, className].filter(Boolean).join(' ').trim() || undefined;
-            const isActive = state.active || ((_a = state.inputElement) === null || _a === void 0 ? void 0 : _a.value) || placeholder || type === 'color' || type === 'range'
-                ? true
-                : false;
             // Special rendering for minmax range sliders
             if (type === 'range' && (attrs.minmax || attrs.valueDisplay)) {
                 return m(attrs.minmax ? DoubleRangeSlider : SingleRangeSlider, Object.assign(Object.assign({}, attrs), { state,
@@ -3121,12 +3225,15 @@ const InputField = (type, defaultClass = '') => () => {
             }
             else if (isNonInteractive) {
                 // Non-interactive components: prefer defaultValue, fallback to value
-                value = ((_c = (_b = attrs.defaultValue) !== null && _b !== void 0 ? _b : attrs.value) !== null && _c !== void 0 ? _c : (isNumeric ? 0 : ''));
+                value = ((_b = (_a = attrs.defaultValue) !== null && _a !== void 0 ? _a : attrs.value) !== null && _b !== void 0 ? _b : (isNumeric ? 0 : ''));
             }
             else {
                 // Interactive uncontrolled: use internal state
-                value = ((_e = (_d = state.internalValue) !== null && _d !== void 0 ? _d : attrs.defaultValue) !== null && _e !== void 0 ? _e : (isNumeric ? 0 : ''));
+                value = ((_d = (_c = state.internalValue) !== null && _c !== void 0 ? _c : attrs.defaultValue) !== null && _d !== void 0 ? _d : (isNumeric ? 0 : ''));
             }
+            const isActive = state.active || ((_e = state.inputElement) === null || _e === void 0 ? void 0 : _e.value) || value || placeholder || type === 'color' || type === 'range'
+                ? true
+                : false;
             const rangeType = type === 'range' && !attrs.minmax;
             return m('.input-field', { className: cn, style }, [
                 iconName ? m('i.material-icons.prefix', iconName) : undefined,
@@ -4340,12 +4447,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)',
@@ -4356,6 +4468,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))))),
             ]));
         },
@@ -5752,11 +5869,13 @@ const RadioButtons = () => {
 const Select = () => {
     const state = {
         id: '',
+        dropdownId: '',
         isOpen: false,
         focusedIndex: -1,
         inputRef: null,
         dropdownRef: null,
         internalSelectedIds: [],
+        isInsideModal: false,
     };
     const isControlled = (attrs) => attrs.checkedId !== undefined && attrs.onchange !== undefined;
     const isSelected = (id, selectedIds) => {
@@ -5845,9 +5964,124 @@ const Select = () => {
             m.redraw();
         }
     };
+    const getPortalStyles = (inputRef) => {
+        if (!inputRef)
+            return {};
+        const rect = inputRef.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        return {
+            position: 'fixed',
+            top: `${rect.bottom}px`,
+            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
+        };
+    };
+    const renderDropdownContent = (attrs, selectedIds, multiple, placeholder) => [
+        placeholder && m('li.disabled', { tabindex: 0 }, m('span', placeholder)),
+        // 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
+            ? {}
+            : {
+                onclick: (e) => {
+                    e.stopPropagation();
+                    toggleOption(option.id, multiple, attrs);
+                },
+            })), [
+            option.img && m('img', { src: option.img, alt: option.label }),
+            m('span', [
+                multiple
+                    ? m('label', { for: option.id }, m('input', {
+                        id: option.id,
+                        type: 'checkbox',
+                        checked: selectedIds.includes(option.id),
+                        disabled: option.disabled ? true : undefined,
+                        onclick: (e) => {
+                            e.stopPropagation();
+                        },
+                    }), m('span', option.label))
+                    : m('span', option.label),
+            ].filter(Boolean)),
+        ])),
+        // Render grouped options
+        Object.entries(attrs.options
+            .filter((option) => option.group)
+            .reduce((groups, option) => {
+            const group = option.group;
+            if (!groups[group])
+                groups[group] = [];
+            groups[group].push(option);
+            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
+                ? {}
+                : {
+                    onclick: (e) => {
+                        e.stopPropagation();
+                        toggleOption(option.id, multiple, attrs);
+                    },
+                })), [
+                option.img && m('img', { src: option.img, alt: option.label }),
+                m('span', [
+                    multiple
+                        ? m('label', { for: option.id }, m('input', {
+                            id: option.id,
+                            type: 'checkbox',
+                            checked: selectedIds.includes(option.id),
+                            disabled: option.disabled ? true : undefined,
+                            onclick: (e) => {
+                                e.stopPropagation();
+                            },
+                        }), m('span', option.label))
+                        : m('span', option.label),
+                ].filter(Boolean)),
+            ])),
+        ])
+            .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);
+        }
+        const dropdownVnode = m('ul.dropdown-content.select-dropdown', {
+            tabindex: 0,
+            style: getPortalStyles(state.inputRef),
+            oncreate: ({ dom }) => {
+                state.dropdownRef = dom;
+            },
+            onremove: () => {
+                state.dropdownRef = null;
+            },
+        }, renderDropdownContent(attrs, selectedIds, multiple, placeholder));
+        m.render(portalElement, dropdownVnode);
+    };
     return {
         oninit: ({ attrs }) => {
             state.id = attrs.id || uniqueId();
+            state.dropdownId = `${state.id}-dropdown`;
             const controlled = isControlled(attrs);
             // Warn developer for improper controlled usage
             if (attrs.checkedId !== undefined && !controlled && !attrs.disabled) {
@@ -5866,9 +6100,20 @@ const Select = () => {
             // 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 portaled dropdown if it exists
+            if (state.isInsideModal && state.dropdownRef) {
+                const portalElement = document.getElementById(state.dropdownId);
+                if (portalElement && portalElement.parentNode) {
+                    portalElement.parentNode.removeChild(portalElement);
+                }
+            }
         },
         view: ({ attrs }) => {
             var _a;
@@ -5892,6 +6137,10 @@ const Select = () => {
             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
+            if (state.isInsideModal) {
+                updatePortalDropdown(attrs, selectedIds, multiple, placeholder);
+            }
             return m('.input-field.select-space', {
                 className: finalClassName,
                 key,
@@ -5904,6 +6153,7 @@ const Select = () => {
                     tabindex: disabled ? -1 : 0,
                     'aria-expanded': state.isOpen ? 'true' : 'false',
                     'aria-haspopup': 'listbox',
+                    'aria-controls': state.dropdownId,
                     role: 'combobox',
                 }, [
                     m('input[type=text][readonly=true].select-dropdown.dropdown-trigger', {
@@ -5920,8 +6170,8 @@ const Select = () => {
                             }
                         },
                     }),
-                    // Dropdown Menu
-                    state.isOpen &&
+                    // Dropdown Menu - render inline only when NOT inside modal
+                    state.isOpen && !state.isInsideModal &&
                         m('ul.dropdown-content.select-dropdown', {
                             tabindex: 0,
                             oncreate: ({ dom }) => {
@@ -5931,76 +6181,7 @@ const Select = () => {
                                 state.dropdownRef = null;
                             },
                             style: getDropdownStyles(state.inputRef, true, options),
-                        }, [
-                            placeholder && m('li.disabled', { tabindex: 0 }, m('span', placeholder)),
-                            // Render ungrouped options first
-                            options
-                                .filter((option) => !option.group)
-                                .map((option) => m('li', Object.assign({ key: option.id, class: option.disabled
-                                    ? 'disabled'
-                                    : state.focusedIndex === options.indexOf(option)
-                                        ? 'focused'
-                                        : '' }, (option.disabled
-                                ? {}
-                                : {
-                                    onclick: (e) => {
-                                        e.stopPropagation();
-                                        toggleOption(option.id, multiple, attrs);
-                                    },
-                                })), [
-                                option.img && m('img', { src: option.img, alt: option.label }),
-                                m('span', [
-                                    multiple
-                                        ? m('label', { for: option.id }, m('input', {
-                                            id: option.id,
-                                            type: 'checkbox',
-                                            checked: selectedIds.includes(option.id),
-                                            disabled: option.disabled ? true : undefined,
-                                            onclick: (e) => {
-                                                e.stopPropagation();
-                                            },
-                                        }), m('span', option.label))
-                                        : m('span', option.label),
-                                ].filter(Boolean)),
-                            ])),
-                            // Render grouped options
-                            Object.entries(options
-                                .filter((option) => option.group)
-                                .reduce((groups, option) => {
-                                const group = option.group;
-                                if (!groups[group])
-                                    groups[group] = [];
-                                groups[group].push(option);
-                                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 === options.indexOf(option) ? ' focused' : ''}` }, (option.disabled
-                                    ? {}
-                                    : {
-                                        onclick: (e) => {
-                                            e.stopPropagation();
-                                            toggleOption(option.id, multiple, attrs);
-                                        },
-                                    })), [
-                                    option.img && m('img', { src: option.img, alt: option.label }),
-                                    m('span', [
-                                        multiple
-                                            ? m('label', { for: option.id }, m('input', {
-                                                id: option.id,
-                                                type: 'checkbox',
-                                                checked: selectedIds.includes(option.id),
-                                                disabled: option.disabled ? true : undefined,
-                                                onclick: (e) => {
-                                                    e.stopPropagation();
-                                                },
-                                            }), m('span', option.label))
-                                            : m('span', option.label),
-                                    ].filter(Boolean)),
-                                ])),
-                            ])
-                                .reduce((acc, val) => acc.concat(val), []),
-                        ]),
+                        }, renderDropdownContent(attrs, selectedIds, multiple, placeholder)),
                     m(MaterialIcon, {
                         name: 'caret',
                         direction: 'down',
@@ -8920,4 +9101,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, 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, createBreadcrumb, getDropdownStyles, initPushpins, initTooltips, isNumeric, isValidationError, isValidationSuccess, padLeft, range, toast, uniqueId, uuid4 };