mtrl 0.8.0-next.37 → 0.8.0-next.38

package/dist/components/textfield/api.d.ts

@@ -8,6 +8,7 @@ type ComponentWithDensity = BaseComponent & {
         set: (density: string) => void;
     };
     updateElementPositions?: () => void;
+    schedulePositionUpdate?: () => void;
     setError?: (error: boolean, message?: string) => any;
     isError?: () => boolean;
 };

package/dist/components/textfield/api.js

@@ -23,7 +23,7 @@ export const withAPI = ({ disabled, lifecycle }) => (component) => ({
         component.element.classList.remove(`${PREFIX}-${COMPONENT}--filled`, `${PREFIX}-${COMPONENT}--outlined`);
         component.element.classList.add(`${PREFIX}-${COMPONENT}--${variant}`);
         if (component.updateElementPositions) {
-            setTimeout(() => component.updateElementPositions(), 10);
+            component.schedulePositionUpdate?.();
         }
         return this;
     },
@@ -38,7 +38,7 @@ export const withAPI = ({ disabled, lifecycle }) => (component) => ({
     setLabel(text) {
         component.label?.setText(text);
         if (component.updateElementPositions) {
-            setTimeout(() => component.updateElementPositions(), 10);
+            component.schedulePositionUpdate?.();
         }
         return this;
     },
@@ -50,7 +50,7 @@ export const withAPI = ({ disabled, lifecycle }) => (component) => ({
         if (component.setLeadingIcon) {
             component.setLeadingIcon(html);
             if (component.updateElementPositions) {
-                setTimeout(() => component.updateElementPositions(), 10);
+                component.schedulePositionUpdate?.();
             }
         }
         return this;
@@ -59,7 +59,7 @@ export const withAPI = ({ disabled, lifecycle }) => (component) => ({
         if (component.removeLeadingIcon) {
             component.removeLeadingIcon();
             if (component.updateElementPositions) {
-                setTimeout(() => component.updateElementPositions(), 10);
+                component.schedulePositionUpdate?.();
             }
         }
         return this;
@@ -69,7 +69,7 @@ export const withAPI = ({ disabled, lifecycle }) => (component) => ({
         if (component.setTrailingIcon) {
             component.setTrailingIcon(html);
             if (component.updateElementPositions) {
-                setTimeout(() => component.updateElementPositions(), 10);
+                component.schedulePositionUpdate?.();
             }
         }
         return this;
@@ -78,7 +78,7 @@ export const withAPI = ({ disabled, lifecycle }) => (component) => ({
         if (component.removeTrailingIcon) {
             component.removeTrailingIcon();
             if (component.updateElementPositions) {
-                setTimeout(() => component.updateElementPositions(), 10);
+                component.schedulePositionUpdate?.();
             }
         }
         return this;
@@ -101,7 +101,7 @@ export const withAPI = ({ disabled, lifecycle }) => (component) => ({
         if (component.setPrefixText) {
             component.setPrefixText(text);
             if (component.updateElementPositions) {
-                setTimeout(() => component.updateElementPositions(), 10);
+                component.schedulePositionUpdate?.();
             }
         }
         return this;
@@ -110,7 +110,7 @@ export const withAPI = ({ disabled, lifecycle }) => (component) => ({
         if (component.removePrefixText) {
             component.removePrefixText();
             if (component.updateElementPositions) {
-                setTimeout(() => component.updateElementPositions(), 10);
+                component.schedulePositionUpdate?.();
             }
         }
         return this;
@@ -120,7 +120,7 @@ export const withAPI = ({ disabled, lifecycle }) => (component) => ({
         if (component.setSuffixText) {
             component.setSuffixText(text);
             if (component.updateElementPositions) {
-                setTimeout(() => component.updateElementPositions(), 10);
+                component.schedulePositionUpdate?.();
             }
         }
         return this;
@@ -129,7 +129,7 @@ export const withAPI = ({ disabled, lifecycle }) => (component) => ({
         if (component.removeSuffixText) {
             component.removeSuffixText();
             if (component.updateElementPositions) {
-                setTimeout(() => component.updateElementPositions(), 10);
+                component.schedulePositionUpdate?.();
             }
         }
         return this;

package/dist/components/textfield/features/density.js

@@ -27,7 +27,7 @@ export const withDensity = (config) => (component) => {
             component.density.current = newDensity;
         }
         if (component.updateElementPositions) {
-            setTimeout(() => component.updateElementPositions(), 10);
+            component.updateElementPositions();
         }
     };
     component.density = {

package/dist/components/textfield/features/leading-icon.js

@@ -14,11 +14,12 @@ export const withLeadingIcon = (config) => (component) => {
     if ('lifecycle' in component && component.lifecycle?.destroy) {
         const originalDestroy = component.lifecycle.destroy;
         component.lifecycle.destroy = () => {
+            clearTimeout(initialPosition);
             iconElement.remove();
             originalDestroy.call(component.lifecycle);
         };
     }
-    setTimeout(() => {
+    const initialPosition = setTimeout(() => {
         const labelEl = component.element.querySelector(`.${PREFIX}-${config.componentName || 'textfield'}-label`);
         if (labelEl) {
             if (!component.element.classList.contains(`${PREFIX}-${config.componentName || 'textfield'}--with-prefix`)) {

package/dist/components/textfield/features/placement.d.ts

@@ -17,6 +17,8 @@ export interface PlacementComponent extends BaseComponent {
      * @returns The component instance for chaining
      */
     updateElementPositions: () => PlacementComponent;
+    /** Queue a placement update owned by this component lifecycle. */
+    schedulePositionUpdate: () => void;
 }
 /**
  * Handles dynamic positioning of textfield elements (label, prefix, suffix)

package/dist/components/textfield/features/placement.js

@@ -2,12 +2,24 @@ import { getInheritedBackground } from "../../../core/utils/background.js";
 export const withPlacement = () => (component) => {
     const PREFIX = component.config.prefix || "mtrl";
     const COMPONENT = component.config.componentName || "textfield";
+    let destroyed = false;
+    let updateTimer = null;
+    const schedulePositionUpdate = () => {
+        if (destroyed)
+            return;
+        if (updateTimer !== null)
+            clearTimeout(updateTimer);
+        updateTimer = setTimeout(() => {
+            updateTimer = null;
+            updateElementPositions();
+        }, 10);
+    };
     const bgSourceObservers = new WeakMap();
     const parentObservers = new WeakMap();
     const themeChangeHandlers = new WeakMap();
     const classObservers = new WeakMap();
     const updateElementPositions = () => {
-        if (!component.element || !component.element.isConnected)
+        if (destroyed || !component.element || !component.element.isConnected)
             return component;
         const labelEl = component.element.querySelector(`.${PREFIX}-${COMPONENT}-label`);
         const prefixEl = component.element.querySelector(`.${PREFIX}-${COMPONENT}-prefix`);
@@ -110,7 +122,7 @@ export const withPlacement = () => (component) => {
             mutations.forEach((mutation) => {
                 if (mutation.type === "attributes" &&
                     mutation.attributeName === "class") {
-                    setTimeout(updateElementPositions, 10);
+                    schedulePositionUpdate();
                 }
             });
         });
@@ -121,13 +133,22 @@ export const withPlacement = () => (component) => {
         window.addEventListener("resize", updateElementPositions);
         classObservers.set(component.element, classObserver);
     };
-    setTimeout(() => {
+    const initialization = setTimeout(() => {
+        if (destroyed)
+            return;
         setupEventListeners();
         updateElementPositions();
     }, 0);
     if ("lifecycle" in component && component.lifecycle?.destroy) {
         const originalDestroy = component.lifecycle.destroy;
         component.lifecycle.destroy = () => {
+            if (destroyed)
+                return;
+            destroyed = true;
+            clearTimeout(initialization);
+            if (updateTimer !== null)
+                clearTimeout(updateTimer);
+            updateTimer = null;
             window.removeEventListener("resize", updateElementPositions);
             const classObserver = classObservers.get(component.element);
             if (classObserver) {
@@ -154,6 +175,7 @@ export const withPlacement = () => (component) => {
     }
     return {
         ...component,
+        schedulePositionUpdate,
         updateElementPositions: () => {
             updateElementPositions();
             return component;

package/dist/components/textfield/textfield.js

@@ -7,7 +7,7 @@ import { createBaseConfig, getElementConfig, getApiConfig } from "./config.js";
 const createTextfield = (config = {}) => {
     const baseConfig = createBaseConfig(config);
     try {
-        const textfield = pipe(createBase, withEvents(), withElement(getElementConfig(baseConfig)), withVariant(baseConfig), withDensity(baseConfig), withTextInput(baseConfig), withTextLabel(baseConfig), withLeadingIcon(baseConfig), withTrailingIcon(baseConfig), withPrefixText(baseConfig), withSuffixText(baseConfig), withSupportingText(baseConfig), withError(baseConfig), withDisabled(baseConfig), withLifecycle(), withPlacement(), (comp) => withAPI(getApiConfig(comp))(comp))(baseConfig);
+        const textfield = pipe(createBase, withEvents(), withElement(getElementConfig(baseConfig)), withLifecycle(), withVariant(baseConfig), withDensity(baseConfig), withTextInput(baseConfig), withTextLabel(baseConfig), withLeadingIcon(baseConfig), withTrailingIcon(baseConfig), withPrefixText(baseConfig), withSuffixText(baseConfig), withSupportingText(baseConfig), withError(baseConfig), withDisabled(baseConfig), withPlacement(), (comp) => withAPI(getApiConfig(comp))(comp))(baseConfig);
         return textfield;
     }
     catch (error) {

package/dist/core/compose/features/textinput.js

@@ -118,7 +118,7 @@ export const withTextInput = (config = {}) => (component) => {
         }
     });
     updateInputState();
-    setTimeout(() => {
+    const initialAutofillCheck = setTimeout(() => {
         checkForAutofill(false);
     }, 0);
     if (isMultiline) {
@@ -128,6 +128,7 @@ export const withTextInput = (config = {}) => (component) => {
     if (hasLifecycle(component)) {
         const originalDestroy = component.lifecycle.destroy;
         component.lifecycle.destroy = () => {
+            clearTimeout(initialAutofillCheck);
             if (autofillObserver) {
                 autofillObserver.disconnect();
             }