@octanejs/textarea-autosize 0.0.1

package/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2013 Andrey Popp
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,25 @@
+# @octanejs/textarea-autosize
+
+Octane binding for `react-textarea-autosize@8.5.9`.
+
+```tsrx
+import TextareaAutosize from '@octanejs/textarea-autosize';
+
+export function Notes() @{
+  <TextareaAutosize minRows={2} maxRows={8} />
+}
+```
+
+The binding preserves the default component and named `TextareaAutosizeProps` and
+`TextareaHeightChangeMeta` types from `react-textarea-autosize@8.5.9`. Native
+textarea attributes, `minRows`, `maxRows`, `cacheMeasurements`, refs, form reset,
+font loading, window resizing, SSR, and `onHeightChange` are supported.
+
+The public `onChange` callback runs for user edits after uncontrolled sizing, as it
+does upstream. Octane passes the native `InputEvent` rather than a React
+`SyntheticEvent`; use `event.currentTarget.value` during dispatch. Assigning the
+DOM `value` property programmatically does not synthesize either framework's
+change callback—dispatch an input event when testing that path.
+
+`style.minHeight` and `style.maxHeight` are rejected in development. Use
+`minRows` and `maxRows` instead.

package/UPSTREAM.md

@@ -0,0 +1,33 @@
+# textarea-autosize upstream evidence
+
+- Package: `react-textarea-autosize@8.5.9`
+- npm tarball SHA-1: `ab8627b09aa04d8a2f45d5b5cd94c84d1d4a8893`
+- npm tarball SHA-256: `648a3eae6d4a8708e215b7272907ba018b5f77430acbb568a2c5aebd238ce945`
+- npm integrity: `sha512-U1DGlIQN5AwgjTyOEnI1oCcMuEr1pv1qOtklB2l4nyMGbHzWrI0eFsYK0zos2YWqAolJyG0IWJaqWmWj5ETh0A==`
+- Source commit: `ed1894cd8611d99fbea1c47adcf6ee522b1030fd`
+- License: MIT, copyright 2013 Andrey Popp
+- React oracle: `react@19.2.7`, `react-dom@19.2.7`, `@types/react@19.2.17`, and `@types/react-dom@19.2.3` via catalog `react-textarea-autosize-react-oracle` (exact pins; not `catalog:default`)
+- Published declarations oracle: `upstream/dist/declarations/src/index.d.ts` (sha256 `4b44a78900c844368d8f27ce485bb55bd17ba164cb31e3b8bbc64c6800da506c`), extracted byte-exact from the pinned npm tarball for the pristine type lane
+
+The npm artifact supplies the published distribution and package-condition boundary. The exact repository commit supplies the source and two upstream Jest artifacts absent from the tarball. `upstream/` is byte-exact development evidence and is excluded from publication.
+
+## Public surface crosswalk
+
+| Upstream surface | Octane surface | Status | Evidence |
+| --- | --- | --- | --- |
+| default `TextareaAutosize` | default `TextareaAutosize` | Ported | runtime, SSR, hydration, and browser lanes |
+| `TextareaAutosizeProps` | `TextareaAutosizeProps` | Ported with native event types | paired type lanes |
+| `TextareaHeightChangeMeta` | `TextareaHeightChangeMeta` | Ported | paired type lanes |
+| root conditional exports | root source export with matching conditions | Ported | packed resolver matrix |
+| `./package.json` | `./package.json` | Ported | packed resolver matrix |
+
+## Test disposition
+
+| Upstream artifact | Disposition |
+| --- | --- |
+| `src/__tests__/index.test.js` | Run pristine with React and adapted case-for-case under `tests/upstream/` |
+| `src/__tests__/__snapshots__/index.test.js.snap` | Retained pristine; equivalent adapted DOM assertions avoid framework snapshot internals |
+
+Port-authored runtime and type tests are classified fail-closed in `audit/test-classifications.json`. The pristine→adapted case map and negative controls live in `audit/upstream-crosswalk.json` and `scripts/react-parity/react-textarea-autosize-controls.test.mjs`. Paired type evidence is recorded in `audit/type-parity.json` with assertion-group inventories.
+
+The public callback remains named `onChange`, but Octane supplies a native input event rather than a React SyntheticEvent. The binding guarantees per-edit timing, target/currentTarget value during dispatch, bubbling, cancellation, and callback ordering. React-only event identity and fields are documented divergences.

