{"version":3,"file":"TypeaheadInput.mjs","sources":["../../../src/typeahead/typeaheadInput/TypeaheadInput.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-autofocus */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport { clsx } from 'clsx';\nimport { Component, createRef, ReactNode } from 'react';\n\nimport { Input } from '../../inputs/Input';\nimport { TypeaheadOption, TypeaheadProps } from '../Typeahead';\n\nconst DEFAULT_INPUT_MIN_WIDTH = 10;\n\nexport type TypeaheadInputProps<T> = {\n  typeaheadId: string;\n  value: string;\n  selected: readonly TypeaheadOption<T>[];\n  dropdownOpen?: boolean;\n  autoComplete: string;\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;\n  onFocus: () => void;\n  onPaste: React.ClipboardEventHandler<HTMLInputElement>;\n  renderChip: (chip: TypeaheadOption<T>, index: number) => ReactNode;\n  ariaActivedescendant?: string;\n} & Pick<TypeaheadProps<T>, 'id' | 'name' | 'autoFocus' | 'multiple' | 'placeholder' | 'maxHeight'>;\n\ntype TypeaheadInputState = {\n  inputWidth: number;\n  keyboardFocusedOptionIndex: number | null;\n};\n\nexport default class TypeaheadInput<T> extends Component<\n  TypeaheadInputProps<T>,\n  TypeaheadInputState\n> {\n  inputRef = createRef<HTMLInputElement>();\n  sizerRef = createRef<HTMLDivElement>();\n\n  constructor(props: TypeaheadInputProps<T>) {\n    super(props);\n    this.state = {\n      inputWidth: DEFAULT_INPUT_MIN_WIDTH,\n      keyboardFocusedOptionIndex: null,\n    };\n  }\n\n  componentDidMount() {\n    const { autoFocus } = this.props;\n    if (autoFocus) {\n      // Autofocus after context code executions (e.g open Modal) is completed\n      setTimeout(() => {\n        this.inputRef.current?.focus();\n      });\n    }\n  }\n\n  componentDidUpdate(previousProps: TypeaheadInputProps<T>) {\n    if (previousProps.value !== this.props.value && this.props.multiple) {\n      this.recalculateWidth();\n    }\n  }\n\n  recalculateWidth = () => {\n    requestAnimationFrame(() => {\n      this.setState({\n        inputWidth: Math.max(DEFAULT_INPUT_MIN_WIDTH, this.sizerRef.current?.scrollWidth ?? 0 + 10),\n      });\n    });\n  };\n\n  renderInput = () => {\n    const {\n      typeaheadId,\n      autoFocus,\n      multiple,\n      name,\n      dropdownOpen,\n      placeholder,\n      selected,\n      value,\n      onChange,\n      onKeyDown,\n      onFocus,\n      onPaste,\n      autoComplete,\n      ariaActivedescendant, // Declare the ariaActivedescendant variable\n    } = this.props;\n    const { inputWidth } = this.state;\n\n    const hasPlaceholder = !multiple || selected.length === 0;\n    return (\n      <Input\n        ref={this.inputRef}\n        className={clsx(multiple && 'typeahead__input')}\n        name={name}\n        id={`input-${typeaheadId}`}\n        aria-activedescendant={\n          ariaActivedescendant\n            ? `menu-${typeaheadId} ${ariaActivedescendant}`\n            : `menu-${typeaheadId}`\n        }\n        autoFocus={autoFocus}\n        placeholder={hasPlaceholder ? placeholder : ''}\n        aria-autocomplete=\"list\"\n        aria-expanded={dropdownOpen}\n        aria-haspopup=\"listbox\"\n        aria-controls={dropdownOpen ? `menu-${typeaheadId}` : undefined}\n        autoComplete={autoComplete}\n        role=\"combobox\"\n        value={value}\n        style={multiple && selected.length > 0 ? { width: inputWidth } : {}}\n        onChange={onChange}\n        onKeyDown={onKeyDown}\n        onClick={onFocus}\n        onFocus={onFocus}\n        onPaste={onPaste}\n      />\n    );\n  };\n\n  render() {\n    const { multiple, selected, value, maxHeight, renderChip } = this.props;\n\n    return multiple ? (\n      <div\n        className=\"form-control typeahead__input-container\"\n        style={{ maxHeight }}\n        onClick={() => {\n          this.inputRef.current?.focus();\n        }}\n      >\n        <div className=\"typeahead__input-wrapper\">\n          {selected && selected.map((chip, idx) => renderChip(chip, idx))}\n\n          {this.renderInput()}\n          <div className=\"typeahead__input-aligner\" />\n        </div>\n        <div ref={this.sizerRef} className=\"sizer form-control typeahead__input\">\n          {value}\n        </div>\n      </div>\n    ) : (\n      this.renderInput()\n    );\n  }\n}\n"],"names":["DEFAULT_INPUT_MIN_WIDTH","TypeaheadInput","Component","inputRef","createRef","sizerRef","constructor","props","state","inputWidth","keyboardFocusedOptionIndex","componentDidMount","autoFocus","setTimeout","current","focus","componentDidUpdate","previousProps","value","multiple","recalculateWidth","requestAnimationFrame","setState","Math","max","scrollWidth","renderInput","typeaheadId","name","dropdownOpen","placeholder","selected","onChange","onKeyDown","onFocus","onPaste","autoComplete","ariaActivedescendant","hasPlaceholder","length","_jsx","Input","ref","className","clsx","id","undefined","role","style","width","onClick","render","maxHeight","renderChip","_jsxs","children","map","chip","idx"],"mappings":"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"}