\n {group.tokens.map((token) => {\n const index = indexById.get(token.id) ?? 0;\n const isDisabled = !!token.disabled || disabled;\n return (\n
{\n itemRefs.current[index] = node;\n }}\n role='button'\n aria-disabled={isDisabled || undefined}\n tabIndex={isDisabled ? undefined : index === tabStop ? 0 : -1}\n draggable={!isDisabled}\n className={cx(\n isDisabled ? DISABLED_TONE : TONE,\n styles.templateEditorChip,\n styles.templateEditorPaletteItem,\n isDisabled && styles.templateEditorPaletteItemDisabled,\n classNames?.paletteItem,\n )}\n style={slotStyles?.paletteItem}\n // Deliberately no `preventDefault` on mousedown here. It would\n // hold the editable's selection, but Blink and Gecko treat a\n // prevented mousedown as \"no drag\", so `dragstart` would never\n // fire and the whole drag path would silently do nothing. The\n // caret is recovered from the editable's last known selection\n // instead, which survives the blur this causes.\n onFocus={() => {\n setActiveIndex(index);\n onHighlight(token.id);\n }}\n onBlur={() => onHighlight(null)}\n onMouseEnter={() => onHighlight(token.id)}\n onMouseLeave={() => onHighlight(null)}\n onClick={() => !isDisabled && onInsert(token.id)}\n onKeyDown={(event) => handleKeyDown(event, index, token.id)}\n onDragStart={(event) => {\n if (isDisabled) {\n event.preventDefault();\n return;\n }\n dragRef.current = { kind: 'insert', id: token.id };\n // The serialized placeholder, not the bare id: a drop into a\n // *different* editor never sees this palette's drag ref, so it\n // falls back to this text, which the target parses into a chip.\n // It is also the useful thing to receive in any other app.\n event.dataTransfer.setData('text/plain', prefix + token.id + suffix);\n event.dataTransfer.effectAllowed = 'copy';\n }}\n onDragEnd={() => {\n dragRef.current = null;\n }}\n >\n {tokenLabel(token)}\n {token.description && (\n {token.description}\n )}\n