mithril-materialized 3.5.9 → 3.6.0

package/dist/index.js

@@ -64,6 +64,28 @@ const uuid4 = () => {
 };
 /** Check if a string or number is numeric. @see https://stackoverflow.com/a/9716488/319711 */
 const isNumeric = (n) => !isNaN(parseFloat(n)) && isFinite(n);
+/**
+ * Sort options array based on sorting configuration
+ * @param options - Array of options to sort
+ * @param sortConfig - Sort configuration: 'asc', 'desc', 'none', or custom comparator function
+ * @returns Sorted array (or original if 'none' or undefined)
+ */
+const sortOptions = (options, sortConfig) => {
+    if (!sortConfig || sortConfig === 'none') {
+        return options;
+    }
+    const sorted = [...options]; // Create a copy to avoid mutating original
+    if (typeof sortConfig === 'function') {
+        return sorted.sort(sortConfig);
+    }
+    // Sort by label, fallback to id if no label
+    return sorted.sort((a, b) => {
+        const aLabel = (a.label || a.id.toString()).toLowerCase();
+        const bLabel = (b.label || b.id.toString()).toLowerCase();
+        const comparison = aLabel.localeCompare(bLabel);
+        return sortConfig === 'asc' ? comparison : -comparison;
+    });
+};
 /**
  * Pad left, default width 2 with a '0'
  *
@@ -1411,19 +1433,18 @@ const CollapsibleItem = () => {
                         onclick: onToggle,
                     }, [
                         iconName ? m('i.material-icons', iconName) : undefined,
-                        header ? (typeof header === 'string' ? m('span', header) : header) : undefined,
+                        header
+                            ? typeof header === 'string'
+                                ? m('span.collapsible-header-text', header)
+                                : m('.collapsible-header-content', header)
+                            : undefined,
                     ])
                     : undefined,
                 m('.collapsible-body', {
                     style: {
                         display: isActive ? 'block' : 'none',
-                        transition: 'display 0.3s ease',
                     },
-                }, [
-                    m('.collapsible-body-content', {
-                        style: { padding: '2rem' },
-                    }, body ? (typeof body === 'string' ? m('div', { innerHTML: body }) : body) : undefined),
-                ]),
+                }, body ? (typeof body === 'string' ? m('div', { innerHTML: body }) : body) : undefined),
             ]);
         },
     };
@@ -1446,7 +1467,7 @@ const Collapsible = () => {
             });
         },
         view: ({ attrs }) => {
-            const { items, accordion = true, class: c, className, style, id } = attrs;
+            const { items, header, accordion = true, class: c, className, style, id } = attrs;
             const toggleItem = (index) => {
                 if (accordion) {
                     // Accordion mode: only one item can be active
@@ -1468,12 +1489,22 @@ const Collapsible = () => {
                     }
                 }
             };
+            const collapsibleItems = items.map((item, index) => m(CollapsibleItem, Object.assign(Object.assign({}, item), { key: index, isActive: state.activeItems.has(index), onToggle: () => toggleItem(index) })));
             return items && items.length > 0
-                ? m('ul.collapsible', {
-                    class: c || className,
-                    style: Object.assign({ border: '1px solid #ddd', borderRadius: '2px', margin: '0.5rem 0 1rem 0' }, style),
-                    id,
-                }, items.map((item, index) => m(CollapsibleItem, Object.assign(Object.assign({}, item), { key: index, isActive: state.activeItems.has(index), onToggle: () => toggleItem(index) }))))
+                ? header
+                    ? m('ul.collapsible.with-header', {
+                        class: c || className,
+                        style,
+                        id,
+                    }, [
+                        m('li.collapsible-main-header', m('h4', typeof header === 'string' ? header : header)),
+                        collapsibleItems,
+                    ])
+                    : m('ul.collapsible', {
+                        class: c || className,
+                        style,
+                        id,
+                    }, collapsibleItems)
                 : undefined;
         },
     };
@@ -1577,7 +1608,7 @@ const Collection = () => {
     };
 };
 
-const defaultI18n$2 = {
+const defaultI18n$3 = {
     cancel: 'Cancel',
     clear: 'Clear',
     done: 'Ok',
@@ -1685,9 +1716,9 @@ const DatePicker = () => {
         else if (attrs.displayFormat) {
             finalFormat = attrs.displayFormat;
         }
-        const merged = Object.assign({ autoClose: false, format: finalFormat, parse: null, defaultDate: null, setDefaultDate: false, disableWeekends: false, disableDayFn: null, firstDay: 0, minDate: null, maxDate: null, yearRange, showClearBtn: false, showWeekNumbers: false, weekNumbering: 'iso', i18n: defaultI18n$2, onSelect: null, onOpen: null, onClose: null }, attrs);
+        const merged = Object.assign({ autoClose: false, format: finalFormat, parse: null, defaultDate: null, setDefaultDate: false, disableWeekends: false, disableDayFn: null, firstDay: 0, minDate: null, maxDate: null, yearRange, showClearBtn: false, showWeekNumbers: false, weekNumbering: 'iso', i18n: defaultI18n$3, onSelect: null, onOpen: null, onClose: null }, attrs);
         // Merge i18n properly
-        merged.i18n = Object.assign(Object.assign({}, defaultI18n$2), attrs.i18n);
+        merged.i18n = Object.assign(Object.assign({}, defaultI18n$3), attrs.i18n);
         return merged;
     };
     const toString = (date, format) => {
@@ -2138,11 +2169,11 @@ const DatePicker = () => {
                             prevMonth();
                         },
                     }, m('svg', {
-                        fill: '#000000',
                         height: '24',
                         viewBox: '0 0 24 24',
                         width: '24',
                         xmlns: 'http://www.w3.org/2000/svg',
+                        style: 'fill: var(--mm-text-primary, rgba(0, 0, 0, 0.87));',
                     }, [
                         m('path', { d: 'M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z' }),
                         m('path', { d: 'M0-.5h24v24H0z', fill: 'none' }),
@@ -2204,11 +2235,11 @@ const DatePicker = () => {
                             nextMonth();
                         },
                     }, m('svg', {
-                        fill: '#000000',
                         height: '24',
                         viewBox: '0 0 24 24',
                         width: '24',
                         xmlns: 'http://www.w3.org/2000/svg',
+                        style: 'fill: var(--mm-text-primary, rgba(0, 0, 0, 0.87));',
                     }, [
                         m('path', { d: 'M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z' }),
                         m('path', { d: 'M0-.25h24v24H0z', fill: 'none' }),
@@ -3221,19 +3252,29 @@ const TextArea = () => {
                             if (!controlled && attrs.defaultValue !== undefined) {
                                 textarea.value = String(attrs.defaultValue);
                             }
-                            // Height will be calculated by hidden div
                             // Update character count state for counter component
                             if (maxLength) {
                                 state.currentLength = textarea.value.length;
                             }
+                            // Calculate initial height after DOM is fully ready
+                            // Use requestAnimationFrame to ensure layout is complete
+                            if (state.hiddenDiv) {
+                                requestAnimationFrame(() => {
+                                    if (state.hiddenDiv) {
+                                        updateHeight(textarea, state.hiddenDiv);
+                                        m.redraw();
+                                    }
+                                });
+                            }
                         }, onupdate: ({ dom }) => {
                             const textarea = dom;
-                            if (state.height)
-                                textarea.style.height = state.height;
-                            // Trigger height recalculation when value changes programmatically
+                            // Recalculate and apply height
                             if (state.hiddenDiv) {
                                 updateHeight(textarea, state.hiddenDiv);
                             }
+                            if (state.height) {
+                                textarea.style.height = state.height;
+                            }
                         }, onfocus: () => {
                             state.active = true;
                         }, oninput: (e) => {
@@ -4522,7 +4563,7 @@ const Dropdown = () => {
         // Create dropdown with proper positioning
         const dropdownVnode = m('ul.dropdown-content.select-dropdown', {
             tabindex: 0,
-            style: getPortalStyles(state.inputRef),
+            style: Object.assign(Object.assign({}, getPortalStyles(state.inputRef)), (attrs.maxHeight ? { maxHeight: attrs.maxHeight } : {})),
             oncreate: ({ dom }) => {
                 state.dropdownRef = dom;
             },
@@ -4634,7 +4675,7 @@ const Dropdown = () => {
                             onremove: () => {
                                 state.dropdownRef = null;
                             },
-                            style: getDropdownStyles(state.inputRef, true, items, true),
+                            style: Object.assign(Object.assign({}, getDropdownStyles(state.inputRef, true, items, true)), (attrs.maxHeight ? { maxHeight: attrs.maxHeight } : {})),
                         }, items.map((item) => {
                             if (item.divider) {
                                 return m('li.divider');
@@ -4774,7 +4815,7 @@ const FloatingActionButton = () => {
 
 /**
  * Pure TypeScript MaterialBox - creates an image lightbox that fills the screen when clicked
- * No MaterializeCSS dependencies
+ * Uses CSS classes from _materialbox.scss
  */
 const MaterialBox = () => {
     const state = {
@@ -4790,21 +4831,11 @@ const MaterialBox = () => {
         state.originalImage = img;
         if (attrs.onOpenStart)
             attrs.onOpenStart();
+        const inDuration = attrs.inDuration || 275;
         // Create overlay
         const overlay = document.createElement('div');
         overlay.className = 'materialbox-overlay';
-        overlay.style.cssText = `
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-color: rgba(0, 0, 0, 0.85);
-      z-index: 1000;
-      opacity: 0;
-      transition: opacity ${attrs.inDuration || 275}ms ease;
-      cursor: zoom-out;
-    `;
+        overlay.style.transition = `opacity ${inDuration}ms ease`;
         // Create enlarged image
         const enlargedImg = document.createElement('img');
         enlargedImg.src = img.src;
@@ -4825,36 +4856,18 @@ const MaterialBox = () => {
             finalWidth = maxHeight * aspectRatio;
         }
         // Set initial position and size (same as original image)
-        enlargedImg.style.cssText = `
-      position: fixed;
-      top: ${imgRect.top}px;
-      left: ${imgRect.left}px;
-      width: ${imgRect.width}px;
-      height: ${imgRect.height}px;
-      transition: all ${attrs.inDuration || 275}ms ease;
-      cursor: zoom-out;
-      max-width: none;
-      z-index: 1001;
-    `;
+        enlargedImg.style.top = `${imgRect.top}px`;
+        enlargedImg.style.left = `${imgRect.left}px`;
+        enlargedImg.style.width = `${imgRect.width}px`;
+        enlargedImg.style.height = `${imgRect.height}px`;
+        enlargedImg.style.transition = `all ${inDuration}ms ease`;
         // Add caption if provided
         let caption = null;
         if (attrs.caption) {
             caption = document.createElement('div');
             caption.className = 'materialbox-caption';
             caption.textContent = attrs.caption;
-            caption.style.cssText = `
-        position: fixed;
-        bottom: 20px;
-        left: 50%;
-        transform: translateX(-50%);
-        color: white;
-        font-size: 16px;
-        text-align: center;
-        opacity: 0;
-        transition: opacity ${attrs.inDuration || 275}ms ease ${attrs.inDuration || 275}ms;
-        z-index: 1002;
-        pointer-events: none;
-      `;
+            caption.style.transition = `opacity ${inDuration}ms ease ${inDuration}ms`;
         }
         // Add to DOM
         document.body.appendChild(overlay);
@@ -4889,7 +4902,7 @@ const MaterialBox = () => {
         setTimeout(() => {
             if (attrs.onOpenEnd)
                 attrs.onOpenEnd();
-        }, attrs.inDuration || 275);
+        }, inDuration);
     };
     const closeBox = (attrs) => {
         if (!state.isOpen || !state.originalImage || !state.overlay || !state.overlayImage)
@@ -4946,8 +4959,14 @@ const MaterialBox = () => {
         },
         view: ({ attrs }) => {
             const { src, alt, width, height, caption, className, style } = attrs, otherAttrs = __rest(attrs, ["src", "alt", "width", "height", "caption", "className", "style"]);
+            // Build style attribute - handle both string and object styles
+            let imgStyle = style || {};
+            if (typeof style !== 'string') {
+                // If style is an object or undefined, add default styles as object
+                imgStyle = Object.assign({ cursor: 'zoom-in', transition: 'opacity 200ms ease' }, (style || {}));
+            }
             return m('img.materialboxed', Object.assign(Object.assign({}, otherAttrs), { src, alt: alt || '', width,
-                height, className: ['materialboxed', className].filter(Boolean).join(' ') || undefined, style: Object.assign({ cursor: 'zoom-in', transition: 'opacity 200ms ease' }, style), onclick: (e) => {
+                height, className: ['materialboxed', className].filter(Boolean).join(' ') || undefined, style: imgStyle, onclick: (e) => {
                     e.preventDefault();
                     openBox(e.target, attrs);
                 } }));
@@ -5277,6 +5296,11 @@ const Parallax = () => {
     };
 };
 
+const defaultI18n$2 = {
+    cancel: 'Cancel',
+    clear: 'Clear',
+    done: 'Ok',
+};
 const defaultOptions = {
     dialRadius: 135,
     outerRadius: 105,
@@ -5287,11 +5311,7 @@ const defaultOptions = {
     defaultTime: 'now',
     fromNow: 0,
     showClearBtn: false,
-    i18n: {
-        cancel: 'Cancel',
-        clear: 'Clear',
-        done: 'Ok',
-    },
+    i18n: defaultI18n$2,
     autoClose: false,
     twelveHour: true,
     vibrate: true,
@@ -5441,7 +5461,7 @@ const TimePicker = () => {
         state.hours = hours;
         state.minutes = minutes;
         if (state.spanHours) {
-            state.spanHours.innerHTML = state.hours.toString();
+            state.spanHours.innerHTML = addLeadingZero(state.hours);
         }
         if (state.spanMinutes) {
             state.spanMinutes.innerHTML = addLeadingZero(state.minutes);
@@ -5549,7 +5569,7 @@ const TimePicker = () => {
         }
         state[state.currentView] = value;
         if (isHours && state.spanHours) {
-            state.spanHours.innerHTML = value.toString();
+            state.spanHours.innerHTML = addLeadingZero(value);
         }
         else if (!isHours && state.spanMinutes) {
             state.spanMinutes.innerHTML = addLeadingZero(value);
@@ -5683,7 +5703,7 @@ const TimePicker = () => {
     const TimepickerModal = () => {
         return {
             view: ({ attrs }) => {
-                const { showClearBtn, clearLabel, closeLabel, doneLabel } = attrs;
+                const { i18n, showClearBtn } = attrs;
                 return [
                     m('.modal-content.timepicker-container', [
                         m('.timepicker-digital-display', [
@@ -5695,7 +5715,7 @@ const TimePicker = () => {
                                         oncreate: (vnode) => {
                                             state.spanHours = vnode.dom;
                                         },
-                                    }, state.hours.toString()),
+                                    }, addLeadingZero(state.hours)),
                                     ':',
                                     m('span.timepicker-span-minutes', {
                                         class: state.currentView === 'minutes' ? 'text-primary' : '',
@@ -5775,18 +5795,18 @@ const TimePicker = () => {
                                     tabindex: options.twelveHour ? '3' : '1',
                                     style: showClearBtn ? '' : 'visibility: hidden;',
                                     onclick: () => clear(),
-                                }, clearLabel),
+                                }, i18n.clear),
                                 m('.confirmation-btns', [
                                     m('button.btn-flat.timepicker-close.waves-effect', {
                                         type: 'button',
                                         tabindex: options.twelveHour ? '3' : '1',
                                         onclick: () => close(),
-                                    }, closeLabel),
+                                    }, i18n.cancel),
                                     m('button.btn-flat.timepicker-close.waves-effect', {
                                         type: 'button',
                                         tabindex: options.twelveHour ? '3' : '1',
                                         onclick: () => done(),
-                                    }, doneLabel),
+                                    }, i18n.done),
                                 ]),
                             ]),
                         ]),
@@ -5803,7 +5823,6 @@ const TimePicker = () => {
         }
     };
     const renderPickerToPortal = (attrs) => {
-        const { showClearBtn = false, clearLabel = 'Clear', closeLabel = 'Cancel' } = attrs;
         const pickerModal = m('.timepicker-modal-wrapper', {
             style: {
                 position: 'fixed',
@@ -5846,10 +5865,8 @@ const TimePicker = () => {
                 },
             }, [
                 m(TimepickerModal, {
-                    showClearBtn,
-                    clearLabel,
-                    closeLabel,
-                    doneLabel: 'OK',
+                    i18n: options.i18n,
+                    showClearBtn: options.showClearBtn,
                 }),
             ]),
         ]);
@@ -5909,7 +5926,7 @@ const TimePicker = () => {
             }
         },
         view: ({ attrs }) => {
-            const { id = state.id, label, placeholder, disabled, readonly, required, iconName, helperText, onchange, oninput, useModal = true, showClearBtn = false, clearLabel = 'Clear', closeLabel = 'Cancel', twelveHour, className: cn1, class: cn2, } = attrs;
+            const { id = state.id, label, placeholder, disabled, readonly, required, iconName, helperText, onchange, oninput, useModal = true, twelveHour, className: cn1, class: cn2, } = attrs;
             const className = cn1 || cn2 || 'col s12';
             // Format time value for display
             const formatTime = (hours, minutes, use12Hour) => {
@@ -6355,7 +6372,7 @@ const Select = () => {
         // Render ungrouped options first
         attrs.options
             .filter((option) => !option.group)
-            .map((option) => m('li', Object.assign({ class: option.disabled ? 'disabled' : state.focusedIndex === attrs.options.indexOf(option) ? 'focused' : '' }, (option.disabled
+            .map((option) => m('li', Object.assign({ class: `${option.disabled ? 'disabled' : ''}${isSelected(option.id, selectedIds) ? ' selected' : ''}${state.focusedIndex === attrs.options.indexOf(option) ? ' focused' : ''}` }, (option.disabled
             ? {}
             : {
                 onclick: () => {
@@ -6432,7 +6449,7 @@ const Select = () => {
         // Create dropdown with proper positioning
         const dropdownVnode = m('ul.dropdown-content.select-dropdown', {
             tabindex: 0,
-            style: getPortalStyles(state.inputRef),
+            style: Object.assign(Object.assign({}, getPortalStyles(state.inputRef)), (attrs.maxHeight ? { maxHeight: attrs.maxHeight } : {})),
             oncreate: ({ dom }) => {
                 state.dropdownRef = dom;
             },
@@ -6501,7 +6518,8 @@ const Select = () => {
                 selectedIds = state.internalSelectedIds;
             }
             const finalClassName = newRow ? `${className} clear` : className;
-            const selectedOptions = options.filter((opt) => isSelected(opt.id, selectedIds));
+            const selectedOptionsUnsorted = options.filter((opt) => isSelected(opt.id, selectedIds));
+            const selectedOptions = sortOptions(selectedOptionsUnsorted, attrs.sortSelected);
             // Update portal dropdown when inside modal
             if (state.isInsideModal) {
                 updatePortalDropdown(attrs, selectedIds, multiple, placeholder);
@@ -6546,7 +6564,7 @@ const Select = () => {
                             onremove: () => {
                                 state.dropdownRef = null;
                             },
-                            style: getDropdownStyles(state.inputRef, true, options),
+                            style: Object.assign(Object.assign({}, getDropdownStyles(state.inputRef, true, options)), (attrs.maxHeight ? { maxHeight: attrs.maxHeight } : {})),
                         }, renderDropdownContent(attrs, selectedIds, multiple, placeholder)),
                     m(MaterialIcon, {
                         name: 'caret',
@@ -6796,7 +6814,7 @@ const SelectedChip = {
     ]),
 };
 const DropdownOption = {
-    view: ({ attrs: { option, index, selectedIds, isFocused, onToggle, onMouseOver } }) => {
+    view: ({ attrs: { option, index, selectedIds, isFocused, onToggle, onMouseOver, showCheckbox } }) => {
         const checkboxId = `search-select-option-${option.id}`;
         const optionLabel = option.label || option.id.toString();
         return m('li', {
@@ -6813,11 +6831,12 @@ const DropdownOption = {
                 }
             },
         }, m('label', { for: checkboxId, class: 'search-select-option-label' }, [
-            m('input', {
-                type: 'checkbox',
-                id: checkboxId,
-                checked: selectedIds.includes(option.id),
-            }),
+            showCheckbox &&
+                m('input', {
+                    type: 'checkbox',
+                    id: checkboxId,
+                    checked: selectedIds.includes(option.id),
+                }),
             m('span', optionLabel),
         ]));
     },
@@ -6835,6 +6854,7 @@ const SearchSelect = () => {
         dropdownRef: null,
         focusedIndex: -1,
         internalSelectedIds: [],
+        createdOptions: [],
     };
     const isControlled = (attrs) => attrs.checkedId !== undefined && typeof attrs.onchange === 'function';
     const componentId = uniqueId();
@@ -6877,7 +6897,10 @@ const SearchSelect = () => {
                         // Handle add new option
                         return 'addNew';
                     }
-                    else if (state.focusedIndex < filteredOptions.length) ;
+                    else if (state.focusedIndex < filteredOptions.length) {
+                        // This will be handled in the view method where attrs are available
+                        return 'selectOption';
+                    }
                 }
                 break;
             case 'Escape':
@@ -6888,11 +6911,22 @@ const SearchSelect = () => {
         }
         return null;
     };
+    // Create new option and add to state
+    const createAndSelectOption = async (attrs) => {
+        if (!attrs.oncreateNewOption || !state.searchTerm)
+            return;
+        const newOption = await attrs.oncreateNewOption(state.searchTerm);
+        // Store the created option internally
+        state.createdOptions.push(newOption);
+        // Select the new option
+        toggleOption(newOption, attrs);
+    };
     // Toggle option selection
     const toggleOption = (option, attrs) => {
         if (option.disabled)
             return;
         const controlled = isControlled(attrs);
+        const { maxSelectedOptions } = attrs;
         // Get current selected IDs from props or internal state
         const currentSelectedIds = controlled
             ? attrs.checkedId !== undefined
@@ -6901,9 +6935,29 @@ const SearchSelect = () => {
                     : [attrs.checkedId]
                 : []
             : state.internalSelectedIds;
-        const newIds = currentSelectedIds.includes(option.id)
-            ? currentSelectedIds.filter((id) => id !== option.id)
-            : [...currentSelectedIds, option.id];
+        const isSelected = currentSelectedIds.includes(option.id);
+        let newIds;
+        if (isSelected) {
+            // Remove if already selected
+            newIds = currentSelectedIds.filter((id) => id !== option.id);
+        }
+        else {
+            // Check if we've reached the max selection limit
+            if (maxSelectedOptions && currentSelectedIds.length >= maxSelectedOptions) {
+                // If max=1, replace the selection
+                if (maxSelectedOptions === 1) {
+                    newIds = [option.id];
+                }
+                else {
+                    // Otherwise, don't add more
+                    return;
+                }
+            }
+            else {
+                // Add to selection
+                newIds = [...currentSelectedIds, option.id];
+            }
+        }
         // Update internal state for uncontrolled mode
         if (!controlled) {
             state.internalSelectedIds = newIds;
@@ -6965,21 +7019,32 @@ const SearchSelect = () => {
                         : [attrs.checkedId]
                     : []
                 : state.internalSelectedIds;
-            const { options = [], oncreateNewOption, className, placeholder, searchPlaceholder = 'Search options...', noOptionsFound = 'No options found', label, i18n = {}, } = attrs;
+            const { options = [], oncreateNewOption, className, placeholder, searchPlaceholder = 'Search options...', noOptionsFound = 'No options found', label, i18n = {}, maxDisplayedOptions, maxSelectedOptions, maxHeight, } = attrs;
             // Use i18n values if provided, otherwise use defaults
             const texts = {
                 noOptionsFound: i18n.noOptionsFound || noOptionsFound,
                 addNewPrefix: i18n.addNewPrefix || '+',
+                showingXofY: i18n.showingXofY || 'Showing {shown} of {total} options',
+                maxSelectionsReached: i18n.maxSelectionsReached || 'Maximum {max} selections reached',
             };
+            // Check if max selections is reached
+            const isMaxSelectionsReached = maxSelectedOptions && selectedIds.length >= maxSelectedOptions;
+            // Merge provided options with internally created options
+            const allOptions = [...options, ...state.createdOptions];
             // Get selected options for display
-            const selectedOptions = options.filter((opt) => selectedIds.includes(opt.id));
+            const selectedOptionsUnsorted = allOptions.filter((opt) => selectedIds.includes(opt.id));
+            const selectedOptions = sortOptions(selectedOptionsUnsorted, attrs.sortSelected);
             // Safely filter options
-            const filteredOptions = options.filter((option) => (option.label || option.id.toString()).toLowerCase().includes((state.searchTerm || '').toLowerCase()) &&
+            const filteredOptions = allOptions.filter((option) => (option.label || option.id.toString()).toLowerCase().includes((state.searchTerm || '').toLowerCase()) &&
                 !selectedIds.includes(option.id));
+            // Apply display limit if configured
+            const totalFilteredCount = filteredOptions.length;
+            const displayedOptions = maxDisplayedOptions ? filteredOptions.slice(0, maxDisplayedOptions) : filteredOptions;
+            const isTruncated = maxDisplayedOptions && totalFilteredCount > maxDisplayedOptions;
             // Check if we should show the "add new option" element
             const showAddNew = oncreateNewOption &&
                 state.searchTerm &&
-                !filteredOptions.some((o) => (o.label || o.id.toString()).toLowerCase() === state.searchTerm.toLowerCase());
+                !displayedOptions.some((o) => (o.label || o.id.toString()).toLowerCase() === state.searchTerm.toLowerCase());
             // Render the dropdown
             return m('.input-field.multi-select-dropdown', { className }, [
                 m('.chips.chips-initial.chips-container', {
@@ -7052,7 +7117,7 @@ const SearchSelect = () => {
                         onremove: () => {
                             state.dropdownRef = null;
                         },
-                        style: getDropdownStyles(state.inputRef),
+                        style: Object.assign(Object.assign({}, getDropdownStyles(state.inputRef)), (maxHeight ? { maxHeight } : {})),
                     }, [
                         m('li', // Search Input
                         {
@@ -7072,41 +7137,65 @@ const SearchSelect = () => {
                                     state.focusedIndex = -1; // Reset focus when typing
                                 },
                                 onkeydown: async (e) => {
-                                    const result = handleKeyDown(e, filteredOptions, !!showAddNew);
+                                    const result = handleKeyDown(e, displayedOptions, !!showAddNew);
                                     if (result === 'addNew' && oncreateNewOption) {
-                                        const option = await oncreateNewOption(state.searchTerm);
-                                        toggleOption(option, attrs);
+                                        await createAndSelectOption(attrs);
                                     }
-                                    else if (e.key === 'Enter' &&
-                                        state.focusedIndex >= 0 &&
-                                        state.focusedIndex < filteredOptions.length) {
-                                        toggleOption(filteredOptions[state.focusedIndex], attrs);
+                                    else if (result === 'selectOption' && state.focusedIndex < displayedOptions.length) {
+                                        toggleOption(displayedOptions[state.focusedIndex], attrs);
                                     }
                                 },
                                 class: 'search-select-input',
                             }),
                         ]),
                         // No options found message or list of options
-                        ...(filteredOptions.length === 0 && !showAddNew
+                        ...(displayedOptions.length === 0 && !showAddNew
                             ? [m('li.search-select-no-options', texts.noOptionsFound)]
                             : []),
+                        // Truncation message
+                        ...(isTruncated
+                            ? [
+                                m('li.search-select-truncation-info', {
+                                    style: {
+                                        fontStyle: 'italic',
+                                        color: 'var(--mm-text-hint, #9e9e9e)',
+                                        padding: '8px 16px',
+                                        cursor: 'default',
+                                    },
+                                }, texts.showingXofY
+                                    .replace('{shown}', displayedOptions.length.toString())
+                                    .replace('{total}', totalFilteredCount.toString())),
+                            ]
+                            : []),
+                        // Max selections reached message
+                        ...(isMaxSelectionsReached
+                            ? [
+                                m('li.search-select-max-info', {
+                                    style: {
+                                        fontStyle: 'italic',
+                                        color: 'var(--mm-text-hint, #9e9e9e)',
+                                        padding: '8px 16px',
+                                        cursor: 'default',
+                                    },
+                                }, texts.maxSelectionsReached.replace('{max}', maxSelectedOptions.toString())),
+                            ]
+                            : []),
                         // Add new option item
                         ...(showAddNew
                             ? [
                                 m('li', {
                                     onclick: async () => {
-                                        const option = await oncreateNewOption(state.searchTerm);
-                                        toggleOption(option, attrs);
+                                        await createAndSelectOption(attrs);
                                     },
-                                    class: state.focusedIndex === filteredOptions.length ? 'active' : '',
+                                    class: state.focusedIndex === displayedOptions.length ? 'active' : '',
                                     onmouseover: () => {
-                                        state.focusedIndex = filteredOptions.length;
+                                        state.focusedIndex = displayedOptions.length;
                                     },
                                 }, [m('span', `${texts.addNewPrefix} "${state.searchTerm}"`)]),
                             ]
                             : []),
                         // List of filtered options
-                        ...filteredOptions.map((option, index) => m(DropdownOption, {
+                        ...displayedOptions.map((option, index) => m(DropdownOption, {
                             // key: option.id,
                             option,
                             index,
@@ -7116,6 +7205,7 @@ const SearchSelect = () => {
                             onMouseOver: (idx) => {
                                 state.focusedIndex = idx;
                             },
+                            showCheckbox: maxSelectedOptions !== 1,
                         })),
                     ]),
             ]);
@@ -9815,6 +9905,7 @@ exports.padLeft = padLeft;
 exports.range = range;
 exports.releasePortalContainer = releasePortalContainer;
 exports.renderToPortal = renderToPortal;
+exports.sortOptions = sortOptions;
 exports.toast = toast;
 exports.uniqueId = uniqueId;
 exports.uuid4 = uuid4;