mithril-materialized 3.1.0 → 3.2.0

package/dist/index.umd.js

@@ -198,12 +198,13 @@
         const state = {
             id: uniqueId(),
             isActive: false,
-            inputValue: '',
+            internalValue: '',
             isOpen: false,
             suggestions: [],
             selectedIndex: -1,
             inputElement: null,
         };
+        const isControlled = (attrs) => 'value' in attrs && typeof attrs.value !== 'undefined' && typeof attrs.oninput === 'function';
         const filterSuggestions = (input, data, limit, minLength) => {
             if (!input || input.length < minLength) {
                 return [];
@@ -215,9 +216,16 @@
             return filtered;
         };
         const selectSuggestion = (suggestion, attrs) => {
-            state.inputValue = suggestion.key;
+            const controlled = isControlled(attrs);
+            // Update internal state for uncontrolled mode
+            if (!controlled) {
+                state.internalValue = suggestion.key;
+            }
             state.isOpen = false;
             state.selectedIndex = -1;
+            if (attrs.oninput) {
+                attrs.oninput(suggestion.key);
+            }
             if (attrs.onchange) {
                 attrs.onchange(suggestion.key);
             }
@@ -291,7 +299,10 @@
         };
         return {
             oninit: ({ attrs }) => {
-                state.inputValue = attrs.initialValue || '';
+                // Initialize internal value for uncontrolled mode
+                if (!isControlled(attrs)) {
+                    state.internalValue = attrs.defaultValue || '';
+                }
                 document.addEventListener('click', closeDropdown);
             },
             onremove: () => {
@@ -300,40 +311,54 @@
             view: ({ attrs }) => {
                 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 cn = newRow ? className + ' clear' : className;
                 // Update suggestions when input changes
-                state.suggestions = filterSuggestions(state.inputValue, data, limit, minLength);
+                state.suggestions = filterSuggestions(currentValue, data, limit, minLength);
                 // Check if there's a perfect match (exact key match, case-insensitive)
-                const hasExactMatch = state.inputValue.length >= minLength &&
-                    Object.keys(data).some((key) => key.toLowerCase() === state.inputValue.toLowerCase());
+                const hasExactMatch = currentValue.length >= minLength &&
+                    Object.keys(data).some((key) => key.toLowerCase() === currentValue.toLowerCase());
                 // Only open dropdown if there are suggestions and no perfect match
-                state.isOpen = state.suggestions.length > 0 && state.inputValue.length >= minLength && !hasExactMatch;
-                const replacer = new RegExp(`(${state.inputValue})`, 'i');
+                state.isOpen = state.suggestions.length > 0 && currentValue.length >= minLength && !hasExactMatch;
+                const replacer = new RegExp(`(${currentValue})`, 'i');
                 return m('.input-field.autocomplete-wrapper', {
                     className: cn,
                     style,
                 }, [
                     iconName ? m('i.material-icons.prefix', iconName) : '',
-                    m('input', Object.assign(Object.assign({}, params), { className: 'autocomplete', type: 'text', tabindex: 0, id, value: state.inputValue, oncreate: (vnode) => {
+                    m('input', Object.assign(Object.assign({}, params), { className: 'autocomplete', type: 'text', tabindex: 0, id, value: controlled ? currentValue : undefined, oncreate: (vnode) => {
                             state.inputElement = vnode.dom;
+                            // Set initial value for uncontrolled mode
+                            if (!controlled && attrs.defaultValue) {
+                                vnode.dom.value = attrs.defaultValue;
+                            }
                         }, oninput: (e) => {
                             const target = e.target;
-                            state.inputValue = target.value;
+                            const inputValue = target.value;
                             state.selectedIndex = -1;
+                            // Update internal state for uncontrolled mode
+                            if (!controlled) {
+                                state.internalValue = inputValue;
+                            }
+                            // Call oninput and onchange if provided
+                            if (attrs.oninput) {
+                                attrs.oninput(inputValue);
+                            }
                             if (onchange) {
-                                onchange(target.value);
+                                onchange(inputValue);
                             }
                         }, onkeydown: (e) => {
                             handleKeydown(e, attrs);
                             // Call original onkeydown if provided
                             if (attrs.onkeydown) {
-                                attrs.onkeydown(e, state.inputValue);
+                                attrs.onkeydown(e, currentValue);
                             }
                         }, onfocus: () => {
                             state.isActive = true;
-                            if (state.inputValue.length >= minLength) {
+                            if (currentValue.length >= minLength) {
                                 // Check for perfect match on focus too
-                                const hasExactMatch = Object.keys(data).some((key) => key.toLowerCase() === state.inputValue.toLowerCase());
+                                const hasExactMatch = Object.keys(data).some((key) => key.toLowerCase() === currentValue.toLowerCase());
                                 state.isOpen = state.suggestions.length > 0 && !hasExactMatch;
                             }
                         }, onblur: (e) => {
@@ -390,7 +415,7 @@
                         label,
                         id,
                         isMandatory,
-                        isActive: state.isActive || state.inputValue.length > 0 || !!attrs.placeholder || !!attrs.initialValue,
+                        isActive: state.isActive || currentValue.length > 0 || !!attrs.placeholder || !!attrs.value,
                     }),
                     m(HelperText, { helperText }),
                 ]);
@@ -2079,11 +2104,11 @@
                 else {
                     // Single date initialization (original behavior)
                     let defaultDate = attrs.defaultDate;
-                    if (!defaultDate && attrs.initialValue) {
-                        defaultDate = new Date(attrs.initialValue);
+                    if (!defaultDate && attrs.defaultValue) {
+                        defaultDate = new Date(attrs.defaultValue);
                     }
                     if (isDate(defaultDate)) {
-                        // Always set the date if we have initialValue or defaultDate
+                        // Always set the date if we have value or defaultDate
                         setDate(defaultDate, true, options);
                     }
                     else {
@@ -2352,16 +2377,16 @@
         }
     };
     const initRangeState = (state, attrs) => {
-        const { min = 0, max = 100, initialValue, minValue, maxValue } = attrs;
+        const { min = 0, max = 100, value, minValue, maxValue } = attrs;
         // Initialize single range value
-        if (initialValue !== undefined) {
-            const currentValue = initialValue;
+        if (value !== undefined) {
+            const currentValue = value;
             if (state.singleValue === undefined) {
                 state.singleValue = currentValue;
             }
-            if (state.lastInitialValue !== initialValue && !state.hasUserInteracted) {
-                state.singleValue = initialValue;
-                state.lastInitialValue = initialValue;
+            if (state.lastValue !== value && !state.hasUserInteracted) {
+                state.singleValue = value;
+                state.lastValue = value;
             }
         }
         else if (state.singleValue === undefined) {
@@ -2786,41 +2811,48 @@
             height: undefined,
             active: false,
             textarea: undefined,
+            internalValue: '',
         };
         const updateHeight = (textarea) => {
             textarea.style.height = 'auto';
             const newHeight = textarea.scrollHeight + 'px';
             state.height = textarea.value.length === 0 ? undefined : newHeight;
         };
+        const isControlled = (attrs) => attrs.value !== undefined && attrs.oninput !== undefined;
         return {
+            oninit: ({ attrs }) => {
+                // Initialize internal value for uncontrolled mode
+                if (!isControlled(attrs)) {
+                    state.internalValue = attrs.defaultValue || '';
+                }
+            },
             onremove: () => {
             },
             view: ({ attrs }) => {
-                var _a;
-                const { className = 'col s12', helperText, iconName, id = state.id, initialValue, placeholder, isMandatory, label, maxLength, oninput, onchange, onkeydown, onkeypress, onkeyup, onblur, style } = attrs, params = __rest(attrs, ["className", "helperText", "iconName", "id", "initialValue", "placeholder", "isMandatory", "label", "maxLength", "oninput", "onchange", "onkeydown", "onkeypress", "onkeyup", "onblur", "style"]);
-                // const attributes = toAttrs(params);
+                const { className = 'col s12', helperText, iconName, id = state.id, value, placeholder, isMandatory, label, maxLength, oninput, onchange, onkeydown, onkeypress, onkeyup, onblur, style } = attrs, params = __rest(attrs, ["className", "helperText", "iconName", "id", "value", "placeholder", "isMandatory", "label", "maxLength", "oninput", "onchange", "onkeydown", "onkeypress", "onkeyup", "onblur", "style"]);
+                const controlled = isControlled(attrs);
+                const currentValue = controlled ? value || '' : state.internalValue;
                 return m('.input-field', { className, style }, [
                     iconName ? m('i.material-icons.prefix', iconName) : '',
-                    m('textarea.materialize-textarea', Object.assign(Object.assign({}, params), { id, tabindex: 0, style: {
+                    m('textarea.materialize-textarea', Object.assign(Object.assign({}, params), { id, tabindex: 0, value: controlled ? currentValue : undefined, style: {
                             height: state.height,
                         }, oncreate: ({ dom }) => {
                             const textarea = (state.textarea = dom);
-                            // Set initial value and height if provided
-                            if (initialValue) {
-                                textarea.value = String(initialValue);
-                                updateHeight(textarea);
-                                // } else {
-                                // updateHeight(textarea);
+                            // For uncontrolled mode, set initial value only
+                            if (!controlled && attrs.defaultValue !== undefined) {
+                                textarea.value = String(attrs.defaultValue);
                             }
+                            updateHeight(textarea);
                             // Update character count state for counter component
                             if (maxLength) {
-                                state.currentLength = textarea.value.length; // Initial count
+                                state.currentLength = textarea.value.length;
                                 m.redraw();
                             }
                         }, onupdate: ({ dom }) => {
                             const textarea = dom;
                             if (state.height)
                                 textarea.style.height = state.height;
+                            // No need to manually sync in onupdate since value attribute handles it
                         }, onfocus: () => {
                             state.active = true;
                         }, oninput: (e) => {
@@ -2834,7 +2866,11 @@
                                 state.currentLength = target.value.length;
                                 state.hasInteracted = target.value.length > 0;
                             }
-                            // Call onchange handler
+                            // Update internal state for uncontrolled mode
+                            if (!controlled) {
+                                state.internalValue = target.value;
+                            }
+                            // Call oninput handler
                             if (oninput) {
                                 oninput(target.value);
                             }
@@ -2866,8 +2902,8 @@
                         label,
                         id,
                         isMandatory,
-                        isActive: ((_a = state.textarea) === null || _a === void 0 ? void 0 : _a.value) || placeholder || state.active,
-                        initialValue: initialValue !== undefined,
+                        isActive: currentValue || placeholder || state.active,
+                        initialValue: currentValue !== '',
                     }),
                     m(HelperText, {
                         helperText,
@@ -2889,7 +2925,7 @@
     const InputField = (type, defaultClass = '') => () => {
         const state = {
             id: uniqueId(),
-            currentLength: 0,
+            internalValue: undefined,
             hasInteracted: false,
             isValid: true,
             active: false,
@@ -2901,9 +2937,7 @@
             isDragging: false,
             activeThumb: null,
         };
-        // let labelManager: { updateLabelState: () => void; cleanup: () => void } | null = null;
-        // let lengthUpdateHandler: (() => void) | null = null;
-        // let inputElement: HTMLInputElement | null = null;
+        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);
@@ -2917,21 +2951,20 @@
             }
         };
         const focus = ({ autofocus }) => autofocus ? (typeof autofocus === 'boolean' ? autofocus : autofocus()) : false;
-        const lengthUpdateHandler = () => {
-            var _a;
-            const length = (_a = state.inputElement) === null || _a === void 0 ? void 0 : _a.value.length;
-            if (length) {
-                state.currentLength = length;
-                state.hasInteracted = length > 0;
-            }
-        };
+        // const lengthUpdateHandler = () => {
+        //   const length = state.inputElement?.value.length;
+        //   if (length) {
+        //     state.currentLength = length;
+        //     state.hasInteracted = length > 0;
+        //   }
+        // };
         const clearInput = (oninput, onchange) => {
             if (state.inputElement) {
                 state.inputElement.value = '';
                 state.inputElement.focus();
                 state.active = false;
-                state.currentLength = 0;
-                state.hasInteracted = false;
+                // state.currentLength = 0;
+                // state.hasInteracted = false;
                 // Trigger oninput and onchange callbacks
                 const value = getValue(state.inputElement);
                 if (oninput) {
@@ -2949,9 +2982,26 @@
         // Range slider helper functions
         // Range slider rendering functions are now in separate module
         return {
+            oninit: ({ attrs }) => {
+                // Initialize internal value if not in controlled mode
+                if (!isControlled(attrs)) {
+                    const isNumeric = ['number', 'range'].includes(type);
+                    if (attrs.defaultValue !== undefined) {
+                        if (isNumeric) {
+                            state.internalValue = attrs.defaultValue;
+                        }
+                        else {
+                            state.internalValue = String(attrs.defaultValue);
+                        }
+                    }
+                    else {
+                        state.internalValue = (type === 'color' ? '#ff0000' : isNumeric ? undefined : '');
+                    }
+                }
+            },
             view: ({ attrs }) => {
                 var _a, _b;
-                const { className = 'col s12', dataError, dataSuccess, helperText, iconName, id = state.id, initialValue, placeholder, isMandatory, label, maxLength, newRow, oninput, onchange, onkeydown, onkeypress, onkeyup, style, validate, canClear } = attrs, params = __rest(attrs, ["className", "dataError", "dataSuccess", "helperText", "iconName", "id", "initialValue", "placeholder", "isMandatory", "label", "maxLength", "newRow", "oninput", "onchange", "onkeydown", "onkeypress", "onkeyup", "style", "validate", "canClear"]);
+                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'
@@ -2968,10 +3018,14 @@
                         isMandatory,
                         helperText }));
                 }
+                const isNumeric = ['number', 'range'].includes(type);
+                const controlled = isControlled(attrs);
+                const value = (controlled ? attrs.value : state.internalValue);
+                const rangeType = type === 'range' && !attrs.minmax;
                 return m('.input-field', { className: cn, style }, [
                     iconName ? m('i.material-icons.prefix', iconName) : undefined,
                     m('input.validate', Object.assign(Object.assign({}, params), { type, tabindex: 0, id,
-                        placeholder, class: type === 'range' && attrs.vertical ? 'range-slider vertical' : undefined, style: type === 'range' && attrs.vertical
+                        placeholder, value: controlled ? value : undefined, class: type === 'range' && attrs.vertical ? 'range-slider vertical' : undefined, style: type === 'range' && attrs.vertical
                             ? {
                                 height: attrs.height || '200px',
                                 width: '6px',
@@ -2985,25 +3039,9 @@
                             if (focus(attrs)) {
                                 input.focus();
                             }
-                            // Set initial value if provided
-                            if (initialValue) {
-                                input.value = String(initialValue);
-                            }
-                            // Update character count state for counter component
-                            if (maxLength) {
-                                state.currentLength = input.value.length; // Initial count
-                            }
-                            // Range input functionality
-                            if (type === 'range' && !attrs.minmax) {
-                                const updateThumb = () => {
-                                    const value = input.value;
-                                    const min = input.min || '0';
-                                    const max = input.max || '100';
-                                    const percentage = ((parseFloat(value) - parseFloat(min)) / (parseFloat(max) - parseFloat(min))) * 100;
-                                    input.style.setProperty('--range-progress', `${percentage}%`);
-                                };
-                                input.addEventListener('input', updateThumb);
-                                updateThumb(); // Initial position
+                            // For uncontrolled mode, set initial value only
+                            if (!controlled && attrs.defaultValue !== undefined) {
+                                input.value = String(attrs.defaultValue);
                             }
                         }, onkeyup: onkeyup
                             ? (ev) => {
@@ -3017,21 +3055,25 @@
                             ? (ev) => {
                                 onkeypress(ev, getValue(ev.target));
                             }
-                            : undefined, onupdate: validate
-                            ? ({ dom }) => {
-                                const target = dom;
-                                setValidity(target, validate(getValue(target), target));
-                            }
                             : undefined, oninput: (e) => {
                             state.active = true;
+                            state.hasInteracted = false;
                             const target = e.target;
                             // Handle original oninput logic
-                            const value = getValue(target);
+                            const inputValue = getValue(target);
+                            // Update internal state for uncontrolled mode
+                            if (!controlled) {
+                                state.internalValue = inputValue;
+                            }
                             if (oninput) {
-                                oninput(value);
+                                oninput(inputValue);
                             }
-                            if (maxLength) {
-                                lengthUpdateHandler();
+                            if (rangeType) {
+                                const value = target.value;
+                                const min = parseFloat(target.min || '0');
+                                const max = parseFloat(target.max || '100');
+                                const percentage = Math.round((100 * (parseFloat(value) - min)) / (max - min));
+                                target.style.setProperty('--range-progress', `${percentage}%`);
                             }
                             // Don't validate on input, only clear error states if user is typing
                             if (validate && target.classList.contains('invalid') && target.value.length > 0) {
@@ -3047,6 +3089,14 @@
                                     state.isValid = true;
                                 }
                             }
+                            else if ((type === 'email' || type === 'url') && target.classList.contains('invalid') && target.value.length > 0) {
+                                // Clear native validation errors if user is typing and input becomes valid
+                                if (target.validity.valid) {
+                                    target.classList.remove('invalid');
+                                    target.classList.add('valid');
+                                    state.isValid = true;
+                                }
+                            }
                         }, onfocus: () => {
                             state.active = true;
                         }, onblur: (e) => {
@@ -3083,6 +3133,48 @@
                                     state.isValid = true;
                                 }
                             }
+                            else if (type === 'email' || type === 'url') {
+                                // Use browser's native HTML5 validation for email and url types
+                                const value = getValue(target);
+                                if (value && String(value).length > 0) {
+                                    state.isValid = target.validity.valid;
+                                    target.setCustomValidity(''); // Clear any custom validation message
+                                    if (state.isValid) {
+                                        target.classList.remove('invalid');
+                                        target.classList.add('valid');
+                                    }
+                                    else {
+                                        target.classList.remove('valid');
+                                        target.classList.add('invalid');
+                                    }
+                                }
+                                else {
+                                    // Clear validation state if no text
+                                    target.classList.remove('valid', 'invalid');
+                                    state.isValid = true;
+                                }
+                            }
+                            else if (isNumeric) {
+                                // Use browser's native HTML5 validation for numeric inputs (handles min, max, step, etc.)
+                                const value = getValue(target);
+                                if (value !== undefined && value !== null && !isNaN(Number(value))) {
+                                    state.isValid = target.validity.valid;
+                                    target.setCustomValidity(''); // Clear any custom validation message
+                                    if (state.isValid) {
+                                        target.classList.remove('invalid');
+                                        target.classList.add('valid');
+                                    }
+                                    else {
+                                        target.classList.remove('valid');
+                                        target.classList.add('invalid');
+                                    }
+                                }
+                                else {
+                                    // Clear validation state if no valid number
+                                    target.classList.remove('valid', 'invalid');
+                                    state.isValid = true;
+                                }
+                            }
                             // Also call the original onblur handler if provided
                             if (attrs.onblur) {
                                 attrs.onblur(e);
@@ -3108,18 +3200,18 @@
                         id,
                         isMandatory,
                         isActive,
-                        initialValue: initialValue !== undefined,
+                        initialValue: value !== undefined && value !== '',
                     }),
                     m(HelperText, {
                         helperText,
                         dataError: state.hasInteracted && !state.isValid ? dataError : undefined,
                         dataSuccess: state.hasInteracted && state.isValid ? dataSuccess : undefined,
                     }),
-                    maxLength
+                    maxLength && typeof value === 'string'
                         ? m(CharacterCounter, {
-                            currentLength: state.currentLength,
+                            currentLength: value.length,
                             maxLength,
-                            show: state.currentLength > 0,
+                            show: value.length > 0,
                         })
                         : undefined,
                 ]);
@@ -3146,7 +3238,7 @@
         let i;
         return {
             view: ({ attrs }) => {
-                const { multiple, disabled, initialValue, placeholder, onchange, className = 'col s12', accept: acceptedFiles, label = 'File', } = attrs;
+                const { multiple, disabled, value, placeholder, onchange, className = 'col s12', accept: acceptedFiles, label = 'File', } = attrs;
                 const accept = acceptedFiles
                     ? acceptedFiles instanceof Array
                         ? acceptedFiles.join(', ')
@@ -3177,8 +3269,8 @@
                         placeholder,
                         oncreate: ({ dom }) => {
                             i = dom;
-                            if (initialValue)
-                                i.value = initialValue;
+                            if (value)
+                                i.value = value;
                         },
                     })),
                     (canClear || (i === null || i === void 0 ? void 0 : i.value)) &&
@@ -3205,11 +3297,14 @@
 
     /** Component to show a check box */
     const InputCheckbox = () => {
+        let checkboxId;
         return {
             view: ({ attrs: { className = 'col s12', onchange, label, checked, disabled, description, style, inputId } }) => {
-                const checkboxId = inputId || uniqueId();
+                if (!checkboxId)
+                    checkboxId = inputId || uniqueId();
                 return m(`p`, { className, style }, m('label', { for: checkboxId }, [
                     m('input[type=checkbox][tabindex=0]', {
+                        className: disabled ? 'disabled' : undefined,
                         id: checkboxId,
                         checked,
                         disabled,
@@ -3226,78 +3321,79 @@
             },
         };
     };
+    /** Reusable layout component for rendering options horizontally or vertically */
+    const OptionsList = {
+        view: ({ attrs: { options, layout } }) => {
+            const optionElements = options.map(({ component, props, key }) => m(component, Object.assign(Object.assign({}, props), { key })));
+            return layout === 'horizontal'
+                ? m('div.grid-container', optionElements)
+                : optionElements;
+        },
+    };
     /** A list of checkboxes */
     const Options = () => {
-        const state = {};
-        const isChecked = (id) => state.checkedIds.indexOf(id) >= 0;
-        const selectAll = (options, callback) => {
+        const state = {
+            componentId: '',
+        };
+        const selectAll = (options, onchange) => {
             const allIds = options.map((option) => option.id);
-            state.checkedIds = [...allIds];
-            if (callback)
-                callback(allIds);
+            onchange && onchange(allIds);
         };
-        const selectNone = (callback) => {
-            state.checkedIds = [];
-            if (callback)
-                callback([]);
+        const selectNone = (onchange) => {
+            onchange && onchange([]);
+        };
+        const handleChange = (propId, checked, checkedIds, onchange) => {
+            const newCheckedIds = checkedIds.filter((i) => i !== propId);
+            if (checked) {
+                newCheckedIds.push(propId);
+            }
+            onchange && onchange(newCheckedIds);
         };
         return {
-            oninit: ({ attrs: { initialValue, checkedId, id } }) => {
-                const iv = checkedId || initialValue;
-                state.checkedId = checkedId;
-                state.checkedIds = iv ? (iv instanceof Array ? [...iv] : [iv]) : [];
-                state.componentId = id || uniqueId();
+            oninit: ({ attrs }) => {
+                state.componentId = attrs.id || uniqueId();
             },
-            view: ({ attrs: { label, options, description, className = 'col s12', style, disabled, checkboxClass, newRow, isMandatory, layout = 'vertical', showSelectAll = false, onchange: callback, }, }) => {
-                const onchange = callback
-                    ? (propId, checked) => {
-                        const checkedIds = state.checkedIds.filter((i) => i !== propId);
-                        if (checked) {
-                            checkedIds.push(propId);
-                        }
-                        state.checkedIds = checkedIds;
-                        callback(checkedIds);
-                    }
-                    : undefined;
+            view: ({ attrs: { checkedId, label, options, description, className = 'col s12', style, disabled, checkboxClass, newRow, isMandatory, layout = 'vertical', showSelectAll = false, selectAllText = 'Select All', selectNoneText = 'Select None', onchange, }, }) => {
+                // Derive checked IDs from props
+                const checkedIds = checkedId !== undefined ? (Array.isArray(checkedId) ? checkedId : [checkedId]) : [];
+                const isChecked = (id) => checkedIds.includes(id);
                 const cn = [newRow ? 'clear' : '', className].filter(Boolean).join(' ').trim() || undefined;
-                const optionsContent = layout === 'horizontal'
-                    ? m('div.grid-container', options.map((option) => m(InputCheckbox, {
-                        disabled: disabled || option.disabled,
-                        label: option.label,
-                        onchange: onchange ? (v) => onchange(option.id, v) : undefined,
-                        className: option.className || checkboxClass,
-                        checked: isChecked(option.id),
-                        description: option.description,
-                        inputId: `${state.componentId}-${option.id}`,
-                    })))
-                    : options.map((option) => m(InputCheckbox, {
+                const optionItems = options.map((option) => ({
+                    component: InputCheckbox,
+                    props: {
                         disabled: disabled || option.disabled,
                         label: option.label,
-                        onchange: onchange ? (v) => onchange(option.id, v) : undefined,
+                        onchange: onchange ? (v) => handleChange(option.id, v, checkedIds, onchange) : undefined,
                         className: option.className || checkboxClass,
                         checked: isChecked(option.id),
                         description: option.description,
                         inputId: `${state.componentId}-${option.id}`,
-                    }));
+                    },
+                    key: option.id,
+                }));
+                const optionsContent = m(OptionsList, {
+                    options: optionItems,
+                    layout,
+                });
                 return m('div', { id: state.componentId, className: cn, style }, [
                     label && m('h5.form-group-label', label + (isMandatory ? ' *' : '')),
                     showSelectAll &&
-                        m('div.select-all-controls', { style: 'margin-bottom: 10px;' }, [
+                        m('div.select-all-controls', { style: { marginBottom: '10px' } }, [
                             m('a', {
                                 href: '#',
                                 onclick: (e) => {
                                     e.preventDefault();
-                                    selectAll(options, callback);
+                                    selectAll(options, onchange);
                                 },
-                                style: 'margin-right: 15px;',
-                            }, 'Select All'),
+                                style: { marginRight: '15px' },
+                            }, selectAllText),
                             m('a', {
                                 href: '#',
                                 onclick: (e) => {
                                     e.preventDefault();
-                                    selectNone(callback);
+                                    selectNone(onchange);
                                 },
-                            }, 'Select None'),
+                            }, selectNoneText),
                         ]),
                     description && m(HelperText, { helperText: description }),
                     m('form', { action: '#' }, optionsContent),
@@ -3892,11 +3988,19 @@
     const Dropdown = () => {
         const state = {
             isOpen: false,
-            initialValue: undefined,
             id: '',
             focusedIndex: -1,
             inputRef: null,
             dropdownRef: null,
+            internalCheckedId: undefined,
+        };
+        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 handleKeyDown = (e, items, onchange) => {
             const availableItems = items.filter((item) => !item.divider && !item.disabled);
@@ -3905,7 +4009,7 @@
                     e.preventDefault();
                     if (!state.isOpen) {
                         state.isOpen = true;
-                        state.focusedIndex = 0;
+                        state.focusedIndex = availableItems.length > 0 ? 0 : -1;
                     }
                     else {
                         state.focusedIndex = Math.min(state.focusedIndex + 1, availableItems.length - 1);
@@ -3923,15 +4027,13 @@
                     if (state.isOpen && state.focusedIndex >= 0 && state.focusedIndex < availableItems.length) {
                         const selectedItem = availableItems[state.focusedIndex];
                         const value = (selectedItem.id || selectedItem.label);
-                        state.initialValue = value;
                         state.isOpen = false;
                         state.focusedIndex = -1;
-                        if (onchange)
-                            onchange(value);
+                        return value; // Return value to be handled in view
                     }
                     else if (!state.isOpen) {
                         state.isOpen = true;
-                        state.focusedIndex = 0;
+                        state.focusedIndex = availableItems.length > 0 ? 0 : -1;
                     }
                     break;
                 case 'Escape':
@@ -3942,15 +4044,36 @@
             }
         };
         return {
-            oninit: ({ attrs: { id = uniqueId(), initialValue, checkedId } }) => {
-                state.id = id;
-                state.initialValue = initialValue || checkedId;
-                // Mithril will handle click events through the component structure
+            oninit: ({ attrs }) => {
+                var _a;
+                state.id = ((_a = attrs.id) === null || _a === void 0 ? void 0 : _a.toString()) || uniqueId();
+                // Initialize internal state for uncontrolled mode
+                if (!isControlled(attrs)) {
+                    state.internalCheckedId = attrs.defaultCheckedId;
+                }
+                // Add global click listener to close dropdown
+                document.addEventListener('click', closeDropdown);
             },
-            view: ({ attrs: { key, label, onchange, disabled = false, items, iconName, helperText, style, className = 'col s12' }, }) => {
-                const { initialValue } = state;
-                const selectedItem = initialValue
-                    ? items.filter((i) => (i.id ? i.id === initialValue : i.label === initialValue)).shift()
+            onremove: () => {
+                // Cleanup global listener
+                document.removeEventListener('click', closeDropdown);
+            },
+            view: ({ attrs }) => {
+                const { checkedId, key, label, onchange, disabled = false, items, iconName, helperText, style, className = 'col s12', } = attrs;
+                const controlled = isControlled(attrs);
+                const currentCheckedId = controlled ? checkedId : state.internalCheckedId;
+                const handleSelection = (value) => {
+                    // Update internal state for uncontrolled mode
+                    if (!controlled) {
+                        state.internalCheckedId = value;
+                    }
+                    // Call onchange if provided
+                    if (onchange) {
+                        onchange(value);
+                    }
+                };
+                const selectedItem = currentCheckedId
+                    ? items.filter((i) => (i.id ? i.id === currentCheckedId : i.label === currentCheckedId)).shift()
                     : undefined;
                 const title = selectedItem ? selectedItem.label : label || 'Select';
                 const availableItems = items.filter((item) => !item.divider && !item.disabled);
@@ -3958,13 +4081,12 @@
                     iconName ? m('i.material-icons.prefix', iconName) : undefined,
                     m(HelperText, { helperText }),
                     m('.select-wrapper', {
-                        onclick: disabled
-                            ? undefined
-                            : () => {
-                                state.isOpen = !state.isOpen;
-                                state.focusedIndex = state.isOpen ? 0 : -1;
-                            },
-                        onkeydown: disabled ? undefined : (e) => handleKeyDown(e, items, onchange),
+                        onkeydown: disabled ? undefined : (e) => {
+                            const selectedValue = handleKeyDown(e, items);
+                            if (selectedValue) {
+                                handleSelection(selectedValue);
+                            }
+                        },
                         tabindex: disabled ? -1 : 0,
                         'aria-expanded': state.isOpen ? 'true' : 'false',
                         'aria-haspopup': 'listbox',
@@ -3981,7 +4103,8 @@
                                 e.stopPropagation();
                                 if (!disabled) {
                                     state.isOpen = !state.isOpen;
-                                    state.focusedIndex = state.isOpen ? 0 : -1;
+                                    // Reset focus index when opening/closing
+                                    state.focusedIndex = -1;
                                 }
                             },
                         }),
@@ -3997,36 +4120,31 @@
                                 onremove: () => {
                                     state.dropdownRef = null;
                                 },
-                                style: getDropdownStyles(state.inputRef, true, items.map((item) => (Object.assign(Object.assign({}, item), { 
-                                    // Convert dropdown items to format expected by getDropdownStyles
-                                    group: undefined }))), true),
-                            }, items.map((item, index) => {
+                                style: getDropdownStyles(state.inputRef, true, items, true),
+                            }, items.map((item) => {
                                 if (item.divider) {
-                                    return m('li.divider', {
-                                        key: `divider-${index}`,
-                                    });
+                                    return m('li.divider');
                                 }
                                 const itemIndex = availableItems.indexOf(item);
                                 const isFocused = itemIndex === state.focusedIndex;
-                                return m('li', Object.assign({ key: item.id || `item-${index}`, class: [
-                                        item.disabled ? 'disabled' : '',
-                                        isFocused ? 'focused' : '',
-                                        (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label) === item.label ? 'selected' : '',
-                                    ]
-                                        .filter(Boolean)
-                                        .join(' ') }, (item.disabled
-                                    ? {}
-                                    : {
-                                        onclick: (e) => {
-                                            e.stopPropagation();
+                                const className = [
+                                    item.disabled ? 'disabled' : '',
+                                    isFocused ? 'focused' : '',
+                                    (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label) === item.label ? 'selected' : '',
+                                ]
+                                    .filter(Boolean)
+                                    .join(' ') || undefined;
+                                return m('li', {
+                                    className,
+                                    onclick: item.disabled
+                                        ? undefined
+                                        : () => {
                                             const value = (item.id || item.label);
-                                            state.initialValue = value;
                                             state.isOpen = false;
                                             state.focusedIndex = -1;
-                                            if (onchange)
-                                                onchange(value);
+                                            handleSelection(value);
                                         },
-                                    })), m('span', {
+                                }, m('span', {
                                     style: {
                                         display: 'flex',
                                         alignItems: 'center',
@@ -5163,9 +5281,9 @@
                     dx: 0,
                     dy: 0,
                 };
-                // Handle initial value after options are set
-                if (attrs.initialValue) {
-                    updateTimeFromInput(attrs.initialValue);
+                // Handle value after options are set
+                if (attrs.defaultValue) {
+                    updateTimeFromInput(attrs.defaultValue);
                 }
             },
             onremove: () => {
@@ -5447,32 +5565,47 @@
         },
     });
     /** Component to show a list of radio buttons, from which you can choose one. */
-    // export const RadioButtons: FactoryComponent<IRadioButtons<T>> = () => {
     const RadioButtons = () => {
-        const state = { groupId: uniqueId() };
+        const state = {
+            groupId: uniqueId(),
+            componentId: '',
+            internalCheckedId: undefined,
+        };
+        const isControlled = (attrs) => attrs.checkedId !== undefined && typeof attrs.onchange === 'function';
         return {
-            oninit: ({ attrs: { checkedId, initialValue, id } }) => {
-                state.oldCheckedId = checkedId;
-                state.checkedId = checkedId || initialValue;
-                state.componentId = id || uniqueId();
+            oninit: ({ attrs }) => {
+                state.componentId = attrs.id || uniqueId();
+                // Initialize internal state for uncontrolled mode
+                if (!isControlled(attrs)) {
+                    state.internalCheckedId = attrs.defaultCheckedId;
+                }
             },
-            view: ({ attrs: { checkedId: cid, newRow, className = 'col s12', label = '', disabled, description, options, isMandatory, checkboxClass, layout = 'vertical', onchange: callback, }, }) => {
-                if (state.oldCheckedId !== cid) {
-                    state.oldCheckedId = state.checkedId = cid;
-                }
-                const { groupId, checkedId, componentId } = state;
-                const onchange = (propId) => {
-                    state.checkedId = propId;
-                    if (callback) {
-                        callback(propId);
+            view: ({ attrs }) => {
+                const { checkedId, newRow, className = 'col s12', label = '', disabled, description, options, isMandatory, checkboxClass, layout = 'vertical', onchange, } = attrs;
+                const { groupId, componentId } = state;
+                const controlled = isControlled(attrs);
+                // Get current checked ID from props or internal state
+                const currentCheckedId = controlled ? checkedId : state.internalCheckedId;
+                const handleChange = (id) => {
+                    // Update internal state for uncontrolled mode
+                    if (!controlled) {
+                        state.internalCheckedId = id;
+                    }
+                    // Call onchange if provided
+                    if (onchange) {
+                        onchange(id);
                     }
                 };
                 const cn = [newRow ? 'clear' : '', className].filter(Boolean).join(' ').trim() || undefined;
-                const optionsContent = layout === 'horizontal'
-                    ? m('div.grid-container', options.map((r) => m(RadioButton, Object.assign(Object.assign({}, r), { onchange,
-                        groupId, disabled: disabled || r.disabled, className: checkboxClass, checked: r.id === checkedId, inputId: `${componentId}-${r.id}` }))))
-                    : options.map((r) => m(RadioButton, Object.assign(Object.assign({}, r), { onchange,
-                        groupId, disabled: disabled || r.disabled, className: checkboxClass, checked: r.id === checkedId, inputId: `${componentId}-${r.id}` })));
+                const radioItems = options.map((r) => ({
+                    component: (RadioButton),
+                    props: Object.assign(Object.assign({}, r), { onchange: handleChange, groupId, disabled: disabled || r.disabled, className: checkboxClass, checked: r.id === currentCheckedId, inputId: `${componentId}-${r.id}` }),
+                    key: r.id,
+                }));
+                const optionsContent = m(OptionsList, {
+                    options: radioItems,
+                    layout,
+                });
                 return m('div', { id: componentId, className: cn }, [
                     label && m('h5.form-group-label', label + (isMandatory ? ' *' : '')),
                     description && m('p.helper-text', m.trust(description)),
@@ -5487,30 +5620,42 @@
         const state = {
             id: '',
             isOpen: false,
-            selectedIds: [],
             focusedIndex: -1,
             inputRef: null,
             dropdownRef: null,
+            internalSelectedIds: [],
         };
+        const isControlled = (attrs) => attrs.checkedId !== undefined && attrs.onchange !== undefined;
         const isSelected = (id, selectedIds) => {
             return selectedIds.some((selectedId) => selectedId === id);
         };
         const toggleOption = (id, multiple, attrs) => {
+            const controlled = isControlled(attrs);
+            // Get current selected IDs from props or internal state
+            const currentSelectedIds = controlled
+                ? attrs.checkedId !== undefined
+                    ? Array.isArray(attrs.checkedId)
+                        ? attrs.checkedId
+                        : [attrs.checkedId]
+                    : []
+                : state.internalSelectedIds;
+            let newIds;
             if (multiple) {
-                const newIds = state.selectedIds.includes(id)
-                    ? // isSelected(id, state.selectedIds)
-                        state.selectedIds.filter((selectedId) => selectedId !== id)
-                    : [...state.selectedIds, id];
-                state.selectedIds = newIds;
-                attrs.onchange(newIds);
-                console.log(newIds);
-                // Keep dropdown open for multiple select
+                newIds = currentSelectedIds.includes(id)
+                    ? currentSelectedIds.filter((selectedId) => selectedId !== id)
+                    : [...currentSelectedIds, id];
             }
             else {
-                state.selectedIds = [id];
-                // Close dropdown for single select
-                state.isOpen = false;
-                attrs.onchange([id]);
+                newIds = [id];
+                state.isOpen = false; // Close dropdown for single select
+            }
+            // Update internal state for uncontrolled mode
+            if (!controlled) {
+                state.internalSelectedIds = newIds;
+            }
+            // Call onchange if provided
+            if (attrs.onchange) {
+                attrs.onchange(newIds);
             }
         };
         const handleKeyDown = (e, attrs) => {
@@ -5562,88 +5707,22 @@
         };
         const closeDropdown = (e) => {
             const target = e.target;
-            if (!target.closest('.select-wrapper-container')) {
+            if (!target.closest('.input-field.select-space')) {
                 state.isOpen = false;
                 m.redraw();
             }
         };
-        const renderGroupedOptions = (options, multiple, attrs) => {
-            const groupedOptions = {};
-            const ungroupedOptions = [];
-            // Group options by their group property
-            options.forEach((option) => {
-                if (option.group) {
-                    if (!groupedOptions[option.group]) {
-                        groupedOptions[option.group] = [];
-                    }
-                    groupedOptions[option.group].push(option);
-                }
-                else {
-                    ungroupedOptions.push(option);
-                }
-            });
-            const renderElements = [];
-            // Render ungrouped options first
-            ungroupedOptions.forEach((option) => {
-                renderElements.push(m('li', Object.assign({ class: option.disabled ? 'disabled' : state.focusedIndex === options.indexOf(option) ? 'focused' : '' }, (option.disabled
-                    ? {}
-                    : {
-                        onclick: (e) => {
-                            e.stopPropagation();
-                            toggleOption(option.id, multiple, attrs);
-                        },
-                    })), m('span', multiple
-                    ? m('label', { for: option.id }, m('input', {
-                        id: option.id,
-                        type: 'checkbox',
-                        checked: state.selectedIds.includes(option.id),
-                        disabled: option.disabled ? true : undefined,
-                        onclick: (e) => {
-                            e.stopPropagation();
-                        },
-                    }), m('span', option.label))
-                    : option.label)));
-            });
-            // Render grouped options
-            Object.keys(groupedOptions).forEach((groupName) => {
-                // Add group header
-                renderElements.push(m('li.optgroup', { tabindex: 0 }, m('span', groupName)));
-                // Add group options
-                groupedOptions[groupName].forEach((option) => {
-                    renderElements.push(m('li', Object.assign({ class: `optgroup-option${option.disabled ? ' disabled' : ''}${isSelected(option.id, state.selectedIds) ? ' selected' : ''}${state.focusedIndex === options.indexOf(option) ? ' focused' : ''}` }, (option.disabled
-                        ? {}
-                        : {
-                            onclick: (e) => {
-                                e.stopPropagation();
-                                toggleOption(option.id, multiple, attrs);
-                            },
-                        })), m('span', multiple
-                        ? m('label', { for: option.id }, m('input', {
-                            id: option.id,
-                            type: 'checkbox',
-                            checked: state.selectedIds.includes(option.id),
-                            disabled: option.disabled ? true : undefined,
-                            onclick: (e) => {
-                                e.stopPropagation();
-                            },
-                        }), m('span', option.label))
-                        : option.label)));
-                });
-            });
-            return renderElements;
-        };
         return {
             oninit: ({ attrs }) => {
-                const { checkedId, initialValue, id } = attrs;
-                state.id = id || uniqueId();
-                const iv = checkedId || initialValue;
-                if (iv !== null && typeof iv !== 'undefined') {
-                    if (iv instanceof Array) {
-                        state.selectedIds = [...iv];
-                    }
-                    else {
-                        state.selectedIds = [iv];
-                    }
+                state.id = attrs.id || uniqueId();
+                // Initialize internal state for uncontrolled mode
+                if (!isControlled(attrs)) {
+                    const defaultIds = attrs.defaultCheckedId !== undefined
+                        ? Array.isArray(attrs.defaultCheckedId)
+                            ? attrs.defaultCheckedId
+                            : [attrs.defaultCheckedId]
+                        : [];
+                    state.internalSelectedIds = defaultIds;
                 }
                 // Add global click listener to close dropdown
                 document.addEventListener('click', closeDropdown);
@@ -5653,17 +5732,18 @@
                 document.removeEventListener('click', closeDropdown);
             },
             view: ({ attrs }) => {
-                // Sync external checkedId prop with internal state - do this in view for immediate response
-                const { checkedId } = attrs;
-                if (checkedId !== undefined) {
-                    const newIds = checkedId instanceof Array ? checkedId : [checkedId];
-                    if (JSON.stringify(newIds) !== JSON.stringify(state.selectedIds)) {
-                        state.selectedIds = newIds;
-                    }
-                }
+                const controlled = isControlled(attrs);
+                // Get selected IDs from props or internal state
+                const selectedIds = controlled
+                    ? attrs.checkedId !== undefined
+                        ? Array.isArray(attrs.checkedId)
+                            ? attrs.checkedId
+                            : [attrs.checkedId]
+                        : []
+                    : state.internalSelectedIds;
                 const { newRow, className = 'col s12', key, options, multiple = false, label, helperText, placeholder = '', isMandatory, iconName, disabled, style, } = attrs;
                 const finalClassName = newRow ? `${className} clear` : className;
-                const selectedOptions = options.filter((opt) => isSelected(opt.id, state.selectedIds));
+                const selectedOptions = options.filter((opt) => isSelected(opt.id, selectedIds));
                 return m('.input-field.select-space', {
                     className: finalClassName,
                     key,
@@ -5672,11 +5752,6 @@
                     // Icon prefix
                     iconName && m('i.material-icons.prefix', iconName),
                     m('.select-wrapper', {
-                        onclick: disabled
-                            ? undefined
-                            : () => {
-                                state.isOpen = !state.isOpen;
-                            },
                         onkeydown: disabled ? undefined : (e) => handleKeyDown(e, attrs),
                         tabindex: disabled ? -1 : 0,
                         'aria-expanded': state.isOpen ? 'true' : 'false',
@@ -5692,7 +5767,9 @@
                             onclick: (e) => {
                                 e.preventDefault();
                                 e.stopPropagation();
-                                state.isOpen = !state.isOpen;
+                                if (!disabled) {
+                                    state.isOpen = !state.isOpen;
+                                }
                             },
                         }),
                         // Dropdown Menu
@@ -5708,7 +5785,63 @@
                                 style: getDropdownStyles(state.inputRef, true, options),
                             }, [
                                 placeholder && m('li.disabled', { tabindex: 0 }, m('span', placeholder)),
-                                ...renderGroupedOptions(options, multiple, attrs),
+                                // 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);
+                                        },
+                                    })), 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))
+                                    : option.label))),
+                                // 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);
+                                            },
+                                        })), 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))
+                                        : option.label))),
+                                ])
+                                    .reduce((acc, val) => acc.concat(val), []),
                             ]),
                         m(MaterialIcon, {
                             name: 'caret',
@@ -5739,25 +5872,22 @@
             },
             view: ({ attrs }) => {
                 const id = attrs.id || state.id;
-                const { label, left, right, disabled, newRow, onchange, isMandatory, className = 'col s12' } = attrs, params = __rest(attrs, ["label", "left", "right", "disabled", "newRow", "onchange", "isMandatory", "className"]);
+                const { checked, label, left, right, disabled, newRow, onchange, isMandatory, className = 'col s12' } = attrs, params = __rest(attrs, ["checked", "label", "left", "right", "disabled", "newRow", "onchange", "isMandatory", "className"]);
                 const cn = ['input-field', newRow ? 'clear' : '', className].filter(Boolean).join(' ').trim() || undefined;
                 return m('div', {
                     className: cn,
                     onclick: (e) => {
-                        state.checked = !state.checked;
-                        onchange && onchange(state.checked);
+                        onchange && onchange(!checked);
                         e.preventDefault();
                     },
                 }, [
                     label && m(Label, { label: label || '', id, isMandatory, className: 'active' }),
-                    m('.switch', params, m('label', {
-                        style: { cursor: 'pointer' },
-                    }, [
+                    m('.switch', params, m('label', [
                         m('span', left || 'Off'),
                         m('input[type=checkbox]', {
                             id,
                             disabled,
-                            checked: state.checked,
+                            checked,
                         }),
                         m('span.lever'),
                         m('span', right || 'On'),
@@ -5949,22 +6079,62 @@
         };
     };
 
+    // Proper components to avoid anonymous closures
+    const SelectedChip = {
+        view: ({ attrs: { option, onRemove } }) => m('.chip', [
+            option.label || option.id.toString(),
+            m(MaterialIcon, {
+                name: 'close',
+                className: 'close',
+                onclick: (e) => {
+                    e.stopPropagation();
+                    onRemove(option.id);
+                },
+            }),
+        ]),
+    };
+    const DropdownOption = {
+        view: ({ attrs: { option, index, selectedIds, isFocused, onToggle, onMouseOver } }) => {
+            const checkboxId = `search-select-option-${option.id}`;
+            const optionLabel = option.label || option.id.toString();
+            return m('li', {
+                key: option.id,
+                onclick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onToggle(option);
+                },
+                class: `${option.disabled ? 'disabled' : ''} ${isFocused ? 'active' : ''}`.trim(),
+                onmouseover: () => {
+                    if (!option.disabled) {
+                        onMouseOver(index);
+                    }
+                },
+            }, m('label', { for: checkboxId, class: 'search-select-option-label' }, [
+                m('input', {
+                    type: 'checkbox',
+                    id: checkboxId,
+                    checked: selectedIds.includes(option.id),
+                }),
+                m('span', optionLabel),
+            ]));
+        },
+    };
     /**
      * Mithril Factory Component for Multi-Select Dropdown with search
      */
     const SearchSelect = () => {
-        //  (): <T extends string | number>(): Component<SearchSelectAttrs<T>, SearchSelectState<T>> => {
         // State initialization
         const state = {
+            id: '',
             isOpen: false,
-            selectedOptions: [], //options.filter((o) => iv.includes(o.id)),
             searchTerm: '',
-            options: [],
             inputRef: null,
             dropdownRef: null,
             focusedIndex: -1,
-            onchange: null,
+            internalSelectedIds: [],
         };
+        const isControlled = (attrs) => attrs.checkedId !== undefined && typeof attrs.onchange === 'function';
         const componentId = uniqueId();
         const searchInputId = `${componentId}-search`;
         // Handle click outside
@@ -6005,9 +6175,7 @@
                             // Handle add new option
                             return 'addNew';
                         }
-                        else if (state.focusedIndex < filteredOptions.length) {
-                            toggleOption(filteredOptions[state.focusedIndex]);
-                        }
+                        else if (state.focusedIndex < filteredOptions.length) ;
                     }
                     break;
                 case 'Escape':
@@ -6019,26 +6187,65 @@
             return null;
         };
         // Toggle option selection
-        const toggleOption = (option) => {
+        const toggleOption = (option, attrs) => {
             if (option.disabled)
                 return;
-            state.selectedOptions = state.selectedOptions.some((item) => item.id === option.id)
-                ? state.selectedOptions.filter((item) => item.id !== option.id)
-                : [...state.selectedOptions, option];
+            const controlled = isControlled(attrs);
+            // Get current selected IDs from props or internal state
+            const currentSelectedIds = controlled
+                ? attrs.checkedId !== undefined
+                    ? Array.isArray(attrs.checkedId)
+                        ? attrs.checkedId
+                        : [attrs.checkedId]
+                    : []
+                : state.internalSelectedIds;
+            const newIds = currentSelectedIds.includes(option.id)
+                ? currentSelectedIds.filter((id) => id !== option.id)
+                : [...currentSelectedIds, option.id];
+            // Update internal state for uncontrolled mode
+            if (!controlled) {
+                state.internalSelectedIds = newIds;
+            }
             state.searchTerm = '';
             state.focusedIndex = -1;
-            state.onchange && state.onchange(state.selectedOptions.map((o) => o.id));
+            // Call onchange if provided
+            if (attrs.onchange) {
+                attrs.onchange(newIds);
+            }
         };
         // Remove a selected option
-        const removeOption = (option) => {
-            state.selectedOptions = state.selectedOptions.filter((item) => item.id !== option.id);
-            state.onchange && state.onchange(state.selectedOptions.map((o) => o.id));
+        const removeOption = (optionId, attrs) => {
+            const controlled = isControlled(attrs);
+            // Get current selected IDs from props or internal state
+            const currentSelectedIds = controlled
+                ? attrs.checkedId !== undefined
+                    ? Array.isArray(attrs.checkedId)
+                        ? attrs.checkedId
+                        : [attrs.checkedId]
+                    : []
+                : state.internalSelectedIds;
+            const newIds = currentSelectedIds.filter((id) => id !== optionId);
+            // Update internal state for uncontrolled mode
+            if (!controlled) {
+                state.internalSelectedIds = newIds;
+            }
+            // Call onchange if provided
+            if (attrs.onchange) {
+                attrs.onchange(newIds);
+            }
         };
         return {
-            oninit: ({ attrs: { options = [], initialValue = [], onchange } }) => {
-                state.options = options;
-                state.selectedOptions = options.filter((o) => initialValue.includes(o.id));
-                state.onchange = onchange;
+            oninit: ({ attrs }) => {
+                state.id = attrs.id || uniqueId();
+                // Initialize internal state for uncontrolled mode
+                if (!isControlled(attrs)) {
+                    const defaultIds = attrs.defaultCheckedId !== undefined
+                        ? Array.isArray(attrs.defaultCheckedId)
+                            ? attrs.defaultCheckedId
+                            : [attrs.defaultCheckedId]
+                        : [];
+                    state.internalSelectedIds = defaultIds;
+                }
             },
             oncreate() {
                 document.addEventListener('click', handleClickOutside);
@@ -6046,14 +6253,27 @@
             onremove() {
                 document.removeEventListener('click', handleClickOutside);
             },
-            view({ attrs: { 
-            // onchange,
-            oncreateNewOption, className, placeholder, searchPlaceholder = 'Search options...', noOptionsFound = 'No options found', label,
-            // maxHeight = '25rem',
-             }, }) {
+            view({ attrs }) {
+                const controlled = isControlled(attrs);
+                // Get selected IDs from props or internal state
+                const selectedIds = controlled
+                    ? attrs.checkedId !== undefined
+                        ? Array.isArray(attrs.checkedId)
+                            ? attrs.checkedId
+                            : [attrs.checkedId]
+                        : []
+                    : state.internalSelectedIds;
+                const { options = [], oncreateNewOption, className, placeholder, searchPlaceholder = 'Search options...', noOptionsFound = 'No options found', label, i18n = {}, } = attrs;
+                // Use i18n values if provided, otherwise use defaults
+                const texts = {
+                    noOptionsFound: i18n.noOptionsFound || noOptionsFound,
+                    addNewPrefix: i18n.addNewPrefix || '+',
+                };
+                // Get selected options for display
+                const selectedOptions = options.filter((opt) => selectedIds.includes(opt.id));
                 // Safely filter options
-                const filteredOptions = state.options.filter((option) => (option.label || option.id.toString()).toLowerCase().includes((state.searchTerm || '').toLowerCase()) &&
-                    !state.selectedOptions.some((selected) => selected.id === option.id));
+                const filteredOptions = options.filter((option) => (option.label || option.id.toString()).toLowerCase().includes((state.searchTerm || '').toLowerCase()) &&
+                    !selectedIds.includes(option.id));
                 // Check if we should show the "add new option" element
                 const showAddNew = oncreateNewOption &&
                     state.searchTerm &&
@@ -6071,6 +6291,7 @@
                             state.isOpen = !state.isOpen;
                             // console.log('SearchSelect state changed to', state.isOpen); // Debug log
                         },
+                        class: 'chips chips-container',
                         style: {
                             display: 'flex',
                             alignItems: 'end',
@@ -6083,25 +6304,20 @@
                         // Hidden input for label association and accessibility
                         m('input', {
                             type: 'text',
-                            id: componentId,
-                            value: state.selectedOptions.map((o) => o.label || o.id.toString()).join(', '),
+                            id: state.id,
+                            value: selectedOptions.map((o) => o.label || o.id.toString()).join(', '),
                             readonly: true,
+                            class: 'sr-only',
                             style: { position: 'absolute', left: '-9999px', opacity: 0 },
                         }),
                         // Selected Options (chips)
-                        ...state.selectedOptions.map((option) => m('.chip', [
-                            option.label || option.id.toString(),
-                            m(MaterialIcon, {
-                                name: 'close',
-                                className: 'close',
-                                onclick: (e) => {
-                                    e.stopPropagation();
-                                    removeOption(option);
-                                },
-                            }),
-                        ])),
+                        ...selectedOptions.map((option) => m(SelectedChip, {
+                            // key: option.id,
+                            option,
+                            onRemove: (id) => removeOption(id, attrs),
+                        })),
                         // Placeholder when no options selected
-                        state.selectedOptions.length === 0 &&
+                        selectedOptions.length === 0 &&
                             placeholder &&
                             m('span.placeholder', {
                                 style: {
@@ -6122,8 +6338,8 @@
                     // Label
                     label &&
                         m('label', {
-                            for: componentId,
-                            class: placeholder || state.selectedOptions.length > 0 ? 'active' : '',
+                            for: state.id,
+                            class: placeholder || selectedOptions.length > 0 ? 'active' : '',
                         }, label),
                     // Dropdown Menu
                     state.isOpen &&
@@ -6139,7 +6355,6 @@
                             m('li', // Search Input
                             {
                                 class: 'search-wrapper',
-                                style: { padding: '0 16px', position: 'relative' },
                             }, [
                                 m('input', {
                                     type: 'text',
@@ -6158,29 +6373,21 @@
                                         const result = handleKeyDown(e, filteredOptions, !!showAddNew);
                                         if (result === 'addNew' && oncreateNewOption) {
                                             const option = await oncreateNewOption(state.searchTerm);
-                                            toggleOption(option);
+                                            toggleOption(option, attrs);
+                                        }
+                                        else if (e.key === 'Enter' &&
+                                            state.focusedIndex >= 0 &&
+                                            state.focusedIndex < filteredOptions.length) {
+                                            toggleOption(filteredOptions[state.focusedIndex], attrs);
                                         }
                                     },
-                                    style: {
-                                        width: '100%',
-                                        outline: 'none',
-                                        fontSize: '0.875rem',
-                                        border: 'none',
-                                        padding: '8px 0',
-                                        borderBottom: '1px solid var(--mm-input-border, #9e9e9e)',
-                                        backgroundColor: 'transparent',
-                                        color: 'var(--mm-text-primary, inherit)',
-                                    },
+                                    class: 'search-select-input',
                                 }),
                             ]),
                             // No options found message or list of options
                             ...(filteredOptions.length === 0 && !showAddNew
                                 ? [
-                                    m('li', 
-                                    // {
-                                    //   style: getNoOptionsStyles(),
-                                    // },
-                                    noOptionsFound),
+                                    m('li.search-select-no-options', texts.noOptionsFound),
                                 ]
                                 : []),
                             // Add new option item
@@ -6189,35 +6396,27 @@
                                     m('li', {
                                         onclick: async () => {
                                             const option = await oncreateNewOption(state.searchTerm);
-                                            toggleOption(option);
+                                            toggleOption(option, attrs);
                                         },
                                         class: state.focusedIndex === filteredOptions.length ? 'active' : '',
                                         onmouseover: () => {
                                             state.focusedIndex = filteredOptions.length;
                                         },
-                                    }, [m('span', `+ "${state.searchTerm}"`)]),
+                                    }, [m('span', `${texts.addNewPrefix} "${state.searchTerm}"`)]),
                                 ]
                                 : []),
                             // List of filtered options
-                            ...filteredOptions.map((option, index) => m('li', {
-                                onclick: (e) => {
-                                    e.preventDefault();
-                                    e.stopPropagation();
-                                    toggleOption(option);
-                                },
-                                class: `${option.disabled ? 'disabled' : ''} ${state.focusedIndex === index ? 'active' : ''}`.trim(),
-                                onmouseover: () => {
-                                    if (!option.disabled) {
-                                        state.focusedIndex = index;
-                                    }
+                            ...filteredOptions.map((option, index) => m(DropdownOption, {
+                                // key: option.id,
+                                option,
+                                index,
+                                selectedIds,
+                                isFocused: state.focusedIndex === index,
+                                onToggle: (opt) => toggleOption(opt, attrs),
+                                onMouseOver: (idx) => {
+                                    state.focusedIndex = idx;
                                 },
-                            }, m('span', [
-                                m('input', {
-                                    type: 'checkbox',
-                                    checked: state.selectedOptions.some((selected) => selected.id === option.id),
-                                }),
-                                option.label || option.id.toString(),
-                            ]))),
+                            })),
                         ]),
                 ]);
             },
@@ -8337,6 +8536,7 @@
     exports.ModalPanel = ModalPanel;
     exports.NumberInput = NumberInput;
     exports.Options = Options;
+    exports.OptionsList = OptionsList;
     exports.Pagination = Pagination;
     exports.PaginationControls = PaginationControls;
     exports.Parallax = Parallax;