package/package.json

@@ -0,0 +1,134 @@
+{
+  "name": "@octanejs/textarea-autosize",
+  "version": "0.0.1",
+  "description": "react-textarea-autosize for Octane with matching measurement and lifecycle behavior.",
+  "license": "MIT",
+  "type": "module",
+  "author": {
+    "name": "Octane contributors"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/octanejs/octane.git",
+    "directory": "packages/textarea-autosize"
+  },
+  "main": "src/index.tsrx",
+  "module": "src/index.tsrx",
+  "types": "src/index.tsrx",
+  "files": [
+    "src",
+    "README.md",
+    "UPSTREAM.md",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": {
+        "import": "./src/index.tsrx",
+        "default": "./src/index.tsrx"
+      },
+      "development": {
+        "edge-light": {
+          "module": "./src/index.tsrx",
+          "import": "./src/index.tsrx",
+          "default": "./src/index.tsrx"
+        },
+        "worker": {
+          "module": "./src/index.tsrx",
+          "import": "./src/index.tsrx",
+          "default": "./src/index.tsrx"
+        },
+        "workerd": {
+          "module": "./src/index.tsrx",
+          "import": "./src/index.tsrx",
+          "default": "./src/index.tsrx"
+        },
+        "browser": {
+          "module": "./src/index.tsrx",
+          "import": "./src/index.tsrx",
+          "default": "./src/index.tsrx"
+        },
+        "module": "./src/index.tsrx",
+        "import": "./src/index.tsrx",
+        "default": "./src/index.tsrx"
+      },
+      "edge-light": {
+        "module": "./src/index.tsrx",
+        "import": "./src/index.tsrx",
+        "default": "./src/index.tsrx"
+      },
+      "worker": {
+        "module": "./src/index.tsrx",
+        "import": "./src/index.tsrx",
+        "default": "./src/index.tsrx"
+      },
+      "workerd": {
+        "module": "./src/index.tsrx",
+        "import": "./src/index.tsrx",
+        "default": "./src/index.tsrx"
+      },
+      "browser": {
+        "module": "./src/index.tsrx",
+        "import": "./src/index.tsrx",
+        "default": "./src/index.tsrx"
+      },
+      "module": "./src/index.tsrx",
+      "import": "./src/index.tsrx",
+      "default": "./src/index.tsrx"
+    },
+    "./package.json": "./package.json"
+  },
+  "imports": {
+    "#is-development": {
+      "development": "./src/conditions/true.ts",
+      "default": "./src/conditions/false.ts"
+    },
+    "#is-browser": {
+      "edge-light": "./src/conditions/false.ts",
+      "workerd": "./src/conditions/false.ts",
+      "worker": "./src/conditions/false.ts",
+      "browser": "./src/conditions/true.ts",
+      "default": "./src/conditions/is-browser.ts"
+    }
+  },
+  "engines": {
+    "node": ">=22.22.2"
+  },
+  "peerDependencies": {
+    "octane": "0.1.35"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "7.29.7",
+    "@babel/preset-react": "7.29.7",
+    "@babel/preset-typescript": "7.29.7",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "16.3.2",
+    "@types/node": "^24.13.3",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react": "6.0.3",
+    "babel-jest": "30.4.1",
+    "jest": "30.4.2",
+    "jest-environment-jsdom": "30.4.1",
+    "playwright": "^1.61.1",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
+    "use-composed-ref": "1.3.0",
+    "use-latest": "1.2.1",
+    "typescript": "^5.9.3",
+    "vite": "^8.1.5",
+    "vitest": "^4.1.10",
+    "octane": "0.1.35"
+  },
+  "scripts": {
+    "test": "vitest run --root ../.. --project textarea-autosize --project textarea-autosize-ssr",
+    "test:browser": "vitest run --root ../.. --project textarea-autosize-browser",
+    "test:pristine": "CI=true jest --config jest.pristine.config.cjs --runInBand",
+    "test:types": "tsc -p audit/type-probes/tsconfig.pristine.json --noEmit && tsrx-tsc -p typetests/tsconfig.json --noEmit",
+    "verify:upstream": "node scripts/verify-upstream.mjs"
+  }
+}

