mithril-materialized 3.2.2 → 3.3.0

package/dist/index.esm.js

@@ -2851,20 +2851,40 @@ const TextArea = () => {
             state.height = undefined;
         }
     };
-    const isControlled = (attrs) => attrs.value !== undefined && attrs.oninput !== undefined;
+    const isControlled = (attrs) => attrs.value !== undefined && (attrs.oninput !== undefined || attrs.onchange !== undefined);
     return {
         oninit: ({ attrs }) => {
+            const controlled = isControlled(attrs);
+            const isNonInteractive = attrs.readonly || attrs.disabled;
+            // Warn developer for improper controlled usage
+            if (attrs.value !== undefined && !controlled && !isNonInteractive) {
+                console.warn(`TextArea received 'value' prop without 'oninput' or 'onchange' handler. ` +
+                    `Use 'defaultValue' for uncontrolled components or add an event handler for controlled components.`);
+            }
             // Initialize internal value for uncontrolled mode
-            if (!isControlled(attrs)) {
+            if (!controlled) {
                 state.internalValue = attrs.defaultValue || '';
             }
         },
         onremove: () => {
         },
         view: ({ attrs }) => {
+            var _a, _b, _c, _d;
             const { className = 'col s12', helperText, iconName, id = state.id, value, placeholder, isMandatory, label, maxLength, oninput, onchange, onkeydown, onkeypress, onkeyup, onblur, style } = attrs, params = __rest(attrs, ["className", "helperText", "iconName", "id", "value", "placeholder", "isMandatory", "label", "maxLength", "oninput", "onchange", "onkeydown", "onkeypress", "onkeyup", "onblur", "style"]);
             const controlled = isControlled(attrs);
-            const currentValue = controlled ? value || '' : state.internalValue;
+            const isNonInteractive = attrs.readonly || attrs.disabled;
+            let currentValue;
+            if (controlled) {
+                currentValue = value || '';
+            }
+            else if (isNonInteractive) {
+                // Non-interactive components: prefer defaultValue, fallback to value
+                currentValue = (_b = (_a = attrs.defaultValue) !== null && _a !== void 0 ? _a : value) !== null && _b !== void 0 ? _b : '';
+            }
+            else {
+                // Interactive uncontrolled: use internal state
+                currentValue = (_d = (_c = state.internalValue) !== null && _c !== void 0 ? _c : attrs.defaultValue) !== null && _d !== void 0 ? _d : '';
+            }
             return [
                 // Hidden div for height measurement - positioned outside the input-field
                 m('.hiddendiv', {
@@ -2995,7 +3015,8 @@ const InputField = (type, defaultClass = '') => () => {
         isDragging: false,
         activeThumb: null,
     };
-    const isControlled = (attrs) => 'value' in attrs && typeof attrs.value !== 'undefined' && typeof attrs.oninput === 'function';
+    const isControlled = (attrs) => 'value' in attrs && typeof attrs.value !== 'undefined' &&
+        (typeof attrs.oninput === 'function' || typeof attrs.onchange === 'function');
     const getValue = (target) => {
         const val = target.value;
         return (val ? (type === 'number' || type === 'range' ? +val : val) : val);
@@ -3041,8 +3062,15 @@ const InputField = (type, defaultClass = '') => () => {
     // Range slider rendering functions are now in separate module
     return {
         oninit: ({ attrs }) => {
+            const controlled = isControlled(attrs);
+            const isNonInteractive = attrs.readonly || attrs.disabled;
+            // Warn developer for improper controlled usage
+            if (attrs.value !== undefined && !controlled && !isNonInteractive) {
+                console.warn(`${type} input received 'value' prop without 'oninput' or 'onchange' handler. ` +
+                    `Use 'defaultValue' for uncontrolled components or add an event handler for controlled components.`);
+            }
             // Initialize internal value if not in controlled mode
-            if (!isControlled(attrs)) {
+            if (!controlled) {
                 const isNumeric = ['number', 'range'].includes(type);
                 if (attrs.defaultValue !== undefined) {
                     if (isNumeric) {
@@ -3058,7 +3086,7 @@ const InputField = (type, defaultClass = '') => () => {
             }
         },
         view: ({ attrs }) => {
-            var _a, _b;
+            var _a, _b, _c, _d, _e, _f;
             const { className = 'col s12', dataError, dataSuccess, helperText, iconName, id = state.id, placeholder, isMandatory, label, maxLength, newRow, oninput, onchange, onkeydown, onkeypress, onkeyup, style, validate, canClear } = attrs, params = __rest(attrs, ["className", "dataError", "dataSuccess", "helperText", "iconName", "id", "placeholder", "isMandatory", "label", "maxLength", "newRow", "oninput", "onchange", "onkeydown", "onkeypress", "onkeyup", "style", "validate", "canClear"]);
             // const attributes = toAttrs(params);
             const cn = [newRow ? 'clear' : '', defaultClass, className].filter(Boolean).join(' ').trim() || undefined;
@@ -3078,7 +3106,19 @@ const InputField = (type, defaultClass = '') => () => {
             }
             const isNumeric = ['number', 'range'].includes(type);
             const controlled = isControlled(attrs);
-            const value = (controlled ? attrs.value : state.internalValue);
+            const isNonInteractive = attrs.readonly || attrs.disabled;
+            let value;
+            if (controlled) {
+                value = attrs.value;
+            }
+            else if (isNonInteractive) {
+                // Non-interactive components: prefer defaultValue, fallback to value
+                value = ((_c = (_b = attrs.defaultValue) !== null && _b !== void 0 ? _b : attrs.value) !== null && _c !== void 0 ? _c : (isNumeric ? 0 : ''));
+            }
+            else {
+                // Interactive uncontrolled: use internal state
+                value = ((_e = (_d = state.internalValue) !== null && _d !== void 0 ? _d : attrs.defaultValue) !== null && _e !== void 0 ? _e : (isNumeric ? 0 : ''));
+            }
             const rangeType = type === 'range' && !attrs.minmax;
             return m('.input-field', { className: cn, style }, [
                 iconName ? m('i.material-icons.prefix', iconName) : undefined,
@@ -3244,7 +3284,7 @@ const InputField = (type, defaultClass = '') => () => {
                         }
                     } })),
                 // Clear button - only for text inputs with canClear enabled and has content
-                canClear && type === 'text' && ((_b = state.inputElement) === null || _b === void 0 ? void 0 : _b.value)
+                canClear && type === 'text' && ((_f = state.inputElement) === null || _f === void 0 ? void 0 : _f.value)
                     ? m(MaterialIcon, {
                         name: 'close',
                         className: 'input-clear-btn',
@@ -5641,17 +5681,35 @@ const RadioButtons = () => {
     return {
         oninit: ({ attrs }) => {
             state.componentId = attrs.id || uniqueId();
+            const controlled = isControlled(attrs);
+            // Warn developer for improper controlled usage
+            if (attrs.checkedId !== undefined && !controlled && !attrs.disabled) {
+                console.warn(`RadioButtons component received 'checkedId' prop without 'onchange' handler. ` +
+                    `Use 'defaultCheckedId' for uncontrolled components or add 'onchange' for controlled components.`);
+            }
             // Initialize internal state for uncontrolled mode
-            if (!isControlled(attrs)) {
+            if (!controlled) {
                 state.internalCheckedId = attrs.defaultCheckedId;
             }
         },
         view: ({ attrs }) => {
+            var _a, _b;
             const { checkedId, newRow, className = 'col s12', label = '', disabled, description, options, isMandatory, checkboxClass, layout = 'vertical', onchange, } = attrs;
             const { groupId, componentId } = state;
             const controlled = isControlled(attrs);
             // Get current checked ID from props or internal state
-            const currentCheckedId = controlled ? checkedId : state.internalCheckedId;
+            let currentCheckedId;
+            if (controlled) {
+                currentCheckedId = checkedId;
+            }
+            else if (disabled) {
+                // Non-interactive components: prefer defaultCheckedId, fallback to checkedId
+                currentCheckedId = (_a = attrs.defaultCheckedId) !== null && _a !== void 0 ? _a : checkedId;
+            }
+            else {
+                // Interactive uncontrolled: use internal state
+                currentCheckedId = (_b = state.internalCheckedId) !== null && _b !== void 0 ? _b : attrs.defaultCheckedId;
+            }
             const handleChange = (id) => {
                 // Update internal state for uncontrolled mode
                 if (!controlled) {
@@ -5781,8 +5839,14 @@ const Select = () => {
     return {
         oninit: ({ attrs }) => {
             state.id = attrs.id || uniqueId();
+            const controlled = isControlled(attrs);
+            // Warn developer for improper controlled usage
+            if (attrs.checkedId !== undefined && !controlled && !attrs.disabled) {
+                console.warn(`Select component received 'checkedId' prop without 'onchange' handler. ` +
+                    `Use 'defaultCheckedId' for uncontrolled components or add 'onchange' for controlled components.`);
+            }
             // Initialize internal state for uncontrolled mode
-            if (!isControlled(attrs)) {
+            if (!controlled) {
                 const defaultIds = attrs.defaultCheckedId !== undefined
                     ? Array.isArray(attrs.defaultCheckedId)
                         ? attrs.defaultCheckedId
@@ -5798,16 +5862,32 @@ const Select = () => {
             document.removeEventListener('click', closeDropdown);
         },
         view: ({ attrs }) => {
+            var _a;
             const controlled = isControlled(attrs);
+            const { disabled } = attrs;
             // Get selected IDs from props or internal state
-            const selectedIds = controlled
-                ? attrs.checkedId !== undefined
+            let selectedIds;
+            if (controlled) {
+                selectedIds = attrs.checkedId !== undefined
                     ? Array.isArray(attrs.checkedId)
                         ? attrs.checkedId
                         : [attrs.checkedId]
-                    : []
-                : state.internalSelectedIds;
-            const { newRow, className = 'col s12', key, options, multiple = false, label, helperText, placeholder = '', isMandatory, iconName, disabled, style, } = attrs;
+                    : [];
+            }
+            else if (disabled) {
+                // Non-interactive components: prefer defaultCheckedId, fallback to checkedId
+                const fallbackId = (_a = attrs.defaultCheckedId) !== null && _a !== void 0 ? _a : attrs.checkedId;
+                selectedIds = fallbackId !== undefined
+                    ? Array.isArray(fallbackId)
+                        ? fallbackId
+                        : [fallbackId]
+                    : [];
+            }
+            else {
+                // Interactive uncontrolled: use internal state
+                selectedIds = state.internalSelectedIds;
+            }
+            const { newRow, className = 'col s12', key, options, multiple = false, label, helperText, placeholder = '', isMandatory, iconName, style, } = attrs;
             const finalClassName = newRow ? `${className} clear` : className;
             const selectedOptions = options.filter((opt) => isSelected(opt.id, selectedIds));
             return m('.input-field.select-space', {
@@ -8544,6 +8624,269 @@ const ImageList = () => {
     };
 };
 
+/** Default star icons */
+const DEFAULT_ICONS = {
+    filled: '★',
+    empty: '☆',
+    half: '☆', // We'll handle half-fill with CSS
+};
+/** Create a Rating component */
+const Rating = () => {
+    const state = {
+        id: uniqueId(),
+        internalValue: 0,
+        hoverValue: null,
+        isHovering: false,
+        isFocused: false,
+    };
+    const isControlled = (attrs) => typeof attrs.value !== 'undefined' && typeof attrs.onchange === 'function';
+    const getCurrentValue = (attrs) => {
+        var _a, _b, _c, _d;
+        const controlled = isControlled(attrs);
+        const isNonInteractive = attrs.readonly || attrs.disabled;
+        if (controlled) {
+            return attrs.value || 0;
+        }
+        // Non-interactive components: prefer defaultValue, fallback to value
+        if (isNonInteractive) {
+            return (_b = (_a = attrs.defaultValue) !== null && _a !== void 0 ? _a : attrs.value) !== null && _b !== void 0 ? _b : 0;
+        }
+        // Interactive uncontrolled: use internal state (user can change it)
+        return (_d = (_c = state.internalValue) !== null && _c !== void 0 ? _c : attrs.defaultValue) !== null && _d !== void 0 ? _d : 0;
+    };
+    const getDisplayValue = (attrs) => state.isHovering && state.hoverValue !== null ? state.hoverValue : getCurrentValue(attrs);
+    const getLabelText = (value, max, getLabelFn) => {
+        if (getLabelFn) {
+            return getLabelFn(value, max);
+        }
+        if (value === 0) {
+            return `No rating`;
+        }
+        if (value === 1) {
+            return `1 star out of ${max}`;
+        }
+        return `${value} stars out of ${max}`;
+    };
+    const getSizeClass = (size = 'medium') => {
+        switch (size) {
+            case 'small':
+                return 'rating--small';
+            case 'large':
+                return 'rating--large';
+            default:
+                return 'rating--medium';
+        }
+    };
+    const getDensityClass = (density = 'standard') => {
+        switch (density) {
+            case 'compact':
+                return 'rating--compact';
+            case 'comfortable':
+                return 'rating--comfortable';
+            default:
+                return 'rating--standard';
+        }
+    };
+    const handleItemClick = (attrs, clickValue) => {
+        var _a;
+        if (attrs.readonly || attrs.disabled)
+            return;
+        const currentValue = getCurrentValue(attrs);
+        const newValue = attrs.clearable && currentValue === clickValue ? 0 : clickValue;
+        if (!isControlled(attrs)) {
+            state.internalValue = newValue;
+        }
+        (_a = attrs.onchange) === null || _a === void 0 ? void 0 : _a.call(attrs, newValue);
+    };
+    const handleItemHover = (attrs, hoverValue) => {
+        var _a;
+        if (attrs.readonly || attrs.disabled)
+            return;
+        state.hoverValue = hoverValue;
+        state.isHovering = true;
+        (_a = attrs.onmouseover) === null || _a === void 0 ? void 0 : _a.call(attrs, hoverValue);
+    };
+    const handleMouseLeave = (attrs) => {
+        if (attrs.readonly || attrs.disabled)
+            return;
+        state.isHovering = false;
+        state.hoverValue = null;
+    };
+    const handleKeyDown = (attrs, e) => {
+        var _a;
+        if (attrs.readonly || attrs.disabled)
+            return;
+        const max = attrs.max || 5;
+        const step = attrs.step || 1;
+        const currentValue = getCurrentValue(attrs);
+        let newValue = currentValue;
+        switch (e.key) {
+            case 'ArrowRight':
+            case 'ArrowUp':
+                e.preventDefault();
+                newValue = Math.min(max, currentValue + step);
+                break;
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                e.preventDefault();
+                newValue = Math.max(0, currentValue - step);
+                break;
+            case 'Home':
+                e.preventDefault();
+                newValue = attrs.clearable ? 0 : step;
+                break;
+            case 'End':
+                e.preventDefault();
+                newValue = max;
+                break;
+            case ' ':
+            case 'Enter':
+                e.preventDefault();
+                // If focused and not hovering, increment by step
+                if (!state.isHovering) {
+                    newValue = currentValue + step > max ? (attrs.clearable ? 0 : step) : currentValue + step;
+                }
+                break;
+            case 'Escape':
+                if (attrs.clearable) {
+                    e.preventDefault();
+                    newValue = 0;
+                }
+                break;
+            default:
+                return;
+        }
+        if (newValue !== currentValue) {
+            if (!isControlled(attrs)) {
+                state.internalValue = newValue;
+            }
+            (_a = attrs.onchange) === null || _a === void 0 ? void 0 : _a.call(attrs, newValue);
+        }
+    };
+    const RatingItem = () => {
+        return {
+            view: ({ attrs }) => {
+                const { index, displayValue, step, icons, allowHalfSteps, disabled, onclick, onmouseover } = attrs;
+                const itemValue = (index + 1) * step;
+                // Calculate fill state based on displayValue vs itemValue
+                const diff = displayValue - itemValue;
+                const fillState = diff >= 0 ? 'full' : allowHalfSteps && diff >= -step / 2 ? 'half' : 'empty';
+                return m('.rating__item', {
+                    className: [
+                        fillState === 'full' ? 'rating__item--filled' : '',
+                        fillState === 'half' ? 'rating__item--half' : '',
+                        fillState !== 'empty' ? 'rating__item--active' : '',
+                        disabled ? 'rating__item--disabled' : '',
+                    ]
+                        .filter(Boolean)
+                        .join(' '),
+                    onclick,
+                    onmouseover,
+                }, [
+                    // Empty icon (background)
+                    m('.rating__icon.rating__icon--empty', { 'aria-hidden': 'true' }, typeof icons.empty === 'string' ? icons.empty : m(icons.empty)),
+                    // Filled icon (foreground)
+                    m('.rating__icon.rating__icon--filled', {
+                        'aria-hidden': 'true',
+                        style: {
+                            clipPath: fillState === 'half' ? 'inset(0 50% 0 0)' : undefined,
+                        },
+                    }, typeof icons.filled === 'string' ? icons.filled : m(icons.filled)),
+                ]);
+            },
+        };
+    };
+    return {
+        oninit: ({ attrs }) => {
+            const controlled = isControlled(attrs);
+            const isNonInteractive = attrs.readonly || attrs.disabled;
+            // Warn developer for improper controlled usage
+            if (attrs.value !== undefined && !controlled && !isNonInteractive) {
+                console.warn(`Rating component received 'value' prop without 'onchange' handler. ` +
+                    `Use 'defaultValue' for uncontrolled components or add 'onchange' for controlled components.`);
+            }
+            if (!controlled) {
+                state.internalValue = attrs.defaultValue || 0;
+            }
+        },
+        view: ({ attrs }) => {
+            const { max = 5, step = 1, size = 'medium', density = 'standard', className = '', style = {}, readonly: readonly = false, disabled = false, id = state.id, name } = attrs, ariaAttrs = __rest(attrs, ["max", "step", "size", "density", "className", "style", "readonly", "disabled", "id", "name"]);
+            const currentValue = getCurrentValue(attrs);
+            const displayValue = getDisplayValue(attrs);
+            const itemCount = Math.ceil(max / step);
+            return m('.rating', {
+                className: [
+                    'rating',
+                    getSizeClass(size),
+                    getDensityClass(density),
+                    readonly ? 'rating--read-only' : '',
+                    disabled ? 'rating--disabled' : '',
+                    state.isFocused ? 'rating--focused' : '',
+                    className,
+                ]
+                    .filter(Boolean)
+                    .join(' '),
+                style,
+                id,
+                role: readonly ? 'img' : 'slider',
+                tabindex: readonly || disabled ? -1 : 0,
+                'aria-valuemin': 0,
+                'aria-valuemax': max,
+                'aria-valuenow': currentValue,
+                'aria-valuetext': getLabelText(currentValue, max, attrs.getLabelText),
+                'aria-label': ariaAttrs['aria-label'] ||
+                    attrs.ariaLabel ||
+                    `Rating: ${getLabelText(currentValue, max, attrs.getLabelText)}`,
+                'aria-labelledby': ariaAttrs['aria-labelledby'],
+                'aria-readonly': readonly,
+                'aria-disabled': disabled,
+                onkeydown: (e) => handleKeyDown(attrs, e),
+                onfocus: () => {
+                    state.isFocused = true;
+                },
+                onblur: () => {
+                    state.isFocused = false;
+                    handleMouseLeave(attrs);
+                },
+                onmouseleave: () => handleMouseLeave(attrs),
+            }, [
+                // Hidden input for form submission
+                name &&
+                    m('input', {
+                        type: 'hidden',
+                        name,
+                        value: currentValue,
+                    }),
+                // Rating items
+                m('.rating__items', {
+                    className: 'rating__items',
+                }, 
+                // Array.from({ length: itemCount }, (_, i) => renderRatingItem(attrs, i))
+                [...Array(itemCount)].map((_, i) => {
+                    const itemValue = (i + 1) * step;
+                    return m(RatingItem, {
+                        key: `rating-item-${i}`,
+                        index: i,
+                        displayValue: displayValue,
+                        step,
+                        icons: Object.assign(Object.assign({}, DEFAULT_ICONS), attrs.icon),
+                        allowHalfSteps: attrs.allowHalfSteps,
+                        disabled: attrs.disabled,
+                        onclick: () => handleItemClick(attrs, itemValue),
+                        onmouseover: () => handleItemHover(attrs, itemValue),
+                    });
+                })),
+                // Screen reader text
+                m('.rating__sr-only', {
+                    className: 'rating__sr-only',
+                    'aria-live': 'polite',
+                    'aria-atomic': 'true',
+                }, getLabelText(displayValue, max, attrs.getLabelText)),
+            ]);
+        },
+    };
+};
+
 /**
  * @fileoverview Core TypeScript utility types for mithril-materialized library
  * These types improve type safety and developer experience across all components
@@ -8565,4 +8908,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, ImageList, InputCheckbox, Label, LargeButton, ListItem, Mandatory, Masonry, MaterialBox, MaterialIcon, ModalPanel, NumberInput, Options, OptionsList, Pagination, PaginationControls, Parallax, PasswordInput, Pushpin, PushpinComponent, RadioButton, RadioButtons, RangeInput, 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, createBreadcrumb, getDropdownStyles, initPushpins, initTooltips, isNumeric, isValidationError, isValidationSuccess, padLeft, range, 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, 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, createBreadcrumb, getDropdownStyles, initPushpins, initTooltips, isNumeric, isValidationError, isValidationSuccess, padLeft, range, toast, uniqueId, uuid4 };