mithril-materialized 3.5.9 → 3.6.0

package/dist/index.umd.js

@@ -66,6 +66,28 @@
     };
     /** 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'
      *
@@ -1413,19 +1435,18 @@
                             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),
                 ]);
             },
         };
@@ -1448,7 +1469,7 @@
                 });
             },
             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
@@ -1470,12 +1491,22 @@
                         }
                     }
                 };
+                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;
             },
         };
@@ -1579,7 +1610,7 @@
         };
     };
 
-    const defaultI18n$2 = {
+    const defaultI18n$3 = {
         cancel: 'Cancel',
         clear: 'Clear',
         done: 'Ok',
@@ -1687,9 +1718,9 @@
             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) => {
@@ -2140,11 +2171,11 @@
                                 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' }),
@@ -2206,11 +2237,11 @@
                                 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' }),
@@ -3223,19 +3254,29 @@
                                 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) => {
@@ -4524,7 +4565,7 @@
             // 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;
                 },
@@ -4636,7 +4677,7 @@
                                 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');
@@ -4776,7 +4817,7 @@
 
     /**
      * 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 = {
@@ -4792,21 +4833,11 @@
             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;
@@ -4827,36 +4858,18 @@
                 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);
@@ -4891,7 +4904,7 @@
             setTimeout(() => {
                 if (attrs.onOpenEnd)
                     attrs.onOpenEnd();
-            }, attrs.inDuration || 275);
+            }, inDuration);
         };
         const closeBox = (attrs) => {
             if (!state.isOpen || !state.originalImage || !state.overlay || !state.overlayImage)
@@ -4948,8 +4961,14 @@
             },
             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);
                     } }));
@@ -5279,6 +5298,11 @@
         };
     };
 
+    const defaultI18n$2 = {
+        cancel: 'Cancel',
+        clear: 'Clear',
+        done: 'Ok',
+    };
     const defaultOptions = {
         dialRadius: 135,
         outerRadius: 105,
@@ -5289,11 +5313,7 @@
         defaultTime: 'now',
         fromNow: 0,
         showClearBtn: false,
-        i18n: {
-            cancel: 'Cancel',
-            clear: 'Clear',
-            done: 'Ok',
-        },
+        i18n: defaultI18n$2,
         autoClose: false,
         twelveHour: true,
         vibrate: true,
@@ -5443,7 +5463,7 @@
             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);
@@ -5551,7 +5571,7 @@
             }
             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);
@@ -5685,7 +5705,7 @@
         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', [
@@ -5697,7 +5717,7 @@
                                             oncreate: (vnode) => {
                                                 state.spanHours = vnode.dom;
                                             },
-                                        }, state.hours.toString()),
+                                        }, addLeadingZero(state.hours)),
                                         ':',
                                         m('span.timepicker-span-minutes', {
                                             class: state.currentView === 'minutes' ? 'text-primary' : '',
@@ -5777,18 +5797,18 @@
                                         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),
                                     ]),
                                 ]),
                             ]),
@@ -5805,7 +5825,6 @@
             }
         };
         const renderPickerToPortal = (attrs) => {
-            const { showClearBtn = false, clearLabel = 'Clear', closeLabel = 'Cancel' } = attrs;
             const pickerModal = m('.timepicker-modal-wrapper', {
                 style: {
                     position: 'fixed',
@@ -5848,10 +5867,8 @@
                     },
                 }, [
                     m(TimepickerModal, {
-                        showClearBtn,
-                        clearLabel,
-                        closeLabel,
-                        doneLabel: 'OK',
+                        i18n: options.i18n,
+                        showClearBtn: options.showClearBtn,
                     }),
                 ]),
             ]);
@@ -5911,7 +5928,7 @@
                 }
             },
             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) => {
@@ -6357,7 +6374,7 @@
             // 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: () => {
@@ -6434,7 +6451,7 @@
             // 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;
                 },
@@ -6503,7 +6520,8 @@
                     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);
@@ -6548,7 +6566,7 @@
                                 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',
@@ -6798,7 +6816,7 @@
         ]),
     };
     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', {
@@ -6815,11 +6833,12 @@
                     }
                 },
             }, 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),
             ]));
         },
@@ -6837,6 +6856,7 @@
             dropdownRef: null,
             focusedIndex: -1,
             internalSelectedIds: [],
+            createdOptions: [],
         };
         const isControlled = (attrs) => attrs.checkedId !== undefined && typeof attrs.onchange === 'function';
         const componentId = uniqueId();
@@ -6879,7 +6899,10 @@
                             // 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':
@@ -6890,11 +6913,22 @@
             }
             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
@@ -6903,9 +6937,29 @@
                         : [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;
@@ -6967,21 +7021,32 @@
                             : [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', {
@@ -7054,7 +7119,7 @@
                             onremove: () => {
                                 state.dropdownRef = null;
                             },
-                            style: getDropdownStyles(state.inputRef),
+                            style: Object.assign(Object.assign({}, getDropdownStyles(state.inputRef)), (maxHeight ? { maxHeight } : {})),
                         }, [
                             m('li', // Search Input
                             {
@@ -7074,41 +7139,65 @@
                                         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,
@@ -7118,6 +7207,7 @@
                                 onMouseOver: (idx) => {
                                     state.focusedIndex = idx;
                                 },
+                                showCheckbox: maxSelectedOptions !== 1,
                             })),
                         ]),
                 ]);
@@ -9817,6 +9907,7 @@
     exports.range = range;
     exports.releasePortalContainer = releasePortalContainer;
     exports.renderToPortal = renderToPortal;
+    exports.sortOptions = sortOptions;
     exports.toast = toast;
     exports.uniqueId = uniqueId;
     exports.uuid4 = uuid4;