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

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

"use client";


const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);

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

//#endregion
exports.useFieldSizing = useFieldSizing;
//# sourceMappingURL=index.cjs.map