{"version":3,"file":"templateEditorSuggestions.mjs","names":[],"sources":["../../../../package/common/templateEditor/templateEditorSuggestions.tsx"],"sourcesContent":["import cx from 'classnames';\n\nimport styles from './templateEditor.module.pcss';\nimport { splitAtMatch, tokenLabel } from './templateEditor.utils';\nimport type { TemplateEditorSuggestionsProps } from './templateEditor.types';\n\nfunction marked(text: string, query: string) {\n  const parts = splitAtMatch(text, query);\n  if (!parts) return text;\n  return (\n    <>\n      {parts[0]}\n      <mark className={styles.templateEditorSuggestionMatch}>{parts[1]}</mark>\n      {parts[2]}\n    </>\n  );\n}\n\n/**\n * The list inside the caret-anchored autocomplete popup. Purely presentational:\n * the highlighted index and every key binding live in the editable, because the\n * keyboard events arrive on the contenteditable, not here.\n */\nfunction TemplateEditorSuggestions({\n  groups,\n  query,\n  highlightedId,\n  listId,\n  optionId,\n  onSelect,\n  classNames,\n  styles: slotStyles,\n}: TemplateEditorSuggestionsProps) {\n  return (\n    <div id={listId} role='listbox' className={styles.templateEditorSuggestionList}>\n      {groups.map((group, groupIndex) => (\n        <div key={group.id ?? group.label ?? groupIndex} className={styles.templateEditorSuggestionGroup}>\n          {group.label && (\n            <div\n              className={cx(styles.templateEditorSuggestionGroupLabel, classNames?.suggestionGroupLabel)}\n              style={slotStyles?.suggestionGroupLabel}\n              role='presentation'\n            >\n              {group.label}\n            </div>\n          )}\n          {group.tokens.map((token) => {\n            const selected = token.id === highlightedId;\n            return (\n              <div\n                key={token.id}\n                id={optionId(token.id)}\n                role='option'\n                aria-selected={selected}\n                className={cx(\n                  styles.templateEditorSuggestionItem,\n                  selected && styles.templateEditorSuggestionItemActive,\n                  classNames?.suggestionItem,\n                )}\n                style={slotStyles?.suggestionItem}\n                // Keep focus and the selection in the editable: a mousedown here\n                // would blur it and lose the run the popup is about to replace.\n                onMouseDown={(event) => event.preventDefault()}\n                onClick={() => onSelect(token.id)}\n              >\n                <span className={styles.templateEditorSuggestionLabel}>{marked(tokenLabel(token), query)}</span>\n                {token.sample && <span className={styles.templateEditorSuggestionSample}>{token.sample}</span>}\n                {token.description && (\n                  <span className={styles.templateEditorSuggestionDescription}>{marked(token.description, query)}</span>\n                )}\n              </div>\n            );\n          })}\n        </div>\n      ))}\n    </div>\n  );\n}\n\nexport default TemplateEditorSuggestions;\n"],"mappings":"4NAMA,SAAS,EAAO,EAAc,EAAe,CAC3C,IAAM,EAAQ,EAAa,EAAM,CAAK,EAEtC,OADK,EAEH,EAAA,EAAA,CAAA,SAAA,CACG,EAAM,GACP,EAAC,OAAD,CAAM,UAAW,EAAO,8BAAgC,SAAA,EAAM,EAAS,CAAA,EACtE,EAAM,EACP,CAAA,CAAA,EANe,CAQrB,CAOA,SAAS,EAA0B,CACjC,SACA,QACA,gBACA,SACA,WACA,WACA,aACA,OAAQ,GACyB,CACjC,OACE,EAAC,MAAD,CAAK,GAAI,EAAQ,KAAK,UAAU,UAAW,EAAO,6BAC/C,SAAA,EAAO,KAAK,EAAO,IAClB,EAAC,MAAD,CAAiD,UAAW,EAAO,8BAAnE,SAAA,CACG,EAAM,OACL,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,mCAAoC,GAAY,oBAAoB,EACzF,MAAO,GAAY,qBACnB,KAAK,eAEJ,SAAA,EAAM,KACJ,CAAA,EAEN,EAAM,OAAO,IAAK,GAAU,CAC3B,IAAM,EAAW,EAAM,KAAO,EAC9B,OACE,EAAC,MAAD,CAEE,GAAI,EAAS,EAAM,EAAE,EACrB,KAAK,SACL,gBAAe,EACf,UAAW,EACT,EAAO,6BACP,GAAY,EAAO,mCACnB,GAAY,cACd,EACA,MAAO,GAAY,eAGnB,YAAc,GAAU,EAAM,eAAe,EAC7C,YAAe,EAAS,EAAM,EAAE,EAdlC,SAAA,CAgBE,EAAC,OAAD,CAAM,UAAW,EAAO,8BAAgC,SAAA,EAAO,EAAW,CAAK,EAAG,CAAK,CAAQ,CAAA,EAC9F,EAAM,QAAU,EAAC,OAAD,CAAM,UAAW,EAAO,+BAAiC,SAAA,EAAM,MAAa,CAAA,EAC5F,EAAM,aACL,EAAC,OAAD,CAAM,UAAW,EAAO,oCAAsC,SAAA,EAAO,EAAM,YAAa,CAAK,CAAQ,CAAA,CAEpG,CApBE,EAAA,EAAM,EAoBR,CAET,CAAC,CACE,CArCK,EAAA,EAAM,IAAM,EAAM,OAAS,CAqChC,CACN,CACE,CAAA,CAET"}