package/src/calculateNodeHeight.ts

@@ -0,0 +1,38 @@
+import forceHiddenStyles from './forceHiddenStyles.js';
+import type { SizingData } from './getSizingData.js';
+
+export type CalculatedNodeHeights = number[];
+let hiddenTextarea: HTMLTextAreaElement | null = null;
+const getHeight = (node: HTMLElement, data: SizingData) =>
+	data.sizingStyle.boxSizing === 'border-box'
+		? node.scrollHeight + data.borderSize
+		: node.scrollHeight - data.paddingSize;
+
+export default function calculateNodeHeight(
+	data: SizingData,
+	value: string,
+	minRows = 1,
+	maxRows = Infinity,
+): CalculatedNodeHeights {
+	if (!hiddenTextarea) {
+		hiddenTextarea = document.createElement('textarea');
+		hiddenTextarea.setAttribute('tabindex', '-1');
+		hiddenTextarea.setAttribute('aria-hidden', 'true');
+		forceHiddenStyles(hiddenTextarea);
+	}
+	const measurementNode = hiddenTextarea;
+	if (measurementNode.parentNode === null) document.body.appendChild(measurementNode);
+	Object.assign(measurementNode.style, data.sizingStyle);
+	forceHiddenStyles(measurementNode);
+	measurementNode.value = value;
+	let height = getHeight(measurementNode, data);
+	measurementNode.value = value;
+	height = getHeight(measurementNode, data);
+	measurementNode.value = 'x';
+	const rowHeight = measurementNode.scrollHeight - data.paddingSize;
+	const boxDelta =
+		data.sizingStyle.boxSizing === 'border-box' ? data.paddingSize + data.borderSize : 0;
+	height = Math.max(rowHeight * minRows + boxDelta, height);
+	height = Math.min(rowHeight * maxRows + boxDelta, height);
+	return [height, rowHeight];
+}

package/src/conditions/false.ts

@@ -0,0 +1 @@
+export default false;

package/src/conditions/is-browser.ts

@@ -0,0 +1 @@
+export default typeof window !== 'undefined' && typeof document !== 'undefined';

package/src/conditions/true.ts

@@ -0,0 +1 @@
+export default true;

package/src/forceHiddenStyles.ts

@@ -0,0 +1,22 @@
+const HIDDEN_TEXTAREA_STYLE = {
+	'min-height': '0',
+	'max-height': 'none',
+	height: '0',
+	visibility: 'hidden',
+	overflow: 'hidden',
+	position: 'absolute',
+	'z-index': '-1000',
+	top: '0',
+	right: '0',
+	display: 'block',
+} as const;
+
+export default function forceHiddenStyles(node: HTMLElement): void {
+	Object.keys(HIDDEN_TEXTAREA_STYLE).forEach((key) => {
+		node.style.setProperty(
+			key,
+			HIDDEN_TEXTAREA_STYLE[key as keyof typeof HIDDEN_TEXTAREA_STYLE],
+			'important',
+		);
+	});
+}

package/src/getSizingData.ts

