{
  "version": 3,
  "sources": ["../../../../../src/lib/ui/components/primitives/Input.tsx"],
  "sourcesContent": ["import { stopEventPropagation, useEditor } from '@tldraw/editor'\nimport classNames from 'classnames'\nimport * as React from 'react'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TLUiIconType } from '../../icon-types'\nimport { Icon } from './Icon'\n\n/** @public */\nexport interface TLUiInputProps {\n\tdisabled?: boolean\n\tlabel?: TLUiTranslationKey\n\ticon?: TLUiIconType\n\ticonLeft?: TLUiIconType\n\tautofocus?: boolean\n\tautoselect?: boolean\n\tchildren?: any\n\tdefaultValue?: string\n\tplaceholder?: string\n\tonComplete?: (value: string) => void\n\tonValueChange?: (value: string) => void\n\tonCancel?: (value: string) => void\n\tonBlur?: (value: string) => void\n\tclassName?: string\n\t/**\n\t * Usually on iOS when you focus an input, the browser will adjust the viewport to bring the input\n\t * into view. Sometimes this doesn't work properly though - for example, if the input is newly\n\t * created, iOS seems to have a hard time adjusting the viewport for it. This prop allows you to\n\t * opt-in to some extra code to manually bring the input into view when the visual viewport of the\n\t * browser changes, but we don't want to use it everywhere because generally the native behavior\n\t * looks nicer in scenarios where it's sufficient.\n\t */\n\tshouldManuallyMaintainScrollPositionWhenFocused?: boolean\n\tvalue?: string\n}\n\n/** @public */\nexport const Input = React.forwardRef<HTMLInputElement, TLUiInputProps>(function Input(\n\t{\n\t\tclassName,\n\t\tlabel,\n\t\ticon,\n\t\ticonLeft,\n\t\tautoselect = false,\n\t\tautofocus = false,\n\t\tdefaultValue,\n\t\tplaceholder,\n\t\tonComplete,\n\t\tonValueChange,\n\t\tonCancel,\n\t\tonBlur,\n\t\tshouldManuallyMaintainScrollPositionWhenFocused = false,\n\t\tchildren,\n\t\tvalue,\n\t},\n\tref\n) {\n\tconst editor = useEditor()\n\tconst rInputRef = React.useRef<HTMLInputElement>(null)\n\n\t// combine rInputRef and ref\n\tReact.useImperativeHandle(ref, () => rInputRef.current as HTMLInputElement)\n\n\tconst msg = useTranslation()\n\tconst rInitialValue = React.useRef<string>(defaultValue ?? '')\n\tconst rCurrentValue = React.useRef<string>(defaultValue ?? '')\n\n\tconst [isFocused, setIsFocused] = React.useState(false)\n\tconst handleFocus = React.useCallback(\n\t\t(e: React.FocusEvent<HTMLInputElement>) => {\n\t\t\tsetIsFocused(true)\n\t\t\tconst elm = e.currentTarget as HTMLInputElement\n\t\t\trCurrentValue.current = elm.value\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tif (autoselect) {\n\t\t\t\t\telm.select()\n\t\t\t\t}\n\t\t\t})\n\t\t},\n\t\t[autoselect]\n\t)\n\n\tconst handleChange = React.useCallback(\n\t\t(e: React.ChangeEvent<HTMLInputElement>) => {\n\t\t\tconst value = e.currentTarget.value\n\t\t\trCurrentValue.current = value\n\t\t\tonValueChange?.(value)\n\t\t},\n\t\t[onValueChange]\n\t)\n\n\tconst handleKeyUp = React.useCallback(\n\t\t(e: React.KeyboardEvent<HTMLInputElement>) => {\n\t\t\tswitch (e.key) {\n\t\t\t\tcase 'Enter': {\n\t\t\t\t\te.currentTarget.blur()\n\t\t\t\t\tstopEventPropagation(e)\n\t\t\t\t\tonComplete?.(e.currentTarget.value)\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t\tcase 'Escape': {\n\t\t\t\t\te.currentTarget.value = rInitialValue.current\n\t\t\t\t\te.currentTarget.blur()\n\t\t\t\t\tstopEventPropagation(e)\n\t\t\t\t\tonCancel?.(e.currentTarget.value)\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t[onComplete, onCancel]\n\t)\n\n\tconst handleBlur = React.useCallback(\n\t\t(e: React.FocusEvent<HTMLInputElement>) => {\n\t\t\tsetIsFocused(false)\n\t\t\tconst value = e.currentTarget.value\n\t\t\tonBlur?.(value)\n\t\t},\n\t\t[onBlur]\n\t)\n\n\tReact.useEffect(() => {\n\t\tif (!editor.environment.isIos) return\n\n\t\tconst visualViewport = window.visualViewport\n\t\tif (isFocused && shouldManuallyMaintainScrollPositionWhenFocused && visualViewport) {\n\t\t\tconst onViewportChange = () => {\n\t\t\t\trInputRef.current?.scrollIntoView({ block: 'center' })\n\t\t\t}\n\t\t\tvisualViewport.addEventListener('resize', onViewportChange)\n\t\t\tvisualViewport.addEventListener('scroll', onViewportChange)\n\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\trInputRef.current?.scrollIntoView({ block: 'center' })\n\t\t\t})\n\n\t\t\treturn () => {\n\t\t\t\tvisualViewport.removeEventListener('resize', onViewportChange)\n\t\t\t\tvisualViewport.removeEventListener('scroll', onViewportChange)\n\t\t\t}\n\t\t}\n\t}, [editor, isFocused, shouldManuallyMaintainScrollPositionWhenFocused])\n\n\treturn (\n\t\t<div draggable={false} className=\"tlui-input__wrapper\">\n\t\t\t{children}\n\t\t\t{label && <label>{msg(label)}</label>}\n\t\t\t{iconLeft && <Icon icon={iconLeft} className=\"tlui-icon-left\" small />}\n\t\t\t<input\n\t\t\t\tref={rInputRef}\n\t\t\t\tclassName={classNames('tlui-input', className)}\n\t\t\t\ttype=\"text\"\n\t\t\t\tdefaultValue={defaultValue}\n\t\t\t\tonKeyUp={handleKeyUp}\n\t\t\t\tonChange={handleChange}\n\t\t\t\tonFocus={handleFocus}\n\t\t\t\tonBlur={handleBlur}\n\t\t\t\tautoFocus={autofocus}\n\t\t\t\tplaceholder={placeholder}\n\t\t\t\tvalue={value}\n\t\t\t/>\n\t\t\t{icon && <Icon icon={icon} small={!!label} />}\n\t\t</div>\n\t)\n})\n"],
  "mappings": "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",
  "names": ["Input", "value"]
}