mithril-materialized 3.5.9 → 3.6.0

package/dist/material-box.d.ts

@@ -33,6 +33,6 @@ export interface MaterialBoxAttrs extends MaterialBoxOptions, Attributes {
 }
 /**
  * Pure TypeScript MaterialBox - creates an image lightbox that fills the screen when clicked
- * No MaterializeCSS dependencies
+ * Uses CSS classes from _materialbox.scss
  */
 export declare const MaterialBox: FactoryComponent<MaterialBoxAttrs>;

package/dist/pickers.css

@@ -371,6 +371,8 @@
   background-color: #26a69a;
   padding: 10px;
   font-weight: 300;
+  min-width: 200px;
+  position: relative;
 }
 
 .timepicker-text-container {
@@ -381,6 +383,8 @@
   font-weight: 400;
   position: relative;
   user-select: none;
+  min-width: 180px;
+  width: 100%;
 }
 
 .timepicker-span-hours,
@@ -391,10 +395,16 @@
 
 .timepicker-span-hours {
   margin-right: 3px;
+  display: inline-block;
+  min-width: 2ch;
+  text-align: right;
 }
 
 .timepicker-span-minutes {
   margin-left: 3px;
+  display: inline-block;
+  min-width: 2ch;
+  text-align: left;
 }
 
 .timepicker-display-am-pm {

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/timepicker.d.ts

@@ -32,10 +32,6 @@ export interface TimePickerAttrs extends InputAttrs<string>, TimepickerOptions {
     useModal?: boolean;
     /** Allow format toggle between 12h/24h (for inline mode) */
     allowFormatToggle?: boolean;
-    /** Clear button label */
-    clearLabel?: string;
-    /** Close button label */
-    closeLabel?: string;
 }
 /**
  * TimePicker component based on original Materialize CSS timepicker

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.9",
+  "version": "3.6.0",
   "description": "A materialize library for mithril.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -26,8 +26,7 @@
     "./pickers.css": "./dist/pickers.css",
     "./advanced.css": "./dist/advanced.css",
     "./utilities.css": "./dist/utilities.css",
-    "./sass/*": "./sass/*",
-    "./src/*": "./src/*"
+    "./sass/*": "./sass/*"
   },
   "sideEffects": false,
   "files": [

package/sass/components/_collapsible.scss

@@ -2,42 +2,94 @@
 @use "global";
 
 .collapsible {
-  border-top: 1px solid var(--mm-border-color, variables.$collapsible-border-color);
-  border-right: 1px solid var(--mm-border-color, variables.$collapsible-border-color);
-  border-left: 1px solid var(--mm-border-color, variables.$collapsible-border-color);
+  border: 1px solid var(--mm-border-color, variables.$collection-border-color);
+  background-color: var(--mm-surface-color, variables.$collection-bg-color);
   margin: variables.$element-top-margin 0 variables.$element-bottom-margin 0;
-  @extend .z-depth-1 !optional;
-}
+  overflow: hidden;
 
-.collapsible-header {
-  &:focus {
-    outline: 0
+  li {
+    list-style-type: none;
   }
+}
 
+// Main header (top-level header for the whole collapsible)
+.collapsible-main-header {
+  background-color: var(--mm-surface-color, variables.$collection-bg-color);
+  border-bottom: 1px solid var(--mm-border-color, variables.$collection-border-color);
+  padding: 10px 20px;
+  // Don't override h4 styling - let it use default typography
+  // This ensures consistent height with Collection headers
+}
+
+// Item header (collapsible item header)
+.collapsible-header {
   display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  min-height: 3rem;
+  line-height: 1.5rem;
+  padding: 1rem;
+  background-color: var(--mm-surface-color, variables.$collection-bg-color);
+  border-bottom: 1px solid var(--mm-border-color, variables.$collection-border-color);
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
-  line-height: 1.5;
-  padding: 1rem;
-  border-bottom: 1px solid var(--mm-border-color, variables.$collapsible-border-color);
+  transition: background-color .25s;
+
+  &:hover {
+    background-color: var(--mm-row-hover, variables.$collection-hover-bg-color);
+  }
+
+  &:focus {
+    outline: 0;
+  }
 
-  i {
+  i.material-icons {
     width: 2rem;
     font-size: 1.6rem;
-    display: inline-block;
-    text-align: center;
+    line-height: 1.5rem;
+    display: block;
+    flex-shrink: 0;
     margin-right: 1rem;
   }
+
+  // Wrapper for header content - takes remaining space
+  .collapsible-header-text,
+  .collapsible-header-content {
+    flex: 1;
+    align-items: center;
+    gap: 1rem;
+  }
 }
+
 .keyboard-focused .collapsible-header:focus {
-  background-color: var(--mm-border-color, rgba(0, 0, 0, 0.05));
+  background-color: var(--mm-row-hover, variables.$collection-hover-bg-color);
 }
 
 .collapsible-body {
   display: none;
-  border-bottom: 1px solid var(--mm-border-color, variables.$collapsible-border-color);
+  border-bottom: 1px solid var(--mm-border-color, variables.$collection-border-color);
+  background-color: var(--mm-surface-color, variables.$collection-bg-color);
   box-sizing: border-box;
   padding: 2rem;
+
+  // Remove bottom border from last item
+  li:last-child & {
+    border-bottom: none;
+  }
+}
+
+// Active state
+li.active {
+  .collapsible-body {
+    display: block;
+  }
+}
+
+// Collapsible with header
+.collapsible.with-header {
+  .collapsible-main-header:first-child {
+    border-top: none;
+  }
 }
 
 // Sidenav collapsible styling
@@ -65,7 +117,7 @@
   .collapsible-body {
     border: 0;
     background-color: var(--mm-surface-color, variables.$collapsible-header-color);
-  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
+    color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
 
     li a {
       padding: 0 (7.5px + variables.$sidenav-padding)

package/sass/components/_datatable.scss

@@ -93,7 +93,7 @@
     transition: background-color 0.2s ease;
 
     &:hover {
-      background-color: var(--mm-dropdown-hover);
+      background-color: var(--mm-row-hover);
     }
 
     .sort-indicators {
@@ -147,27 +147,27 @@
     cursor: pointer;
 
     &:hover {
-      background-color: var(--mm-dropdown-hover);
+      background-color: var(--mm-row-hover);
       
       td {
-        background-color: var(--mm-dropdown-hover);
+        background-color: var(--mm-row-hover);
       }
     }
   }
 
   // Enhanced striped rows for dark theme
   &.striped tbody tr:nth-child(odd) {
-    background-color: var(--mm-dropdown-focus);
+    background-color: var(--mm-row-stripe, var(--mm-table-striped-color));
     
     td {
-      background-color: var(--mm-dropdown-focus);
+      background-color: var(--mm-row-stripe, var(--mm-table-striped-color));
     }
     
     &:hover {
-      background-color: var(--mm-dropdown-hover);
+      background-color: var(--mm-row-hover);
       
       td {
-        background-color: var(--mm-dropdown-hover);
+        background-color: var(--mm-row-hover);
       }
     }
   }
@@ -364,18 +364,6 @@
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) .datatable-container,
   [data-theme="dark"] .datatable-container {
-    .datatable thead th.sortable:hover {
-      background-color: var(--mm-dropdown-hover);
-    }
-
-    .datatable tbody tr:hover {
-      background-color: var(--mm-dropdown-hover);
-    }
-
-    .datatable.striped tbody tr:nth-child(odd) {
-      background-color: variables.$table-striped-color;
-    }
-
     .datatable.fixed-header thead th {
       border-bottom: 1px solid var(--mm-border-color);
     }

package/sass/components/_materialbox.scss

@@ -16,28 +16,37 @@
   }
 }
 
-#materialbox-overlay {
-  position:fixed;
+.materialbox-overlay {
+  position: fixed;
   top: 0;
+  left: 0;
   right: 0;
   bottom: 0;
-  left: 0;
-  background-color: #292929;
+  background-color: rgba(0, 0, 0, 0.85);
   z-index: 1000;
+  opacity: 0;
+  cursor: zoom-out;
   will-change: opacity;
 }
 
+.materialbox-image {
+  position: fixed;
+  cursor: zoom-out;
+  max-width: none;
+  z-index: 1001;
+  will-change: top, left, width, height;
+}
+
 .materialbox-caption {
   position: fixed;
-  display: none;
-  color: #fff;
-  line-height: 50px;
-  bottom: 0;
-  left: 0;
-  width: 100%;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  color: white;
+  font-size: 16px;
   text-align: center;
-  padding: 0% 15%;
-  height: 50px;
-  z-index: 1000;
+  opacity: 0;
+  z-index: 1002;
+  pointer-events: none;
   -webkit-font-smoothing: antialiased;
-}
+}

package/sass/components/_theme-variables.scss

@@ -57,6 +57,9 @@
   --mm-dropdown-hover: #eee;
   --mm-dropdown-focus: #ddd;
   --mm-dropdown-selected: #e3f2fd;
+  
+  // Collection/Table hover (light theme)
+  --mm-row-hover: rgba(0, 0, 0, 0.04);
   --mm-shadow-umbra: rgba(0, 0, 0, 0.2);
   --mm-shadow-penumbra: rgba(0, 0, 0, 0.14);
   --mm-shadow-ambient: rgba(0, 0, 0, 0.12);
@@ -144,6 +147,10 @@ body {
   --mm-dropdown-focus: #555;
   --mm-dropdown-selected: #1e3a8a;
   
+  // Collection/Table hover (dark theme) - more subtle
+  --mm-row-hover: rgba(255, 255, 255, 0.04);
+  --mm-row-stripe: rgba(255, 255, 255, 0.02);
+  
   // Switch colors (dark theme)
   --mm-switch-checked-track: rgba(128, 203, 196, 0.3);
   --mm-switch-checked-thumb: #80cbc4;

package/sass/components/_timepicker.scss

@@ -100,6 +100,8 @@
   background-color: variables.$secondary-color;
   padding: 10px;
   font-weight: 300;
+  min-width: 200px;
+  position: relative;
 }
 
 .timepicker-text-container {
@@ -110,6 +112,8 @@
   font-weight: 400;
 	position: relative;
   user-select: none;
+  min-width: 180px;
+  width: 100%;
 }
 
 .timepicker-span-hours,
@@ -120,10 +124,16 @@
 
 .timepicker-span-hours {
   margin-right: 3px;
+  display: inline-block;
+  min-width: 2ch;
+  text-align: right;
 }
 
 .timepicker-span-minutes {
   margin-left: 3px;
+  display: inline-block;
+  min-width: 2ch;
+  text-align: left;
 }
 
 .timepicker-display-am-pm {

package/sass/components/forms/_input-fields.scss

@@ -131,7 +131,7 @@ textarea.materialize-textarea {
   &:-ms-input-placeholder {
     color: var(--mm-text-hint, variables.$placeholder-text-color) !important;
   }
-  
+
   &::-ms-input-placeholder {
     color: var(--mm-text-hint, variables.$placeholder-text-color) !important;
   }
@@ -340,12 +340,15 @@ textarea {
   background-color: transparent;
 
   &.materialize-textarea {
+    // Override base styles to match TextInput alignment
+    padding-top: 10px;
+    padding-bottom: 0;
+    height: 35px;
+    margin-bottom: 2.5px;
     line-height: 1.5;
     overflow-y: hidden; /* prevents scroll bar flash */
-    padding: .8rem 0 .8rem 0; /* prevents text jump on Enter keypress */
     resize: none;
-    min-height: variables.$input-height;
-    box-sizing: border-box;
+    min-height: calc(variables.$input-height - 10px);
   }
 }
 
@@ -355,7 +358,9 @@ textarea {
   white-space: pre-wrap;
   word-wrap: break-word;
   overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
-  padding-top: 1.2rem; /* prevents text jump on Enter keypress */
+  padding-top: 13px; /* match textarea padding-top */
+  padding-bottom: 0; /* match textarea padding-bottom */
+  line-height: 1.5; /* match textarea line-height */
 
   // Reduces repaints
   position: absolute;

package/sass/components/forms/_select.scss

@@ -145,14 +145,18 @@ 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);
     }
 
-    // &.selected {
-    //   background-color: var(--mm-dropdown-selected, variables.$select-option-selected);
-    // }
+    &.selected {
+      background-color: var(--mm-row-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;