UNPKG

@grafana/ui

Version:
1 lines 2.28 kB
{"version":3,"file":"useMultiInputAutoSize.mjs","sources":["../../../../src/components/Combobox/useMultiInputAutoSize.tsx"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from 'react';\n\nimport { measureText } from '../../utils/measureText';\n\nexport function useMultiInputAutoSize(inputValue: string) {\n const inputRef = useRef<HTMLInputElement>(null);\n const initialInputWidth = useRef<number>(0); // Store initial width to prevent resizing on backspace\n const [inputWidth, setInputWidth] = useState<string>('');\n\n useLayoutEffect(() => {\n if (inputRef.current && inputValue == null && initialInputWidth.current === 0) {\n initialInputWidth.current = inputRef?.current.getBoundingClientRect().width;\n }\n\n if (!inputRef.current || inputValue == null) {\n setInputWidth('');\n return;\n }\n\n const fontSize = window.getComputedStyle(inputRef.current).fontSize;\n const textWidth = measureText(inputRef.current.value || '', parseInt(fontSize, 10)).width;\n\n if (textWidth < initialInputWidth.current) {\n // Let input fill all space before resizing\n setInputWidth('');\n } else {\n // Add pixels to prevent clipping\n setInputWidth(`${textWidth + 5}px`);\n }\n }, [inputValue]);\n\n return { inputRef, inputWidth };\n}\n"],"names":[],"mappings":";;;AAIO,SAAS,sBAAsB,UAAoB,EAAA;AACxD,EAAM,MAAA,QAAA,GAAW,OAAyB,IAAI,CAAA;AAC9C,EAAM,MAAA,iBAAA,GAAoB,OAAe,CAAC,CAAA;AAC1C,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAiB,EAAE,CAAA;AAEvD,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,IAAI,SAAS,OAAW,IAAA,UAAA,IAAc,IAAQ,IAAA,iBAAA,CAAkB,YAAY,CAAG,EAAA;AAC7E,MAAkB,iBAAA,CAAA,OAAA,GAAU,QAAU,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,OAAA,CAAQ,qBAAwB,EAAA,CAAA,KAAA;AAAA;AAGxE,IAAA,IAAI,CAAC,QAAA,CAAS,OAAW,IAAA,UAAA,IAAc,IAAM,EAAA;AAC3C,MAAA,aAAA,CAAc,EAAE,CAAA;AAChB,MAAA;AAAA;AAGF,IAAA,MAAM,QAAW,GAAA,MAAA,CAAO,gBAAiB,CAAA,QAAA,CAAS,OAAO,CAAE,CAAA,QAAA;AAC3D,IAAM,MAAA,SAAA,GAAY,WAAY,CAAA,QAAA,CAAS,OAAQ,CAAA,KAAA,IAAS,IAAI,QAAS,CAAA,QAAA,EAAU,EAAE,CAAC,CAAE,CAAA,KAAA;AAEpF,IAAI,IAAA,SAAA,GAAY,kBAAkB,OAAS,EAAA;AAEzC,MAAA,aAAA,CAAc,EAAE,CAAA;AAAA,KACX,MAAA;AAEL,MAAc,aAAA,CAAA,CAAA,EAAG,SAAY,GAAA,CAAC,CAAI,EAAA,CAAA,CAAA;AAAA;AACpC,GACF,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAO,OAAA,EAAE,UAAU,UAAW,EAAA;AAChC;;;;"}