@@ -0,0 +1,48 @@
+import isBrowser from '#is-browser';
+import { pick } from './utils.js';
+
+const SIZING_STYLE = [
+	'borderBottomWidth',
+	'borderLeftWidth',
+	'borderRightWidth',
+	'borderTopWidth',
+	'boxSizing',
+	'fontFamily',
+	'fontSize',
+	'fontStyle',
+	'fontWeight',
+	'letterSpacing',
+	'lineHeight',
+	'paddingBottom',
+	'paddingLeft',
+	'paddingRight',
+	'paddingTop',
+	'tabSize',
+	'textIndent',
+	'textRendering',
+	'textTransform',
+	'width',
+	'wordBreak',
+	'wordSpacing',
+	'scrollbarGutter',
+] as const;
+type SizingProp = Extract<(typeof SIZING_STYLE)[number], keyof CSSStyleDeclaration>;
+type SizingStyle = Pick<CSSStyleDeclaration, SizingProp>;
+export type SizingData = { sizingStyle: SizingStyle; paddingSize: number; borderSize: number };
+const isIE = isBrowser ? !!(document.documentElement as any).currentStyle : false;
+
+export default function getSizingData(node: HTMLElement): SizingData | null {
+	const style = window.getComputedStyle(node);
+	if (style === null) return null;
+	const sizingStyle = pick(SIZING_STYLE as readonly SizingProp[], style);
+	if (sizingStyle.boxSizing === '') return null;
+	if (isIE && sizingStyle.boxSizing === 'border-box') {
+		sizingStyle.width = `${parseFloat(sizingStyle.width!) + parseFloat(sizingStyle.borderRightWidth!) + parseFloat(sizingStyle.borderLeftWidth!) + parseFloat(sizingStyle.paddingRight!) + parseFloat(sizingStyle.paddingLeft!)}px`;
+	}
+	return {
+		sizingStyle,
+		paddingSize: parseFloat(sizingStyle.paddingBottom!) + parseFloat(sizingStyle.paddingTop!),
+		borderSize:
+			parseFloat(sizingStyle.borderBottomWidth!) + parseFloat(sizingStyle.borderTopWidth!),
+	};
+}

package/src/hooks.ts

@@ -0,0 +1,52 @@
+/** @jsxImportSource octane */
+import { useEffectEvent, useLayoutEffect, useMemo } from 'octane';
+
+type Ref<T> = ((value: T | null) => void) | { current: T | null } | null | undefined;
+
+export function useComposedRef<T>(internal: { current: T | null }, external: Ref<T>) {
+	return useMemo(
+		() => (external == null ? internal : ([internal, external] as const)),
+		[internal, external],
+	);
+}
+
+function useListener<K extends keyof WindowEventMap>(
+	target: Window,
+	type: K,
+	listener: (event: WindowEventMap[K]) => void,
+): void;
+function useListener<K extends keyof HTMLElementEventMap>(
+	target: HTMLElement,
+	type: K,
+	listener: (event: HTMLElementEventMap[K]) => void,
+): void;
+function useListener<K extends keyof FontFaceSetEventMap>(
+	target: FontFaceSet,
+	type: K,
+	listener: (event: FontFaceSetEventMap[K]) => void,
+): void;
+function useListener(
+	target: EventTarget | undefined,
+	type: string,
+	listener: (event: Event) => void,
+): void {
+	const latestListener = useEffectEvent(listener);
+	useLayoutEffect(() => {
+		if (!target) return;
+		const handler = (event: Event) => latestListener(event);
+		target.addEventListener(type, handler);
+		return () => target.removeEventListener(type, handler);
+	}, []);
+}
+
+export const useFormResetListener = (
+	ref: { current: HTMLTextAreaElement | null },
+	listener: (event: Event) => void,
+) =>
+	useListener(document.body, 'reset', (event) => {
+		if (ref.current?.form === event.target) listener(event);
+	});
+export const useWindowResizeListener = (listener: (event: UIEvent) => void) =>
+	useListener(window, 'resize', listener);
+export const useFontsLoadedListener = (listener: (event: FontFaceSetLoadEvent) => void) =>
+	useListener(document.fonts, 'loadingdone', listener);

package/src/index.tsrx

