{"version":3,"file":"MFA.cjs","names":[],"sources":["../../../../../src/components/Form/Controls/MFA/MFA.tsx"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\nCopyright 2023 The Matrix.org Foundation C.I.C.\nCopyright 2023 New Vector Ltd\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, {\n  type ComponentProps,\n  type ComponentRef,\n  forwardRef,\n  type PropsWithoutRef,\n} from \"react\";\n\nimport styles from \"./MFA.module.css\";\nimport classNames from \"classnames\";\nimport { Control } from \"@radix-ui/react-form\";\n\ntype DigitProps = {\n  filled: boolean;\n  selected: boolean;\n};\n\nconst Digit: React.FC<DigitProps> = ({ filled, selected }) => (\n  <div\n    className={styles.digit}\n    aria-hidden=\"true\"\n    data-filled={filled ? \"\" : undefined}\n    data-selected={selected ? \"\" : undefined}\n  />\n);\n\ntype MFAProps = {\n  className?: string;\n  length?: number;\n  disabled?: boolean;\n} & Omit<\n  React.ComponentProps<\"input\">,\n  \"type\" | \"inputMode\" | \"pattern\" | \"autoComplete\"\n>;\n\nexport const MFAInput = forwardRef(function MFAInput(\n  { className, length = 6, ...props }: PropsWithoutRef<MFAProps>,\n  ref: React.ForwardedRef<HTMLInputElement>,\n) {\n  const classes = classNames(styles.container, className);\n  const [currentLength, setCurrentLength] = React.useState(0);\n  const [selection, setSelection] = React.useState<null | [number, number]>(\n    null,\n  );\n\n  const update = (event: React.SyntheticEvent<HTMLInputElement>) => {\n    const input = event.currentTarget;\n    setCurrentLength(input.value?.length);\n\n    if (\n      document.activeElement !== input ||\n      input.selectionStart === null ||\n      input.selectionEnd === null\n    ) {\n      setSelection(null);\n    } else {\n      setSelection([input.selectionStart, input.selectionEnd]);\n    }\n  };\n\n  return (\n    <div className={classes}>\n      <input\n        {...props}\n        inputMode=\"numeric\"\n        // Showing digits on mobile browsers. Using numbers is not really suited\n        // as it often adds a way to increment or decrement the current value\n        // which is not interesting for this use case\n        type=\"text\"\n        minLength={0}\n        maxLength={length}\n        className={styles.control}\n        pattern={`\\\\d{${length}}`}\n        autoComplete=\"one-time-code\"\n        onSelect={update}\n        onFocus={update}\n        onBlur={update}\n        onMouseDown={update}\n        onMouseMove={update}\n        onMouseUp={update}\n        onChange={update}\n        ref={ref}\n      />\n      {Array.from(Array(length).keys()).map((index) => (\n        <Digit\n          key={index}\n          filled={index < currentLength}\n          selected={\n            !!selection && index >= selection[0] && index < selection[1]\n          }\n        />\n      ))}\n    </div>\n  );\n});\n\nexport const MFAControl = forwardRef<\n  ComponentRef<typeof MFAInput>,\n  ComponentProps<typeof MFAInput>\n>(function ActionControl(props, ref) {\n  return (\n    <Control asChild>\n      <MFAInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"mappings":";;;;;;;;;AAyBA,IAAM,SAA+B,EAAE,QAAQ,eAC7C,iBAAA,GAAA,kBAAA,KAAC,OAAD;CACE,WAAW,mBAAA,QAAO;CAClB,eAAY;CACZ,eAAa,SAAS,KAAK,KAAA;CAC3B,iBAAe,WAAW,KAAK,KAAA;CAC/B,CAAA;AAYJ,IAAa,YAAA,GAAA,MAAA,YAAsB,SAAS,SAC1C,EAAE,WAAW,SAAS,GAAG,GAAG,SAC5B,KACA;CACA,MAAM,WAAA,GAAA,WAAA,SAAqB,mBAAA,QAAO,WAAW,UAAU;CACvD,MAAM,CAAC,eAAe,oBAAoB,MAAA,QAAM,SAAS,EAAE;CAC3D,MAAM,CAAC,WAAW,gBAAgB,MAAA,QAAM,SACtC,KACD;CAED,MAAM,UAAU,UAAkD;EAChE,MAAM,QAAQ,MAAM;AACpB,mBAAiB,MAAM,OAAO,OAAO;AAErC,MACE,SAAS,kBAAkB,SAC3B,MAAM,mBAAmB,QACzB,MAAM,iBAAiB,KAEvB,cAAa,KAAK;MAElB,cAAa,CAAC,MAAM,gBAAgB,MAAM,aAAa,CAAC;;AAI5D,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAW;YAAhB,CACE,iBAAA,GAAA,kBAAA,KAAC,SAAD;GACE,GAAI;GACJ,WAAU;GAIV,MAAK;GACL,WAAW;GACX,WAAW;GACX,WAAW,mBAAA,QAAO;GAClB,SAAS,OAAO,OAAO;GACvB,cAAa;GACb,UAAU;GACV,SAAS;GACT,QAAQ;GACR,aAAa;GACb,aAAa;GACb,WAAW;GACX,UAAU;GACL;GACL,CAAA,EACD,MAAM,KAAK,MAAM,OAAO,CAAC,MAAM,CAAC,CAAC,KAAK,UACrC,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAEE,QAAQ,QAAQ;GAChB,UACE,CAAC,CAAC,aAAa,SAAS,UAAU,MAAM,QAAQ,UAAU;GAE5D,EALK,MAKL,CACF,CACE;;EAER;AAEF,IAAa,cAAA,GAAA,MAAA,YAGX,SAAS,cAAc,OAAO,KAAK;AACnC,QACE,iBAAA,GAAA,kBAAA,KAAC,qBAAA,SAAD;EAAS,SAAA;YACP,iBAAA,GAAA,kBAAA,KAAC,UAAD;GAAe;GAAK,GAAI;GAAS,CAAA;EACzB,CAAA;EAEZ"}