{"version":3,"file":"index.cjs","sources":["../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import {\n  ChangeEvent,\n  InputHTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useId,\n  useRef,\n} from 'react';\nimport { Icon } from '@/components/Icon';\nimport {\n  IconButton,\n  InputElement,\n  InputEndContent,\n  InputStartContent,\n  InputWrapper,\n  WrapperProps,\n} from '@/components/InputWrapper';\nimport { mergeRefs } from '@/utils/mergeRefs';\n\nexport interface TextFieldProps\n  extends\n    Omit<WrapperProps, 'id' | 'children'>,\n    Omit<\n      InputHTMLAttributes<HTMLInputElement>,\n      'children' | 'type' | 'value' | 'onChange' | 'dir'\n    > {\n  /** The input type - text, email, tel, or url */\n  type?: 'text' | 'email' | 'tel' | 'url';\n  /** Whether to show a loading spinner */\n  loading?: boolean;\n  /** Custom color for the label */\n  labelColor?: string;\n  /** The current value of the input */\n  value?: string;\n  /** Whether to show a clear button when the input has content */\n  clear?: boolean;\n  /** Callback when the input value changes */\n  onChange: (inputValue: string, e?: ChangeEvent<HTMLInputElement>) => void;\n  /** The orientation of the label relative to the input */\n  orientation?: 'vertical' | 'horizontal';\n  /** The direction/position of the label - start places label before, end places label after */\n  dir?: 'start' | 'end';\n  /** Additional content to the left of the control */\n  startContent?: ReactNode;\n  /** Additional content to the right of the control */\n  endContent?: ReactNode;\n}\n\nexport const TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      clear,\n      type,\n      disabled,\n      label,\n      labelColor,\n      error,\n      id,\n      loading,\n      value = '',\n      onChange: onChangeProp,\n      orientation,\n      dir,\n      startContent,\n      endContent,\n      ...props\n    },\n    ref\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const defaultId = useId();\n    const onChange = (e: ChangeEvent<HTMLInputElement>) => {\n      onChangeProp(e.target.value, e);\n    };\n    const clearInput = () => {\n      onChangeProp('');\n    };\n\n    const handleStartContentClick: React.MouseEventHandler<HTMLDivElement> = () => {\n      inputRef.current?.focus();\n    };\n\n    const hasStartContent = Boolean(startContent);\n\n    const hasClear = clear && value.length > 0;\n    const hasEndContent = Boolean(hasClear || loading || endContent);\n\n    return (\n      <InputWrapper\n        disabled={disabled}\n        id={id ?? defaultId}\n        label={label}\n        labelColor={labelColor}\n        error={error}\n        orientation={orientation}\n        dir={dir}\n      >\n        {startContent && (\n          <InputStartContent onClick={handleStartContentClick}>\n            {startContent}\n          </InputStartContent>\n        )}\n\n        <InputElement\n          $hasStartContent={hasStartContent}\n          $hasEndContent={hasEndContent}\n          ref={mergeRefs([inputRef, ref])}\n          type={type}\n          id={id ?? defaultId}\n          disabled={disabled}\n          value={value}\n          onChange={onChange}\n          {...props}\n        />\n\n        {hasEndContent && (\n          <InputEndContent>\n            {endContent ? endContent : null}\n            {hasClear && (\n              <IconButton\n                disabled={disabled}\n                onClick={clearInput}\n                aria-label=\"clear input\"\n                data-testid=\"textfield-clear\"\n              >\n                <Icon\n                  name=\"cross\"\n                  size=\"sm\"\n                />\n              </IconButton>\n            )}\n            {loading && (\n              <Icon\n                name=\"loading-animated\"\n                size=\"sm\"\n              />\n            )}\n          </InputEndContent>\n        )}\n      </InputWrapper>\n    );\n  }\n);\n"],"names":["forwardRef","useRef","useId","jsxs","InputWrapper","jsx","InputStartContent","InputElement","mergeRefs","InputEndContent","IconButton","Icon"],"mappings":";;;;;;;;;;AAgDO,MAAM,SAAA,GAAYA,gBAAA;AAAA,EACvB,CACE;AAAA,IACE,KAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACA,EAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA,GAAQ,EAAA;AAAA,IACR,QAAA,EAAU,YAAA;AAAA,IACV,WAAA;AAAA,IACA,GAAA;AAAA,IACA,YAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,QAAA,GAAWC,aAAyB,IAAI,CAAA;AAC9C,IAAA,MAAM,YAAYC,WAAA,EAAM;AACxB,IAAA,MAAM,QAAA,GAAW,CAAC,CAAA,KAAqC;AACrD,MAAA,YAAA,CAAa,CAAA,CAAE,MAAA,CAAO,KAAA,EAAO,CAAC,CAAA;AAAA,IAChC,CAAA;AACA,IAAA,MAAM,aAAa,MAAM;AACvB,MAAA,YAAA,CAAa,EAAE,CAAA;AAAA,IACjB,CAAA;AAEA,IAAA,MAAM,0BAAmE,MAAM;AAC7E,MAAA,QAAA,CAAS,SAAS,KAAA,EAAM;AAAA,IAC1B,CAAA;AAEA,IAAA,MAAM,eAAA,GAAkB,QAAQ,YAAY,CAAA;AAE5C,IAAA,MAAM,QAAA,GAAW,KAAA,IAAS,KAAA,CAAM,MAAA,GAAS,CAAA;AACzC,IAAA,MAAM,aAAA,GAAgB,OAAA,CAAQ,QAAA,IAAY,OAAA,IAAW,UAAU,CAAA;AAE/D,IAAA,uBACEC,eAAA;AAAA,MAACC,yBAAA;AAAA,MAAA;AAAA,QACC,QAAA;AAAA,QACA,IAAI,EAAA,IAAM,SAAA;AAAA,QACV,KAAA;AAAA,QACA,UAAA;AAAA,QACA,KAAA;AAAA,QACA,WAAA;AAAA,QACA,GAAA;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,YAAA,oBACCC,cAAA,CAACC,8BAAA,EAAA,EAAkB,OAAA,EAAS,uBAAA,EACzB,QAAA,EAAA,YAAA,EACH,CAAA;AAAA,0BAGFD,cAAA;AAAA,YAACE,yBAAA;AAAA,YAAA;AAAA,cACC,gBAAA,EAAkB,eAAA;AAAA,cAClB,cAAA,EAAgB,aAAA;AAAA,cAChB,GAAA,EAAKC,mBAAA,CAAU,CAAC,QAAA,EAAU,GAAG,CAAC,CAAA;AAAA,cAC9B,IAAA;AAAA,cACA,IAAI,EAAA,IAAM,SAAA;AAAA,cACV,QAAA;AAAA,cACA,KAAA;AAAA,cACA,QAAA;AAAA,cACC,GAAG;AAAA;AAAA,WACN;AAAA,UAEC,aAAA,oCACEC,4BAAA,EAAA,EACE,QAAA,EAAA;AAAA,YAAA,UAAA,GAAa,UAAA,GAAa,IAAA;AAAA,YAC1B,QAAA,oBACCJ,cAAA;AAAA,cAACK,uBAAA;AAAA,cAAA;AAAA,gBACC,QAAA;AAAA,gBACA,OAAA,EAAS,UAAA;AAAA,gBACT,YAAA,EAAW,aAAA;AAAA,gBACX,aAAA,EAAY,iBAAA;AAAA,gBAEZ,QAAA,kBAAAL,cAAA;AAAA,kBAACM,SAAA;AAAA,kBAAA;AAAA,oBACC,IAAA,EAAK,OAAA;AAAA,oBACL,IAAA,EAAK;AAAA;AAAA;AACP;AAAA,aACF;AAAA,YAED,OAAA,oBACCN,cAAA;AAAA,cAACM,SAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,kBAAA;AAAA,gBACL,IAAA,EAAK;AAAA;AAAA;AACP,WAAA,EAEJ;AAAA;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;;"}