mithril-materialized 3.5.10 → 3.6.0

package/dist/components.css

@@ -1313,7 +1313,6 @@ body.keyboard-focused .dropdown-content li:focus {
 .collapsible-header .collapsible-header-text,
 .collapsible-header .collapsible-header-content {
   flex: 1;
-  display: flex;
   align-items: center;
   gap: 1rem;
 }

package/dist/core.css

@@ -3168,6 +3168,10 @@ body.keyboard-focused .select-dropdown.dropdown-content li:focus {
   background-color: var(--mm-dropdown-focus, rgba(0, 0, 0, 0.08));
 }
 
+.select-dropdown.dropdown-content {
+  max-height: 400px;
+  overflow-y: auto;
+}
 .select-dropdown.dropdown-content li:hover {
   background-color: var(--mm-dropdown-hover, rgba(0, 0, 0, 0.08));
 }

package/dist/dropdown.d.ts

@@ -43,6 +43,8 @@ export interface DropdownAttrs<T extends string | number> extends Attributes {
     iconName?: string;
     /** Add a description underneath the input field. */
     helperText?: string;
+    /** Max height of the dropdown menu, default '400px', use 'none' to disable it */
+    maxHeight?: string;
 }
 /** Pure TypeScript Dropdown component - no Materialize dependencies */
 export declare const Dropdown: <T extends string | number>() => Component<DropdownAttrs<T>>;

package/dist/forms.css

@@ -1413,6 +1413,10 @@ body.keyboard-focused .select-dropdown.dropdown-content li:focus {
   background-color: var(--mm-dropdown-focus, rgba(0, 0, 0, 0.08));
 }
 
+.select-dropdown.dropdown-content {
+  max-height: 400px;
+  overflow-y: auto;
+}
 .select-dropdown.dropdown-content li:hover {
   background-color: var(--mm-dropdown-hover, rgba(0, 0, 0, 0.08));
 }

package/dist/index.css

@@ -5580,7 +5580,6 @@ body.keyboard-focused .dropdown-content li:focus {
 .collapsible-header .collapsible-header-text,
 .collapsible-header .collapsible-header-content {
   flex: 1;
-  display: flex;
   align-items: center;
   gap: 1rem;
 }
@@ -6914,6 +6913,10 @@ body.keyboard-focused .select-dropdown.dropdown-content li:focus {
   background-color: var(--mm-dropdown-focus, rgba(0, 0, 0, 0.08));
 }
 
+.select-dropdown.dropdown-content {
+  max-height: 400px;
+  overflow-y: auto;
+}
 .select-dropdown.dropdown-content li:hover {
   background-color: var(--mm-dropdown-hover, rgba(0, 0, 0, 0.08));
 }

package/dist/index.esm.js

@@ -62,6 +62,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'
  *
@@ -4539,7 +4561,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;
             },
@@ -4651,7 +4673,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');
@@ -6425,7 +6447,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;
             },
@@ -6494,7 +6516,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);
@@ -6539,7 +6562,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',
@@ -6789,7 +6812,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', {
@@ -6806,11 +6829,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),
         ]));
     },
@@ -6828,6 +6852,7 @@ const SearchSelect = () => {
         dropdownRef: null,
         focusedIndex: -1,
         internalSelectedIds: [],
+        createdOptions: [],
     };
     const isControlled = (attrs) => attrs.checkedId !== undefined && typeof attrs.onchange === 'function';
     const componentId = uniqueId();
@@ -6870,7 +6895,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':
@@ -6881,11 +6909,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
@@ -6894,9 +6933,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;
@@ -6958,21 +7017,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', {
@@ -7045,7 +7115,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
                         {
@@ -7065,41 +7135,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,
@@ -7109,6 +7203,7 @@ const SearchSelect = () => {
                             onMouseOver: (idx) => {
                                 state.focusedIndex = idx;
                             },
+                            showCheckbox: maxSelectedOptions !== 1,
                         })),
                     ]),
             ]);
@@ -9719,4 +9814,4 @@ const isValidationError = (result) => !isValidationSuccess(result);
 // ============================================================================
 // All types are already exported via individual export declarations above
 
-export { AnchorItem, Autocomplete, Breadcrumb, BreadcrumbManager, Button, ButtonFactory, Carousel, CharacterCounter, Chips, CodeBlock, Collapsible, CollapsibleItem, Collection, CollectionMode, ColorInput, DataTable, DatePicker, DoubleRangeSlider, Dropdown, EmailInput, FileInput, FileUpload, FlatButton, FloatingActionButton, HelperText, Icon, IconButton, ImageList, InputCheckbox, Label, LargeButton, ListItem, Mandatory, Masonry, MaterialBox, MaterialIcon, ModalPanel, NumberInput, Options, OptionsList, Pagination, PaginationControls, Parallax, PasswordInput, Pushpin, PushpinComponent, RadioButton, RadioButtons, RangeInput, Rating, RoundIconButton, SearchSelect, SecondaryContent, Select, Sidenav, SidenavItem, SidenavManager, SingleRangeSlider, SmallButton, Stepper, SubmitButton, Switch, Tabs, TextArea, TextInput, ThemeManager, ThemeSwitcher, ThemeToggle, TimePicker, Timeline, Toast, ToastComponent, Tooltip, TooltipComponent, TreeView, UrlInput, Wizard, clearPortal, createBreadcrumb, getDropdownStyles, getPortalContainer, initPushpins, initTooltips, isNumeric, isValidationError, isValidationSuccess, padLeft, range, releasePortalContainer, renderToPortal, toast, uniqueId, uuid4 };
+export { AnchorItem, Autocomplete, Breadcrumb, BreadcrumbManager, Button, ButtonFactory, Carousel, CharacterCounter, Chips, CodeBlock, Collapsible, CollapsibleItem, Collection, CollectionMode, ColorInput, DataTable, DatePicker, DoubleRangeSlider, Dropdown, EmailInput, FileInput, FileUpload, FlatButton, FloatingActionButton, HelperText, Icon, IconButton, ImageList, InputCheckbox, Label, LargeButton, ListItem, Mandatory, Masonry, MaterialBox, MaterialIcon, ModalPanel, NumberInput, Options, OptionsList, Pagination, PaginationControls, Parallax, PasswordInput, Pushpin, PushpinComponent, RadioButton, RadioButtons, RangeInput, Rating, RoundIconButton, SearchSelect, SecondaryContent, Select, Sidenav, SidenavItem, SidenavManager, SingleRangeSlider, SmallButton, Stepper, SubmitButton, Switch, Tabs, TextArea, TextInput, ThemeManager, ThemeSwitcher, ThemeToggle, TimePicker, Timeline, Toast, ToastComponent, Tooltip, TooltipComponent, TreeView, UrlInput, Wizard, clearPortal, createBreadcrumb, getDropdownStyles, getPortalContainer, initPushpins, initTooltips, isNumeric, isValidationError, isValidationSuccess, padLeft, range, releasePortalContainer, renderToPortal, sortOptions, toast, uniqueId, uuid4 };