mithril-materialized 3.5.10 → 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'
      *
@@ -4543,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;
                 },
@@ -4655,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');
@@ -6429,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;
                 },
@@ -6498,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);
@@ -6543,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',
@@ -6793,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', {
@@ -6810,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),
             ]));
         },
@@ -6832,6 +6856,7 @@
             dropdownRef: null,
             focusedIndex: -1,
             internalSelectedIds: [],
+            createdOptions: [],
         };
         const isControlled = (attrs) => attrs.checkedId !== undefined && typeof attrs.onchange === 'function';
         const componentId = uniqueId();
@@ -6874,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':
@@ -6885,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
@@ -6898,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;
@@ -6962,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', {
@@ -7049,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
                             {
@@ -7069,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,
@@ -7113,6 +7207,7 @@
                                 onMouseOver: (idx) => {
                                     state.focusedIndex = idx;
                                 },
+                                showCheckbox: maxSelectedOptions !== 1,
                             })),
                         ]),
                 ]);
@@ -9812,6 +9907,7 @@
     exports.range = range;
     exports.releasePortalContainer = releasePortalContainer;
     exports.renderToPortal = renderToPortal;
+    exports.sortOptions = sortOptions;
     exports.toast = toast;
     exports.uniqueId = uniqueId;
     exports.uuid4 = uuid4;

package/dist/search-select.d.ts

@@ -6,6 +6,10 @@ export interface SearchSelectI18n {
     noOptionsFound?: string;
     /** Prefix for adding new option */
     addNewPrefix?: string;
+    /** Message template for truncated results. Use {shown} and {total} placeholders */
+    showingXofY?: string;
+    /** Message shown when max selections reached. Use {max} placeholder */
+    maxSelectionsReached?: string;
 }
 export interface SearchSelectAttrs<T extends string | number> extends SelectAttrs<T> {
     /** Callback when user creates a new option: should return new ID */
@@ -14,10 +18,16 @@ export interface SearchSelectAttrs<T extends string | number> extends SelectAttr
     searchPlaceholder?: string;
     /** When no options are left, displays this text, default 'No options found' */
     noOptionsFound?: string;
-    /** Max height of the dropdown menu, default '25rem' */
+    /** Max height of the dropdown menu, default '400px', use 'none' to disable it */
     maxHeight?: string;
     /** Internationalization options */
     i18n?: SearchSelectI18n;
+    /** Maximum number of options to display. When set, limits displayed options to improve performance with large datasets */
+    maxDisplayedOptions?: number;
+    /** Maximum number of options that can be selected. When max=1, checkboxes are hidden and behaves like single select */
+    maxSelectedOptions?: number;
+    /** Sort selected items: 'asc' (alphabetically A-Z), 'desc' (Z-A), 'none' (insertion order), or custom sort function */
+    sortSelected?: 'asc' | 'desc' | 'none' | ((a: InputOption<T>, b: InputOption<T>) => number);
 }
 interface SearchSelectState<T extends string | number> {
     id: string;
@@ -27,6 +37,7 @@ interface SearchSelectState<T extends string | number> {
     dropdownRef: HTMLElement | null;
     focusedIndex: number;
     internalSelectedIds: T[];
+    createdOptions: InputOption<T>[];
 }
 /**
  * Mithril Factory Component for Multi-Select Dropdown with search

package/dist/select.d.ts

@@ -45,6 +45,10 @@ export interface SelectAttrs<T extends string | number> extends Attributes {
     required?: boolean;
     /** Enable the clear icon */
     showClearButton?: boolean;
+    /** Max height of the dropdown menu, default '400px' */
+    maxHeight?: string;
+    /** Sort selected items: 'asc' (alphabetically A-Z), 'desc' (Z-A), 'none' (insertion order), or custom sort function */
+    sortSelected?: 'asc' | 'desc' | 'none' | ((a: InputOption<T>, b: InputOption<T>) => number);
 }
 /** Select component */
 export declare const Select: <T extends string | number>() => Component<SelectAttrs<T>>;

package/dist/utils.d.ts

@@ -14,6 +14,25 @@ export declare const uniqueId: () => string;
 export declare const uuid4: () => string;
 /** Check if a string or number is numeric. @see https://stackoverflow.com/a/9716488/319711 */
 export declare const isNumeric: (n: string | number) => boolean;
