mithril-materialized 3.1.0 → 3.2.1

package/dist/index.js

@@ -196,12 +196,13 @@ const Autocomplete = () => {
     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 [];
@@ -213,9 +214,16 @@ const Autocomplete = () => {
         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);
         }
@@ -289,7 +297,10 @@ const Autocomplete = () => {
     };
     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: () => {
@@ -298,40 +309,54 @@ const Autocomplete = () => {
         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) => {
@@ -388,7 +413,7 @@ const Autocomplete = () => {
                     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 }),
             ]);
@@ -2077,11 +2102,11 @@ const DatePicker = () => {
             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 {
@@ -2350,16 +2375,16 @@ const handleKeyboardNavigation = (key, currentValue, min, max, step) => {
     }
 };
 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) {
@@ -2784,41 +2809,48 @@ const TextArea = () => {
         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) => {
@@ -2832,7 +2864,11 @@ const TextArea = () => {
                             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);
                         }
@@ -2864,8 +2900,8 @@ const TextArea = () => {
                     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,
@@ -2887,7 +2923,7 @@ const TextArea = () => {
 const InputField = (type, defaultClass = '') => () => {
     const state = {
         id: uniqueId(),
-        currentLength: 0,
+        internalValue: undefined,
         hasInteracted: false,
         isValid: true,
         active: false,
@@ -2899,9 +2935,7 @@ const InputField = (type, defaultClass = '') => () => {
         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);
@@ -2915,21 +2949,20 @@ const InputField = (type, defaultClass = '') => () => {
         }
     };
     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) {
@@ -2947,9 +2980,26 @@ const InputField = (type, defaultClass = '') => () => {
     // 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'
@@ -2966,10 +3016,14 @@ const InputField = (type, defaultClass = '') => () => {
                     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',
@@ -2983,25 +3037,9 @@ const InputField = (type, defaultClass = '') => () => {
                         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) => {
@@ -3015,21 +3053,25 @@ const InputField = (type, defaultClass = '') => () => {
                         ? (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) {
@@ -3045,6 +3087,14 @@ const InputField = (type, defaultClass = '') => () => {
                                 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) => {
@@ -3081,6 +3131,48 @@ const InputField = (type, defaultClass = '') => () => {
                                 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);
@@ -3106,18 +3198,18 @@ const InputField = (type, defaultClass = '') => () => {
                     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,
             ]);
@@ -3144,7 +3236,7 @@ const FileInput = () => {
     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(', ')
@@ -3175,8 +3267,8 @@ const FileInput = () => {
                     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)) &&
@@ -3203,11 +3295,14 @@ const FileInput = () => {
 
 /** 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,
@@ -3224,78 +3319,79 @@ const InputCheckbox = () => {
         },
     };
 };
+/** 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 = (onchange) => {
+        onchange && onchange([]);
     };
-    const selectNone = (callback) => {
-        state.checkedIds = [];
-        if (callback)
-            callback([]);
+    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),
@@ -3890,65 +3986,96 @@ const DataTable = () => {
 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 handleKeyDown = (e, items) => {
         const availableItems = items.filter((item) => !item.divider && !item.disabled);
         switch (e.key) {
             case 'ArrowDown':
                 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);
+                    state.focusedIndex = (state.focusedIndex + 1) % availableItems.length;
                 }
-                break;
+                return undefined;
             case 'ArrowUp':
                 e.preventDefault();
                 if (state.isOpen) {
-                    state.focusedIndex = Math.max(state.focusedIndex - 1, 0);
+                    state.focusedIndex = state.focusedIndex <= 0 ? availableItems.length - 1 : state.focusedIndex - 1;
                 }
-                break;
+                return undefined;
             case 'Enter':
             case ' ':
                 e.preventDefault();
                 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;
                 }
                 else if (!state.isOpen) {
                     state.isOpen = true;
-                    state.focusedIndex = 0;
+                    state.focusedIndex = availableItems.length > 0 ? 0 : -1;
                 }
-                break;
+                return undefined;
             case 'Escape':
                 e.preventDefault();
                 state.isOpen = false;
                 state.focusedIndex = -1;
-                break;
+                return undefined;
+            default:
+                return undefined;
         }
     };
     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);
@@ -3956,13 +4083,14 @@ const Dropdown = () => {
                 iconName ? m('i.material-icons.prefix', iconName) : undefined,
                 m(HelperText, { helperText }),
                 m('.select-wrapper', {
-                    onclick: disabled
+                    onkeydown: disabled
                         ? undefined
-                        : () => {
-                            state.isOpen = !state.isOpen;
-                            state.focusedIndex = state.isOpen ? 0 : -1;
+                        : (e) => {
+                            const selectedValue = handleKeyDown(e, items);
+                            if (selectedValue) {
+                                handleSelection(selectedValue);
+                            }
                         },
-                    onkeydown: disabled ? undefined : (e) => handleKeyDown(e, items, onchange),
                     tabindex: disabled ? -1 : 0,
                     'aria-expanded': state.isOpen ? 'true' : 'false',
                     'aria-haspopup': 'listbox',
@@ -3979,7 +4107,8 @@ const Dropdown = () => {
                             e.stopPropagation();
                             if (!disabled) {
                                 state.isOpen = !state.isOpen;
-                                state.focusedIndex = state.isOpen ? 0 : -1;
+                                // Reset focus index when opening/closing
+                                state.focusedIndex = -1;
                             }
                         },
                     }),
@@ -3995,36 +4124,31 @@ const Dropdown = () => {
                             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',
@@ -5161,9 +5285,9 @@ const TimePicker = () => {
                 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: () => {
@@ -5445,32 +5569,47 @@ const RadioButton = () => ({
     },
 });
 /** 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)),
@@ -5485,30 +5624,42 @@ const Select = () => {
     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) => {
@@ -5560,88 +5711,22 @@ const Select = () => {
     };
     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);
@@ -5651,17 +5736,18 @@ const Select = () => {
             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,
@@ -5670,11 +5756,6 @@ const Select = () => {
                 // 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',
@@ -5690,7 +5771,9 @@ const Select = () => {
                         onclick: (e) => {
                             e.preventDefault();
                             e.stopPropagation();
-                            state.isOpen = !state.isOpen;
+                            if (!disabled) {
+                                state.isOpen = !state.isOpen;
+                            }
                         },
                     }),
                     // Dropdown Menu
@@ -5706,7 +5789,63 @@ const Select = () => {
                             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',
@@ -5737,25 +5876,22 @@ const Switch = () => {
         },
         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'),
@@ -5947,22 +6083,62 @@ const Tabs = () => {
     };
 };
 
+// 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
@@ -6003,9 +6179,7 @@ const SearchSelect = () => {
                         // 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':
@@ -6017,26 +6191,65 @@ const SearchSelect = () => {
         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);
@@ -6044,14 +6257,27 @@ const SearchSelect = () => {
         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 &&
@@ -6069,6 +6295,7 @@ const SearchSelect = () => {
                         state.isOpen = !state.isOpen;
                         // console.log('SearchSelect state changed to', state.isOpen); // Debug log
                     },
+                    class: 'chips chips-container',
                     style: {
                         display: 'flex',
                         alignItems: 'end',
@@ -6081,25 +6308,20 @@ const SearchSelect = () => {
                     // 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: {
@@ -6120,8 +6342,8 @@ const SearchSelect = () => {
                 // 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 &&
@@ -6137,7 +6359,6 @@ const SearchSelect = () => {
                         m('li', // Search Input
                         {
                             class: 'search-wrapper',
-                            style: { padding: '0 16px', position: 'relative' },
                         }, [
                             m('input', {
                                 type: 'text',
@@ -6156,29 +6377,21 @@ const SearchSelect = () => {
                                     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
@@ -6187,35 +6400,27 @@ const SearchSelect = () => {
                                 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(),
-                        ]))),
+                        })),
                     ]),
             ]);
         },
@@ -8335,6 +8540,7 @@ exports.MaterialIcon = MaterialIcon;
 exports.ModalPanel = ModalPanel;
 exports.NumberInput = NumberInput;
 exports.Options = Options;
+exports.OptionsList = OptionsList;
 exports.Pagination = Pagination;
 exports.PaginationControls = PaginationControls;
 exports.Parallax = Parallax;