{"version":3,"file":"Input.mjs","sources":["../../../../../../../../../web/src/ui/components/molecules/Input.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React, { forwardRef, InputHTMLAttributes, ReactNode, useLayoutEffect, useRef, useState } from 'react';\n\nimport { useUniqueId } from '../../../utils/uniqueId';\nimport VisuallyHidden from '../atoms/VisuallyHidden';\nimport { usePresentation } from '../PresentationConfig';\nimport ErrorText from './ErrorText';\nimport styles from './Input.module.css';\n\nexport type InputProps = InputHTMLAttributes<HTMLInputElement> & {\n  label: string;\n  id: string;\n  containerClassName?: string;\n  hideLabel?: boolean;\n  action?: ReactNode;\n  error?: string;\n};\n\n/**\n * Generic low level text Input element\n * A label must be provided for accessibility, but can be hidden using the `hideLabel` prop\n * You may want to use a more specific component in /molecules instead like {@link EmailInput}, {@link PasswordInput}\n */\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n  ({ className, label: labelText, hideLabel, action, id: idProp, containerClassName, error, ...props }, ref) => {\n    const presentation = usePresentation();\n    const id = idProp + (presentation.options?.inputIdSuffix ?? '');\n\n    const errorId = useUniqueId();\n\n    // Calculate the width of the action element and add it to the input padding so the input content\n    // cannot go behind the action\n    const actionRef = useRef<HTMLDivElement>(null);\n    const [actionWidth, setActionWidth] = useState<number>();\n    useLayoutEffect(() => {\n      if (actionRef.current) {\n        // getBoundingClientRect accounts for transformations while clientWidth does not\n        setActionWidth(actionRef.current.getBoundingClientRect().width);\n      }\n    }, [action]);\n\n    const label = (\n      <label className={styles.label} htmlFor={id}>\n        {labelText}\n      </label>\n    );\n\n    if (error) {\n      props['aria-invalid'] = true;\n      props['aria-errormessage'] = errorId;\n    }\n\n    return (\n      <div className={classNames(containerClassName, styles.container)}>\n        {hideLabel ? <VisuallyHidden>{label}</VisuallyHidden> : label}\n\n        <div className={styles.inputWrapper}>\n          <input\n            ref={ref}\n            id={id}\n            className={classNames(className, styles.input)}\n            style={\n              actionWidth\n                ? {\n                    // spacing-4 because action has a 2 unit horizontal margin\n                    paddingInlineEnd: `calc(${actionWidth}px + var(--st-spacing-4))`,\n                  }\n                : undefined\n            }\n            {...props}\n          />\n          {action && (\n            <div ref={actionRef} className={styles.action}>\n              {action}\n            </div>\n          )}\n        </div>\n\n        {error && (\n          <ErrorText id={errorId} className={styles.error} aria-live=\"polite\">\n            {error}\n          </ErrorText>\n        )}\n      </div>\n    );\n  },\n);\n\nexport default Input;\n"],"names":["Input","forwardRef","className","label","labelText","hideLabel","action","id","idProp","containerClassName","error","props","ref","presentation","usePresentation","options","inputIdSuffix","errorId","useUniqueId","actionRef","useRef","actionWidth","setActionWidth","useState","useLayoutEffect","current","getBoundingClientRect","width","React","styles","htmlFor","div","classNames","container","VisuallyHidden","inputWrapper","input","style","paddingInlineEnd","undefined","ErrorText","aria-live"],"mappings":";;;;;;;;;AAkBA;;;;IAKA,MAAMA,sBAAQC,CAAAA,CACZ,CAAC,EAAEC,SAAS,EAAEC,KAAAA,EAAOC,SAAS,EAAEC,SAAS,EAAEC,MAAM,EAAEC,EAAAA,EAAIC,MAAM,EAAEC,kBAAkB,EAAEC,KAAK,EAAE,GAAGC,KAAAA,EAAO,EAAEC,GAAAA,GAAAA;AACpG,IAAA,MAAMC,YAAAA,GAAeC,eAAAA,EAAAA;AACrB,IAAA,MAAMP,KAAKC,MAAAA,IAAUK,aAAaE,OAAO,EAAEC,iBAAiB,EAAC,CAAA;AAE7D,IAAA,MAAMC,OAAAA,GAAUC,WAAAA,EAAAA;;;AAIhB,IAAA,MAAMC,YAAYC,CAAAA,CAAuB,IAAA,CAAA;IACzC,MAAM,CAACC,WAAAA,EAAaC,cAAAA,CAAe,GAAGC,CAAAA,EAAAA;IACtCC,CAAAA,CAAgB,IAAA;QACd,IAAIL,SAAAA,CAAUM,OAAO,EAAE;;AAErBH,YAAAA,cAAAA,CAAeH,SAAAA,CAAUM,OAAO,CAACC,qBAAqB,GAAGC,KAAK,CAAA;AAChE,QAAA;IACF,CAAA,EAAG;AAACrB,QAAAA;AAAO,KAAA,CAAA;AAEX,IAAA,MAAMH,sBACJyB,EAAA,CAAA,aAAA,CAACzB,OAAAA,EAAAA;AAAMD,QAAAA,SAAAA,EAAW2B,iBAAO1B,KAAK;QAAE2B,OAAAA,EAASvB;AACtCH,KAAAA,EAAAA,SAAAA,CAAAA;AAIL,IAAA,IAAIM,KAAAA,EAAO;QACTC,KAAK,CAAC,eAAe,GAAG,IAAA;QACxBA,KAAK,CAAC,oBAAoB,GAAGM,OAAAA;AAC/B,IAAA;AAEA,IAAA,qBACEW,EAAA,CAAA,aAAA,CAACG,KAAAA,EAAAA;QAAI7B,SAAAA,EAAW8B,UAAAA,CAAWvB,kBAAAA,EAAoBoB,gBAAAA,CAAOI,SAAS;AAC5D5B,KAAAA,EAAAA,SAAAA,iBAAYuB,EAAA,CAAA,aAAA,CAACM,cAAAA,EAAAA,IAAAA,EAAgB/B,KAAAA,CAAAA,GAA0BA,KAAAA,gBAExDyB,EAAA,CAAA,aAAA,CAACG,KAAAA,EAAAA;AAAI7B,QAAAA,SAAAA,EAAW2B,iBAAOM;qBACrBP,EAAA,CAAA,aAAA,CAACQ,OAAAA,EAAAA;QACCxB,GAAAA,EAAKA,GAAAA;QACLL,EAAAA,EAAIA,EAAAA;QACJL,SAAAA,EAAW8B,UAAAA,CAAW9B,SAAAA,EAAW2B,gBAAAA,CAAOO,KAAK,CAAA;AAC7CC,QAAAA,KAAAA,EACEhB,WAAAA,GACI;;AAEEiB,YAAAA,gBAAAA,EAAkB,CAAC,KAAK,EAAEjB,WAAAA,CAAY,yBAAyB;SACjE,GACAkB,SAAAA;AAEL,QAAA,GAAG5B;AAELL,KAAAA,CAAAA,EAAAA,MAAAA,kBACCsB,EAAA,CAAA,aAAA,CAACG,KAAAA,EAAAA;QAAInB,GAAAA,EAAKO,SAAAA;AAAWjB,QAAAA,SAAAA,EAAW2B,iBAAOvB;AACpCA,KAAAA,EAAAA,MAAAA,CAAAA,CAAAA,EAKNI,uBACCkB,EAAA,CAAA,aAAA,CAACY,SAAAA,EAAAA;QAAUjC,EAAAA,EAAIU,OAAAA;AAASf,QAAAA,SAAAA,EAAW2B,iBAAOnB,KAAK;QAAE+B,WAAAA,EAAU;AACxD/B,KAAAA,EAAAA,KAAAA,CAAAA,CAAAA;AAKX,CAAA;;;;"}