mithril-materialized 3.1.0 → 3.2.0

package/dist/input-options.d.ts

@@ -6,8 +6,16 @@ export interface InputAttrs<T = string> extends Attributes {
     id?: string;
     /** Unique key for use of the element in an array. */
     key?: string | number;
-    /** Initial value of the input field. */
-    initialValue?: T;
+    /**
+     * Current value of the input field. If provided along with `oninput`, the component operates in controlled mode
+     * where the parent manages the state. The parent must update this value in response to `oninput` callbacks.
+     */
+    value?: T;
+    /**
+     * Initial value for uncontrolled mode. Only used when `value` and `oninput` are not provided.
+     * In uncontrolled mode, the component manages its own internal state.
+     */
+    defaultValue?: T;
     /**
      * The autocomplete property sets or returns the value of the autocomplete
      * attribute in a text field. When autocomplete is on, the browser automatically

package/dist/input.d.ts

@@ -26,7 +26,7 @@ export interface FileInputAttrs extends Attributes {
     /** Displayed on the button, @default File */
     label?: string;
     /** Current value of the file input, write only */
-    initialValue?: string;
+    value?: string;
     /** Adds a placeholder message */
     placeholder?: string;
     /** If true, upload multiple files */

package/dist/option.d.ts

@@ -39,9 +39,9 @@ export interface OptionsAttrs<T extends string | number> extends Attributes {
     /** The options that you have */
     options: InputOption<T>[];
     /** Event handler that is called when an option is changed */
-    onchange?: (checkedId: T[]) => void;
-    /** Selected id or ids (in case of multiple options) */
-    initialValue?: T | T[];
+    onchange?: (checkedIds: T[]) => void;
+    /** Currently selected ids. This property controls the component state and should be updated externally to change selection programmatically. */
+    checkedId?: T | T[];
     /** Optional description */
     description?: string;
     /** Optional CSS that is added to the input checkbox, e.g. if you add col s4, the items will be put inline */
@@ -56,6 +56,19 @@ export interface OptionsAttrs<T extends string | number> extends Attributes {
     layout?: 'vertical' | 'horizontal';
     /** If true, show select all/none buttons */
     showSelectAll?: boolean;
+    /** Text for select all button */
+    selectAllText?: string;
+    /** Text for select none button */
+    selectNoneText?: string;
 }
+/** Reusable layout component for rendering options horizontally or vertically */
+export declare const OptionsList: Component<{
+    options: Array<{
+        component: any;
+        props: any;
+        key: string | number;
+    }>;
+    layout: 'vertical' | 'horizontal';
+}>;
 /** A list of checkboxes */
 export declare const Options: <T extends string | number>() => Component<OptionsAttrs<T>>;

package/dist/radio.d.ts

@@ -7,12 +7,18 @@ export interface RadioButtonsAttrs<T extends string | number> extends Attributes
     label?: string;
     /** The options that you have */
     options: InputOption<T>[];
-    /** Event handler that is called when an option is changed */
-    onchange: (id: T) => void;
-    /** Selected id (in oninit lifecycle) */
-    initialValue?: T;
-    /** Selected id (in oninit and onupdate lifecycle) */
+    /** Event handler that is called when an option is changed. Optional for uncontrolled mode. */
+    onchange?: (id: T) => void;
+    /**
+     * Currently selected id for controlled mode. If provided along with `onchange`, the component operates in controlled mode
+     * where the parent manages the state. The parent must update this value in response to `onchange` callbacks.
+     */
     checkedId?: T;
+    /**
+     * Default selected id for uncontrolled mode. Only used when `checkedId` and `onchange` are not provided.
+     * The component will manage its own internal state in uncontrolled mode.
+     */
+    defaultCheckedId?: T;
     /** Optional description */
     description?: string;
     /** If true, start on a new row */

package/dist/search-select.d.ts

@@ -1,38 +1,32 @@
-import { Attributes, Component } from 'mithril';
-export interface Option<T extends string | number> {
-    id: T;
-    label?: string;
-    disabled?: boolean;
+import { Component } from 'mithril';
+import { SelectAttrs } from './select';
+import { InputOption } from './option';
+export interface SearchSelectI18n {
+    /** Text shown when no options match the search */
+    noOptionsFound?: string;
+    /** Prefix for adding new option */
+    addNewPrefix?: string;
 }
-export interface SearchSelectAttrs<T extends string | number> extends Attributes {
-    /** Options to display in the select */
-    options?: Option<T>[];
-    /** Initial value */
-    initialValue?: T[];
-    /** Callback when user selects or deselects an option */
-    onchange?: (selectedOptions: T[]) => void | Promise<void>;
+export interface SearchSelectAttrs<T extends string | number> extends SelectAttrs<T> {
     /** Callback when user creates a new option: should return new ID */
-    oncreateNewOption?: (term: string) => Option<T> | Promise<Option<T>>;
-    /** Label for the search select, no default */
-    label?: string;
-    /** Placeholder text for the search input, no default */
-    placeholder?: string;
+    oncreateNewOption?: (term: string) => InputOption<T> | Promise<InputOption<T>>;
     /** Placeholder text for the search input, default 'Search options...' */
     searchPlaceholder?: string;
     /** When no options are left, displays this text, default 'No options found' */
     noOptionsFound?: string;
     /** Max height of the dropdown menu, default '25rem' */
     maxHeight?: string;
+    /** Internationalization options */
+    i18n?: SearchSelectI18n;
 }
 interface SearchSelectState<T extends string | number> {
+    id: string;
     isOpen: boolean;
-    selectedOptions: Option<T>[];
     searchTerm: string;
-    options: Option<T>[];
     inputRef: HTMLElement | null;
     dropdownRef: HTMLElement | null;
     focusedIndex: number;
-    onchange: any;
+    internalSelectedIds: T[];
 }
 /**
  * Mithril Factory Component for Multi-Select Dropdown with search

package/dist/select.d.ts

@@ -3,15 +3,19 @@ import { InputOption } from './option';
 export interface SelectAttrs<T extends string | number> extends Attributes {
     /** Options to select from */
     options: InputOption<T>[];
-    /** Called when the value is changed, either contains a single or all selected (checked) ids */
-    onchange: (checkedIds: T[]) => void;
+    /** Called when the selection changes, contains all selected (checked) ids as an array */
+    onchange?: (checkedIds: T[]) => void;
     /**
-     * Selected id or ids (in case of multiple options). Processed in the oninit and onupdate lifecycle.
-     * When the checkedId property changes (using a shallow compare), the selections are updated accordingly.
+     * Currently selected id or ids. For controlled mode, pass the current selection and provide onchange.
+     * For single select, pass a single value or array with one item.
+     * For multiple select, pass an array of selected ids.
      */
     checkedId?: T | T[];
-    /** Selected id or ids (in case of multiple options). Only processed in the oninit lifecycle. */
-    initialValue?: T | T[];
+    /**
+     * Default selected id or ids for uncontrolled mode. Only used when checkedId and onchange are not provided.
+     * The component will manage its own internal state in uncontrolled mode.
+     */
+    defaultCheckedId?: T | T[];
     /** Select a single option or multiple options */
     multiple?: boolean;
     /** Optional label. */

package/dist/switch.d.ts

@@ -5,7 +5,7 @@ export interface SwitchOptions extends Partial<InputAttrs<boolean>> {
     left?: string;
     /** Right text label */
     right?: string;
-    /** If checked is true, the switch is set in the right position. Only processed in oninit. */
+    /** If checked is true, the switch is set in the right position. */
     checked?: boolean;
 }
 /** Component to display a switch with two values. */

package/dist/types.d.ts

@@ -122,7 +122,7 @@ export type InputValue<T extends InputType> = T extends 'number' | 'range' ? num
 /**
  * Icon class using template literal types for better IntelliSense
  */
-export type IconClass = ComponentSize | MaterialPosition | `${ComponentSize} ${MaterialPosition}`;
+export type IconClass = ComponentSize | MaterialPosition | `${ComponentSize} ${MaterialPosition}` | string;
 /**
  * Modal type discriminated union
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mithril-materialized",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "A materialize library for mithril.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -64,6 +64,7 @@
     "type": "git",
     "url": "git://github.com/erikvullings/mithril-materialized.git"
   },
+  "homepage": "https://erikvullings.github.io/mithril-materialized/index.html#!/home",
   "keywords": [
     "mithril",
     "materialize-css"
@@ -85,11 +86,11 @@
     "concurrently": "^9.2.1",
     "express": "^5.1.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^30.0.5",
-    "jest-environment-jsdom": "^30.0.5",
+    "jest": "^30.1.1",
+    "jest-environment-jsdom": "^30.1.1",
     "js-yaml": "^4.1.0",
     "rimraf": "^6.0.1",
-    "rollup": "^4.48.1",
+    "rollup": "^4.49.0",
     "rollup-plugin-postcss": "^4.0.2",
     "sass": "^1.91.0",
     "ts-jest": "^29.4.1",

package/sass/components/_dropdown.scss

@@ -60,6 +60,9 @@
       width: 24px;
     }
 
+    &.disabled {
+      cursor: not-allowed; 
+    }
 
     clear: both;
     color: var(--mm-text-primary, variables.$off-black);

package/sass/components/forms/_checkboxes.scss

@@ -4,15 +4,19 @@
    ========================================================================== */
 
 /* Remove default checkbox */
-[type="checkbox"]:not(:checked),
-[type="checkbox"]:checked {
+[type=checkbox]:not(:checked),
+[type=checkbox]:checked {
   position: absolute;
   opacity: 0;
   pointer-events: none;
 }
 
+[type=checkbox]:disabled + span {
+    color: var(--mm-text-disabled, rgba(0, 0, 0, 0.42));
+}
+
 // Checkbox Styles
-[type="checkbox"] {
+[type=checkbox] {
   // Text Label Style
   + span:not(.lever) {
     position: relative;
@@ -61,7 +65,7 @@
   }
 }
 
-[type="checkbox"]:checked {
+[type=checkbox]:checked {
   + span:not(.lever):before {
     top: -4px;
     left: -5px;
@@ -83,7 +87,7 @@
 }
 
 /* Indeterminate checkbox */
-[type="checkbox"]:indeterminate {
+[type=checkbox]:indeterminate {
   + span:not(.lever):before {
     top: -11px;
     left: -12px;
@@ -106,7 +110,7 @@
 }
 
 // Filled in Style
-[type="checkbox"].filled-in {
+[type=checkbox].filled-in {
   // General
   + span:not(.lever):after {
     border-radius: 2px;

package/sass/components/forms/_forms.scss

@@ -7,18 +7,3 @@
 @use "file-input";
 @use "range"; // Standard HTML5 range input styles
 @use "form-groups";
-
-// Remove Focus Boxes
-select:focus {
-  outline: variables.$select-focus;
-}
-
-button:focus {
-  outline: none;
-  background-color: variables.$button-background-focus;
-}
-
-label {
-  font-size: variables.$label-font-size;
-  color: variables.$input-border-color;
-}

package/sass/components/forms/_select.scss

@@ -191,3 +191,167 @@ body.keyboard-focused {
     padding-left: 1rem;
   }
 }
+
+/* Dark theme overrides to ensure proper colors */
+[data-theme="dark"] {
+  .select-dropdown.dropdown-content li:hover,
+  .dropdown-content li:hover,
+  .dropdown-content li.active {
+    background-color: #444 !important;
+  }
+  
+  .chip {
+    background-color: #424242 !important;
+    color: var(--mm-text-secondary) !important;
+  }
+}
+
+/* Auto dark mode support */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    .select-dropdown.dropdown-content li:hover,
+    .dropdown-content li:hover,
+    .dropdown-content li.active {
+      background-color: #444 !important;
+    }
+    
+    .chip {
+      background-color: #424242 !important;
+      color: var(--mm-text-secondary) !important;
+    }
+  }
+}
+
+/* SearchSelect Specific Styles
+   ========================================================================== */
+
+// Search input wrapper
+.search-wrapper {
+  padding: 0 16px;
+  position: relative;
+  // Removed border-bottom that was causing extra divider
+}
+
+// Search input field
+.search-select-input {
+  width: 100%;
+  outline: none;
+  font-size: 0.875rem;
+  border: none;
+  padding: 8px 0;
+  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);
+  }
+}
+
+// No options found message
+.search-select-no-options {
+  padding: 8px 16px;
+  color: var(--mm-text-hint, #9e9e9e);
+  font-style: italic;
+  text-align: center;
+  border-bottom: none;
+  
+  &:hover {
+    background-color: transparent;
+    cursor: default;
+  }
+}
+
+// Option labels for proper checkbox accessibility
+.search-select-option-label {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  cursor: pointer;
+  padding: 0;
+  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;
+    // Reset any default checkbox styles
+    appearance: none;
+    width: 18px;
+    height: 18px;
+    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;
+        font-size: 12px;
+        position: absolute;
+        top: -2px;
+        left: 2px;
+      }
+    }
+    
+    &:focus {
+      outline: 2px solid var(--mm-primary-color, #2196F3);
+      outline-offset: 2px;
+    }
+  }
+  
+  span {
+    flex: 1;
+  }
+}
+
+// Multi-select chips styling improvements
+.multi-select-dropdown {
+  .chips-container {
+    display: flex;
+    align-items: flex-end;
+    flex-wrap: wrap;
+    cursor: pointer;
+    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;
+    }
+  }
+}

package/sass/components/forms/_switches.scss

@@ -8,6 +8,7 @@
 .switch * {
   -webkit-tap-highlight-color: transparent;
   user-select: none;
+  margin: 13px 0 17px 0;
 }
 
 .switch label {