@yamada-ui/react/dist/esm/hooks/use-field-sizing/index.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


import { useEffect, useMemo, useRef } from "react";
import { jsx } from "react/jsx-runtime";

//#region src/hooks/use-field-sizing/index.tsx
const useFieldSizing = ({ value = "" }) => {
	const ref = useRef(null);
	const textRef = useRef(null);
	const text = useMemo(() => /* @__PURE__ */ jsx("span", {
		ref: textRef,
		style: {
			opacity: 0,
			overflow: "hidden",
			position: "absolute",
			whiteSpace: "nowrap",
			zIndex: -1
		},
		"aria-hidden": true,
		children: value
	}), [value]);
	useEffect(() => {
		if (!textRef.current) return;
		const { width } = textRef.current.getBoundingClientRect();
		if (ref.current) ref.current.style.width = `${width}px`;
	}, [value]);
	return {
		ref,
		text
	};
};

//#endregion
export { useFieldSizing };
//# sourceMappingURL=index.js.map