mithril-materialized 3.2.1 → 3.2.2

package/dist/core.css

@@ -2673,6 +2673,9 @@ textarea.materialize-textarea {
 /* Character Counter */
 .character-counter {
   min-height: 18px;
+  font-size: 12px;
+  display: block;
+  text-align: right;
 }
 
 /* Input Clear Button */

package/dist/forms.css

@@ -1282,6 +1282,9 @@ textarea.materialize-textarea {
 /* Character Counter */
 .character-counter {
   min-height: 18px;
+  font-size: 12px;
+  display: block;
+  text-align: right;
 }
 
 /* Input Clear Button */

package/dist/index.css

@@ -6325,6 +6325,9 @@ textarea.materialize-textarea {
 /* Character Counter */
 .character-counter {
   min-height: 18px;
+  font-size: 12px;
+  display: block;
+  text-align: right;
 }
 
 /* Input Clear Button */

package/dist/index.esm.js

@@ -2789,10 +2789,6 @@ const CharacterCounter = () => {
             return m('span.character-counter', {
                 style: {
                     color: isOverLimit ? '#F44336' : '#9e9e9e',
-                    fontSize: '12px',
-                    display: 'block',
-                    textAlign: 'right',
-                    marginTop: '8px',
                 },
             }, `${currentLength}/${maxLength}`);
         },
@@ -2809,10 +2805,51 @@ const TextArea = () => {
         textarea: undefined,
         internalValue: '',
     };
-    const updateHeight = (textarea) => {
-        textarea.style.height = 'auto';
-        const newHeight = textarea.scrollHeight + 'px';
-        state.height = textarea.value.length === 0 ? undefined : newHeight;
+    const updateHeight = (textarea, hiddenDiv) => {
+        if (!textarea || !hiddenDiv)
+            return;
+        // Copy font properties from textarea to hidden div
+        const computedStyle = window.getComputedStyle(textarea);
+        hiddenDiv.style.fontFamily = computedStyle.fontFamily;
+        hiddenDiv.style.fontSize = computedStyle.fontSize;
+        hiddenDiv.style.lineHeight = computedStyle.lineHeight;
+        // Copy padding from textarea (important for accurate measurement)
+        hiddenDiv.style.paddingTop = computedStyle.paddingTop;
+        hiddenDiv.style.paddingRight = computedStyle.paddingRight;
+        hiddenDiv.style.paddingBottom = computedStyle.paddingBottom;
+        hiddenDiv.style.paddingLeft = computedStyle.paddingLeft;
+        // Handle text wrapping
+        if (textarea.getAttribute('wrap') === 'off') {
+            hiddenDiv.style.overflowWrap = 'normal';
+            hiddenDiv.style.whiteSpace = 'pre';
+        }
+        else {
+            hiddenDiv.style.overflowWrap = 'break-word';
+            hiddenDiv.style.whiteSpace = 'pre-wrap';
+        }
+        // Set content with extra newline for measurement
+        hiddenDiv.textContent = textarea.value + '\n';
+        const content = hiddenDiv.innerHTML.replace(/\n/g, '<br>');
+        hiddenDiv.innerHTML = content;
+        // Set width to match textarea
+        if (textarea.offsetWidth > 0) {
+            hiddenDiv.style.width = textarea.offsetWidth + 'px';
+        }
+        else {
+            hiddenDiv.style.width = window.innerWidth / 2 + 'px';
+        }
+        // Get the original/natural height of the textarea
+        const originalHeight = textarea.offsetHeight;
+        const measuredHeight = hiddenDiv.offsetHeight;
+        // Key logic: Only set custom height when content requires MORE space than original height
+        // This matches the Materialize CSS reference behavior
+        if (originalHeight <= measuredHeight) {
+            state.height = measuredHeight + 'px';
+        }
+        else {
+            // Single line content or content that fits in original height - let CSS handle it
+            state.height = undefined;
+        }
     };
     const isControlled = (attrs) => attrs.value !== undefined && attrs.oninput !== undefined;
     return {
@@ -2828,92 +2865,117 @@ const TextArea = () => {
             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;
-            return m('.input-field', { className, style }, [
-                iconName ? m('i.material-icons.prefix', iconName) : '',
-                m('textarea.materialize-textarea', Object.assign(Object.assign({}, params), { id, tabindex: 0, value: controlled ? currentValue : undefined, style: {
-                        height: state.height,
-                    }, oncreate: ({ dom }) => {
-                        const textarea = (state.textarea = dom);
-                        // For uncontrolled mode, set initial value only
-                        if (!controlled && attrs.defaultValue !== undefined) {
-                            textarea.value = String(attrs.defaultValue);
-                        }
-                        updateHeight(textarea);
-                        // Update character count state for counter component
-                        if (maxLength) {
-                            state.currentLength = textarea.value.length;
-                            m.redraw();
-                        }
-                    }, onupdate: ({ dom }) => {
-                        const textarea = dom;
-                        if (state.height)
-                            textarea.style.height = state.height;
-                        // No need to manually sync in onupdate since value attribute handles it
-                    }, onfocus: () => {
-                        state.active = true;
-                    }, oninput: (e) => {
-                        state.active = true;
-                        state.hasInteracted = false;
-                        const target = e.target;
-                        // Update height for auto-resize
-                        updateHeight(target);
-                        // Update character count
-                        if (maxLength) {
-                            state.currentLength = target.value.length;
-                            state.hasInteracted = target.value.length > 0;
-                        }
-                        // Update internal state for uncontrolled mode
-                        if (!controlled) {
-                            state.internalValue = target.value;
-                        }
-                        // Call oninput handler
-                        if (oninput) {
-                            oninput(target.value);
-                        }
-                    }, onblur: (e) => {
-                        state.active = false;
-                        // const target = e.target as HTMLTextAreaElement;
-                        state.hasInteracted = true;
-                        // Call original onblur if provided
-                        if (onblur) {
-                            onblur(e);
-                        }
-                        if (onchange && state.textarea) {
-                            onchange(state.textarea.value);
-                        }
-                    }, onkeyup: onkeyup
-                        ? (ev) => {
-                            onkeyup(ev, ev.target.value);
-                        }
-                        : undefined, onkeydown: onkeydown
-                        ? (ev) => {
-                            onkeydown(ev, ev.target.value);
+            return [
+                // Hidden div for height measurement - positioned outside the input-field
+                m('.hiddendiv', {
+                    style: {
+                        visibility: 'hidden',
+                        position: 'absolute',
+                        top: '0',
+                        left: '0',
+                        zIndex: '-1',
+                        whiteSpace: 'pre-wrap',
+                        wordWrap: 'break-word',
+                        overflowWrap: 'break-word',
+                    },
+                    oncreate: ({ dom }) => {
+                        const hiddenDiv = dom;
+                        if (state.textarea) {
+                            updateHeight(state.textarea, hiddenDiv);
                         }
-                        : undefined, onkeypress: onkeypress
-                        ? (ev) => {
-                            onkeypress(ev, ev.target.value);
+                    },
+                    onupdate: ({ dom }) => {
+                        const hiddenDiv = dom;
+                        if (state.textarea) {
+                            updateHeight(state.textarea, hiddenDiv);
                         }
-                        : undefined })),
-                m(Label, {
-                    label,
-                    id,
-                    isMandatory,
-                    isActive: currentValue || placeholder || state.active,
-                    initialValue: currentValue !== '',
-                }),
-                m(HelperText, {
-                    helperText,
-                    dataError: state.hasInteracted && attrs.dataError ? attrs.dataError : undefined,
-                    dataSuccess: state.hasInteracted && attrs.dataSuccess ? attrs.dataSuccess : undefined,
+                    },
                 }),
-                maxLength
-                    ? m(CharacterCounter, {
-                        currentLength: state.currentLength,
-                        maxLength,
-                        show: state.currentLength > 0,
-                    })
-                    : undefined,
-            ]);
+                m('.input-field', { className, style }, [
+                    iconName ? m('i.material-icons.prefix', iconName) : '',
+                    m('textarea.materialize-textarea', Object.assign(Object.assign({}, params), { id, tabindex: 0, value: controlled ? currentValue : undefined, style: {
+                            height: state.height,
+                        }, oncreate: ({ dom }) => {
+                            const textarea = (state.textarea = dom);
+                            // For uncontrolled mode, set initial value only
+                            if (!controlled && attrs.defaultValue !== undefined) {
+                                textarea.value = String(attrs.defaultValue);
+                            }
+                            // Height will be calculated by hidden div
+                            // Update character count state for counter component
+                            if (maxLength) {
+                                state.currentLength = textarea.value.length;
+                            }
+                        }, onupdate: ({ dom }) => {
+                            const textarea = dom;
+                            if (state.height)
+                                textarea.style.height = state.height;
+                            // No need to manually sync in onupdate since value attribute handles it
+                        }, onfocus: () => {
+                            state.active = true;
+                        }, oninput: (e) => {
+                            state.active = true;
+                            state.hasInteracted = false;
+                            const target = e.target;
+                            // Height will be recalculated by hidden div on next update
+                            // Update character count
+                            if (maxLength) {
+                                state.currentLength = target.value.length;
+                                state.hasInteracted = target.value.length > 0;
+                            }
+                            // Update internal state for uncontrolled mode
+                            if (!controlled) {
+                                state.internalValue = target.value;
+                            }
+                            // Call oninput handler
+                            if (oninput) {
+                                oninput(target.value);
+                            }
+                        }, onblur: (e) => {
+                            state.active = false;
+                            // const target = e.target as HTMLTextAreaElement;
+                            state.hasInteracted = true;
+                            // Call original onblur if provided
+                            if (onblur) {
+                                onblur(e);
+                            }
+                            if (onchange && state.textarea) {
+                                onchange(state.textarea.value);
+                            }
+                        }, onkeyup: onkeyup
+                            ? (ev) => {
+                                onkeyup(ev, ev.target.value);
+                            }
+                            : undefined, onkeydown: onkeydown
+                            ? (ev) => {
+                                onkeydown(ev, ev.target.value);
+                            }
+                            : undefined, onkeypress: onkeypress
+                            ? (ev) => {
+                                onkeypress(ev, ev.target.value);
+                            }
+                            : undefined })),
+                    m(Label, {
+                        label,
+                        id,
+                        isMandatory,
+                        isActive: currentValue || placeholder || state.active,
+                        initialValue: currentValue !== '',
+                    }),
+                    m(HelperText, {
+                        helperText,
+                        dataError: state.hasInteracted && attrs.dataError ? attrs.dataError : undefined,
+                        dataSuccess: state.hasInteracted && attrs.dataSuccess ? attrs.dataSuccess : undefined,
+                    }),
+                    maxLength
+                        ? m(CharacterCounter, {
+                            currentLength: state.currentLength,
+                            maxLength,
+                            show: state.currentLength > 0,
+                        })
+                        : undefined,
+                ]),
+            ];
         },
     };
 };
@@ -3085,7 +3147,9 @@ const InputField = (type, defaultClass = '') => () => {
                                 state.isValid = true;
                             }
                         }
-                        else if ((type === 'email' || type === 'url') && target.classList.contains('invalid') && target.value.length > 0) {
+                        else if ((type === 'email' || type === 'url') &&
+                            target.classList.contains('invalid') &&
+                            target.value.length > 0) {
                             // Clear native validation errors if user is typing and input becomes valid
                             if (target.validity.valid) {
                                 target.classList.remove('invalid');

package/dist/index.js

@@ -2791,10 +2791,6 @@ const CharacterCounter = () => {
             return m('span.character-counter', {
                 style: {
                     color: isOverLimit ? '#F44336' : '#9e9e9e',
-                    fontSize: '12px',
-                    display: 'block',
-                    textAlign: 'right',
-                    marginTop: '8px',
                 },
             }, `${currentLength}/${maxLength}`);
         },
@@ -2811,10 +2807,51 @@ const TextArea = () => {
         textarea: undefined,
         internalValue: '',
     };
-    const updateHeight = (textarea) => {
-        textarea.style.height = 'auto';
-        const newHeight = textarea.scrollHeight + 'px';
-        state.height = textarea.value.length === 0 ? undefined : newHeight;
+    const updateHeight = (textarea, hiddenDiv) => {
+        if (!textarea || !hiddenDiv)
+            return;
+        // Copy font properties from textarea to hidden div
+        const computedStyle = window.getComputedStyle(textarea);
+        hiddenDiv.style.fontFamily = computedStyle.fontFamily;
+        hiddenDiv.style.fontSize = computedStyle.fontSize;
+        hiddenDiv.style.lineHeight = computedStyle.lineHeight;
+        // Copy padding from textarea (important for accurate measurement)
+        hiddenDiv.style.paddingTop = computedStyle.paddingTop;
+        hiddenDiv.style.paddingRight = computedStyle.paddingRight;
+        hiddenDiv.style.paddingBottom = computedStyle.paddingBottom;
+        hiddenDiv.style.paddingLeft = computedStyle.paddingLeft;
+        // Handle text wrapping
+        if (textarea.getAttribute('wrap') === 'off') {
+            hiddenDiv.style.overflowWrap = 'normal';
+            hiddenDiv.style.whiteSpace = 'pre';
+        }
+        else {
+            hiddenDiv.style.overflowWrap = 'break-word';
+            hiddenDiv.style.whiteSpace = 'pre-wrap';
+        }
+        // Set content with extra newline for measurement
+        hiddenDiv.textContent = textarea.value + '\n';
+        const content = hiddenDiv.innerHTML.replace(/\n/g, '<br>');
+        hiddenDiv.innerHTML = content;
+        // Set width to match textarea
+        if (textarea.offsetWidth > 0) {
+            hiddenDiv.style.width = textarea.offsetWidth + 'px';
+        }
+        else {
+            hiddenDiv.style.width = window.innerWidth / 2 + 'px';
+        }
+        // Get the original/natural height of the textarea
+        const originalHeight = textarea.offsetHeight;
+        const measuredHeight = hiddenDiv.offsetHeight;
+        // Key logic: Only set custom height when content requires MORE space than original height
+        // This matches the Materialize CSS reference behavior
+        if (originalHeight <= measuredHeight) {
+            state.height = measuredHeight + 'px';
+        }
+        else {
+            // Single line content or content that fits in original height - let CSS handle it
+            state.height = undefined;
+        }
     };
     const isControlled = (attrs) => attrs.value !== undefined && attrs.oninput !== undefined;
     return {
@@ -2830,92 +2867,117 @@ const TextArea = () => {
             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;
-            return m('.input-field', { className, style }, [
-                iconName ? m('i.material-icons.prefix', iconName) : '',
-                m('textarea.materialize-textarea', Object.assign(Object.assign({}, params), { id, tabindex: 0, value: controlled ? currentValue : undefined, style: {
-                        height: state.height,
-                    }, oncreate: ({ dom }) => {
-                        const textarea = (state.textarea = dom);
-                        // For uncontrolled mode, set initial value only
-                        if (!controlled && attrs.defaultValue !== undefined) {
-                            textarea.value = String(attrs.defaultValue);
-                        }
-                        updateHeight(textarea);
-                        // Update character count state for counter component
-                        if (maxLength) {
-                            state.currentLength = textarea.value.length;
-                            m.redraw();
-                        }
-                    }, onupdate: ({ dom }) => {
-                        const textarea = dom;
-                        if (state.height)
-                            textarea.style.height = state.height;
-                        // No need to manually sync in onupdate since value attribute handles it
-                    }, onfocus: () => {
-                        state.active = true;
-                    }, oninput: (e) => {
-                        state.active = true;
-                        state.hasInteracted = false;
-                        const target = e.target;
-                        // Update height for auto-resize
-                        updateHeight(target);
-                        // Update character count
-                        if (maxLength) {
-                            state.currentLength = target.value.length;
-                            state.hasInteracted = target.value.length > 0;
-                        }
-                        // Update internal state for uncontrolled mode
-                        if (!controlled) {
-                            state.internalValue = target.value;
-                        }
-                        // Call oninput handler
-                        if (oninput) {
-                            oninput(target.value);
-                        }
-                    }, onblur: (e) => {
-                        state.active = false;
-                        // const target = e.target as HTMLTextAreaElement;
-                        state.hasInteracted = true;
-                        // Call original onblur if provided
-                        if (onblur) {
-                            onblur(e);
-                        }
-                        if (onchange && state.textarea) {
-                            onchange(state.textarea.value);
-                        }
-                    }, onkeyup: onkeyup
-                        ? (ev) => {
-                            onkeyup(ev, ev.target.value);
-                        }
-                        : undefined, onkeydown: onkeydown
-                        ? (ev) => {
-                            onkeydown(ev, ev.target.value);
+            return [
+                // Hidden div for height measurement - positioned outside the input-field
+                m('.hiddendiv', {
+                    style: {
+                        visibility: 'hidden',
+                        position: 'absolute',
+                        top: '0',
+                        left: '0',
+                        zIndex: '-1',
+                        whiteSpace: 'pre-wrap',
+                        wordWrap: 'break-word',
+                        overflowWrap: 'break-word',
+                    },
+                    oncreate: ({ dom }) => {
+                        const hiddenDiv = dom;
+                        if (state.textarea) {
+                            updateHeight(state.textarea, hiddenDiv);
                         }
-                        : undefined, onkeypress: onkeypress
-                        ? (ev) => {
-                            onkeypress(ev, ev.target.value);
+                    },
+                    onupdate: ({ dom }) => {
+                        const hiddenDiv = dom;
+                        if (state.textarea) {
+                            updateHeight(state.textarea, hiddenDiv);
                         }
-                        : undefined })),
-                m(Label, {
-                    label,
-                    id,
-                    isMandatory,
-                    isActive: currentValue || placeholder || state.active,
-                    initialValue: currentValue !== '',
-                }),
-                m(HelperText, {
-                    helperText,
-                    dataError: state.hasInteracted && attrs.dataError ? attrs.dataError : undefined,
-                    dataSuccess: state.hasInteracted && attrs.dataSuccess ? attrs.dataSuccess : undefined,
+                    },
                 }),
-                maxLength
-                    ? m(CharacterCounter, {
-                        currentLength: state.currentLength,
-                        maxLength,
-                        show: state.currentLength > 0,
-                    })
-                    : undefined,
-            ]);
+                m('.input-field', { className, style }, [
+                    iconName ? m('i.material-icons.prefix', iconName) : '',
+                    m('textarea.materialize-textarea', Object.assign(Object.assign({}, params), { id, tabindex: 0, value: controlled ? currentValue : undefined, style: {
+                            height: state.height,
+                        }, oncreate: ({ dom }) => {
+                            const textarea = (state.textarea = dom);
+                            // For uncontrolled mode, set initial value only
+                            if (!controlled && attrs.defaultValue !== undefined) {
+                                textarea.value = String(attrs.defaultValue);
+                            }
+                            // Height will be calculated by hidden div
+                            // Update character count state for counter component
+                            if (maxLength) {
+                                state.currentLength = textarea.value.length;
+                            }
+                        }, onupdate: ({ dom }) => {
+                            const textarea = dom;
+                            if (state.height)
+                                textarea.style.height = state.height;
+                            // No need to manually sync in onupdate since value attribute handles it
+                        }, onfocus: () => {
+                            state.active = true;
+                        }, oninput: (e) => {
+                            state.active = true;
+                            state.hasInteracted = false;
+                            const target = e.target;
+                            // Height will be recalculated by hidden div on next update
+                            // Update character count
+                            if (maxLength) {
+                                state.currentLength = target.value.length;
+                                state.hasInteracted = target.value.length > 0;
+                            }
+                            // Update internal state for uncontrolled mode
+                            if (!controlled) {
+                                state.internalValue = target.value;
+                            }
+                            // Call oninput handler
+                            if (oninput) {
+                                oninput(target.value);
+                            }
+                        }, onblur: (e) => {
+                            state.active = false;
+                            // const target = e.target as HTMLTextAreaElement;
+                            state.hasInteracted = true;
+                            // Call original onblur if provided
+                            if (onblur) {
+                                onblur(e);
+                            }
+                            if (onchange && state.textarea) {
+                                onchange(state.textarea.value);
+                            }
+                        }, onkeyup: onkeyup
+                            ? (ev) => {
+                                onkeyup(ev, ev.target.value);
+                            }
+                            : undefined, onkeydown: onkeydown
+                            ? (ev) => {
+                                onkeydown(ev, ev.target.value);
+                            }
+                            : undefined, onkeypress: onkeypress
+                            ? (ev) => {
+                                onkeypress(ev, ev.target.value);
+                            }
+                            : undefined })),
+                    m(Label, {
+                        label,
+                        id,
+                        isMandatory,
+                        isActive: currentValue || placeholder || state.active,
+                        initialValue: currentValue !== '',
+                    }),
+                    m(HelperText, {
+                        helperText,
+                        dataError: state.hasInteracted && attrs.dataError ? attrs.dataError : undefined,
+                        dataSuccess: state.hasInteracted && attrs.dataSuccess ? attrs.dataSuccess : undefined,
+                    }),
+                    maxLength
+                        ? m(CharacterCounter, {
+                            currentLength: state.currentLength,
+                            maxLength,
+                            show: state.currentLength > 0,
+                        })
+                        : undefined,
+                ]),
+            ];
         },
     };
 };
@@ -3087,7 +3149,9 @@ const InputField = (type, defaultClass = '') => () => {
                                 state.isValid = true;
                             }
                         }
-                        else if ((type === 'email' || type === 'url') && target.classList.contains('invalid') && target.value.length > 0) {
+                        else if ((type === 'email' || type === 'url') &&
+                            target.classList.contains('invalid') &&
+                            target.value.length > 0) {
                             // Clear native validation errors if user is typing and input becomes valid
                             if (target.validity.valid) {
                                 target.classList.remove('invalid');