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

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

{"version":3,"file":"index.cjs","names":[],"sources":["../../../../src/hooks/use-field-sizing/index.tsx"],"sourcesContent":["\"use client\"\n\nimport { useEffect, useMemo, useRef } from \"react\"\n\nexport interface UseFieldSizingProps {\n  value?: string\n}\n\nexport const useFieldSizing = <Y extends HTMLElement>({\n  value = \"\",\n}: UseFieldSizingProps) => {\n  const ref = useRef<Y>(null)\n  const textRef = useRef<HTMLSpanElement>(null)\n  const text = useMemo(\n    () => (\n      <span\n        ref={textRef}\n        style={{\n          opacity: 0,\n          overflow: \"hidden\",\n          position: \"absolute\",\n          whiteSpace: \"nowrap\",\n          zIndex: -1,\n        }}\n        aria-hidden\n      >\n        {value}\n      </span>\n    ),\n    [value],\n  )\n\n  useEffect(() => {\n    if (!textRef.current) return\n\n    const { width } = textRef.current.getBoundingClientRect()\n\n    if (ref.current) ref.current.style.width = `${width}px`\n  }, [value])\n\n  return { ref, text }\n}\n\nexport type UseFieldSizingReturn = ReturnType<typeof useFieldSizing>\n"],"mappings":";;;;;;;;;;AAQA,MAAa,kBAAyC,EACpD,QAAQ,SACiB;CACzB,MAAM,wBAAgB,KAAK;CAC3B,MAAM,4BAAkC,KAAK;CAC7C,MAAM,gCAEF,2CAAC;EACC,KAAK;EACL,OAAO;GACL,SAAS;GACT,UAAU;GACV,UAAU;GACV,YAAY;GACZ,QAAQ;GACT;EACD;YAEC;GACI,EAET,CAAC,MAAM,CACR;AAED,4BAAgB;AACd,MAAI,CAAC,QAAQ,QAAS;EAEtB,MAAM,EAAE,UAAU,QAAQ,QAAQ,uBAAuB;AAEzD,MAAI,IAAI,QAAS,KAAI,QAAQ,MAAM,QAAQ,GAAG,MAAM;IACnD,CAAC,MAAM,CAAC;AAEX,QAAO;EAAE;EAAK;EAAM"}