stimeo-ui 0.7.0 → 0.9.0

package/dist/controllers/textarea_autosize_controller.js

@@ -1,5 +1,63 @@
 import { Controller } from '@hotwired/stimulus';
 
+// src/controllers/textarea_autosize_controller.ts
+
+// src/utils/layout_observer.ts
+var LayoutObserver = class {
+  #callback;
+  #resizeObserverFactory;
+  #resizeObserver = null;
+  #observingViewport = false;
+  /** Stable bound handler so add/removeEventListener target the same reference. */
+  #handleViewportResize = () => {
+    this.#callback();
+  };
+  constructor(callback, options = {}) {
+    this.#callback = callback;
+    this.#resizeObserverFactory = options.resizeObserverFactory ?? (typeof ResizeObserver === "undefined" ? null : (cb) => new ResizeObserver(cb));
+  }
+  /**
+   * Starts observing an element's size. Repeated calls observe additional
+   * elements through the same shared observer. No-ops when no
+   * `ResizeObserver` implementation is available.
+   */
+  observe(element) {
+    if (!this.#resizeObserverFactory) return;
+    if (!this.#resizeObserver) {
+      this.#resizeObserver = this.#resizeObserverFactory(() => {
+        this.#callback();
+      });
+    }
+    this.#resizeObserver.observe(element);
+  }
+  /** Stops observing a single element while leaving any others in place. */
+  unobserve(element) {
+    this.#resizeObserver?.unobserve(element);
+  }
+  /** Starts observing viewport resizes. Idempotent: the listener is added once. */
+  observeViewport() {
+    if (this.#observingViewport) return;
+    this.#observingViewport = true;
+    window.addEventListener("resize", this.#handleViewportResize);
+  }
+  /** Stops observing viewport resizes without affecting element observation. */
+  unobserveViewport() {
+    if (!this.#observingViewport) return;
+    this.#observingViewport = false;
+    window.removeEventListener("resize", this.#handleViewportResize);
+  }
+  /**
+   * Releases every observation: disconnects the {@link ResizeObserver} and
+   * removes the viewport listener. Safe to call multiple times. Call this from a
+   * controller's `disconnect()`.
+   */
+  disconnect() {
+    this.#resizeObserver?.disconnect();
+    this.#resizeObserver = null;
+    this.unobserveViewport();
+  }
+};
+
 // src/controllers/textarea_autosize_controller.ts
 function px(value) {
   const n = Number.parseFloat(value);
@@ -13,18 +71,69 @@ var TextareaAutosizeController = class extends Controller {
   static actions = ["resize"];
   static events = ["resize"];
   #lastHeight = -1;
-  #onInput = () => {
+  #lastWidth = -1;
+  #started = false;
+  #pending = false;
+  #fonts = null;
+  /**
+   * Content triggers arriving while the box is collapsed (`display: none`
+   * ancestors) are deferred: `scrollHeight` is 0 there, so measuring would
+   * clamp the kept height to the `minRows` floor and dispatch a bogus
+   * `resize`. The next report from a rendered box flushes the deferral.
+   */
+  #remeasure = () => {
+    if (this.element.clientWidth === 0) {
+      this.#pending = true;
+      return;
+    }
     this.resize();
   };
+  /**
+   * Re-measures when the content width changed (re-wrapping, including a
+   * horizontal padding change under `border-box`), the applied inline height
+   * was stripped (a Turbo morph syncing attributes from server HTML that has no
+   * `style`), or a content trigger was deferred while the box was collapsed.
+   * This instance's own height writes match none of these signals, so they
+   * cannot re-enter; an authored inline height (e.g. a user dragging the native
+   * resize handle) is left alone until the next content trigger. Reports from a
+   * still-collapsed box are skipped (nothing is measurable there).
+   */
+  #layout = new LayoutObserver(() => {
+    if (this.element.clientWidth === 0) return;
+    const width = this.#contentWidth();
+    const stripped = this.element.style.height === "";
+    if (width === this.#lastWidth && !stripped && !this.#pending) return;
+    this.#lastWidth = width;
+    this.resize();
+  });
   connect() {
-    this.element.addEventListener("input", this.#onInput);
+    this.#lastHeight = Math.round(px(this.element.style.height));
+    this.#lastWidth = this.#contentWidth();
+    this.element.addEventListener("input", this.#remeasure);
+    this.element.addEventListener("change", this.#remeasure);
+    this.#layout.observe(this.element);
+    this.#bindFonts();
+    this.#started = true;
     this.resize();
   }
   disconnect() {
-    this.element.removeEventListener("input", this.#onInput);
+    this.#started = false;
+    this.element.removeEventListener("input", this.#remeasure);
+    this.element.removeEventListener("change", this.#remeasure);
+    this.#layout.disconnect();
+    this.#unbindFonts();
+  }
+  /** Re-clamps when application code or a Turbo morph changes `minRows`. */
+  minRowsValueChanged() {
+    if (this.#started) this.#remeasure();
+  }
+  /** Re-clamps when application code or a Turbo morph changes `maxRows`. */
+  maxRowsValueChanged() {
+    if (this.#started) this.#remeasure();
   }
   /** Re-measures the content and applies the clamped height. */
   resize() {
+    this.#pending = false;
     const el = this.element;
     const style = window.getComputedStyle(el);
     const lineHeight = this.#lineHeight(style);
@@ -58,6 +167,11 @@ var TextareaAutosizeController = class extends Controller {
       this.dispatch("resize", { detail: { height, rows } });
     }
   }
+  /** Content-box width — the wrapping input, unaffected by this instance's height writes. */
+  #contentWidth() {
+    const style = window.getComputedStyle(this.element);
+    return Math.max(0, this.element.clientWidth - px(style.paddingLeft) - px(style.paddingRight));
+  }
   /** Resolved line height, falling back to ~1.2× font-size when `normal`. */
   #lineHeight(style) {
     const lh = px(style.lineHeight);
@@ -65,6 +179,20 @@ var TextareaAutosizeController = class extends Controller {
     const fontSize = px(style.fontSize);
     return fontSize > 0 ? fontSize * 1.2 : 16;
   }
+  /** Subscribes to font completion when the current engine exposes `document.fonts`. */
+  #bindFonts() {
+    const fonts = this.element.ownerDocument.fonts;
+    if (!fonts) return;
+    this.#fonts = fonts;
+    fonts.addEventListener("loadingdone", this.#remeasure);
+    fonts.addEventListener("loadingerror", this.#remeasure);
+  }
+  /** Removes the font completion subscriptions. */
+  #unbindFonts() {
+    this.#fonts?.removeEventListener("loadingdone", this.#remeasure);
+    this.#fonts?.removeEventListener("loadingerror", this.#remeasure);
+    this.#fonts = null;
+  }
 };
 
 export { TextareaAutosizeController };

package/dist/controllers/textarea_autosize_controller.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/controllers/textarea_autosize_controller.ts"],"names":[],"mappings":"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","file":"textarea_autosize_controller.js","sourcesContent":["import { Controller } from \"@hotwired/stimulus\";\n\n/** Parses a CSS pixel length, defaulting to 0 for `auto` / empty / `normal`. */\nfunction px(value: string): number {\n  const n = Number.parseFloat(value);\n  return Number.isNaN(n) ? 0 : n;\n}\n\n/**\n * Headless autosize behavior for a `<textarea>`: grows the element to fit its\n * content (and clamps to `minRows` / `maxRows`, scrolling past the max). No APG\n * pattern; supports WCAG 1.4.4 by following the text as it grows.\n *\n * Markup contract (identifier: `stimeo--textarea-autosize`):\n *   <textarea\n *     data-controller=\"stimeo--textarea-autosize\"\n *     data-stimeo--textarea-autosize-max-rows-value=\"10\"></textarea>\n *\n * On connect and on every input it collapses the element (`height:auto`), reads\n * `scrollHeight`, and sets an explicit pixel height clamped between `minRows` and\n * `maxRows` (in line-height units), toggling internal scrolling and the\n * `data-at-max-rows` hook at the cap. Height-only changes preserve focus and caret.\n *\n * `resize` dispatches `{ height, rows }`.\n *\n * @remarks\n * Behavior only — the height is written to the element's own inline style, never a\n * CSS class. State lives on the element (no module-scope state), so `connect()`\n * re-measures after a Turbo navigation / morph. The input listener is removed on\n * `disconnect()` (Turbo navigation included). Measurement is synchronous, so there\n * is no pending animation frame to tear down.\n */\nexport class TextareaAutosizeController extends Controller<HTMLTextAreaElement> {\n  static override values = {\n    minRows: { type: Number, default: 1 },\n    maxRows: { type: Number, default: 0 },\n  };\n  static actions = [\"resize\"] as const;\n  static events = [\"resize\"] as const;\n\n  declare minRowsValue: number;\n  declare maxRowsValue: number;\n\n  #lastHeight = -1;\n\n  readonly #onInput = (): void => {\n    this.resize();\n  };\n\n  override connect(): void {\n    this.element.addEventListener(\"input\", this.#onInput);\n    this.resize();\n  }\n\n  override disconnect(): void {\n    this.element.removeEventListener(\"input\", this.#onInput);\n  }\n\n  /** Re-measures the content and applies the clamped height. */\n  resize(): void {\n    const el = this.element;\n    const style = window.getComputedStyle(el);\n    const lineHeight = this.#lineHeight(style);\n    const paddingV = px(style.paddingTop) + px(style.paddingBottom);\n    const borderV = px(style.borderTopWidth) + px(style.borderBottomWidth);\n    const borderBox = style.boxSizing === \"border-box\";\n\n    // Collapse first so scrollHeight reflects the content, not the prior height.\n    el.style.height = \"auto\";\n    const contentHeight = Math.max(0, el.scrollHeight - paddingV);\n    const rows = Math.max(1, Math.round(contentHeight / lineHeight));\n\n    let targetContent = Math.max(contentHeight, this.minRowsValue * lineHeight);\n    let atMax = false;\n    if (this.maxRowsValue > 0) {\n      const maxContent = this.maxRowsValue * lineHeight;\n      if (targetContent > maxContent) {\n        targetContent = maxContent;\n        atMax = true;\n      }\n    }\n\n    const boxExtra = borderBox ? paddingV + borderV : 0;\n    const height = Math.round(targetContent + boxExtra);\n    el.style.height = `${height}px`;\n    el.style.overflowY = atMax ? \"auto\" : \"hidden\";\n\n    if (atMax) {\n      el.setAttribute(\"data-at-max-rows\", \"true\");\n    } else {\n      el.removeAttribute(\"data-at-max-rows\");\n    }\n    el.style.setProperty(\"--stimeo--textarea-rows\", String(rows));\n\n    if (height !== this.#lastHeight) {\n      this.#lastHeight = height;\n      this.dispatch(\"resize\", { detail: { height, rows } });\n    }\n  }\n\n  /** Resolved line height, falling back to ~1.2× font-size when `normal`. */\n  #lineHeight(style: CSSStyleDeclaration): number {\n    const lh = px(style.lineHeight);\n    if (lh > 0) return lh;\n    const fontSize = px(style.fontSize);\n    return fontSize > 0 ? fontSize * 1.2 : 16;\n  }\n}\n"]}
+{"version":3,"sources":["../../src/utils/layout_observer.ts","../../src/controllers/textarea_autosize_controller.ts"],"names":[],"mappings":"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","file":"textarea_autosize_controller.js","sourcesContent":["/**\n * Unified element-size and viewport observation for Stimeo controllers.\n *\n * Layout-sensitive widgets (sliders, resizable panes, scroll spies, popovers)\n * need to react both to their *own* box changing — via {@link ResizeObserver} —\n * and to the *viewport* changing — via the `window` `resize` event. Wiring those\n * two sources by hand in every controller risks leaked listeners on\n * `disconnect()`. {@link LayoutObserver} owns both behind one callback and one\n * {@link LayoutObserver.disconnect | disconnect()} that releases everything.\n *\n * Behavior only: the helper reports *that* layout changed; it never reads or\n * writes styles. Consumers decide what to recompute.\n */\n\n/** Invoked whenever an observed element or the viewport changes size. */\nexport type LayoutCallback = () => void;\n\n/** Constructs a {@link ResizeObserver}; injectable so tests stay deterministic. */\nexport type ResizeObserverFactory = (callback: ResizeObserverCallback) => ResizeObserver;\n\n/** Options for {@link LayoutObserver}. */\nexport interface LayoutObserverOptions {\n  /**\n   * Factory for the {@link ResizeObserver} used by {@link LayoutObserver.observe}.\n   * Defaults to the global constructor; override it in tests, or to no-op in\n   * environments where `ResizeObserver` is unavailable.\n   */\n  resizeObserverFactory?: ResizeObserverFactory;\n}\n\n/**\n * Observes element resizes and/or viewport resizes through a single callback,\n * with guaranteed teardown.\n *\n * @example\n * ```ts\n * #layout = new LayoutObserver(() => this.#reposition());\n *\n * connect() {\n *   this.#layout.observe(this.panelTarget);\n *   this.#layout.observeViewport();\n * }\n *\n * disconnect() {\n *   this.#layout.disconnect();\n * }\n * ```\n */\nexport class LayoutObserver {\n  readonly #callback: LayoutCallback;\n  readonly #resizeObserverFactory: ResizeObserverFactory | null;\n  #resizeObserver: ResizeObserver | null = null;\n  #observingViewport = false;\n\n  /** Stable bound handler so add/removeEventListener target the same reference. */\n  readonly #handleViewportResize = (): void => {\n    this.#callback();\n  };\n\n  constructor(callback: LayoutCallback, options: LayoutObserverOptions = {}) {\n    this.#callback = callback;\n    this.#resizeObserverFactory =\n      options.resizeObserverFactory ??\n      (typeof ResizeObserver === \"undefined\" ? null : (cb) => new ResizeObserver(cb));\n  }\n\n  /**\n   * Starts observing an element's size. Repeated calls observe additional\n   * elements through the same shared observer. No-ops when no\n   * `ResizeObserver` implementation is available.\n   */\n  observe(element: Element): void {\n    if (!this.#resizeObserverFactory) return;\n    if (!this.#resizeObserver) {\n      this.#resizeObserver = this.#resizeObserverFactory(() => {\n        this.#callback();\n      });\n    }\n    this.#resizeObserver.observe(element);\n  }\n\n  /** Stops observing a single element while leaving any others in place. */\n  unobserve(element: Element): void {\n    this.#resizeObserver?.unobserve(element);\n  }\n\n  /** Starts observing viewport resizes. Idempotent: the listener is added once. */\n  observeViewport(): void {\n    if (this.#observingViewport) return;\n    this.#observingViewport = true;\n    window.addEventListener(\"resize\", this.#handleViewportResize);\n  }\n\n  /** Stops observing viewport resizes without affecting element observation. */\n  unobserveViewport(): void {\n    if (!this.#observingViewport) return;\n    this.#observingViewport = false;\n    window.removeEventListener(\"resize\", this.#handleViewportResize);\n  }\n\n  /**\n   * Releases every observation: disconnects the {@link ResizeObserver} and\n   * removes the viewport listener. Safe to call multiple times. Call this from a\n   * controller's `disconnect()`.\n   */\n  disconnect(): void {\n    this.#resizeObserver?.disconnect();\n    this.#resizeObserver = null;\n    this.unobserveViewport();\n  }\n}\n","import { Controller } from \"@hotwired/stimulus\";\nimport { LayoutObserver } from \"../utils/layout_observer\";\n\n/** Parses a CSS pixel length, defaulting to 0 for `auto` / empty / `normal`. */\nfunction px(value: string): number {\n  const n = Number.parseFloat(value);\n  return Number.isNaN(n) ? 0 : n;\n}\n\n/** The event surface used by `document.fonts` without requiring it in older engines. */\ninterface FontEventSource {\n  addEventListener(type: string, listener: EventListener): void;\n  removeEventListener(type: string, listener: EventListener): void;\n}\n\n/**\n * Headless autosize behavior for a `<textarea>`: grows the element to fit its\n * content (and clamps to `minRows` / `maxRows`, scrolling past the max). No APG\n * pattern; supports WCAG 1.4.4 by following the text as it grows.\n *\n * Markup contract (identifier: `stimeo--textarea-autosize`):\n *   <textarea\n *     data-controller=\"stimeo--textarea-autosize\"\n *     data-stimeo--textarea-autosize-max-rows-value=\"10\"></textarea>\n *\n * Each re-measure collapses the element (`height:auto`), reads `scrollHeight`,\n * and sets an explicit pixel height clamped between `minRows` and `maxRows` (in\n * line-height units), toggling internal scrolling and the `data-at-max-rows`\n * hook at the cap. Height-only changes preserve focus and caret.\n *\n * Re-measure triggers: `connect()`; `input` and `change` on the element\n * (`change` covers programmatic writers that announce the write with a bubbling\n * event, the convention Stimeo's own field-writing controllers follow); element\n * size reports via the shared {@link LayoutObserver} — width changes\n * (re-wrapping) and the applied inline height being stripped (a Turbo morph\n * syncing attributes); font loading settling on `document.fonts`; runtime\n * `minRows` / `maxRows` changes; and the explicit `resize` action. A silent\n * `.value` assignment produces no DOM signal, so callers follow it with\n * `resize` or dispatch `input` / `change`.\n *\n * `resize` dispatches `{ height, rows }` only when the applied height differs\n * from the height this instance last applied. `connect()` adopts a height left\n * on the element by a previous connection (Turbo restore / morph), so restoring\n * an unchanged element stays silent.\n *\n * @remarks\n * Behavior only — the height is written to the element's own inline style, never\n * a CSS class. State lives on the element (no module-scope state), so `connect()`\n * re-measures after a Turbo navigation / morph. Every subscription (`input` /\n * `change` listeners, the layout observer, the font listeners) is released on\n * `disconnect()` (Turbo navigation included). Measurement is synchronous, so\n * there is no pending animation frame to tear down. The layout callback\n * re-measures only when the element's width changed or the applied inline\n * height vanished, so the controller's own height writes do not re-enter it.\n */\nexport class TextareaAutosizeController extends Controller<HTMLTextAreaElement> {\n  static override values = {\n    minRows: { type: Number, default: 1 },\n    maxRows: { type: Number, default: 0 },\n  };\n  static actions = [\"resize\"] as const;\n  static events = [\"resize\"] as const;\n\n  declare minRowsValue: number;\n  declare maxRowsValue: number;\n\n  #lastHeight = -1;\n  #lastWidth = -1;\n  #started = false;\n  #pending = false;\n  #fonts: FontEventSource | null = null;\n\n  /**\n   * Content triggers arriving while the box is collapsed (`display: none`\n   * ancestors) are deferred: `scrollHeight` is 0 there, so measuring would\n   * clamp the kept height to the `minRows` floor and dispatch a bogus\n   * `resize`. The next report from a rendered box flushes the deferral.\n   */\n  readonly #remeasure = (): void => {\n    if (this.element.clientWidth === 0) {\n      this.#pending = true;\n      return;\n    }\n    this.resize();\n  };\n\n  /**\n   * Re-measures when the content width changed (re-wrapping, including a\n   * horizontal padding change under `border-box`), the applied inline height\n   * was stripped (a Turbo morph syncing attributes from server HTML that has no\n   * `style`), or a content trigger was deferred while the box was collapsed.\n   * This instance's own height writes match none of these signals, so they\n   * cannot re-enter; an authored inline height (e.g. a user dragging the native\n   * resize handle) is left alone until the next content trigger. Reports from a\n   * still-collapsed box are skipped (nothing is measurable there).\n   */\n  readonly #layout = new LayoutObserver(() => {\n    if (this.element.clientWidth === 0) return;\n    const width = this.#contentWidth();\n    const stripped = this.element.style.height === \"\";\n    if (width === this.#lastWidth && !stripped && !this.#pending) return;\n    this.#lastWidth = width;\n    this.resize();\n  });\n\n  override connect(): void {\n    // Adopt a height applied by a previous connection (kept by Turbo restore /\n    // morph) so re-measuring an unchanged element does not re-dispatch `resize`.\n    this.#lastHeight = Math.round(px(this.element.style.height));\n    this.#lastWidth = this.#contentWidth();\n    this.element.addEventListener(\"input\", this.#remeasure);\n    this.element.addEventListener(\"change\", this.#remeasure);\n    this.#layout.observe(this.element);\n    this.#bindFonts();\n    this.#started = true;\n    this.resize();\n  }\n\n  override disconnect(): void {\n    this.#started = false;\n    this.element.removeEventListener(\"input\", this.#remeasure);\n    this.element.removeEventListener(\"change\", this.#remeasure);\n    this.#layout.disconnect();\n    this.#unbindFonts();\n  }\n\n  /** Re-clamps when application code or a Turbo morph changes `minRows`. */\n  minRowsValueChanged(): void {\n    if (this.#started) this.#remeasure();\n  }\n\n  /** Re-clamps when application code or a Turbo morph changes `maxRows`. */\n  maxRowsValueChanged(): void {\n    if (this.#started) this.#remeasure();\n  }\n\n  /** Re-measures the content and applies the clamped height. */\n  resize(): void {\n    this.#pending = false;\n    const el = this.element;\n    const style = window.getComputedStyle(el);\n    const lineHeight = this.#lineHeight(style);\n    const paddingV = px(style.paddingTop) + px(style.paddingBottom);\n    const borderV = px(style.borderTopWidth) + px(style.borderBottomWidth);\n    const borderBox = style.boxSizing === \"border-box\";\n\n    // Collapse first so scrollHeight reflects the content, not the prior height.\n    el.style.height = \"auto\";\n    const contentHeight = Math.max(0, el.scrollHeight - paddingV);\n    const rows = Math.max(1, Math.round(contentHeight / lineHeight));\n\n    let targetContent = Math.max(contentHeight, this.minRowsValue * lineHeight);\n    let atMax = false;\n    if (this.maxRowsValue > 0) {\n      const maxContent = this.maxRowsValue * lineHeight;\n      if (targetContent > maxContent) {\n        targetContent = maxContent;\n        atMax = true;\n      }\n    }\n\n    const boxExtra = borderBox ? paddingV + borderV : 0;\n    const height = Math.round(targetContent + boxExtra);\n    el.style.height = `${height}px`;\n    el.style.overflowY = atMax ? \"auto\" : \"hidden\";\n\n    if (atMax) {\n      el.setAttribute(\"data-at-max-rows\", \"true\");\n    } else {\n      el.removeAttribute(\"data-at-max-rows\");\n    }\n    el.style.setProperty(\"--stimeo--textarea-rows\", String(rows));\n\n    if (height !== this.#lastHeight) {\n      this.#lastHeight = height;\n      this.dispatch(\"resize\", { detail: { height, rows } });\n    }\n  }\n\n  /** Content-box width — the wrapping input, unaffected by this instance's height writes. */\n  #contentWidth(): number {\n    const style = window.getComputedStyle(this.element);\n    return Math.max(0, this.element.clientWidth - px(style.paddingLeft) - px(style.paddingRight));\n  }\n\n  /** Resolved line height, falling back to ~1.2× font-size when `normal`. */\n  #lineHeight(style: CSSStyleDeclaration): number {\n    const lh = px(style.lineHeight);\n    if (lh > 0) return lh;\n    const fontSize = px(style.fontSize);\n    return fontSize > 0 ? fontSize * 1.2 : 16;\n  }\n\n  /** Subscribes to font completion when the current engine exposes `document.fonts`. */\n  #bindFonts(): void {\n    const fonts = (this.element.ownerDocument as Document & { fonts?: FontEventSource }).fonts;\n    if (!fonts) return;\n    this.#fonts = fonts;\n    fonts.addEventListener(\"loadingdone\", this.#remeasure);\n    fonts.addEventListener(\"loadingerror\", this.#remeasure);\n  }\n\n  /** Removes the font completion subscriptions. */\n  #unbindFonts(): void {\n    this.#fonts?.removeEventListener(\"loadingdone\", this.#remeasure);\n    this.#fonts?.removeEventListener(\"loadingerror\", this.#remeasure);\n    this.#fonts = null;\n  }\n}\n"]}