@@ -0,0 +1,111 @@
+import isBrowser from '#is-browser';
+import isDevelopment from '#is-development';
+import { useLayoutEffect, useRef } from 'octane';
+import type { JSX } from 'octane/jsx-runtime';
+import calculateNodeHeight from './calculateNodeHeight.js';
+import getSizingData, { type SizingData } from './getSizingData.js';
+import {
+	useComposedRef,
+	useFontsLoadedListener,
+	useFormResetListener,
+	useWindowResizeListener,
+} from './hooks.js';
+import { noop } from './utils.js';
+
+type NativeTextareaProps = JSX.IntrinsicElements['textarea'];
+type TextareaStyle =
+	Omit<Exclude<NonNullable<NativeTextareaProps['style']>, string>, 'maxHeight' | 'minHeight'> & {
+		height?: number;
+	};
+type TextareaRef =
+	((value: HTMLTextAreaElement | null) => void) | { current: HTMLTextAreaElement | null } | null;
+// OCTANE DIVERGENCE[native-input-event][differential:input]
+type TextareaAutosizeChangeEvent =
+	InputEvent & {
+		currentTarget: HTMLTextAreaElement;
+		target: HTMLTextAreaElement;
+	};
+export type TextareaHeightChangeMeta = { rowHeight: number };
+export interface TextareaAutosizeProps extends Omit<
+	NativeTextareaProps,
+	'style' | 'onChange' | 'onChangeCapture' | 'ref'
+> {
+	maxRows?: number;
+	minRows?: number;
+	onHeightChange?: (height: number, meta: TextareaHeightChangeMeta) => void;
+	cacheMeasurements?: boolean;
+	style?: TextareaStyle;
+	onChange?: (event: TextareaAutosizeChangeEvent) => void;
+	onChangeCapture?: (event: TextareaAutosizeChangeEvent) => void;
+	ref?: TextareaRef;
+}
+
+export default function TextareaAutosize(
+	{
+		cacheMeasurements,
+		maxRows,
+		minRows,
+		onChange = noop,
+		onChangeCapture = noop,
+		onHeightChange = noop,
+		onInput,
+		onInputCapture,
+		ref: userRef,
+		...props
+	}: TextareaAutosizeProps = {},
+) @{
+	if (isDevelopment && props.style) {
+		if (
+			'maxHeight' in props.style
+		) throw new Error('Using `style.maxHeight` for <TextareaAutosize/> is not supported. Please use `maxRows`.');
+		if (
+			'minHeight' in props.style
+		) throw new Error('Using `style.minHeight` for <TextareaAutosize/> is not supported. Please use `minRows`.');
+	}
+	const isControlled = props.value !== undefined;
+	const libRef = useRef<HTMLTextAreaElement | null>(null);
+	const ref = useComposedRef(libRef, userRef);
+	const heightRef = useRef(0);
+	const measurementsCacheRef = useRef<SizingData | undefined>(undefined);
+	const resizeTextarea = () => {
+		const node = libRef.current;
+		if (!node) return;
+		const sizingData =
+			cacheMeasurements && measurementsCacheRef.current
+				? measurementsCacheRef.current
+				: getSizingData(node);
+		if (!sizingData) return;
+		measurementsCacheRef.current = sizingData;
+		const [height, rowHeight] = calculateNodeHeight(
+			sizingData,
+			node.value || node.placeholder || 'x',
+			minRows,
+			maxRows,
+		);
+		if (heightRef.current !== height) {
+			heightRef.current = height;
+			node.style.setProperty('height', `${height}px`, 'important');
+			onHeightChange(height, { rowHeight });
+		}
+	};
+	const handleInput: NonNullable<NativeTextareaProps['onInput']> = (event) => {
+		onInput?.(event);
+		onChangeCapture(event as TextareaAutosizeChangeEvent);
+		if (!isControlled) resizeTextarea();
+		onChange(event as TextareaAutosizeChangeEvent);
+	};
+	if (isBrowser) {
+		useLayoutEffect(resizeTextarea, null);
+		useFormResetListener(libRef, () => {
+			const node = libRef.current;
+			if (isControlled || !node) return;
+			const currentValue = node.value;
+			requestAnimationFrame(() => {
+				if (libRef.current && currentValue !== libRef.current.value) resizeTextarea();
+			});
+		});
+		useWindowResizeListener(resizeTextarea);
+		useFontsLoadedListener(resizeTextarea);
+	}
+	<textarea {...props} onInput={handleInput} onInputCapture={onInputCapture} ref={ref} />
+}

package/src/utils.ts

@@ -0,0 +1,13 @@
+export const noop = () => {};
+
+export const pick = <T extends object, K extends keyof T>(
+	props: readonly K[],
+	obj: T,
+): Pick<T, K> =>
+	props.reduce(
+		(acc, prop) => {
+			acc[prop] = obj[prop];
+			return acc;
+		},
+		{} as Pick<T, K>,
+	);