+/**
+ * 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)
+ */
+export declare const sortOptions: <T extends string | number>(options: {
+    id: T;
+    label?: string;
+}[], sortConfig?: "asc" | "desc" | "none" | ((a: {
+    id: T;
+    label?: string;
+}, b: {
+    id: T;
+    label?: string;
+}) => number)) => {
+    id: T;
+    label?: string;
+}[];
 /**
  * Pad left, default width 2 with a '0'
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mithril-materialized",
-  "version": "3.5.10",
+  "version": "3.6.0",
   "description": "A materialize library for mithril.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/sass/components/_collapsible.scss

@@ -56,7 +56,6 @@
   .collapsible-header-text,
   .collapsible-header-content {
     flex: 1;
-    display: flex;
     align-items: center;
     gap: 1rem;
   }

package/sass/components/forms/_select.scss

@@ -145,6 +145,10 @@ body.keyboard-focused {
 }
 
 .select-dropdown.dropdown-content {
+  // Set a reasonable default max-height to prevent overly tall dropdowns
+  max-height: 400px;
+  overflow-y: auto;
+
   li {
     &:hover {
       background-color: var(--mm-dropdown-hover, variables.$select-option-hover);
@@ -199,7 +203,7 @@ body.keyboard-focused {
   .dropdown-content li.active {
     background-color: #444 !important;
   }
-  
+
   .chip {
     background-color: #424242 !important;
     color: var(--mm-text-secondary) !important;
@@ -214,7 +218,7 @@ body.keyboard-focused {
     .dropdown-content li.active {
       background-color: #444 !important;
     }
-    
+
     .chip {
       background-color: #424242 !important;
       color: var(--mm-text-secondary) !important;
@@ -242,11 +246,11 @@ body.keyboard-focused {
   border-bottom: 1px solid var(--mm-input-border, #9e9e9e);
   background-color: transparent;
   color: var(--mm-text-primary, inherit);
-  
+
   &:focus {
     border-bottom-color: var(--mm-primary-color, #2196F3);
   }
-  
+
   &::placeholder {
     color: var(--mm-text-hint, #9e9e9e);
   }
@@ -259,7 +263,7 @@ body.keyboard-focused {
   font-style: italic;
   text-align: center;
   border-bottom: none;
-  
+
   &:hover {
     background-color: transparent;
     cursor: default;
@@ -276,7 +280,7 @@ body.keyboard-focused {
   margin: 0;
   // Ensure it inherits the same padding as regular dropdown items
   min-height: var(--mm-dropdown-item-height, 50px);
-  
+
   input[type="checkbox"] {
     margin-right: 8px;
     position: relative;
@@ -287,11 +291,11 @@ body.keyboard-focused {
     border: 2px solid var(--mm-border-color, #9e9e9e);
     border-radius: 2px;
     background-color: transparent;
-    
+
     &:checked {
       background-color: var(--mm-primary-color, #2196F3);
       border-color: var(--mm-primary-color, #2196F3);
-      
+
       &:after {
         content: '✓';
         color: white;
@@ -301,13 +305,13 @@ body.keyboard-focused {
         left: 2px;
       }
     }
-    
+
     &:focus {
       outline: 2px solid var(--mm-primary-color, #2196F3);
       outline-offset: 2px;
     }
   }
-  
+
   span {
     flex: 1;
   }
@@ -323,32 +327,32 @@ body.keyboard-focused {
     position: relative;
     min-height: var(--mm-input-height, 3rem);
     padding: 4px 0;
-    
+
     .chip {
       margin: 2px 4px 2px 0;
       // Let existing chip system handle background colors for theme compatibility
-      
+
       .material-icons.close {
         cursor: pointer;
         font-size: 16px;
         margin-left: 4px;
-        
+
         &:hover {
           color: var(--mm-error-color, #f44336);
         }
       }
     }
-    
+
     .placeholder {
       color: var(--mm-text-hint, #9e9e9e);
       flex-grow: 1;
       padding: 8px 0;
     }
-    
+
     .spacer {
       flex-grow: 1;
     }
-    
+
     .caret {
       margin-left: auto;
       cursor: pointer;